import { ArrowRight, Code2 } from 'lucide-react';
import Link from 'next/link';
import { FreshnessBadge } from '@/components/ui/badges';
import { Section } from '@/components/ui/section';
import { Unavailable } from '@/components/ui/unavailable';
import { fmtAgo } from '@/lib/format';
import { routes } from '@/lib/site';
import type { HomePayload } from '@/lib/types';

type Source = HomePayload['sources'][number];

/** Freshness from the connector's own cadence: ≤ 2 intervals fresh, ≤ 6 aging, else stale. */
export function freshnessOf(s: Source, now = Date.now()): 'fresh' | 'aging' | 'stale' | 'unavailable' | 'not_enabled' {
  if (!s.enabled) return 'not_enabled';
  if (!s.last_success_at) return 'unavailable';
  const age = (now - new Date(s.last_success_at).getTime()) / 1000;
  const iv = s.interval_seconds ?? 86_400;
  if (age <= iv * 2) return 'fresh';
  if (age <= iv * 6) return 'aging';
  return 'stale';
}

export function DataSources({ sources }: { sources: HomePayload['sources'] }) {
  const grouped = new Map<string, Source[]>();
  for (const s of sources) grouped.set(s.id, [...(grouped.get(s.id) ?? []), s]);
  const attributions = [...new Set(sources.map((s) => s.attribution_text).filter((t): t is string => Boolean(t)))];
  return (
    <Section eyebrow="Sources" title="Where the data comes from" action={{ href: routes.sources(), label: 'Sources & status' }} className="py-0">
      {grouped.size === 0 ? (
        <Unavailable what="Source status" />
      ) : (
        <ul className="divide-y divide-rule border-t border-rule">
          {[...grouped.entries()].map(([id, conns]) => {
            const first = conns[0]!;
            return (
              <li key={id} className="grid gap-2 py-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1.6fr)] md:gap-6">
                <div className="min-w-0">
                  <p className="flex items-center gap-2 text-[15px] text-ink">
                    {first.name}
                    <span className="rounded border border-rule px-1.5 py-0.5 text-2xs text-ink-3">{first.official ? 'Official' : 'Public'}</span>
                  </p>
                  {first.attribution_text && <p className="mt-0.5 text-2xs text-ink-3">{first.attribution_text}</p>}
                </div>
                <ul className="space-y-1">
                  {conns.map((c) => (
                    <li key={c.connector ?? c.id} className="flex flex-wrap items-center justify-between gap-x-3 gap-y-0.5 text-xs">
                      <span className="mono text-ink-2">{c.connector ?? '—'}</span>
                      <span className="flex items-center gap-3">
                        <span className="tnum text-ink-3">updated {fmtAgo(c.last_success_at)}</span>
                        <FreshnessBadge status={freshnessOf(c)} />
                      </span>
                    </li>
                  ))}
                </ul>
              </li>
            );
          })}
        </ul>
      )}
      {attributions.length > 0 && <p className="mt-4 text-2xs leading-relaxed text-ink-3">{attributions.join(' ')} Derived classifications follow the published <Link href={routes.methodology()} className="link">methodology</Link>.</p>}
    </Section>
  );
}

export function ApiTeaser() {
  return (
    <Section eyebrow="Developers" title="Everything here is an API" className="py-0">
      <div className="grid gap-6 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
        <p className="max-w-xl text-sm leading-relaxed text-ink-2">
          Every number on this page is served by the public JSON API — catalogue, search, live SGP4 positions, constellations, operators,
          launches, debris, reentries, events and the statistics snapshot. Interactive OpenAPI docs at{' '}
          <code className="mono rounded bg-plane-2 px-1.5 py-0.5 text-xs text-ink">/api/v1/docs</code>.
        </p>
        <div className="mono rounded-lg border border-rule bg-plane/60 p-4 text-xs leading-6 text-ink-2">
          <p className="text-ink-3"># live position of the ISS</p>
          <p>GET /api/v1/satellites/25544/live</p>
          <p className="mt-2 text-ink-3"># all tracked objects, two SGP4 epochs</p>
          <p>GET /api/v1/orbit/positions</p>
          <p className="mt-2 text-ink-3"># full-text search across entities</p>
          <p>GET /api/v1/search?q=starlink</p>
        </div>
      </div>
      <Link href={routes.developers()} className="mt-4 inline-flex h-11 items-center gap-2 rounded-md border border-rule-strong px-4 text-sm text-ink hover:bg-plane-2">
        <Code2 className="size-4" aria-hidden /> API documentation <ArrowRight className="size-4" aria-hidden />
      </Link>
    </Section>
  );
}