import Link from "next/link";
import { requireAdmin } from "@/lib/session";
import { internalApi, InternalApiError } from "@/lib/api";
import { getEnvPresence, getFeatureFlags, getIncidents, getTableCounts } from "@/lib/queries/admin";
import { formatNumber, titleCase } from "@/lib/format";
import { PageHeader } from "@/components/ui/page-header";
import { Alert } from "@/components/ui/alert";
import { Badge, StatusBadge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Table, TableBody, TableCell, TableEmpty, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { DateCell, KV, Mono, Panel, numCell } from "@/components/admin/primitives";
import { FlagSwitch } from "@/components/admin/flag-controls";
import { NewIncidentDialog, ResolveIncidentButton } from "@/components/admin/incident-controls";

export const dynamic = "force-dynamic";

async function safe<T>(fn: () => Promise<T>): Promise<{ ok: true; value: T } | { ok: false; error: string }> {
  try {
    return { ok: true, value: await fn() };
  } catch (e) {
    return { ok: false, error: e instanceof InternalApiError ? `${e.code}: ${e.message}` : (e as Error).message };
  }
}

export default async function AdminSystemPage() {
  await requireAdmin();
  const [health, ready, dbStats, flags, incidents] = await Promise.all([safe(() => internalApi.health()), safe(() => internalApi.ready()), safe(getTableCounts), getFeatureFlags(), getIncidents(50)]);
  const env = getEnvPresence();
  const groups = Array.from(new Set(env.map((e) => e.group)));
  const openIncidents = incidents.filter((i) => !i.resolvedAt).length;

  return (
    <>
      <PageHeader eyebrow="Operations" title="System" description="Service health, database footprint, environment presence, feature flags and public status incidents." actions={<NewIncidentDialog />} />

      <div className="grid gap-6 lg:grid-cols-2">
        <Panel title="API service" description="GET /health and /ready on the Fastify service, called server-side with the internal token.">
          {health.ok ? (
            <KV
              cols={2}
              items={[
                { label: "Health", value: <StatusBadge status={health.value.status === "ok" ? "healthy" : health.value.status} /> },
                { label: "Version", value: health.value.version, mono: true },
                { label: "Readiness", value: ready.ok ? <StatusBadge status={ready.value.status === "ok" || ready.value.status === "ready" ? "healthy" : ready.value.status} /> : <StatusBadge status="down" /> },
                { label: "Available networks", value: ready.ok && ready.value.available_networks.length ? ready.value.available_networks.join(", ") : "none" },
                {
                  label: "Readiness checks",
                  span: true,
                  value: ready.ok ? (
                    Object.keys(ready.value.checks).length ? (
                      <ul className="flex flex-wrap gap-1.5">
                        {Object.entries(ready.value.checks).map(([k, v]) => (
                          <li key={k}>
                            <Badge variant={v ? "success" : "danger"} dot>
                              {k}
                            </Badge>
                          </li>
                        ))}
                      </ul>
                    ) : (
                      <span className="text-fg-muted">no check details (degraded)</span>
                    )
                  ) : (
                    <span className="text-danger">{ready.error}</span>
                  ),
                },
              ]}
            />
          ) : (
            <Alert variant="danger" title="API unreachable">
              {health.error}
            </Alert>
          )}
        </Panel>

        <Panel title="Database" description={dbStats.ok ? `${dbStats.value.pgVersion} · ${dbStats.value.dbSize}` : undefined} flush>
          {dbStats.ok ? (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Table</TableHead>
                  <TableHead className="text-right">Rows</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {Object.entries(dbStats.value.counts).map(([t, n]) => (
                  <TableRow key={t}>
                    <TableCell>
                      <Mono>{t}</Mono>
                    </TableCell>
                    <TableCell className={numCell}>{formatNumber(n)}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          ) : (
            <div className="p-4">
              <Alert variant="danger" title="Database query failed">
                {dbStats.error}
              </Alert>
            </div>
          )}
        </Panel>
      </div>

      <Panel title="Environment presence" description="Whether each variable is set in the web process. Values are never read or displayed. The API service has its own environment — provider credentials must be set there too." className="mt-6">
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {groups.map((g) => (
            <div key={g}>
              <h3 className="mb-1.5 text-[12px] font-semibold uppercase tracking-wide text-fg-subtle">{g}</h3>
              <ul className="space-y-1">
                {env
                  .filter((e) => e.group === g)
                  .map((e) => (
                    <li key={e.key} className="flex items-center justify-between gap-2 text-[12.5px]">
                      <Mono>{e.key}</Mono>
                      {e.present ? <Badge variant="success" dot>set</Badge> : <Badge variant="outline">missing</Badge>}
                    </li>
                  ))}
              </ul>
            </div>
          ))}
        </div>
      </Panel>

      <div className="mt-6 grid gap-6 xl:grid-cols-2">
        <Panel title="Feature flags" right={<Button asChild variant="ghost" size="xs"><Link href="/admin/flags">Manage →</Link></Button>} flush>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Key</TableHead>
                <TableHead>Description</TableHead>
                <TableHead>Targeting</TableHead>
                <TableHead>Enabled</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {flags.length === 0 ? (
                <TableEmpty colSpan={4}>
                  No flags. <Link href="/admin/flags" className="text-accent hover:underline">Create one</Link>.
                </TableEmpty>
              ) : (
                flags.map((f) => (
                  <TableRow key={f.key}>
                    <TableCell>
                      <Mono>{f.key}</Mono>
                    </TableCell>
                    <TableCell className="max-w-[260px] truncate text-fg-muted">{f.description ?? "—"}</TableCell>
                    <TableCell className="text-[12px] text-fg-muted">
                      {f.plans?.length ? `plans: ${f.plans.join(", ")}` : null}
                      {f.plans?.length && f.organizationIds?.length ? " · " : null}
                      {f.organizationIds?.length ? `${f.organizationIds.length} org(s)` : null}
                      {!f.plans?.length && !f.organizationIds?.length ? "everyone" : null}
                    </TableCell>
                    <TableCell>
                      <FlagSwitch flagKey={f.key} enabled={f.enabled} />
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </Panel>

        <Panel
          title={
            <span className="flex items-center gap-2">
              Status incidents {openIncidents ? <Badge variant="danger" dot>{openIncidents} open</Badge> : <Badge variant="success" dot>all resolved</Badge>}
            </span>
          }
          description="Shown on the public /status page. Write for customers; never name upstream providers."
          flush
        >
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Started</TableHead>
                <TableHead>Component</TableHead>
                <TableHead>Severity</TableHead>
                <TableHead>Title</TableHead>
                <TableHead>Status</TableHead>
                <TableHead></TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {incidents.length === 0 ? (
                <TableEmpty colSpan={6}>No incidents recorded. The status page shows all systems operational.</TableEmpty>
              ) : (
                incidents.map((i) => (
                  <TableRow key={i.id} className={i.resolvedAt ? "opacity-70" : undefined}>
                    <TableCell>
                      <DateCell value={i.startedAt} relative={false} />
                    </TableCell>
                    <TableCell>
                      <Badge variant="outline">{titleCase(i.component)}</Badge>
                    </TableCell>
                    <TableCell>
                      <Badge variant={i.severity === "critical" || i.severity === "major" ? "danger" : i.severity === "maintenance" ? "info" : "warning"}>{i.severity}</Badge>
                    </TableCell>
                    <TableCell className="max-w-[280px]">
                      <div className="truncate font-medium" title={i.title}>
                        {i.title}
                      </div>
                      {i.body ? (
                        <div className="truncate text-[12px] text-fg-muted" title={i.body}>
                          {i.body}
                        </div>
                      ) : null}
                    </TableCell>
                    <TableCell>
                      {i.resolvedAt ? (
                        <span className="text-[12px] text-fg-muted">
                          resolved <DateCell value={i.resolvedAt} />
                        </span>
                      ) : (
                        <Badge variant="danger" dot>
                          open
                        </Badge>
                      )}
                    </TableCell>
                    <TableCell className="text-right">
                      <ResolveIncidentButton id={i.id} resolved={Boolean(i.resolvedAt)} />
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </Panel>
      </div>
    </>
  );
}