import Link from "next/link";
import { Plus, Pencil, Trash2 } 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 { deletePlanAction } from "@/lib/actions/membership";
import { getAllPlansAdmin } from "@/lib/queries/membership";

export default async function AdminMembershipPlansPage() {
  const plans = await getAllPlansAdmin();

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">會員方案管理</h1>
          <p className="text-muted-foreground">設定前台顯示的訂閱方案與價格</p>
        </div>
        <Button
          render={<Link href="/admin/membership-plans/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>
            {plans.map((plan) => (
              <TableRow key={plan.id}>
                <TableCell className="font-medium">{plan.nameZh}</TableCell>
                <TableCell>{plan.priceLabel}</TableCell>
                <TableCell>{plan.intervalDays} 天</TableCell>
                <TableCell>
                  <Badge variant={plan.published ? "default" : "outline"}>
                    {plan.published ? "已發布" : "草稿"}
                  </Badge>
                </TableCell>
                <TableCell className="text-right">
                  <div className="flex justify-end gap-2">
                    <Button
                      render={<Link href={`/admin/membership-plans/${plan.id}/edit`} />}
                      nativeButton={false}
                      variant="outline"
                      size="sm"
                    >
                      <Pencil className="size-3.5" />
                      編輯
                    </Button>
                    <form action={deletePlanAction.bind(null, plan.id)}>
                      <Button type="submit" variant="destructive" size="sm">
                        <Trash2 className="size-3.5" />
                      </Button>
                    </form>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}