import Link from 'next/link';
import { Callout, DocSection, Prose } from '@/components/meta/prose';
import { Unavailable } from '@/components/ui/unavailable';
import { fmtDateTime, fmtInt } from '@/lib/format';
import { routes } from '@/lib/site';
import type { MethodologyPayload } from '@/lib/types';

/** Data-driven sections of /methodology rendered from `api.methodology()`: constellation rules, owner codes, metric definitions. */

export function ConstellationRulesSection({ rules }: { rules: MethodologyPayload['constellation_rules'] | null }) {
  return (
    <DocSection id="constellations" eyebrow="07" title="Constellation membership">
      <Prose>
        <p>
          Membership is assigned in two tiers. <strong>CelesTrak GP groups first</strong>: an object listed in a thematic group mapped to a constellation (for example <code>starlink</code>, <code>oneweb</code>, <code>kuiper</code>) is a source-backed member (<em>method: celestrak_group</em>). <strong>Documented name patterns second</strong>: payloads not covered by a group are matched against the regular expressions of the curated registry (<em>method: name_pattern</em>, derived). Membership history is kept with <code>since</code>/<code>until</code> dates; a member is never removed just because a group response was short.
        </p>
        <p>The table below is the live registry — the exact patterns and groups the classifier uses right now.</p>
      </Prose>
      {rules === null ? (
        <Unavailable what="Constellation rules" className="mt-4" />
      ) : (
        <div className="mt-4 overflow-x-auto">
          <table className="data-table stack md:min-w-[720px]">
            <thead>
              <tr>
                <th>Constellation</th>
                <th>Service</th>
                <th>CelesTrak groups</th>
                <th>Name patterns</th>
              </tr>
            </thead>
            <tbody>
              {rules.map((r) => (
                <tr key={r.slug}>
                  <td className="primary">
                    <Link href={routes.constellation(r.slug)} className="text-sm text-ink hover:text-accent">
                      {r.name}
                    </Link>
                  </td>
                  <td data-label="Service" className="text-sm text-ink-2">
                    {r.service_type ?? '—'}
                  </td>
                  <td data-label="CelesTrak groups">
                    {r.celestrak_groups.length === 0 ? (
                      <span className="text-xs text-ink-3">none</span>
                    ) : (
                      <span className="flex flex-wrap gap-1">
                        {r.celestrak_groups.map((g) => (
                          <code key={g} className="mono rounded bg-accent-soft px-1.5 py-0.5 text-[11px] text-accent">
                            {g}
                          </code>
                        ))}
                      </span>
                    )}
                  </td>
                  <td data-label="Name patterns">
                    {r.match_patterns.length === 0 ? (
                      <span className="text-xs text-ink-3">none</span>
                    ) : (
                      <span className="flex flex-wrap gap-1">
                        {r.match_patterns.map((p) => (
                          <code key={p} className="mono rounded bg-plane-2 px-1.5 py-0.5 text-[11px] text-ink">
                            {p}
                          </code>
                        ))}
                      </span>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          <p className="mt-2 text-xs text-ink-3">{fmtInt(rules.length)} constellations in the registry.</p>
        </div>
      )}
    </DocSection>
  );
}

const KIND_LABELS: Record<string, string> = { country: 'Countries', organization: 'Organizations', joint: 'Joint programmes', intergovernmental: 'Intergovernmental', agency: 'Agencies', unknown: 'Unknown / unassigned' };
const KIND_ORDER = ['country', 'intergovernmental', 'agency', 'organization', 'joint', 'unknown'];

export function OwnerCodesSection({ owners }: { owners: MethodologyPayload['owner_codes'] | null }) {
  const groups = new Map<string, MethodologyPayload['owner_codes']>();
  for (const o of owners ?? []) {
    const list = groups.get(o.kind) ?? [];
    list.push(o);
    groups.set(o.kind, list);
  }
  const kinds = [...groups.keys()].sort((a, b) => (KIND_ORDER.indexOf(a) === -1 ? 99 : KIND_ORDER.indexOf(a)) - (KIND_ORDER.indexOf(b) === -1 ? 99 : KIND_ORDER.indexOf(b)));
  return (
    <DocSection id="owner-codes" eyebrow="10" title="Owner codes">
      <Prose>
        <p>
          SATCAT identifies the responsible party of every object with a short <strong>owner code</strong>. We map each code to a country (ISO 3166) and, when the owner is an organization, agency or intergovernmental body, to an operator entity. Joint programmes map to several countries&rsquo; programmes but a single primary country when one is defined. Unmapped codes raise an <code>UNKNOWN_COUNTRY</code> quality flag instead of guessing.
        </p>
      </Prose>
      {owners === null ? (
        <Unavailable what="Owner codes" className="mt-4" />
      ) : (
        <div className="mt-4 space-y-2">
          {kinds.map((kind) => {
            const rows = groups.get(kind) ?? [];
            return (
              <details key={kind} className="group rounded-md border border-rule" open={kind === 'intergovernmental'}>
                <summary className="flex min-h-11 cursor-pointer list-none items-center justify-between gap-3 px-3 text-sm hover:bg-plane-2">
                  <span className="font-medium">{KIND_LABELS[kind] ?? kind}</span>
                  <span className="tnum text-xs text-ink-3">{fmtInt(rows.length)} codes</span>
                </summary>
                <div className="overflow-x-auto border-t border-rule">
                  <table className="data-table">
                    <thead>
                      <tr>
                        <th>Code</th>
                        <th>Name</th>
                        <th>Country</th>
                      </tr>
                    </thead>
                    <tbody>
                      {rows.map((o) => (
                        <tr key={o.code}>
                          <td className="mono text-sm">{o.code}</td>
                          <td className="text-sm text-ink-2">{o.name}</td>
                          <td className="mono text-xs text-ink-3">{o.country_code ?? '—'}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </details>
            );
          })}
          <p className="text-xs text-ink-3">{fmtInt(owners.length)} owner codes mapped.</p>
        </div>
      )}
    </DocSection>
  );
}

export function MetricsSection({ metrics }: { metrics: MethodologyPayload['metrics'] | null }) {
  return (
    <DocSection id="metrics" eyebrow="11" title="Derived metrics">
      <Prose>
        <p>
          Every derived value on the site points at one of these definitions. The version changes whenever the rule changes; the inputs list the exact canonical columns the rule reads. None of them is a safety metric.
        </p>
      </Prose>
      {metrics === null ? (
        <Unavailable what="Metric definitions" className="mt-4" />
      ) : metrics.length === 0 ? (
        <Callout>No metric definitions are published yet.</Callout>
      ) : (
        <div className="mt-4 divide-y divide-rule border-y border-rule">
          {metrics.map((m) => (
            <article key={m.key} id={`metric-${m.key}`} className="scroll-mt-[calc(var(--header-h)+1rem)] grid gap-3 py-5 md:grid-cols-[220px_minmax(0,1fr)]">
              <div className="min-w-0">
                <h3 className="text-base font-semibold text-ink">{m.name}</h3>
                <p className="mono mt-1 text-xs text-ink-3">
                  {m.key} · v{m.version}
                </p>
                <p className="mt-1 text-xs text-ink-3" title={fmtDateTime(m.updated_at)}>
                  updated {fmtDateTime(m.updated_at)}
                </p>
              </div>
              <div className="min-w-0">
                <p className="text-sm leading-relaxed text-ink-2">{m.methodology}</p>
                <p className="eyebrow mt-3">Inputs</p>
                <ul className="mt-1 flex flex-wrap gap-1">
                  {m.inputs.map((i) => (
                    <li key={i}>
                      <code className="mono rounded bg-plane-2 px-1.5 py-0.5 text-[11px] text-ink">{i}</code>
                    </li>
                  ))}
                </ul>
              </div>
            </article>
          ))}
        </div>
      )}
    </DocSection>
  );
}