import Link from "next/link";
import { Plus, 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 { DeleteButton } from "@/components/admin/DeleteButton";
import { deleteVenueAction, toggleVenuePublishedAction } from "@/lib/actions/venues";
import { getAllVenuesAdmin } from "@/lib/queries/venues";

export default async function AdminVenuesPage() {
  const venues = await getAllVenuesAdmin();

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">場地管理</h1>
          <Link href="/admin/categories?kind=venue" className="text-sm text-primary hover:underline">
            管理場地分類 →
          </Link>
        </div>
        <Button
          render={<Link href="/admin/venues/new" />}
          nativeButton={false}
          className="bg-primary text-primary-foreground"
        >
          <Plus className="size-4" />
          新增場地
        </Button>
      </div>

      <div className="overflow-x-auto rounded-xl border border-border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>名稱</TableHead>
              <TableHead>城市</TableHead>
              <TableHead>類型</TableHead>
              <TableHead>狀態</TableHead>
              <TableHead className="text-right">操作</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {venues.map((v) => (
              <TableRow key={v.id}>
                <TableCell className="font-medium">{v.nameZh}</TableCell>
                <TableCell>{v.city.nameZh}</TableCell>
                <TableCell>{v.type}</TableCell>
                <TableCell>
                  <form action={toggleVenuePublishedAction.bind(null, v.id)}>
                    <button type="submit">
                      <Badge variant={v.published ? "default" : "outline"}>
                        {v.published ? "已發布" : "草稿"}
                      </Badge>
                    </button>
                  </form>
                </TableCell>
                <TableCell className="text-right">
                  <div className="flex justify-end gap-2">
                    <Button
                      render={<Link href={`/admin/venues/${v.id}/edit`} />}
                      nativeButton={false}
                      variant="outline"
                      size="sm"
                    >
                      <Pencil className="size-3.5" />
                      編輯
                    </Button>
                    <DeleteButton action={deleteVenueAction.bind(null, v.id)} />
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}