"use client"

import { useState } from "react"
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 { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { User, Bell, Shield, CreditCard, Users, Plus, Trash2 } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { useTranslation } from "@/lib/i18n"

const teamMembers = [
  { id: 1, name: "John Doe", email: "john@company.com", role: "Admin", status: "Active", avatar: "/placeholder.svg?height=32&width=32" },
  { id: 2, name: "Sarah Johnson", email: "sarah@company.com", role: "Sales Manager", status: "Active", avatar: "/placeholder.svg?height=32&width=32" },
  { id: 3, name: "Mike Chen", email: "mike@company.com", role: "Sales Rep", status: "Active", avatar: "/placeholder.svg?height=32&width=32" },
  { id: 4, name: "Emily Davis", email: "emily@company.com", role: "Sales Rep", status: "Pending", avatar: "/placeholder.svg?height=32&width=32" },
]

export default function Settings() {
  const { t } = useTranslation()
  const { toast } = useToast()
  const [notifications, setNotifications] = useState({
    email: true, sms: false, inApp: true, dealUpdates: true, taskReminders: true, weeklyReports: false,
  })

  const handleSave = () => {
    toast({ title: t("settings.toast.saved"), description: t("settings.toast.savedDesc") })
  }

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

        <Tabs defaultValue="profile" className="space-y-6">
          <TabsList className="grid w-full grid-cols-5">
            <TabsTrigger value="profile" className="flex items-center gap-2"><User className="h-4 w-4" />{t("settings.tabs.profile")}</TabsTrigger>
            <TabsTrigger value="team" className="flex items-center gap-2"><Users className="h-4 w-4" />{t("settings.tabs.team")}</TabsTrigger>
            <TabsTrigger value="billing" className="flex items-center gap-2"><CreditCard className="h-4 w-4" />{t("settings.tabs.billing")}</TabsTrigger>
            <TabsTrigger value="notifications" className="flex items-center gap-2"><Bell className="h-4 w-4" />{t("settings.tabs.notifications")}</TabsTrigger>
            <TabsTrigger value="security" className="flex items-center gap-2"><Shield className="h-4 w-4" />{t("settings.tabs.security")}</TabsTrigger>
          </TabsList>

          <TabsContent value="profile" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>{t("settings.profile.title")}</CardTitle>
                <CardDescription>{t("settings.profile.desc")}</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="flex items-center gap-6">
                  <Avatar className="h-20 w-20"><AvatarImage src="/placeholder.svg?height=80&width=80" /><AvatarFallback>JD</AvatarFallback></Avatar>
                  <div>
                    <Button variant="outline">{t("settings.profile.changePhoto")}</Button>
                    <p className="text-sm text-muted-foreground mt-2">{t("settings.profile.photoHint")}</p>
                  </div>
                </div>
                <div className="grid gap-4 md:grid-cols-2">
                  <div className="space-y-2"><Label htmlFor="firstName">{t("settings.profile.firstName")}</Label><Input id="firstName" defaultValue="John" /></div>
                  <div className="space-y-2"><Label htmlFor="lastName">{t("settings.profile.lastName")}</Label><Input id="lastName" defaultValue="Doe" /></div>
                </div>
                <div className="space-y-2"><Label htmlFor="email">{t("settings.profile.email")}</Label><Input id="email" type="email" defaultValue="john@company.com" /></div>
                <div className="space-y-2"><Label htmlFor="title">{t("settings.profile.jobTitle")}</Label><Input id="title" defaultValue="Sales Manager" /></div>
                <Button onClick={handleSave}>{t("settings.profile.saveChanges")}</Button>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="team" className="space-y-6">
            <Card>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <div><CardTitle>{t("settings.team.title")}</CardTitle><CardDescription>{t("settings.team.desc")}</CardDescription></div>
                  <Button><Plus className="mr-2 h-4 w-4" />{t("settings.team.inviteUser")}</Button>
                </div>
              </CardHeader>
              <CardContent>
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>{t("settings.team.user")}</TableHead>
                      <TableHead>{t("settings.team.role")}</TableHead>
                      <TableHead>{t("settings.team.status")}</TableHead>
                      <TableHead>{t("settings.team.actions")}</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {teamMembers.map((member) => (
                      <TableRow key={member.id}>
                        <TableCell>
                          <div className="flex items-center gap-3">
                            <Avatar className="h-8 w-8"><AvatarImage src={member.avatar || "/placeholder.svg"} /><AvatarFallback>{member.name.split(" ").map((n) => n[0]).join("")}</AvatarFallback></Avatar>
                            <div><p className="font-medium">{member.name}</p><p className="text-sm text-muted-foreground">{member.email}</p></div>
                          </div>
                        </TableCell>
                        <TableCell>
                          <Select defaultValue={member.role.toLowerCase().replace(" ", "_")}>
                            <SelectTrigger className="w-32"><SelectValue /></SelectTrigger>
                            <SelectContent>
                              <SelectItem value="admin">{t("settings.team.admin")}</SelectItem>
                              <SelectItem value="sales_manager">{t("settings.team.salesManager")}</SelectItem>
                              <SelectItem value="sales_rep">{t("settings.team.salesRep")}</SelectItem>
                            </SelectContent>
                          </Select>
                        </TableCell>
                        <TableCell>
                          <Badge className={member.status === "Active" ? "bg-green-100 text-green-800" : "bg-yellow-100 text-yellow-800"}>{member.status}</Badge>
                        </TableCell>
                        <TableCell><Button variant="ghost" size="icon"><Trash2 className="h-4 w-4" /></Button></TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="billing" className="space-y-6">
            <div className="grid gap-6 md:grid-cols-2">
              <Card>
                <CardHeader><CardTitle>{t("settings.billing.currentPlan")}</CardTitle><CardDescription>{t("settings.billing.currentPlanDesc")}</CardDescription></CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="flex items-center justify-between"><span>{t("settings.billing.plan")}</span><Badge>{t("settings.billing.professional")}</Badge></div>
                    <div className="flex items-center justify-between"><span>{t("settings.billing.price")}</span><span className="font-medium">{t("settings.billing.priceValue")}</span></div>
                    <div className="flex items-center justify-between"><span>{t("settings.billing.users")}</span><span>{t("settings.billing.usersValue")}</span></div>
                    <Button className="w-full">{t("settings.billing.upgradePlan")}</Button>
                  </div>
                </CardContent>
              </Card>
              <Card>
                <CardHeader><CardTitle>{t("settings.billing.paymentMethod")}</CardTitle><CardDescription>{t("settings.billing.paymentDesc")}</CardDescription></CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="flex items-center gap-3 p-3 border rounded-lg">
                      <CreditCard className="h-6 w-6" />
                      <div className="flex-1"><p className="font-medium">•••• •••• •••• 4242</p><p className="text-sm text-muted-foreground">{t("settings.billing.expires")}</p></div>
                    </div>
                    <Button variant="outline" className="w-full">{t("settings.billing.updatePayment")}</Button>
                  </div>
                </CardContent>
              </Card>
            </div>
            <Card>
              <CardHeader><CardTitle>{t("settings.billing.billingHistory")}</CardTitle><CardDescription>{t("settings.billing.billingHistoryDesc")}</CardDescription></CardHeader>
              <CardContent>
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>{t("settings.billing.date")}</TableHead>
                      <TableHead>{t("settings.billing.amount")}</TableHead>
                      <TableHead>{t("settings.billing.status")}</TableHead>
                      <TableHead>{t("settings.billing.invoice")}</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    <TableRow>
                      <TableCell>Dec 1, 2024</TableCell><TableCell>$49.00</TableCell>
                      <TableCell><Badge className="bg-green-100 text-green-800">{t("settings.billing.paid")}</Badge></TableCell>
                      <TableCell><Button variant="ghost" size="sm">{t("settings.billing.download")}</Button></TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell>Nov 1, 2024</TableCell><TableCell>$49.00</TableCell>
                      <TableCell><Badge className="bg-green-100 text-green-800">{t("settings.billing.paid")}</Badge></TableCell>
                      <TableCell><Button variant="ghost" size="sm">{t("settings.billing.download")}</Button></TableCell>
                    </TableRow>
                  </TableBody>
                </Table>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="notifications" className="space-y-6">
            <Card>
              <CardHeader><CardTitle>{t("settings.notifications.title")}</CardTitle><CardDescription>{t("settings.notifications.desc")}</CardDescription></CardHeader>
              <CardContent className="space-y-6">
                <div className="space-y-4">
                  <h4 className="text-sm font-medium">{t("settings.notifications.communication")}</h4>
                  <div className="space-y-3">
                    <div className="flex items-center justify-between">
                      <div><Label htmlFor="email-notifications">{t("settings.notifications.emailNotifications")}</Label><p className="text-sm text-muted-foreground">{t("settings.notifications.emailNotificationsDesc")}</p></div>
                      <Switch id="email-notifications" checked={notifications.email} onCheckedChange={(checked) => setNotifications((prev) => ({ ...prev, email: checked }))} />
                    </div>
                    <div className="flex items-center justify-between">
                      <div><Label htmlFor="sms-notifications">{t("settings.notifications.smsNotifications")}</Label><p className="text-sm text-muted-foreground">{t("settings.notifications.smsNotificationsDesc")}</p></div>
                      <Switch id="sms-notifications" checked={notifications.sms} onCheckedChange={(checked) => setNotifications((prev) => ({ ...prev, sms: checked }))} />
                    </div>
                    <div className="flex items-center justify-between">
                      <div><Label htmlFor="in-app-notifications">{t("settings.notifications.inAppNotifications")}</Label><p className="text-sm text-muted-foreground">{t("settings.notifications.inAppNotificationsDesc")}</p></div>
                      <Switch id="in-app-notifications" checked={notifications.inApp} onCheckedChange={(checked) => setNotifications((prev) => ({ ...prev, inApp: checked }))} />
                    </div>
                  </div>
                </div>
                <div className="space-y-4">
                  <h4 className="text-sm font-medium">{t("settings.notifications.salesUpdates")}</h4>
                  <div className="space-y-3">
                    <div className="flex items-center justify-between">
                      <div><Label htmlFor="deal-updates">{t("settings.notifications.dealUpdates")}</Label><p className="text-sm text-muted-foreground">{t("settings.notifications.dealUpdatesDesc")}</p></div>
                      <Switch id="deal-updates" checked={notifications.dealUpdates} onCheckedChange={(checked) => setNotifications((prev) => ({ ...prev, dealUpdates: checked }))} />
                    </div>
                    <div className="flex items-center justify-between">
                      <div><Label htmlFor="task-reminders">{t("settings.notifications.taskReminders")}</Label><p className="text-sm text-muted-foreground">{t("settings.notifications.taskRemindersDesc")}</p></div>
                      <Switch id="task-reminders" checked={notifications.taskReminders} onCheckedChange={(checked) => setNotifications((prev) => ({ ...prev, taskReminders: checked }))} />
                    </div>
                    <div className="flex items-center justify-between">
                      <div><Label htmlFor="weekly-reports">{t("settings.notifications.weeklyReports")}</Label><p className="text-sm text-muted-foreground">{t("settings.notifications.weeklyReportsDesc")}</p></div>
                      <Switch id="weekly-reports" checked={notifications.weeklyReports} onCheckedChange={(checked) => setNotifications((prev) => ({ ...prev, weeklyReports: checked }))} />
                    </div>
                  </div>
                </div>
                <Button onClick={handleSave}>{t("settings.notifications.savePreferences")}</Button>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="security" className="space-y-6">
            <Card>
              <CardHeader><CardTitle>{t("settings.security.password")}</CardTitle><CardDescription>{t("settings.security.passwordDesc")}</CardDescription></CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2"><Label htmlFor="current-password">{t("settings.security.currentPassword")}</Label><Input id="current-password" type="password" /></div>
                <div className="space-y-2"><Label htmlFor="new-password">{t("settings.security.newPassword")}</Label><Input id="new-password" type="password" /></div>
                <div className="space-y-2"><Label htmlFor="confirm-password">{t("settings.security.confirmPassword")}</Label><Input id="confirm-password" type="password" /></div>
                <Button>{t("settings.security.updatePassword")}</Button>
              </CardContent>
            </Card>
            <Card>
              <CardHeader><CardTitle>{t("settings.security.twoFactor")}</CardTitle><CardDescription>{t("settings.security.twoFactorDesc")}</CardDescription></CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center justify-between">
                  <div><p className="font-medium">{t("settings.security.authenticatorApp")}</p><p className="text-sm text-muted-foreground">{t("settings.security.authenticatorDesc")}</p></div>
                  <Button variant="outline">{t("settings.security.setup")}</Button>
                </div>
                <div className="flex items-center justify-between">
                  <div><p className="font-medium">{t("settings.security.smsVerification")}</p><p className="text-sm text-muted-foreground">{t("settings.security.smsVerificationDesc")}</p></div>
                  <Button variant="outline">{t("settings.security.setup")}</Button>
                </div>
              </CardContent>
            </Card>
            <Card>
              <CardHeader><CardTitle>{t("settings.security.activeSessions")}</CardTitle><CardDescription>{t("settings.security.activeSessionsDesc")}</CardDescription></CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex items-center justify-between p-3 border rounded-lg">
                    <div><p className="font-medium">{t("settings.security.currentSession")}</p><p className="text-sm text-muted-foreground">{t("settings.security.currentSessionDetail")}</p></div>
                    <Badge className="bg-green-100 text-green-800">{t("settings.security.activeLabel")}</Badge>
                  </div>
                  <div className="flex items-center justify-between p-3 border rounded-lg">
                    <div><p className="font-medium">{t("settings.security.mobileApp")}</p><p className="text-sm text-muted-foreground">{t("settings.security.mobileAppDetail")}</p></div>
                    <Button variant="outline" size="sm">{t("settings.security.revoke")}</Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}