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 {
  deleteArticleAction,
  toggleArticlePublishedAction,
} from "@/lib/actions/articles";
import { getAllArticlesAdmin } from "@/lib/queries/articles";

export default async function AdminArticlesPage() {
  const articles = await getAllArticlesAdmin();

  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=article" className="text-sm text-primary hover:underline">
            管理指南分類 →
          </Link>
        </div>
        <Button
          render={<Link href="/admin/articles/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 className="text-right">操作</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {articles.map((a) => (
              <TableRow key={a.id}>
                <TableCell className="font-medium">{a.title}</TableCell>
                <TableCell>{a.category}</TableCell>
                <TableCell>
                  <form action={toggleArticlePublishedAction.bind(null, a.id)}>
                    <button type="submit">
                      <Badge variant={a.published ? "default" : "outline"}>
                        {a.published ? "已發布" : "草稿"}
                      </Badge>
                    </button>
                  </form>
                </TableCell>
                <TableCell className="text-right">
                  <div className="flex justify-end gap-2">
                    <Button
                      render={<Link href={`/admin/articles/${a.id}/edit`} />}
                      nativeButton={false}
                      variant="outline"
                      size="sm"
                    >
                      <Pencil className="size-3.5" />
                      編輯
                    </Button>
                    <DeleteButton action={deleteArticleAction.bind(null, a.id)} />
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}