sales-crm-dashboard/app/integrations/page.tsx

"use client"

import { Topbar } from "@/components/topbar"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Search, Slack, Calendar, Mail, Zap, Github, Chrome, Database, MessageSquare } from "lucide-react"
import { useTranslation } from "@/lib/i18n"

const integrationDescKeys: Record<string, string> = {
  Slack: "integrations.slackDesc",
  "Google Calendar": "integrations.calendarDesc",
  HubSpot: "integrations.hubspotDesc",
  Zapier: "integrations.zapierDesc",
  Gmail: "integrations.gmailDesc",
  GitHub: "integrations.githubDesc",
  "Chrome Extension": "integrations.chromeDesc",
  "Microsoft Teams": "integrations.teamsDesc",
}

const categoryKeys: Record<string, string> = {
  All: "integrations.all",
  Communication: "integrations.communication",
  Productivity: "integrations.productivity",
  CRM: "integrations.crm",
  Automation: "integrations.automation",
  Email: "integrations.email",
  Development: "integrations.development",
  Browser: "integrations.browser",
}

const integrations = [
  { id: 1, name: "Slack", icon: Slack, connected: true, category: "Communication" },
  { id: 2, name: "Google Calendar", icon: Calendar, connected: true, category: "Productivity" },
  { id: 3, name: "HubSpot", icon: Database, connected: false, category: "CRM" },
  { id: 4, name: "Zapier", icon: Zap, connected: false, category: "Automation" },
  { id: 5, name: "Gmail", icon: Mail, connected: true, category: "Email" },
  { id: 6, name: "GitHub", icon: Github, connected: false, category: "Development" },
  { id: 7, name: "Chrome Extension", icon: Chrome, connected: false, category: "Browser" },
  { id: 8, name: "Microsoft Teams", icon: MessageSquare, connected: false, category: "Communication" },
]

const categories = ["All", "Communication", "Productivity", "CRM", "Automation", "Email", "Development", "Browser"]

export default function Integrations() {
  const { t } = useTranslation()

  return (
    <div className="flex flex-col min-h-screen">
      <Topbar />
      <div className="flex-1 p-6 space-y-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">{t("integrations.title")}</h1>
          <p className="text-muted-foreground">{t("integrations.description")}</p>
        </div>

        <div className="flex items-center gap-4">
          <div className="relative flex-1 max-w-md">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
            <Input placeholder={t("integrations.search")} className="pl-10" />
          </div>
          <div className="flex gap-2">
            {categories.map((category) => (
              <Button key={category} variant={category === "All" ? "default" : "outline"} size="sm">
                {t(categoryKeys[category])}
              </Button>
            ))}
          </div>
        </div>

        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {integrations.map((integration) => (
            <Card key={integration.id} className="relative">
              <CardHeader>
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
                      <integration.icon className="h-5 w-5" />
                    </div>
                    <div>
                      <CardTitle className="text-lg">{integration.name}</CardTitle>
                      <Badge variant="secondary" className="text-xs">
                        {t(categoryKeys[integration.category])}
                      </Badge>
                    </div>
                  </div>
                  {integration.connected && <Badge className="bg-green-100 text-green-800">{t("integrations.connected")}</Badge>}
                </div>
              </CardHeader>
              <CardContent>
                <CardDescription className="mb-4">{t(integrationDescKeys[integration.name])}</CardDescription>
                <Button className="w-full" variant={integration.connected ? "outline" : "default"}>
                  {integration.connected ? t("integrations.manage") : t("integrations.connect")}
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>

        <Card>
          <CardHeader>
            <CardTitle>{t("integrations.popularTitle")}</CardTitle>
            <CardDescription>{t("integrations.popularDesc")}</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid gap-4 md:grid-cols-3">
              <div className="flex items-center gap-3 p-3 border rounded-lg">
                <Slack className="h-8 w-8 text-purple-600" />
                <div>
                  <p className="font-medium">Slack</p>
                  <p className="text-sm text-muted-foreground">{t("integrations.slackPopular")}</p>
                </div>
              </div>
              <div className="flex items-center gap-3 p-3 border rounded-lg">
                <Calendar className="h-8 w-8 text-blue-600" />
                <div>
                  <p className="font-medium">Google Calendar</p>
                  <p className="text-sm text-muted-foreground">{t("integrations.calendarPopular")}</p>
                </div>
              </div>
              <div className="flex items-center gap-3 p-3 border rounded-lg">
                <Mail className="h-8 w-8 text-red-600" />
                <div>
                  <p className="font-medium">Gmail</p>
                  <p className="text-sm text-muted-foreground">{t("integrations.gmailPopular")}</p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}