import type { Metadata } from 'next';
import Link from 'next/link';
import { ConnectorsTable, FreshnessLegend } from '@/components/meta/connectors-table';
import { FreshnessBadge } from '@/components/ui/badges';
import { Container, PageHeader, Section, Stat } from '@/components/ui/section';
import { Unavailable } from '@/components/ui/unavailable';
import { api, safe } from '@/lib/api';
import { fmt1, fmtAgo, fmtDateTime, fmtInt, num } from '@/lib/format';
import { SITE_URL, routes } from '@/lib/site';

export const metadata: Metadata = {
  title: 'Status — platform health and data freshness',
  description: 'Live health of the SatelliteIndex API, database, cache and orbit service, and the freshness of every data connector.',
  alternates: { canonical: `${SITE_URL}/status` },
  openGraph: { title: 'Status | SatelliteIndex', description: 'Platform health and data freshness, live.', url: `${SITE_URL}/status` },
  twitter: { card: 'summary', title: 'Status | SatelliteIndex', description: 'Platform health and data freshness, live.' },
  robots: { index: true, follow: true },
};

export const dynamic = 'force-dynamic';

function ComponentPill({ status }: { status: string }) {
  const ok = status === 'ok' || status === 'fresh';
  const warn = status === 'aging' || status === 'degraded';
  const color = ok ? 'var(--active)' : warn ? 'var(--warn)' : 'var(--danger)';
  return (
    <span className="mono inline-flex items-center gap-1.5 text-xs" style={{ color }}>
      <span className={`dot ${ok ? 'pulse' : ''}`} aria-hidden /> {status}
    </span>
  );
}

export default async function StatusPage() {
  const [health, status] = await Promise.all([safe(api.health()), safe(api.sourcesStatus())]);
  const now = Date.now();
  const comps = health?.components ?? {};
  const overall = health?.status ?? 'unavailable';
  const overallColor = overall === 'ok' ? 'var(--active)' : overall === 'degraded' ? 'var(--warn)' : 'var(--danger)';
  return (
    <Container>
      <PageHeader eyebrow="Operations" title="Status" lede="Two distinct questions, answered separately: is the platform up, and is the data current? A healthy API can still serve aging orbital elements when an upstream feed pauses — that is shown here, not hidden.">
        <p className="mt-4 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-ink-3">
          <span>
            Rendered {fmtDateTime(new Date(now).toISOString())} · <Link href={routes.status()} className="link">Refresh</Link>
          </span>
          <Link href={routes.statusData()} className="link">
            Data-only view →
          </Link>
        </p>
      </PageHeader>

      <Section eyebrow="Platform uptime" title="API and services" className="pt-0">
        {health === null ? (
          <Unavailable what="Health endpoint" />
        ) : (
          <>
            <div className="flex flex-wrap items-baseline gap-x-6 gap-y-2">
              <p className="display text-3xl md:text-5xl" style={{ color: overallColor }}>
                {overall === 'ok' ? 'Operational' : overall}
              </p>
              <p className="mono text-sm text-ink-3">
                version {health.version} · server time {fmtDateTime(health.time)}
              </p>
            </div>
            <div className="mt-6 grid grid-cols-2 gap-x-6 gap-y-5 md:grid-cols-4">
              <div>
                <p className="eyebrow">Database</p>
                <div className="mt-1">
                  <ComponentPill status={String(comps.database?.status ?? 'unavailable')} />
                </div>
                <p className="tnum mt-1 text-sm text-ink-2">{comps.database?.satellites !== undefined ? `${fmtInt(comps.database.satellites as number)} satellites` : 'count unavailable'}</p>
              </div>
              <div>
                <p className="eyebrow">Redis cache</p>
                <div className="mt-1">
                  <ComponentPill status={String(comps.redis?.status ?? 'unavailable')} />
                </div>
                <p className="mt-1 text-sm text-ink-2">response cache, locks, job queue</p>
              </div>
              <div>
                <p className="eyebrow">Orbit service</p>
                <div className="mt-1">
                  <ComponentPill status={String(comps.orbit_service?.status ?? 'unavailable')} />
                </div>
                <p className="tnum mt-1 text-sm text-ink-2">{comps.orbit_service?.objects !== undefined ? `${fmtInt(comps.orbit_service.objects as number)} objects in the propagator` : 'object count unavailable'}</p>
              </div>
              <div>
                <p className="eyebrow">Data</p>
                <div className="mt-1">
                  <ComponentPill status={String(comps.data?.status ?? 'unavailable')} />
                </div>
                <p className="mt-1 text-sm text-ink-2">worst connector freshness</p>
              </div>
            </div>
          </>
        )}
      </Section>

      <Section eyebrow="Data freshness" title="Connectors" action={{ href: routes.sources(), label: 'Sources & licenses' }}>
        {status === null ? (
          <Unavailable what="Connector status" />
        ) : (
          <>
            <div className="mb-6 grid grid-cols-2 gap-x-6 gap-y-5 md:grid-cols-4">
              <Stat label="Latest element epoch" value={<span className="text-xl md:text-2xl">{fmtAgo(status.data.orbit.latest_epoch, now)}</span>} hint={fmtDateTime(status.data.orbit.latest_epoch)} />
              <Stat label="Median element age" value={status.data.orbit.median_element_age_hours === null ? 'Unavailable' : `${fmt1(status.data.orbit.median_element_age_hours)} h`} hint="across the latest element set of every object" />
              <Stat label="Propagator objects" value={fmtInt(status.data.orbit.propagator_objects)} hint="loaded for live positions" />
              <Stat
                label="Connectors fresh"
                value={`${fmtInt(status.data.connectors.filter((c) => c.freshness === 'fresh').length)} / ${fmtInt(status.data.connectors.filter((c) => c.enabled).length)}`}
                hint={
                  <span className="inline-flex flex-wrap gap-2">
                    {status.data.connectors.filter((c) => c.enabled && c.freshness !== 'fresh').map((c) => (
                      <FreshnessBadge key={c.name} status={c.freshness} label={`${c.name}: ${c.freshness}`} />
                    ))}
                    {status.data.connectors.every((c) => !c.enabled || c.freshness === 'fresh') && 'all enabled connectors are fresh'}
                  </span>
                }
              />
            </div>
            <ConnectorsTable connectors={status.data.connectors} now={now} />
            <details className="mt-4 text-sm">
              <summary className="cursor-pointer py-1 text-ink-3 hover:text-ink">Freshness thresholds</summary>
              <div className="mt-2">
                <FreshnessLegend connectors={status.data.connectors.filter((c) => c.enabled)} />
              </div>
            </details>
            <p className="mt-3 text-xs text-ink-3">
              generated {fmtDateTime(status.meta.generated_at)} · request {status.meta.request_id}
              {num(status.data.orbit.median_element_age_hours) !== null && (num(status.data.orbit.median_element_age_hours) ?? 0) > 48 && <span className="ml-2 text-warn">Element sets are older than 48 h on median — live positions carry more uncertainty than usual.</span>}
            </p>
          </>
        )}
      </Section>
    </Container>
  );
}