'use client';
import Link from 'next/link';
import { useEffect, useMemo, useState } from 'react';
import { t } from '@/i18n';
import { clientApi } from '@/lib/client-api';
import { routes } from '@/lib/site';
import type { DNAResponse, DnaDimension } from '@/lib/types';
import { DNA_DIMS, DnaRadial } from '@/components/charts/dna-radial';
import { Segmented } from '@/components/controls/indicator-select';
import { EntityPicker, type PickedEntity } from '@/components/explore/entity-picker';

type RefKind = 'world' | 'region' | 'income' | 'country';

/**
 * Country DNA 2.0: the fingerprint with a reference profile — World (50 on every axis), the region's median,
 * income peers' median or another country — fetched from `/countries/{id}/dna?reference=`. The table below lists
 * the nine percentile dimensions with the reference values. Descriptive, never a score.
 */
export function DnaPanel({ countryId, name, initial }: { countryId: string; name: string; initial: DNAResponse | null }) {
  const [kind, setKind] = useState<RefKind>('world');
  const [peer, setPeer] = useState<PickedEntity | null>(null);
  const [cache, setCache] = useState<Record<string, DNAResponse | null>>({});
  const [loading, setLoading] = useState(false);
  const refKey = kind === 'country' ? (peer ? `country:${peer.id}` : null) : kind === 'world' ? null : kind;

  useEffect(() => {
    if (!refKey || cache[refKey] !== undefined) return;
    const ctrl = new AbortController();
    setLoading(true);
    const reference = refKey.startsWith('country:') ? refKey.slice(8) : refKey;
    clientApi
      .countryDna(countryId, reference, ctrl.signal)
      .then((r) => setCache((c) => ({ ...c, [refKey]: r })))
      .catch(() => setCache((c) => ({ ...c, [refKey]: null })))
      .finally(() => {
        if (!ctrl.signal.aborted) setLoading(false);
      });
    return () => ctrl.abort();
  }, [refKey, countryId, cache]);

  const base = initial;
  const withRef = refKey ? cache[refKey] : null;
  const reference: Record<string, number | null> | null = useMemo(() => {
    if (kind === 'world') return Object.fromEntries(DNA_DIMS.map((d) => [d, 50]));
    return withRef?.reference?.dims ?? null;
  }, [kind, withRef]);
  const refLabel = kind === 'world' ? t('country.dna.ref.worldLabel') : withRef?.reference?.label ?? (kind === 'country' ? peer?.name ?? null : null);

  if (!base) return <p className="text-sm text-ink-3">{t('country.dna.none')}</p>;
  return (
    <div className="min-w-0">
      <div className="flex flex-wrap items-center gap-2">
        <Segmented<RefKind> value={kind} onChange={setKind} label={t('country.dna.ref')} size="sm" options={[{ value: 'world', label: t('country.dna.ref.world') }, { value: 'region', label: t('country.dna.ref.region') }, { value: 'income', label: t('country.dna.ref.income') }, { value: 'country', label: t('country.dna.ref.country') }]} />
        {kind === 'country' ? <EntityPicker type="country" placeholder={t('country.dna.ref.pick')} onPick={setPeer} exclude={[countryId]} keepValue className="w-56" size="sm" /> : null}
      </div>
      <div className={loading ? 'mt-3 opacity-60 transition-opacity' : 'mt-3'} aria-busy={loading}>
        <DnaRadial dna={base} name={name} size={360} reference={kind === 'country' && !peer ? null : reference} referenceLabel={refLabel} />
      </div>
      <p className="mt-2 text-center text-xs text-ink-3">
        {t('country.dna.notScore')}
        {base.year_ref ? <span className="tnum"> · {base.year_ref}</span> : null}
      </p>
      <table className="mt-3 w-full border-collapse text-xs">
        <caption className="sr-only">{t('country.dna.title')}</caption>
        <thead>
          <tr className="border-b border-rule text-left text-2xs uppercase tracking-wide text-ink-3">
            <th scope="col" className="py-1 pr-2 font-medium">
              {t('country.dna.dimension')}
            </th>
            <th scope="col" className="py-1 pr-2 text-right font-medium">
              {name}
            </th>
            {reference && (kind !== 'country' || peer) ? (
              <th scope="col" className="py-1 text-right font-medium">
                {refLabel}
              </th>
            ) : null}
          </tr>
        </thead>
        <tbody className="divide-y divide-rule">
          {DNA_DIMS.map((d: DnaDimension) => {
            const v = base.dims[d];
            const r = reference?.[d];
            const row = base.dimensions.find((x) => x.id === d);
            return (
              <tr key={d}>
                <td className="py-1 pr-2 text-ink-2">
                  {row?.indicator ? (
                    <Link href={routes.indicator(row.indicator)} className="link-quiet -my-2 inline-flex min-h-[44px] items-center py-2 md:my-0 md:min-h-0 md:py-0">
                      {t(`country.dna.${d}` as const)}
                    </Link>
                  ) : (
                    t(`country.dna.${d}` as const)
                  )}
                </td>
                <td className="tnum py-1 pr-2 text-right font-medium text-ink">{v != null ? Math.round(v) : '—'}</td>
                {reference && (kind !== 'country' || peer) ? <td className="tnum py-1 text-right text-ink-2">{r != null ? Math.round(r) : '—'}</td> : null}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}