import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { PageHeader, SectionHeader } from "@/components/common/PageHeader";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { toast } from "sonner";
import { GripVertical, Plus, Trash2 } from "lucide-react";

export const Route = createFileRoute("/admin/navigation")({
  head: () => ({ meta: [{ title: "Navigation — Admin" }, { name: "description", content: "Manage the site header, footer and account navigation." }] }),
  component: AdminNavigationPage,
});

type Item = { id: string; label: string; to: string; enabled: boolean; badge?: string };
const seedHeader: Item[] = [
  { id: "h1", label: "Servers", to: "/servers", enabled: true },
  { id: "h2", label: "Store", to: "/store", enabled: true, badge: "Sale" },
  { id: "h3", label: "Rankings", to: "/rankings", enabled: true },
  { id: "h4", label: "News", to: "/news", enabled: true },
  { id: "h5", label: "Subscription", to: "/subscription", enabled: true },
  { id: "h6", label: "Rules", to: "/rules", enabled: false },
];
const seedFooter: Item[] = [
  { id: "f1", label: "Terms", to: "/terms", enabled: true },
  { id: "f2", label: "Privacy", to: "/privacy", enabled: true },
  { id: "f3", label: "Refunds", to: "/refunds", enabled: true },
  { id: "f4", label: "Contact", to: "/support", enabled: true },
];

function NavList({ items, onChange }: { items: Item[]; onChange: (xs: Item[]) => void }) {
  return (
    <div className="space-y-2">
      {items.map((it, i) => (
        <div key={it.id} className="flex items-center gap-2 rounded-md border border-border/60 bg-surface/40 p-2.5">
          <GripVertical className="h-4 w-4 cursor-grab text-muted-foreground" />
          <Input className="max-w-[200px]" value={it.label} onChange={(e) => onChange(items.map((x, j) => j === i ? { ...x, label: e.target.value } : x))} />
          <Input className="flex-1" value={it.to} onChange={(e) => onChange(items.map((x, j) => j === i ? { ...x, to: e.target.value } : x))} />
          {it.badge && <Badge variant="outline" className="border-secondary/40 text-secondary">{it.badge}</Badge>}
          <Switch checked={it.enabled} onCheckedChange={(v) => onChange(items.map((x, j) => j === i ? { ...x, enabled: v } : x))} />
          <Button size="icon" variant="ghost" className="text-destructive" onClick={() => onChange(items.filter((_, j) => j !== i))}><Trash2 className="h-4 w-4" /></Button>
        </div>
      ))}
      <Button variant="outline" size="sm" onClick={() => onChange([...items, { id: `n-${Date.now()}`, label: "New link", to: "/", enabled: true }])}><Plus className="mr-1 h-4 w-4" /> Add link</Button>
    </div>
  );
}

function AdminNavigationPage() {
  const [header, setHeader] = useState(seedHeader);
  const [footer, setFooter] = useState(seedFooter);

  return (
    <div>
      <PageHeader title="Navigation" description="Configure links shown in the header and footer." actions={<Button className="gradient-primary text-primary-foreground" onClick={() => toast.success("Navigation saved")}>Save</Button>} />
      <Tabs defaultValue="header">
        <TabsList>
          <TabsTrigger value="header">Main header</TabsTrigger>
          <TabsTrigger value="footer">Footer</TabsTrigger>
        </TabsList>
        <TabsContent value="header" className="mt-4 rounded-xl border border-border bg-card p-4">
          <SectionHeader title="Header links" description="Order matters. Disable a link to hide it without deleting." />
          <NavList items={header} onChange={setHeader} />
        </TabsContent>
        <TabsContent value="footer" className="mt-4 rounded-xl border border-border bg-card p-4">
          <SectionHeader title="Footer links" />
          <NavList items={footer} onChange={setFooter} />
        </TabsContent>
      </Tabs>
    </div>
  );
}