import { Crown } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  grantMembershipAction,
  revokeMembershipAction,
} from "@/lib/actions/membership";
import { getAllPlansAdmin, getAllUsersAdmin } from "@/lib/queries/membership";

export default async function AdminMembersPage() {
  const [users, plans] = await Promise.all([
    getAllUsersAdmin(),
    getAllPlansAdmin(),
  ]);

  return (
    <div className="space-y-8">
      <div>
        <h1 className="text-2xl font-bold">會員管理</h1>
        <p className="text-muted-foreground">查看註冊用戶，手動授予或撤銷會員資格</p>
      </div>

      <div className="rounded-xl border border-border bg-card p-6">
        <h2 className="mb-4 flex items-center gap-2 font-semibold">
          <Crown className="size-4 text-primary" />
          手動授予會員
        </h2>
        <form action={grantMembershipAction} className="grid gap-4 sm:grid-cols-4">
          <div>
            <Label htmlFor="email">用戶 Email</Label>
            <Input id="email" name="email" type="email" required className="mt-1" />
          </div>
          <div>
            <Label htmlFor="planId">方案</Label>
            <select
              id="planId"
              name="planId"
              required
              className="mt-1 flex h-8 w-full rounded-lg border border-input bg-transparent px-2.5 text-sm"
            >
              {plans.map((p) => (
                <option key={p.id} value={p.id}>
                  {p.nameZh}
                </option>
              ))}
            </select>
          </div>
          <div>
            <Label htmlFor="days">天數</Label>
            <Input id="days" name="days" type="number" defaultValue={30} className="mt-1" />
          </div>
          <div className="flex items-end">
            <Button type="submit" className="bg-primary text-primary-foreground">
              授予會員
            </Button>
          </div>
        </form>
      </div>

      <div className="overflow-x-auto rounded-xl border border-border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Email</TableHead>
              <TableHead>暱稱</TableHead>
              <TableHead>會員狀態</TableHead>
              <TableHead>註冊日期</TableHead>
              <TableHead className="text-right">操作</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {users.map((user) => {
              const sub = user.subscriptions[0];
              const isActive =
                sub && sub.expiresAt > new Date() && sub.status === "active";

              return (
                <TableRow key={user.id}>
                  <TableCell>{user.email}</TableCell>
                  <TableCell>{user.name || "—"}</TableCell>
                  <TableCell>
                    {isActive ? (
                      <Badge className="bg-primary text-primary-foreground">
                        {sub.plan.nameZh} · 至{" "}
                        {new Date(sub.expiresAt).toLocaleDateString("zh-TW")}
                      </Badge>
                    ) : (
                      <Badge variant="outline">非會員</Badge>
                    )}
                  </TableCell>
                  <TableCell className="text-muted-foreground">
                    {new Date(user.createdAt).toLocaleDateString("zh-TW")}
                  </TableCell>
                  <TableCell className="text-right">
                    {isActive && sub && (
                      <form action={revokeMembershipAction.bind(null, sub.id)}>
                        <Button type="submit" variant="outline" size="sm">
                          撤銷會員
                        </Button>
                      </form>
                    )}
                  </TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}