'use client';
import { ChevronDown } from 'lucide-react';
import Link from 'next/link';
import { useEffect, useState } from 'react';
import { t, tOpt } from '@/i18n';
import { clientApi } from '@/lib/client-api';
import { cn } from '@/lib/cn';
import { compact, fixed, formatValue } from '@/lib/format';
import { routes } from '@/lib/site';
import type { Contributions, FormatSpec, SimilarResponse, SimilarityMode } from '@/lib/types';

const MODES: SimilarityMode[] = ['overall', 'economic', 'demographic', 'energy', 'social'];

export type Closeness = 'very' | 'similar' | 'moderate' | 'different';

/** |z_a − z_b| → qualitative label. */
export function closeness(za: number | null | undefined, zb: number | null | undefined): Closeness | null {
  if (za == null || zb == null) return null;
  const d = Math.abs(za - zb);
  return d < 0.25 ? 'very' : d < 0.75 ? 'similar' : d < 1.5 ? 'moderate' : 'different';
}

/**
 * "Countries like {name}": mode tabs (from the API), peers with a similarity bar (0–100), and a "Why similar?"
 * expander turning contributions into qualitative labels with both raw values. Peers link to the pairwise
 * comparison. Other modes are fetched on demand and cached.
 */
export function SimilarPanel({ countryId, countrySlug, countryName, initial, formats = {} }: { countryId: string; countrySlug: string | null; countryName: string; initial: SimilarResponse | null; formats?: Record<string, FormatSpec> }) {
  const [mode, setMode] = useState<SimilarityMode>('overall');
  const [data, setData] = useState<Partial<Record<SimilarityMode, SimilarResponse | null>>>({ overall: initial });
  const [loading, setLoading] = useState(false);
  const [openPeer, setOpenPeer] = useState<string | null>(null);
  const available = new Set((initial?.modes ?? MODES) as SimilarityMode[]);

  useEffect(() => {
    if (data[mode] !== undefined) return;
    const ctrl = new AbortController();
    setLoading(true);
    clientApi
      .countrySimilar(countryId, mode, ctrl.signal)
      .then((r) => setData((d) => ({ ...d, [mode]: r })))
      .catch(() => setData((d) => ({ ...d, [mode]: null })))
      .finally(() => setLoading(false));
    return () => ctrl.abort();
  }, [mode, countryId, data]);

  const current = data[mode];
  const peers = current?.peers ?? [];

  return (
    <div>
      <div role="tablist" aria-label={t('country.similar.title', { name: countryName })} className="scrollbar-none -mx-4 flex gap-1 overflow-x-auto px-4 sm:mx-0 sm:px-0">
        {MODES.filter((m) => available.has(m) || m === 'overall').map((m) => (
          <button key={m} role="tab" aria-selected={mode === m} type="button" onClick={() => setMode(m)} className={cn('inline-flex h-11 shrink-0 items-center rounded-sm px-3 text-sm md:h-9', mode === m ? 'bg-ink text-paper' : 'text-ink-2 hover:bg-surface-2 hover:text-ink')}>
            {t(`country.similar.mode.${m}` as const)}
          </button>
        ))}
      </div>
      <div className={cn('mt-3 min-h-[200px] transition-opacity', loading && 'opacity-50')} aria-busy={loading}>
        {current === null || (current && peers.length === 0) ? (
          <p className="py-4 text-sm text-ink-3">{t('country.similar.none')}</p>
        ) : (
          <ol className="divide-y divide-rule">
            {peers.slice(0, 8).map((p) => {
              const key = `${mode}-${p.country.id}`;
              const open = openPeer === key;
              const contribs = parseContribs(p.contributions);
              return (
                <li key={p.country.id} className="py-1 sm:py-1.5">
                  <div className="grid grid-cols-[1.5rem_minmax(0,1fr)_3.5rem_2rem] items-center gap-x-2 sm:grid-cols-[1.5rem_minmax(0,1fr)_minmax(6rem,12rem)_3.5rem_2rem]">
                    <span className="tnum text-xs text-ink-3">{p.rank}</span>
                    <Link href={routes.country(p.country.slug ?? p.country.id)} className="link-quiet flex min-h-[44px] min-w-0 items-center gap-1.5 text-sm sm:min-h-0">
                      <span aria-hidden className="text-base leading-none">
                        {p.country.flag}
                      </span>
                      <span className="truncate">{p.country.name}</span>
                    </Link>
                    <div className="col-span-full row-start-2 mb-1 h-2 rounded-xs bg-surface-2 sm:col-span-1 sm:row-start-auto sm:mb-0" aria-hidden>
                      <div className="h-full rounded-xs bg-accent" style={{ width: `${Math.max(2, Math.min(100, p.score ?? 0))}%` }} />
                    </div>
                    <span className="tnum text-right text-sm font-medium text-ink" aria-label={t('country.similar.score', { score: fixed(p.score ?? 0, 0) })}>
                      {p.score != null ? `${fixed(p.score, 0)} %` : t('common.na')}
                    </span>
                    {contribs.length ? (
                      <button type="button" onClick={() => setOpenPeer(open ? null : key)} aria-expanded={open} className="tap -mr-2 grid place-items-center text-ink-3 hover:text-ink" aria-label={t('country.similar.whySimilar')}>
                        <ChevronDown size={16} aria-hidden className={cn('transition-transform', open && 'rotate-180')} />
                      </button>
                    ) : (
                      <span />
                    )}
                  </div>
                  {open ? (
                    <div className="mt-2 rounded-sm bg-surface-2/60 px-3 py-2 text-xs text-ink-2">
                      <div className="flex flex-wrap items-baseline justify-between gap-2">
                        <div className="eyebrow">{t('country.similar.whySimilar')}</div>
                        {countrySlug && p.country.slug ? (
                          <Link href={routes.compare(countrySlug, p.country.slug)} className="text-accent hover:underline">
                            {t('country.similar.compareWith', { a: countryName, b: p.country.name ?? p.country.id })} →
                          </Link>
                        ) : null}
                      </div>
                      <ul className="mt-1 grid gap-x-6 gap-y-1 sm:grid-cols-2">
                        {contribs.map((c) => {
                          const spec = formats[c.indicator.split('/')[0] ?? ''] ?? null;
                          const label = closeness(c.z_a, c.z_b);
                          const fmt = (v: number | null) => (v == null ? t('common.na') : spec && !c.indicator.includes('/') ? formatValue(v, spec) : compact(v));
                          return (
                            <li key={c.indicator} className="grid grid-cols-[minmax(0,1fr)_auto] items-baseline gap-x-2">
                              <span className="min-w-0">
                                <span className="block truncate text-ink">{spec?.name ?? c.indicator.replace(/-/g, ' ')}</span>
                                {c.value_a != null && c.value_b != null ? (
                                  <span className="tnum block text-ink-3">
                                    {fmt(c.value_a)} <span aria-hidden>vs</span> {fmt(c.value_b)}
                                  </span>
                                ) : null}
                              </span>
                              <span className={cn('shrink-0 text-right', label === 'very' || label === 'similar' ? 'text-accent' : label === 'different' ? 'text-dec' : 'text-ink-2')}>{label ? tOpt(`country.similar.close.${label}`, label) : ''}</span>
                            </li>
                          );
                        })}
                      </ul>
                    </div>
                  ) : null}
                </li>
              );
            })}
          </ol>
        )}
      </div>
    </div>
  );
}

export function parseContribs(raw: Contributions | string | null): Array<{ indicator: string; z_a: number | null; z_b: number | null; value_a: number | null; value_b: number | null; contribution: number }> {
  if (!raw) return [];
  let obj: Contributions;
  try {
    obj = typeof raw === 'string' ? (JSON.parse(raw) as Contributions) : raw;
  } catch {
    return [];
  }
  return Object.entries(obj)
    .map(([indicator, c]) => ({ indicator, z_a: c.z_a ?? null, z_b: c.z_b ?? null, value_a: c.value_a ?? null, value_b: c.value_b ?? null, contribution: c.contribution ?? 0 }))
    .sort((a, b) => Math.abs((a.z_a ?? 0) - (a.z_b ?? 0)) - Math.abs((b.z_a ?? 0) - (b.z_b ?? 0))); // most similar first, most different last
}