import Link from "next/link";
import { KeyRound } from "lucide-react";
import { requireAdmin } from "@/lib/session";
import { getAllowlistCounts, listAllowlist, str } from "@/lib/queries/admin";
import { adminEmails } from "@/lib/access";
import { formatNumber } from "@/lib/format";
import { PageHeader } from "@/components/ui/page-header";
import { Badge } from "@/components/ui/badge";
import { Alert } from "@/components/ui/alert";
import { EmptyState } from "@/components/ui/empty-state";
import { Stat, StatGrid } from "@/components/ui/stat";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { DateCell, Mono, Panel, SearchForm } from "@/components/admin/primitives";
import { AddEmailsDialog, RemoveAllowButton, ResendInviteButton } from "@/components/admin/access-controls";

export const dynamic = "force-dynamic";

function StatusBadgeFor({ status, banned }: { status: "account" | "invited" | "pending"; banned: boolean | null }) {
  if (status === "account") {
    return banned ? (
      <Badge variant="danger" dot>
        account banned
      </Badge>
    ) : (
      <Badge variant="success" dot>
        account created
      </Badge>
    );
  }
  if (status === "invited")
    return (
      <Badge variant="info" dot>
        invited
      </Badge>
    );
  return (
    <Badge variant="outline" dot>
      pending
    </Badge>
  );
}

export default async function AdminAccessPage({ searchParams }: { searchParams: Promise<Record<string, string | string[] | undefined>> }) {
  await requireAdmin();
  const sp = await searchParams;
  const q = str(sp.q);
  const [rows, counts] = await Promise.all([listAllowlist({ q: q || undefined }), getAllowlistCounts()]);

  return (
    <>
      <PageHeader
        eyebrow="Accounts"
        title="Access"
        description="Fetcha is invitation-only. Only emails on this list (plus the ADMIN_EMAILS environment variable) can create an account. Removing an entry does not affect an existing account — ban the user instead."
        actions={
          <>
            <SearchForm action="/admin/access" q={q} placeholder="email or note" />
            <AddEmailsDialog />
          </>
        }
      />

      <StatGrid cols={4} className="mb-6">
        <Stat label="On the list" value={formatNumber(counts.total)} hint="allowlisted emails" />
        <Stat label="Accounts created" value={formatNumber(counts.accounts)} hint="invitation used" />
        <Stat label="Invited" value={formatNumber(counts.invited)} hint="email sent, no account yet" />
        <Stat label="Pending" value={formatNumber(counts.pending)} hint="listed, no email sent" />
      </StatGrid>

      {adminEmails.length ? (
        <Alert variant="info" title="Administrators from the environment" className="mb-4">
          {adminEmails.length === 1 ? "This address" : "These addresses"} can always sign up and {adminEmails.length === 1 ? "is" : "are"} created with the admin role, whether or not {adminEmails.length === 1 ? "it is" : "they are"} listed
          below: {adminEmails.map((e, i) => (
            <span key={e}>
              {i > 0 ? ", " : null}
              <Mono>{e}</Mono>
            </span>
          ))}
          . Run <Mono>pnpm db:seed</Mono> to add them to the list and promote existing accounts.
        </Alert>
      ) : (
        <Alert variant="warning" title="ADMIN_EMAILS is not set" className="mb-4">
          Without it, only addresses on this list can sign up and nobody is promoted to admin automatically. Set <Mono>ADMIN_EMAILS</Mono> in the web environment and run <Mono>pnpm db:seed</Mono>.
        </Alert>
      )}

      <Panel flush>
        {rows.length === 0 ? (
          <div className="p-4">
            <EmptyState
              icon={KeyRound}
              title={q ? "No entries match" : "The access list is empty"}
              description={q ? "Try a partial email or a different spelling." : "Add the emails of the people you want to let in. Optionally send them an invitation email with a link to the signup page."}
              action={q ? undefined : <AddEmailsDialog />}
              compact
            />
          </div>
        ) : (
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Email</TableHead>
                <TableHead>Note</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Invited by</TableHead>
                <TableHead className="text-right">Invited</TableHead>
                <TableHead className="text-right">Added</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {rows.map((r) => (
                <TableRow key={r.email}>
                  <TableCell>
                    {r.userId ? (
                      <Link href={`/admin/users/${r.userId}`} className="font-medium hover:underline">
                        {r.email}
                      </Link>
                    ) : (
                      <span className="font-medium">{r.email}</span>
                    )}
                    {r.accountEmail && r.accountEmail.toLowerCase() !== r.email ? <div className="text-[11.5px] text-fg-subtle">account now {r.accountEmail}</div> : null}
                  </TableCell>
                  <TableCell className="max-w-[280px] truncate text-fg-muted" title={r.note ?? undefined}>
                    {r.note ?? <span className="text-fg-subtle">—</span>}
                  </TableCell>
                  <TableCell>
                    <StatusBadgeFor status={r.status} banned={r.accountBanned} />
                  </TableCell>
                  <TableCell className="max-w-[220px] truncate text-fg-muted">
                    {r.invitedByUserId ? (
                      <Link href={`/admin/users/${r.invitedByUserId}`} className="hover:underline">
                        {r.invitedByEmail ?? r.invitedByUserId}
                      </Link>
                    ) : (
                      <span className="text-fg-subtle">seed</span>
                    )}
                  </TableCell>
                  <TableCell className="text-right">
                    <DateCell value={r.invitedAt} />
                  </TableCell>
                  <TableCell className="text-right">
                    <DateCell value={r.createdAt} />
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="inline-flex items-center justify-end gap-1">
                      {r.status !== "account" ? <ResendInviteButton email={r.email} invitedBefore={Boolean(r.invitedAt)} /> : null}
                      <RemoveAllowButton email={r.email} hasAccount={r.status === "account"} />
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        )}
      </Panel>
    </>
  );
}