import Link from "next/link";
import { Pencil } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { CategoryForm } from "@/components/admin/CategoryForm";
import { DeleteButton } from "@/components/admin/DeleteButton";
import {
  deleteCategoryAction,
  toggleCategoryPublishedAction,
} from "@/lib/actions/categories";
import { getAllCategoriesAdmin } from "@/lib/queries/categories";
import type { CategoryKind } from "@/lib/queries/categories";

interface CategoriesPageProps {
  searchParams: Promise<{ kind?: string }>;
}

const KINDS: { id: CategoryKind; label: string }[] = [
  { id: "venue", label: "場地分類" },
  { id: "article", label: "指南分類" },
];

export default async function AdminCategoriesPage({
  searchParams,
}: CategoriesPageProps) {
  const { kind: kindParam } = await searchParams;
  const kind: CategoryKind =
    kindParam === "article" ? "article" : "venue";

  const categories = await getAllCategoriesAdmin(kind);

  return (
    <div className="space-y-8">
      <div>
        <h1 className="text-2xl font-bold">分類管理</h1>
        <p className="text-muted-foreground">
          管理場地類型與指南分類，新增或編輯後會同步至前台篩選與表單
        </p>
      </div>

      <div className="flex gap-2">
        {KINDS.map((k) => (
          <Button
            key={k.id}
            render={<Link href={`/admin/categories?kind=${k.id}`} />}
            nativeButton={false}
            variant={kind === k.id ? "default" : "outline"}
            size="sm"
          >
            {k.label}
          </Button>
        ))}
      </div>

      <div className="grid gap-8 lg:grid-cols-2">
        <div>
          <h2 className="mb-4 text-lg font-semibold">
            新增{kind === "venue" ? "場地" : "指南"}分類
          </h2>
          <CategoryForm kind={kind} />
        </div>

        <div className="overflow-x-auto rounded-xl border border-border">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>名稱</TableHead>
                <TableHead>Slug</TableHead>
                <TableHead>排序</TableHead>
                <TableHead>狀態</TableHead>
                <TableHead className="text-right">操作</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {categories.map((cat) => (
                <TableRow key={cat.id}>
                  <TableCell className="font-medium">{cat.nameZh}</TableCell>
                  <TableCell className="text-muted-foreground">{cat.slug}</TableCell>
                  <TableCell>{cat.sortOrder}</TableCell>
                  <TableCell>
                    <form action={toggleCategoryPublishedAction.bind(null, cat.id)}>
                      <button type="submit">
                        <Badge variant={cat.published ? "default" : "outline"}>
                          {cat.published ? "啟用" : "停用"}
                        </Badge>
                      </button>
                    </form>
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="flex justify-end gap-2">
                      <Button
                        render={
                          <Link
                            href={`/admin/categories/${cat.id}/edit?kind=${kind}`}
                          />
                        }
                        nativeButton={false}
                        variant="outline"
                        size="sm"
                      >
                        <Pencil className="size-3.5" />
                      </Button>
                      <DeleteButton
                        action={deleteCategoryAction.bind(null, cat.id)}
                        label=""
                      />
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      </div>
    </div>
  );
}