import type { Metadata } from 'next';
import { ConfidenceBadge, EventTypeBadge, SignificanceBadge } from '@/components/ui/badges';
import { Container, Note, PageHeader, Section, Unavailable } from '@/components/ui/section';
import { api, safe } from '@/lib/api';
import { METRIC_LABELS } from '@/lib/site';

export const metadata: Metadata = { title: 'Methodology', description: 'How Company Atlas computes Activity Score, Hiring Momentum, Product Velocity, AI Adoption, the Corporate Change Index and significance bands — with formula versions and inputs.' };
export const revalidate = 3600;

export default async function MethodologyPage() {
  const m = await safe(api.methodology());
  const bands = Array.isArray(m?.significance_bands) ? m.significance_bands : m?.significance_bands ? Object.entries(m.significance_bands).map(([label, [min, max]]) => ({ label, min, max })) : [];
  const labels: ReadonlyArray<readonly [string, string]> = m?.confidence_labels
    ? Array.isArray(m.confidence_labels)
      ? m.confidence_labels.map((l) => (typeof l === 'string' ? ([l, ''] as const) : ([l.label, l.min_confidence != null ? `confidence ≥ ${Math.round(l.min_confidence * 100)} %` : ''] as const)))
      : Object.entries(m.confidence_labels).map(([k, v]) => [k, String(v)] as const)
    : [];
  return (
    <Container>
      <PageHeader eyebrow="Methodology" title="Reproducible metrics over observed public pages" lede="Every metric value on the site carries a formula version, its inputs and a computation time. Formula versions bump whenever weights or normalisation change, so historical values remain reproducible." />
      {!m ? (
        <Unavailable what="Methodology" />
      ) : (
        <>
          <Section eyebrow="Metrics" title="Definitions" hairline={false}>
            <div className="divide-y divide-rule border-y border-rule">
              {m.metrics.map((x) => (
                <div key={x.metric} id={x.metric} className="scroll-mt-24 grid gap-2 py-4 md:grid-cols-[14rem_minmax(0,1fr)]">
                  <div>
                    <p className="font-medium text-ink">{METRIC_LABELS[x.metric] ?? x.metric}</p>
                    <p className="mono text-[11px] text-ink-3">
                      {x.metric} · {x.formula_version}
                    </p>
                  </div>
                  <div>
                    <p className="text-sm text-ink-2">{x.description}</p>
                    {x.inputs.length > 0 && (
                      <p className="mt-1.5 flex flex-wrap gap-1">
                        {x.inputs.map((i) => (
                          <span key={i} className="mono rounded-[3px] bg-surface-2 px-1 text-[11px] text-ink-2">
                            {i}
                          </span>
                        ))}
                      </p>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </Section>
          <Section eyebrow="Change detection" title="Significance bands">
            <div className="grid gap-2 sm:grid-cols-5">
              {bands.map((b) => (
                <div key={b.label} className="border border-rule p-3">
                  <SignificanceBadge value={(b.min + b.max) / 2} />
                  <p className="tnum mt-1 text-sm text-ink-2">
                    {b.min.toFixed(2)} – {b.max.toFixed(2)}
                  </p>
                </div>
              ))}
            </div>
            <Note className="mt-3">Inputs: percentage of text changed, semantic similarity, page importance, affected structured entities (jobs, plans, people, locations), novelty against the sensor’s history and cross-source confirmation. Only changes above the meaningful band produce events; lower bands are archived, never discarded.</Note>
          </Section>
          <Section eyebrow="Confidence" title="Labels on every inferred value">
            <ul className="divide-y divide-rule border-y border-rule">
              {labels.map(([l, d]) => (
                <li key={l} className="flex flex-wrap items-baseline gap-3 py-2 text-sm">
                  <ConfidenceBadge label={l} />
                  <span className="text-ink-2">{d}</span>
                </li>
              ))}
            </ul>
          </Section>
          <Section eyebrow="Taxonomy" title="Event types">
            <p className="flex flex-wrap gap-1.5">
              {m.event_types.map((t) => (
                <EventTypeBadge key={t} type={t} />
              ))}
            </p>
            <Note className="mt-3">Subtypes include product launch / no longer listed / renamed, price increase / decrease / new tier, job count increase / decrease, new executive / executive no longer listed, new office / office no longer listed / country expansion, new partnership, acquisition, divestiture, API launch, documentation change, terms change and brand repositioning.</Note>
          </Section>
          <Section eyebrow="Coverage normalisation" title="Why long-term indices are adjusted">
            <p className="max-w-3xl text-sm text-ink-2">As the network grows, raw counts of observations and events rise regardless of what companies do. The Global Corporate Activity Index and industry/country series are normalised by the number of active sensors, the company population, crawl frequency and industry/country coverage in each window, so a rising index means more change per monitored surface — not more surfaces. Baselines are computed per sensor and per company (changes per week, job counts, announcement frequency, volatility) and drive the anomaly score.</p>
          </Section>
        </>
      )}
    </Container>
  );
}