import type { Metadata } from "next";
import Link from "next/link";
import { PageList } from "@/components/features";
import { Card, CardHeader, EmptyState, PageHeader, StatCard, StatusBadge, Table, Td, Th, Unavailable } from "@/components/ui";
import { requireDashboard } from "@/lib/authz/guard";
import { getAdminDashboard } from "@/lib/data/admin";
import { formatBytes, formatDateTime } from "@/lib/utils";

export const metadata: Metadata = { title: "Admin dashboard" };
export const dynamic = "force-dynamic";

export default async function AdminDashboard() {
  const ctx = await requireDashboard("admin");
  const d = await getAdminDashboard(ctx);

  return (
    <>
      <PageHeader title="Admin dashboard" description="Your websites, content and requests at a glance." />

      <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
        <StatCard label="Websites" value={d.sites.length} />
        <StatCard label="Published pages" value={d.pages.published} />
        <StatCard label="Drafts" value={d.pages.draft} />
        <StatCard label="Awaiting approval" value={d.pages.inReview} tone={d.pages.inReview > 0 ? "warning" : "default"} />
        <StatCard label="Scheduled" value={d.pages.scheduled} />
        <StatCard label="Media" value={formatBytes(d.media.bytes)} hint={`${d.media.files} files`} />
        <StatCard label="New enquiries" value={d.newSubmissions} />
        <StatCard label="Open maintenance requests" value={d.openTickets} />
      </div>

      <div className="mt-6 grid gap-4 lg:grid-cols-2">
        <Card>
          <CardHeader title="Assigned websites" />
          {d.sites.length === 0 ? (
            <EmptyState title="No websites yet" description="Websites you administer will be listed here." />
          ) : (
            <Table>
              <thead><tr><Th>Website</Th><Th>Domain</Th><Th>Status</Th></tr></thead>
              <tbody>
                {d.sites.map((s) => (
                  <tr key={s.id}>
                    <Td className="font-medium">{s.name}</Td>
                    <Td>{s.domains[0]?.hostname ?? <span className="text-muted-foreground">none</span>}</Td>
                    <Td><StatusBadge value={s.status} /></Td>
                  </tr>
                ))}
              </tbody>
            </Table>
          )}
        </Card>

        <Card>
          <CardHeader title="Recent edits" action={<Link className="text-xs text-primary hover:underline" href="/dashboard/pages">All pages</Link>} />
          <PageList pages={d.recentEdits} emptyTitle="No pages yet" />
        </Card>

        <Card>
          <CardHeader title="Upcoming events" />
          {d.upcomingEvents.length === 0 ? (
            <EmptyState title="No upcoming events" description="Published events with a future start date appear here." />
          ) : (
            <ul className="divide-y divide-border">
              {d.upcomingEvents.map((e) => (
                <li key={e.id} className="px-4 py-2.5 text-sm">
                  <p className="font-medium">{e.name}</p>
                  <p className="text-xs text-muted-foreground">{formatDateTime(e.startsAt)} · {e.venue ?? "Venue TBC"} · {e.site.name}</p>
                </li>
              ))}
            </ul>
          )}
        </Card>

        <Card>
          <CardHeader title="Website health" />
          <Unavailable>Uptime monitoring is not configured. Health status will appear here once a monitoring integration is connected.</Unavailable>
        </Card>
      </div>
    </>
  );
}