import { createFileRoute } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { PageHeader } from "@/components/common/PageHeader";
import { AdminDataTable, type Column } from "@/components/common/AdminDataTable";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { Badge } from "@/components/ui/badge";
import { slidesService } from "@/services/api/slides";
import type { Slide } from "@/types";
import { toast } from "sonner";

export const Route = createFileRoute("/admin/sliders")({
  head: () => ({ meta: [{ title: "Sliders — Admin" }] }),
  component: AdminSlidersPage,
});

function AdminSlidersPage() {
  const [rows, setRows] = useState<Slide[]>([]);
  useEffect(() => { slidesService.list().then(setRows); }, []);

  async function toggle(s: Slide) {
    const next = await slidesService.update(s.id, { enabled: !s.enabled });
    setRows((rs) => rs.map((r) => r.id === next.id ? next : r));
  }
  async function remove(id: string) {
    await slidesService.remove(id);
    setRows((rs) => rs.filter((r) => r.id !== id));
    toast.success("Slide removed");
  }
  async function move(s: Slide, dir: -1 | 1) {
    const ordered = [...rows].sort((a, b) => a.order - b.order);
    const i = ordered.findIndex((r) => r.id === s.id);
    const j = i + dir;
    if (j < 0 || j >= ordered.length) return;
    [ordered[i], ordered[j]] = [ordered[j], ordered[i]];
    await slidesService.reorder(ordered.map((r) => r.id));
    setRows(await slidesService.list());
  }

  const cols: Column<Slide>[] = [
    { key: "order", header: "#", cell: (s) => <span className="font-mono">{s.order}</span> },
    { key: "title", header: "Title", cell: (s) => <div><div className="font-medium">{s.title}</div><div className="text-xs text-muted-foreground line-clamp-1">{s.description}</div></div> },
    { key: "label", header: "Label", cell: (s) => s.label ?? "—" },
    { key: "media", header: "Media", cell: (s) => <Badge variant="outline" className="capitalize">{s.mediaType}</Badge> },
    { key: "on", header: "Enabled", cell: (s) => <Switch checked={s.enabled} onCheckedChange={() => toggle(s)} /> },
  ];

  return (
    <div>
      <PageHeader title="Home sliders" description="Manage the hero slides shown on the home page." actions={<Button className="gradient-primary text-primary-foreground">New slide</Button>} />
      <AdminDataTable
        rows={rows.sort((a, b) => a.order - b.order)} columns={cols}
        rowActions={(s) => (
          <div className="flex justify-end gap-1">
            <Button size="sm" variant="outline" onClick={() => move(s, -1)}>↑</Button>
            <Button size="sm" variant="outline" onClick={() => move(s, 1)}>↓</Button>
            <Button size="sm" variant="ghost" onClick={() => remove(s.id)}>Delete</Button>
          </div>
        )}
      />
    </div>
  );
}