import type { Metadata } from 'next';
import Link from 'next/link';
import { fmtDuration, fmtInterval, fmtUntil } from '@/components/meta/connectors-table';
import { ATTRIBUTION, FIELD_PRIORITY } from '@/components/meta/legal';
import { Callout } from '@/components/meta/prose';
import { FreshnessBadge } from '@/components/ui/badges';
import { Container, PageHeader, Section } from '@/components/ui/section';
import { Unavailable } from '@/components/ui/unavailable';
import { api, safe } from '@/lib/api';
import { fmtAgo, fmtDateTime, fmtInt } from '@/lib/format';
import { SITE_URL, routes } from '@/lib/site';
import type { SourceRow } from '@/lib/types';

export const metadata: Metadata = {
  title: 'Data sources — provenance, licenses and freshness',
  description: 'Every upstream source behind SatelliteIndex: CelesTrak GP and SATCAT today, planned government and scientific catalogs, with license, attribution, sync schedule and freshness.',
  alternates: { canonical: `${SITE_URL}/sources` },
  openGraph: { title: 'Data sources | SatelliteIndex', description: 'Provenance, licenses, attribution and live freshness of every source feeding SatelliteIndex.', url: `${SITE_URL}/sources` },
  twitter: { card: 'summary', title: 'Data sources | SatelliteIndex', description: 'Provenance, licenses, attribution and live freshness of every source feeding SatelliteIndex.' },
};

const AUTHORITY_LABEL: Record<string, string> = { government: 'Government', intergovernmental: 'Intergovernmental', scientific: 'Scientific', secondary: 'Derived / secondary', commercial: 'Commercial' };
const AUTHORITY_TONE: Record<string, string> = { government: 'var(--accent-2)', intergovernmental: 'var(--accent-2)', scientific: 'var(--accent)', secondary: 'var(--ink-3)', commercial: 'var(--warn)' };

function AuthorityBadge({ type, official }: { type: string | null; official: boolean }) {
  const t = type ?? 'unknown';
  const color = AUTHORITY_TONE[t] ?? 'var(--inactive)';
  return (
    <span className="inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-[11px] font-medium" style={{ color, borderColor: `color-mix(in oklab, ${color} 35%, transparent)`, background: `color-mix(in oklab, ${color} 10%, transparent)` }}>
      {AUTHORITY_LABEL[t] ?? t}
      {official && <span className="text-ink-3">· official</span>}
    </span>
  );
}

function SourceCard({ s, now }: { s: SourceRow; now: number }) {
  const planned = !s.enabled;
  return (
    <article id={s.id} className="scroll-mt-[calc(var(--header-h)+1rem)] border-t border-rule py-6 md:py-8">
      <div className="grid gap-6 md:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)]">
        <div className="min-w-0">
          <div className="flex flex-wrap items-center gap-2">
            <h2 className="text-lg font-semibold tracking-tight md:text-xl">{s.name}</h2>
            <AuthorityBadge type={s.authority_type} official={s.official} />
            <span className="rounded border border-rule px-1.5 py-0.5 text-[11px] uppercase tracking-wider text-ink-3">{s.type}</span>
            {planned ? <span className="rounded border border-warn/40 bg-warn-soft px-1.5 py-0.5 text-[11px] text-warn">Planned connector</span> : <FreshnessBadge status={s.freshness} />}
          </div>
          <dl className="mt-3 grid gap-2 text-sm sm:grid-cols-[120px_minmax(0,1fr)]">
            <dt className="text-xs uppercase tracking-wider text-ink-3 sm:pt-0.5">Website</dt>
            <dd className="min-w-0 break-all">
              {s.base_url ? (
                <a href={s.base_url} rel="noopener noreferrer" target="_blank" className="link">
                  {s.base_url.replace(/^https?:\/\//, '')}
                </a>
              ) : (
                '—'
              )}
            </dd>
            <dt className="text-xs uppercase tracking-wider text-ink-3 sm:pt-0.5">License</dt>
            <dd className="text-ink-2">{s.license ?? 'Unavailable'}</dd>
            <dt className="text-xs uppercase tracking-wider text-ink-3 sm:pt-0.5">Attribution</dt>
            <dd className="text-ink-2">
              {s.attribution_text ? <q className="italic">{s.attribution_text}</q> : '—'}
              {s.attribution_required && <span className="ml-2 text-xs text-ink-3">(required)</span>}
            </dd>
            <dt className="text-xs uppercase tracking-wider text-ink-3 sm:pt-0.5">Cadence</dt>
            <dd className="text-ink-2">{s.update_frequency_seconds ? `Upstream refresh about every ${fmtInterval(s.update_frequency_seconds)}` : 'On demand (derived after each ingestion)'}</dd>
            <dt className="text-xs uppercase tracking-wider text-ink-3 sm:pt-0.5">Priority</dt>
            <dd className="tnum text-ink-2">{s.priority}</dd>
          </dl>
          {planned && <p className="mt-3 text-sm text-ink-3">Registered in the source catalog with its license and attribution, but no connector is running yet. Nothing on the site is sourced from it today.</p>}
        </div>

        <div className="min-w-0">
          <p className="eyebrow">Connectors</p>
          {!s.connectors || s.connectors.length === 0 ? (
            <p className="mt-2 text-sm text-ink-3">No connector registered.</p>
          ) : (
            <ul className="mt-2 divide-y divide-rule border-y border-rule">
              {s.connectors.map((c) => (
                <li key={c.name} className="py-2.5">
                  <div className="flex flex-wrap items-center justify-between gap-2">
                    <span className="mono text-sm text-ink">{c.name}</span>
                    <span className="text-xs text-ink-3">every {fmtInterval(c.interval_seconds)}</span>
                  </div>
                  {c.description && <p className="mt-0.5 text-xs text-ink-3">{c.description}</p>}
                  <dl className="mt-1.5 grid grid-cols-2 gap-x-3 gap-y-0.5 text-xs sm:grid-cols-3">
                    <dt className="text-ink-3">Last sync</dt>
                    <dd className="sm:col-span-2" title={fmtDateTime(c.last_success_at)}>
                      {fmtAgo(c.last_success_at, now)}
                    </dd>
                    <dt className="text-ink-3">Next run</dt>
                    <dd className="sm:col-span-2">{c.enabled ? fmtUntil(c.next_run_at, now) : 'disabled'}</dd>
                    <dt className="text-ink-3">Duration</dt>
                    <dd className="sm:col-span-2">{fmtDuration(c.last_duration_ms)}</dd>
                    {(c.consecutive_failures > 0 || c.circuit_open_until) && (
                      <>
                        <dt className="text-ink-3">Failures</dt>
                        <dd className="text-warn sm:col-span-2">
                          {fmtInt(c.consecutive_failures)} consecutive{c.circuit_open_until ? ` · circuit open until ${fmtDateTime(c.circuit_open_until)}` : ''}
                        </dd>
                      </>
                    )}
                  </dl>
                </li>
              ))}
            </ul>
          )}
          <div className="mt-4 grid grid-cols-3 gap-3">
            <div>
              <p className="eyebrow">Raw snapshots</p>
              <p className="tnum mt-0.5 text-lg font-semibold">{fmtInt(s.raw_snapshots)}</p>
            </div>
            <div>
              <p className="eyebrow">Provenance rows</p>
              <p className="tnum mt-0.5 text-lg font-semibold">{fmtInt(s.provenance_rows)}</p>
            </div>
            <div>
              <p className="eyebrow">Last snapshot</p>
              <p className="mt-0.5 text-sm" title={fmtDateTime(s.last_snapshot_at)}>
                {fmtAgo(s.last_snapshot_at, now)}
              </p>
            </div>
          </div>
        </div>
      </div>
    </article>
  );
}

export default async function SourcesPage() {
  const res = await safe(api.sources());
  const now = Date.now();
  const sources = res?.data ?? null;
  const active = sources?.filter((s) => s.enabled) ?? [];
  const planned = sources?.filter((s) => !s.enabled) ?? [];
  return (
    <Container>
      <PageHeader eyebrow="Transparency" title="Data sources" lede="Where every number on SatelliteIndex comes from: the upstream catalogs, their licenses and attribution requirements, how often we sync them and how fresh each feed is right now. Nothing is presented without provenance.">
        <p className="mt-4 text-sm text-ink-3">
          Live connector health: <Link href={routes.statusData()} className="link">/status/data</Link> · How data is processed: <Link href={routes.methodology()} className="link">/methodology</Link>
          {res && <span className="ml-2">· generated {fmtDateTime(res.meta.generated_at)}</span>}
        </p>
      </PageHeader>

      {sources === null ? (
        <Unavailable what="Source catalog" />
      ) : (
        <>
          <Section eyebrow="Active" title={`${active.length} source${active.length === 1 ? '' : 's'} feeding the index`} className="pt-0">
            <div>
              {active.map((s) => (
                <SourceCard key={s.id} s={s} now={now} />
              ))}
            </div>
          </Section>

          <Section eyebrow="Source priority" title="Which source wins for each field">
            <p className="max-w-3xl text-sm leading-relaxed text-ink-2">
              Sources are ordered by priority; a higher-priority source overrides a lower one for the fields it covers, and every accepted value is recorded in <code className="mono rounded bg-plane-2 px-1.5 py-0.5 text-[13px]">field_provenance</code> with the source and observation time. Objects that disappear from a feed are never deleted.
            </p>
            <div className="mt-4 overflow-x-auto">
              <table className="data-table stack md:min-w-[760px]">
                <thead>
                  <tr>
                    <th>Field</th>
                    <th>Source</th>
                    <th>Note</th>
                  </tr>
                </thead>
                <tbody>
                  {FIELD_PRIORITY.map((f) => (
                    <tr key={f.field}>
                      <td className="primary text-sm text-ink">{f.field}</td>
                      <td data-label="Source" className="text-sm">
                        <a href={`#${f.sourceId}`} className="link">
                          {f.source}
                        </a>
                      </td>
                      <td data-label="Note" className="text-sm text-ink-2">
                        {f.note}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </Section>

          {planned.length > 0 && (
            <Section eyebrow="Planned" title={`${planned.length} planned connectors`}>
              <Callout className="mt-0 mb-2">These catalogs are registered with their license and attribution so the schema is ready for them, but they are not ingested yet. They are listed here for honesty about coverage — no field on the site is currently attributed to them.</Callout>
              {planned.map((s) => (
                <SourceCard key={s.id} s={s} now={now} />
              ))}
            </Section>
          )}

          <Section eyebrow="Attribution" title="How we credit sources">
            <p className="max-w-3xl text-sm leading-relaxed text-ink-2">{ATTRIBUTION}</p>
            <p className="mt-3 max-w-3xl text-sm leading-relaxed text-ink-3">If you reuse data from this site or its API, carry the attribution texts above forward — see the <Link href={routes.developers()} className="link">API page</Link>.</p>
          </Section>
        </>
      )}
    </Container>
  );
}