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,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { getAdminDashboardData } from "@/lib/admin/admin-dashboard";
import {
  ClipboardList,
  FilePlus2,
  Inbox,
  ListChecks,
  Server,
} 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 StatCard({
  title,
  value,
  description,
  icon: Icon,
}: {
  title: string;
  value: number;
  description: string;
  icon: typeof ClipboardList;
}) {
  return (
    <Card>
      <CardHeader className="flex flex-row items-start justify-between gap-3 pb-2">
        <div className="flex flex-col gap-1">
          <CardDescription>{title}</CardDescription>
          <CardTitle className="text-2xl">{formatNumber(value)}</CardTitle>
        </div>
        <Icon className="size-5 text-muted-foreground" />
      </CardHeader>
      <CardContent>
        <p className="text-sm text-muted-foreground">{description}</p>
      </CardContent>
    </Card>
  );
}

export default async function AdminPage() {
  const { summary, recentSubmissions, activeForms } =
    await getAdminDashboardData();

  return (
    <AdminShellServer>
      <RealtimeRefresh topic="forms" />
      <RealtimeRefresh topic="submissions" />
      <div className="mx-auto flex w-full max-w-6xl flex-col gap-6 p-4 pb-12 md:p-6">
        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
          <div>
            <h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
            <p className="mt-1 text-muted-foreground">
              Forms, responses, and activity at a glance.
            </p>
          </div>
          <form action={createDefaultForm}>
            <Button type="submit">
              <FilePlus2 data-icon="inline-start" />
              Create form
            </Button>
          </form>
        </div>

        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
          <StatCard
            title="Total forms"
            value={summary.totalForms}
            description={`${formatNumber(summary.openForms)} open, ${formatNumber(summary.closedForms)} closed`}
            icon={ClipboardList}
          />
          <StatCard
            title="Total responses"
            value={summary.totalResponses}
            description="All submitted form responses"
            icon={Inbox}
          />
          <StatCard
            title="Today"
            value={summary.responsesToday}
            description="Responses since Bangkok midnight"
            icon={ListChecks}
          />
          <StatCard
            title="Last 7 days"
            value={summary.responsesLast7Days}
            description="Calendar window including today"
            icon={ListChecks}
          />
        </div>

        <div className="grid gap-4 lg:grid-cols-[1.5fr_1fr]">
          <Card>
            <CardHeader>
              <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                <div>
                  <CardTitle>Recent responses</CardTitle>
                  <CardDescription>
                    Latest submissions across all forms.
                  </CardDescription>
                </div>
                <Button variant="outline" size="sm" asChild>
                  <Link href="/admin/form">View forms</Link>
                </Button>
              </div>
            </CardHeader>
            <CardContent>
              {recentSubmissions.length === 0 ? (
                <div className="rounded-md border p-6 text-sm text-muted-foreground">
                  Responses will appear here after people submit a form.
                </div>
              ) : (
                <>
                  <div className="hidden rounded-md 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>
                              {submission.userName &&
                                submission.userDiscordId && (
                                  <p className="text-xs text-muted-foreground">
                                    {submission.userDiscordId}
                                  </p>
                                )}
                            </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}>
                        <CardHeader>
                          <div className="flex items-start justify-between gap-3">
                            <div className="min-w-0">
                              <CardTitle className="truncate text-base">
                                <Link
                                  href={`/admin/form/${submission.formId}/result/${submission.id}`}
                                >
                                  {respondentName(submission)}
                                </Link>
                              </CardTitle>
                              <CardDescription className="truncate">
                                {submission.formTitle}
                              </CardDescription>
                            </div>
                            <Badge
                              variant={
                                submission.edited ? "secondary" : "outline"
                              }
                            >
                              {submission.edited ? "Edited" : "Original"}
                            </Badge>
                          </div>
                        </CardHeader>
                        <CardContent className="text-sm text-muted-foreground">
                          {formatDate(submission.submittedAt)}
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                </>
              )}
            </CardContent>
          </Card>

          <div className="grid gap-4">
            <Link href="/admin/form">
              <Card className="cursor-pointer transition-colors hover:border-primary/50">
                <CardHeader>
                  <div className="flex items-center gap-3">
                    <ClipboardList className="size-5 text-primary" />
                    <div>
                      <CardTitle>Forms</CardTitle>
                      <CardDescription>
                        Manage forms and view submissions
                      </CardDescription>
                    </div>
                  </div>
                </CardHeader>
              </Card>
            </Link>
            <Link href="/admin/backend">
              <Card className="cursor-pointer transition-colors hover:border-primary/50">
                <CardHeader>
                  <div className="flex items-center gap-3">
                    <Server className="size-5 text-primary" />
                    <div>
                      <CardTitle>Backend</CardTitle>
                      <CardDescription>
                        Follower API settings and cache
                      </CardDescription>
                    </div>
                  </div>
                </CardHeader>
              </Card>
            </Link>
          </div>
        </div>

        <Card>
          <CardHeader>
            <CardTitle>Form activity</CardTitle>
            <CardDescription>
              Forms ranked by responses in the last 7 days.
            </CardDescription>
          </CardHeader>
          <CardContent>
            {activeForms.length === 0 ? (
              <div className="flex flex-col items-start gap-4 rounded-md border p-6">
                <p className="text-sm text-muted-foreground">
                  No forms found. Create one to start collecting responses.
                </p>
                <form action={createDefaultForm}>
                  <Button type="submit" size="sm">
                    <FilePlus2 data-icon="inline-start" />
                    Create form
                  </Button>
                </form>
              </div>
            ) : (
              <>
                <div className="hidden rounded-md border md:block">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Form</TableHead>
                        <TableHead>Status</TableHead>
                        <TableHead>Today</TableHead>
                        <TableHead>Last 7 days</TableHead>
                        <TableHead>Total</TableHead>
                        <TableHead>Last response</TableHead>
                        <TableHead className="text-right">Actions</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {activeForms.map((form) => (
                        <TableRow key={form.id}>
                          <TableCell>
                            <Link
                              href={`/admin/form/${form.id}`}
                              className="font-medium hover:underline"
                            >
                              {form.title}
                            </Link>
                          </TableCell>
                          <TableCell>
                            <Badge variant={form.isOpen ? "default" : "secondary"}>
                              {form.isOpen ? "Open" : "Closed"}
                            </Badge>
                          </TableCell>
                          <TableCell>{formatNumber(form.responsesToday)}</TableCell>
                          <TableCell>
                            {formatNumber(form.responsesLast7Days)}
                          </TableCell>
                          <TableCell>{formatNumber(form.totalResponses)}</TableCell>
                          <TableCell>{formatDate(form.lastResponseAt)}</TableCell>
                          <TableCell className="text-right">
                            <Button variant="outline" size="sm" asChild>
                              <Link href={`/admin/form/${form.id}/result`}>
                                Responses
                              </Link>
                            </Button>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>
                <div className="flex flex-col gap-3 md:hidden">
                  {activeForms.map((form) => (
                    <Card key={form.id}>
                      <CardHeader>
                        <div className="flex items-start justify-between gap-3">
                          <div className="min-w-0">
                            <CardTitle className="truncate text-base">
                              <Link href={`/admin/form/${form.id}`}>
                                {form.title}
                              </Link>
                            </CardTitle>
                            <CardDescription>
                              Last response: {formatDate(form.lastResponseAt)}
                            </CardDescription>
                          </div>
                          <Badge variant={form.isOpen ? "default" : "secondary"}>
                            {form.isOpen ? "Open" : "Closed"}
                          </Badge>
                        </div>
                      </CardHeader>
                      <CardContent className="flex items-center justify-between gap-3">
                        <div className="text-sm text-muted-foreground">
                          {formatNumber(form.responsesLast7Days)} this week ·{" "}
                          {formatNumber(form.totalResponses)} total
                        </div>
                        <Button variant="outline" size="sm" asChild>
                          <Link href={`/admin/form/${form.id}/result`}>
                            Responses
                          </Link>
                        </Button>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              </>
            )}
          </CardContent>
        </Card>
      </div>
    </AdminShellServer>
  );
}