import { createDefaultForm } from "@/app/admin/form/actions";
import { AdminShellServer } from "@/components/admin-shell-server";
import { RealtimeRefresh } from "@/components/realtime-refresh";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { getAdminDashboardData } from "@/lib/admin/admin-dashboard";
import {
  ArrowUpRight,
  ClipboardList,
  FilePlus2,
  Server,
  Upload,
} from "lucide-react";
import Link from "next/link";

export const dynamic = "force-dynamic";

function formatNumber(value: number) {
  return new Intl.NumberFormat("en-US").format(value);
}

function formatDate(date: Date | null) {
  if (!date) return "No responses";
  return date.toLocaleString("en-GB", {
    timeZone: "Asia/Bangkok",
    hour12: false,
  });
}

function respondentName(submission: {
  userName: string | null;
  userDiscordId: string | null;
}) {
  return submission.userName || submission.userDiscordId || "Anonymous";
}

function MetricCard({
  label,
  value,
  detail,
}: {
  label: string;
  value: number;
  detail: string;
}) {
  return (
    <Card size="sm">
      <CardHeader>
        <CardDescription>{label}</CardDescription>
        <CardTitle className="text-2xl tabular-nums">
          {formatNumber(value)}
        </CardTitle>
      </CardHeader>
      <CardContent className="text-xs text-muted-foreground">
        {detail}
      </CardContent>
    </Card>
  );
}

function QuickAction({
  href,
  title,
  description,
  icon: Icon,
  disabled = false,
}: {
  href: string;
  title: string;
  description: string;
  icon: typeof ClipboardList;
  disabled?: boolean;
}) {
  return (
    <Card size="sm">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Icon className="size-5 text-primary" />
          {title}
        </CardTitle>
        <CardDescription>{description}</CardDescription>
        <CardAction>
          {disabled ? (
            <Button variant="ghost" size="icon-sm" disabled aria-label={`${title} disabled`}>
              <ArrowUpRight />
            </Button>
          ) : (
            <Button variant="ghost" size="icon-sm" asChild>
              <Link href={href} aria-label={`Open ${title}`}>
                <ArrowUpRight />
              </Link>
            </Button>
          )}
        </CardAction>
      </CardHeader>
    </Card>
  );
}

export default async function AdminPage() {
  const { summary, recentSubmissions, activeForms } =
    await getAdminDashboardData();
  const busiestFormResponses = Math.max(
    ...activeForms.map((form) => form.responsesLast7Days),
    1,
  );

  return (
    <AdminShellServer>
      <RealtimeRefresh topic="forms" />
      <RealtimeRefresh topic="submissions" />
      <main className="mx-auto flex w-full max-w-7xl flex-col gap-6 p-4 pb-12 md:p-6">
        <header className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
          <div>
            <p className="text-sm font-medium text-primary">Command center</p>
            <h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
            <p className="mt-1 text-muted-foreground">
              Live form operations · Bangkok time
            </p>
          </div>
          <form action={createDefaultForm}>
            <Button type="submit">
              <FilePlus2 data-icon="inline-start" />
              Create form
            </Button>
          </form>
        </header>

        <section className="grid gap-4 lg:grid-cols-[1.25fr_1fr]">
          <Card>
            <CardHeader>
              <CardDescription>Responses today</CardDescription>
              <CardTitle className="text-5xl tabular-nums md:text-6xl">
                {formatNumber(summary.responsesToday)}
              </CardTitle>
              <CardAction>
                <Badge>Live</Badge>
              </CardAction>
            </CardHeader>
            <CardContent className="flex flex-col gap-4">
              <p className="max-w-xl text-sm text-muted-foreground">
                Submissions received since midnight. Realtime updates keep this
                workspace current while you are here.
              </p>
              <div className="flex flex-wrap gap-2">
                <Badge variant="outline">
                  {formatNumber(summary.responsesLast7Days)} this week
                </Badge>
                <Badge variant="outline">
                  {formatNumber(summary.openForms)} forms accepting responses
                </Badge>
              </div>
            </CardContent>
          </Card>

          <div className="grid grid-cols-2 gap-4">
            <MetricCard
              label="Last 7 days"
              value={summary.responsesLast7Days}
              detail="Including today"
            />
            <MetricCard
              label="All responses"
              value={summary.totalResponses}
              detail="Lifetime submissions"
            />
            <MetricCard
              label="Open forms"
              value={summary.openForms}
              detail={`${formatNumber(summary.closedForms)} closed`}
            />
            <MetricCard
              label="Total forms"
              value={summary.totalForms}
              detail="Across this workspace"
            />
          </div>
        </section>

        <section className="grid gap-4 xl:grid-cols-[minmax(0,1.6fr)_minmax(20rem,0.9fr)]">
          <Card>
            <CardHeader>
              <CardTitle>Recent responses</CardTitle>
              <CardDescription>
                The latest submissions across every form.
              </CardDescription>
              <CardAction>
                <Button variant="outline" size="sm" asChild>
                  <Link href="/admin/form">View forms</Link>
                </Button>
              </CardAction>
            </CardHeader>
            <CardContent>
              {recentSubmissions.length === 0 ? (
                <p className="border p-6 text-sm text-muted-foreground">
                  Responses will appear here after someone submits a form.
                </p>
              ) : (
                <>
                  <div className="hidden border md:block">
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead>Respondent</TableHead>
                          <TableHead>Form</TableHead>
                          <TableHead>Submitted</TableHead>
                          <TableHead>Status</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {recentSubmissions.map((submission) => (
                          <TableRow key={submission.id}>
                            <TableCell>
                              <Link
                                href={`/admin/form/${submission.formId}/result/${submission.id}`}
                                className="font-medium hover:underline"
                              >
                                {respondentName(submission)}
                              </Link>
                            </TableCell>
                            <TableCell>
                              <Link
                                href={`/admin/form/${submission.formId}`}
                                className="hover:underline"
                              >
                                {submission.formTitle}
                              </Link>
                            </TableCell>
                            <TableCell>
                              {formatDate(submission.submittedAt)}
                            </TableCell>
                            <TableCell>
                              <Badge
                                variant={
                                  submission.edited ? "secondary" : "outline"
                                }
                              >
                                {submission.edited ? "Edited" : "Original"}
                              </Badge>
                            </TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </div>
                  <div className="flex flex-col gap-3 md:hidden">
                    {recentSubmissions.map((submission) => (
                      <Card key={submission.id} size="sm">
                        <CardHeader>
                          <CardTitle className="truncate">
                            <Link
                              href={`/admin/form/${submission.formId}/result/${submission.id}`}
                            >
                              {respondentName(submission)}
                            </Link>
                          </CardTitle>
                          <CardDescription className="truncate">
                            {submission.formTitle} · {formatDate(submission.submittedAt)}
                          </CardDescription>
                          <CardAction>
                            <Badge
                              variant={
                                submission.edited ? "secondary" : "outline"
                              }
                            >
                              {submission.edited ? "Edited" : "Original"}
                            </Badge>
                          </CardAction>
                        </CardHeader>
                      </Card>
                    ))}
                  </div>
                </>
              )}
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Form momentum</CardTitle>
              <CardDescription>
                Response activity during the last 7 days.
              </CardDescription>
            </CardHeader>
            <CardContent className="flex flex-col gap-5">
              {activeForms.length === 0 ? (
                <p className="text-sm text-muted-foreground">
                  Create a form to start tracking activity.
                </p>
              ) : (
                activeForms.map((form) => (
                  <div key={form.id} className="flex flex-col gap-2">
                    <div className="flex items-center justify-between gap-3">
                      <Link
                        href={`/admin/form/${form.id}/result`}
                        className="truncate font-medium hover:underline"
                      >
                        {form.title}
                      </Link>
                      <span className="shrink-0 text-sm tabular-nums text-muted-foreground">
                        {formatNumber(form.responsesLast7Days)}
                      </span>
                    </div>
                    <Progress
                      value={
                        (form.responsesLast7Days / busiestFormResponses) * 100
                      }
                      aria-label={`${form.title}: ${form.responsesLast7Days} responses in the last 7 days`}
                    />
                    <div className="flex items-center justify-between gap-3 text-xs text-muted-foreground">
                      <Badge variant={form.isOpen ? "default" : "secondary"}>
                        {form.isOpen ? "Open" : "Closed"}
                      </Badge>
                      <span>{formatNumber(form.totalResponses)} total</span>
                    </div>
                  </div>
                ))
              )}
            </CardContent>
          </Card>
        </section>

        <section>
          <div className="mb-3">
            <h2 className="font-heading text-lg font-medium">Workspace</h2>
            <p className="text-sm text-muted-foreground">
              Go directly to the tools you operate most often.
            </p>
          </div>
          <div className="grid gap-4 md:grid-cols-3">
            <QuickAction
              href="/admin/form"
              title="Forms"
              description="Build forms and review submissions."
              icon={ClipboardList}
            />
            <QuickAction
              href="/admin/upload"
              title="Video uploads"
              description="Publish and monitor platform jobs."
              icon={Upload}
              disabled
            />
            <QuickAction
              href="/admin/backend"
              title="Backend"
              description="Manage follower APIs and cache."
              icon={Server}
            />
          </div>
        </section>
      </main>
    </AdminShellServer>
  );
}