import { createFileRoute } from "@tanstack/react-router";
import { PageHeader, SectionHeader } from "@/components/common/PageHeader";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { toast } from "sonner";
import { KeyRound, ShieldCheck, Trash2, LogOut } from "lucide-react";

export const Route = createFileRoute("/_public/account/settings")({
  head: () => ({ meta: [
    { title: "Settings — Purple Zone Account" },
    { name: "description", content: "Account, security, appearance and language preferences." },
  ]}),
  component: SettingsPage,
});

function SettingsPage() {
  return (
    <div className="space-y-6">
      <PageHeader
        title="Settings"
        description="Manage your account, security and preferences."
        actions={<Button className="gradient-primary text-primary-foreground" onClick={() => toast.success("Saved")}>Save changes</Button>}
      />

      <Tabs defaultValue="account">
        <TabsList className="flex-wrap">
          <TabsTrigger value="account">Account</TabsTrigger>
          <TabsTrigger value="security">Security</TabsTrigger>
          <TabsTrigger value="appearance">Appearance</TabsTrigger>
          <TabsTrigger value="privacy">Privacy</TabsTrigger>
          <TabsTrigger value="danger">Danger zone</TabsTrigger>
        </TabsList>

        <TabsContent value="account" className="mt-4 space-y-4">
          <div className="rounded-xl border border-border bg-card p-6">
            <SectionHeader title="Account details" />
            <div className="grid gap-4 sm:grid-cols-2">
              <div className="space-y-1.5"><Label>Email</Label><Input defaultValue="viper@purplezone.gg" /></div>
              <div className="space-y-1.5"><Label>Steam ID</Label><Input disabled defaultValue="STEAM_1:0:12345678" /></div>
              <div className="space-y-1.5"><Label>Language</Label>
                <Select defaultValue="en">
                  <SelectTrigger><SelectValue /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="en">English</SelectItem>
                    <SelectItem value="ka">ქართული</SelectItem>
                    <SelectItem value="ru">Русский</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-1.5"><Label>Timezone</Label>
                <Select defaultValue="tbs">
                  <SelectTrigger><SelectValue /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="tbs">Asia/Tbilisi (GMT+4)</SelectItem>
                    <SelectItem value="utc">UTC</SelectItem>
                    <SelectItem value="cet">Europe/Berlin</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          </div>
        </TabsContent>

        <TabsContent value="security" className="mt-4 space-y-4">
          <div className="rounded-xl border border-border bg-card p-6">
            <SectionHeader title="Password & 2FA" />
            <div className="space-y-4">
              <div className="flex items-center justify-between rounded-md border border-border/60 bg-surface/40 p-3">
                <div className="flex items-center gap-3"><KeyRound className="h-4 w-4 text-secondary" /><div><div className="font-medium">Password</div><div className="text-xs text-muted-foreground">Last changed 3 months ago</div></div></div>
                <Button variant="outline">Change</Button>
              </div>
              <div className="flex items-center justify-between rounded-md border border-border/60 bg-surface/40 p-3">
                <div className="flex items-center gap-3"><ShieldCheck className="h-4 w-4 text-success" /><div><div className="font-medium">Two-factor authentication</div><div className="text-xs text-muted-foreground">Authenticator app</div></div></div>
                <Badge variant="outline" className="border-success/40 text-success">Enabled</Badge>
              </div>
            </div>
          </div>
          <div className="rounded-xl border border-border bg-card p-6">
            <SectionHeader title="Active sessions" />
            <ul className="divide-y divide-border/60">
              {[
                ["Windows · Chrome", "Tbilisi, GE", "Now", true],
                ["Android · Chrome", "Tbilisi, GE", "2h ago", false],
                ["macOS · Safari", "Batumi, GE", "yesterday", false],
              ].map(([d, l, t, cur]) => (
                <li key={d as string} className="flex items-center justify-between py-3">
                  <div><div className="font-medium">{d}</div><div className="text-xs text-muted-foreground">{l} · {t}</div></div>
                  {cur ? <Badge variant="outline" className="border-success/40 text-success">This device</Badge> : <Button variant="ghost" size="sm"><LogOut className="mr-1 h-4 w-4" />Sign out</Button>}
                </li>
              ))}
            </ul>
          </div>
        </TabsContent>

        <TabsContent value="appearance" className="mt-4">
          <div className="rounded-xl border border-border bg-card p-6">
            <SectionHeader title="Theme & display" />
            <div className="grid gap-4 sm:grid-cols-2">
              <div className="space-y-1.5"><Label>Theme</Label>
                <Select defaultValue="dark">
                  <SelectTrigger><SelectValue /></SelectTrigger>
                  <SelectContent><SelectItem value="dark">Dark</SelectItem><SelectItem value="light">Light</SelectItem><SelectItem value="system">System</SelectItem></SelectContent>
                </Select>
              </div>
              <div className="space-y-1.5"><Label>Density</Label>
                <Select defaultValue="comfortable">
                  <SelectTrigger><SelectValue /></SelectTrigger>
                  <SelectContent><SelectItem value="comfortable">Comfortable</SelectItem><SelectItem value="compact">Compact</SelectItem></SelectContent>
                </Select>
              </div>
            </div>
          </div>
        </TabsContent>

        <TabsContent value="privacy" className="mt-4">
          <div className="rounded-xl border border-border bg-card p-6">
            <SectionHeader title="Privacy" />
            <div className="divide-y divide-border/60">
              {[
                "Allow others to see when I'm online",
                "Allow friend requests from anyone",
                "Show my in-game server on my profile",
                "Include my stats in public rankings",
              ].map((t) => (
                <div key={t} className="flex items-center justify-between py-3">
                  <span>{t}</span>
                  <Switch defaultChecked />
                </div>
              ))}
            </div>
          </div>
        </TabsContent>

        <TabsContent value="danger" className="mt-4">
          <div className="rounded-xl border border-destructive/40 bg-destructive/5 p-6">
            <SectionHeader title="Danger zone" description="These actions are permanent." />
            <div className="flex flex-col gap-3 sm:flex-row">
              <Button variant="outline">Export data</Button>
              <Button variant="outline" className="border-destructive/40 text-destructive"><Trash2 className="mr-1 h-4 w-4" /> Delete account</Button>
            </div>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
}