'use client';
import Link from 'next/link';
import { useEffect, useState } from 'react';
import { t } from '@/i18n';
import { clientExplore } from '@/lib/client-api-explore';
import { cn } from '@/lib/cn';
import { fixed } from '@/lib/format';
import { routes } from '@/lib/site';
import type { SimilarResponse, SimilarityMode } from '@/lib/types';
import { EntityPicker, type PickedEntity } from '@/components/explore/entity-picker';

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

/** Pick a country → peers per mode from `/countries/{id}/similar?mode=`. Mode tabs, score bars (0–100). */
export function SimilarityPlayground({ initial }: { initial?: PickedEntity | null }) {
  const [country, setCountry] = useState<PickedEntity | null>(initial ?? null);
  const [mode, setMode] = useState<SimilarityMode>('overall');
  const [data, setData] = useState<Record<string, SimilarResponse | null>>({});
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!country) return;
    const key = `${country.id}:${mode}`;
    if (data[key] !== undefined) return;
    const ctrl = new AbortController();
    setLoading(true);
    clientExplore
      .similar(country.id, mode, 10, ctrl.signal)
      .then((r) => setData((d) => ({ ...d, [key]: r })))
      .catch(() => setData((d) => ({ ...d, [key]: null })))
      .finally(() => {
        if (!ctrl.signal.aborted) setLoading(false);
      });
    return () => ctrl.abort();
  }, [country, mode, data]);

  const current = country ? data[`${country.id}:${mode}`] : undefined;
  const peers = current?.peers ?? [];

  return (
    <div className="min-w-0">
      <div className="flex flex-wrap items-center gap-2">
        <EntityPicker type="country" placeholder={t('explore.similar.pick')} onPick={setCountry} className="w-full max-w-sm" />
        {country ? (
          <Link href={routes.country(country.slug)} className="inline-flex min-h-[44px] items-center gap-1.5 text-sm text-ink md:min-h-[36px]">
            <span aria-hidden className="text-lg leading-none">{country.flag}</span>
            <span className="font-medium">{country.name}</span>
            <span className="text-ink-3">→</span>
          </Link>
        ) : null}
      </div>
      {country ? (
        <>
          <div role="tablist" aria-label={t('explore.similar.peers', { name: country.name })} className="scrollbar-none -mx-4 mt-3 flex gap-1 overflow-x-auto px-4 sm:mx-0 sm:px-0">
            {MODES.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-[240px] transition-opacity', loading && 'opacity-50')} aria-busy={loading}>
            {current === null || (current && peers.length === 0) ? (
              <p className="py-4 text-sm text-ink-3">{t('explore.similar.none', { name: country.name })}</p>
            ) : (
              <ol className="divide-y divide-rule">
                {peers.map((p) => (
                  <li key={p.country.id} className="grid grid-cols-[1.5rem_minmax(0,1fr)_3rem] items-center gap-x-2 py-1 sm:grid-cols-[1.5rem_minmax(0,1fr)_minmax(6rem,14rem)_3rem] sm:py-1.5">
                    <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 mb-1 h-2 rounded-xs bg-surface-2 sm:col-span-1 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('explore.similar.score')} ${fixed(p.score ?? 0, 0)}`}>
                      {p.score != null ? fixed(p.score, 0) : t('common.na')}
                    </span>
                  </li>
                ))}
              </ol>
            )}
          </div>
        </>
      ) : (
        <p className="mt-4 text-sm text-ink-3">{t('explore.similar.empty')}</p>
      )}
    </div>
  );
}