import Link from 'next/link';
import { Sparkline } from '@/components/charts/sparkline';
import { cn } from '@/lib/cn';
import { fmtPctSigned, fmtScore, num } from '@/lib/format';
import { METRIC_LABELS } from '@/lib/site';
import type { CompanyDetail, Metric, MetricDetail } from '@/lib/types';

const TILES: { metric: Metric; spark?: 'activity_30d' | 'hiring_90d'; pct?: boolean }[] = [
  { metric: 'activity_score', spark: 'activity_30d' },
  { metric: 'hiring_momentum_30d', spark: 'hiring_90d', pct: true },
  { metric: 'product_velocity' },
  { metric: 'ai_adoption' },
  { metric: 'corporate_change_index' },
];

/**
 * Metric tiles with sparklines and confidence. A metric with no value is shown as "not enough evidence" rather than 0
 * (API omits metrics without inputs — spec §165). Each tile links to the methodology.
 */
export function MetricTiles({ c, className }: { c: CompanyDetail; className?: string }) {
  const detail = new Map<string, MetricDetail>((c.metrics_detail ?? []).map((m) => [m.metric, m]));
  return (
    <div className={cn('grid grid-cols-2 gap-x-6 border-y border-rule md:grid-cols-5 [&>*]:border-b [&>*]:border-rule md:[&>*]:border-b-0', className)} data-metric-tiles>
      {TILES.map((t) => {
        const v = num(c.metrics[t.metric]);
        const d = detail.get(t.metric);
        const spark = t.spark ? c.sparklines?.[t.spark] : undefined;
        return (
          <Link key={t.metric} href={`/methodology#${t.metric}`} className="group block min-w-0 py-3 hover:text-accent md:py-4">
            <p className="eyebrow">{METRIC_LABELS[t.metric]}</p>
            <div className="mt-1 flex items-end justify-between gap-2">
              <p className={cn('tnum whitespace-nowrap text-[22px] font-semibold leading-none tracking-tight md:text-[30px]', v === null && 'text-ink-3', t.pct && v !== null && (v > 0 ? 'text-positive' : v < 0 ? 'text-danger' : ''))}>{v === null ? '—' : t.pct ? fmtPctSigned(v) : fmtScore(v)}</p>
              {spark && spark.length > 1 && <Sparkline values={spark} width={64} height={22} tone={t.pct ? 'auto' : 'accent'} className="max-[400px]:hidden" />}
            </div>
            <p className="mt-1.5 text-[11px] text-ink-3">{v === null ? 'not enough monitored evidence' : d ? `confidence ${Math.round(d.confidence * 100)} %${d.formula_version ? ` · ${d.formula_version}` : ''}` : t.pct ? 'vs 30 days ago' : '0–100'}</p>
          </Link>
        );
      })}
    </div>
  );
}