import type { Metadata } from 'next';
import { Columns } from '@/components/charts/bars';
import { Dot, LiveAgo } from '@/components/ui/live';
import { Container, Note, PageHeader, Stat, StatGrid, Unavailable } from '@/components/ui/section';
import { api, safe } from '@/lib/api';
import { fmtBytes, fmtDate, fmtDays, fmtInt, fmtPct } from '@/lib/format';

export const metadata: Metadata = { title: 'System status', description: 'Public aggregate health of the Company Atlas sensor network: sensors online, observations and events today, success rate and scheduler lag.' };
export const revalidate = 30;

export default async function SystemPage() {
  const [sys, stats, hist] = await Promise.all([safe(api.system()), safe(api.stats()), safe(api.statsHistory(30))]);
  const ok = sys && (sys.success_rate_24h ?? 100) >= 90 && (sys.queue_lag_s ?? 0) < 600;
  return (
    <Container>
      <PageHeader
        eyebrow={
          <>
            <Dot pulse={!!sys} tone={sys ? (ok ? 'live' : 'warning') : 'danger'} /> System
          </>
        }
        title={sys ? (ok ? 'All systems observing' : 'Degraded — observing with reduced throughput') : 'Status unavailable'}
        lede="Aggregate health only (spec §130): no per-sensor or per-domain detail is published here. Individual sensor freshness is shown on each company’s Sources tab."
      />
      {!sys ? (
        <Unavailable what="System health" />
      ) : (
        <StatGrid cols={4}>
          <Stat label="Sensors online" value={fmtInt(sys.sensors_online)} hint={`${fmtInt(sys.sensors_failing)} failing`} />
          <Stat label="Observations today" value={fmtInt(sys.observations_today)} hint={sys.fetch_per_min !== null ? `${fmtInt(sys.fetch_per_min)} fetches / min` : undefined} />
          <Stat label="Events today" value={fmtInt(sys.events_today)} hint={`${fmtInt(sys.countries_covered)} countries covered`} />
          <Stat label="Success rate 24 h" value={fmtPct(sys.success_rate_24h, 1)} hint={sys.queue_lag_s !== null ? `queue lag ${fmtInt(sys.queue_lag_s)} s` : undefined} />
        </StatGrid>
      )}
      {sys && (
        <p className="mt-3 text-xs text-ink-3">
          Scheduler last tick <LiveAgo at={sys.scheduler_last_tick_at} tick={5000} /> · this page refreshes every 30 s on the server.
        </p>
      )}
      {stats && (
        <div className="mt-10">
          <p className="eyebrow mb-3">Dataset</p>
          <StatGrid cols={4}>
            <Stat label="Dataset age" value={fmtDays(stats.dataset_age_days)} hint={stats.dataset_started_at ? `since ${fmtDate(stats.dataset_started_at)}` : undefined} size="sm" />
            <Stat label="Companies · sensors" value={`${fmtInt(stats.companies)} · ${fmtInt(stats.sensors)}`} size="sm" />
            <Stat label="Observations · changes · events" value={`${fmtInt(stats.observations)} · ${fmtInt(stats.changes)} · ${fmtInt(stats.events)}`} size="sm" />
            <Stat label="Archive" value={fmtBytes(stats.archive?.bytes)} hint={`${fmtInt(stats.archive?.objects)} objects`} size="sm" />
          </StatGrid>
        </div>
      )}
      {hist && hist.items.length > 1 && (
        <div className="mt-10 grid gap-6 md:grid-cols-3">
          {(
            [
              ['observations', 'Observations / day'],
              ['changes', 'Changes / day'],
              ['events', 'Events / day'],
            ] as const
          ).map(([k, label]) => (
            <div key={k}>
              <p className="eyebrow">{label} · 30 d</p>
              <Columns values={hist.items.map((h) => h[k])} width={300} height={48} className="mt-2 h-auto w-full" ariaLabel={label} />
              <p className="tnum mt-1 text-xs text-ink-3">latest {fmtInt(hist.items[hist.items.length - 1]?.[k])}</p>
            </div>
          ))}
        </div>
      )}
      <Note className="mt-10">Each service exposes /health, /ready and /metrics internally; this page summarises them. “Last successfully checked” timestamps on company pages are the honest freshness signal for any single fact.</Note>
    </Container>
  );
}