'use client';
import Link from 'next/link';
import { useMemo, useState } from 'react';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';
import { fixed, formatValue, grouped } from '@/lib/format';
import { routes } from '@/lib/site';
import { useUrlState } from '@/lib/url-state';
import type { FormatSpec } from '@/lib/types';
import type { PeerPoint, PeersResponse } from '@/lib/types-analytics';
import { BubbleChart } from '@/components/charts/bubble-chart';
import { Segmented } from '@/components/controls/indicator-select';

/**
 * Above / below expected: pair selector (URL-synced), bubble chart with the robust fitted line, the ten largest
 * positive and negative residuals. Wording stays descriptive: "above / below the fitted line".
 */
export function PeersView({ data }: { data: PeersResponse }) {
  const { set } = useUrlState();
  const [selected, setSelected] = useState<string | null>(null);
  const xs: FormatSpec = { format: data.x.format, unit: data.x.unit, unit_short: data.x.unit_short, precision: data.x.precision, name: data.x.short_name ?? data.x.name };
  const ys: FormatSpec = { format: data.y.format, unit: data.y.unit, unit_short: data.y.unit_short, precision: data.y.precision, name: data.y.short_name ?? data.y.name };
  const points = useMemo(() => data.points.filter((p) => p.x != null && p.y != null).map((p) => ({ id: p.id, label: p.name ?? p.id, flag: p.flag, x: p.x, y: p.y, region: p.region })), [data.points]);
  const highlight = useMemo(() => [...data.above.slice(0, 5), ...data.below.slice(0, 5)].map((p) => p.id).concat(selected ? [selected] : []), [data.above, data.below, selected]);
  const pairKey = `${data.x.slug}|${data.y.slug}`;
  const pairs = data.pairs.map((p) => ({ value: `${p.x}|${p.y}`, label: p.label }));
  const current = pairs.find((p) => p.value === pairKey) ? pairKey : pairs[0]?.value ?? pairKey;

  return (
    <div className="min-w-0">
      <div className="flex flex-wrap items-center gap-2">
        <label className="inline-flex h-11 max-w-full items-center gap-1 rounded-sm border border-rule bg-surface px-2 text-sm text-ink-2 md:h-10">
          <span className="text-2xs uppercase tracking-wide text-ink-3">{t('peers.pair')}</span>
          <select
            value={current}
            onChange={(e) => {
              const [x, y] = e.target.value.split('|');
              set({ x, y }, 0);
            }}
            className="min-w-0 max-w-[18rem] flex-1 truncate bg-transparent text-ink outline-none"
            aria-label={t('peers.pair')}
          >
            {pairs.map((p) => (
              <option key={p.value} value={p.value}>
                {p.label}
              </option>
            ))}
          </select>
        </label>
        <Segmented value={data.method === 'ols' ? 'ols' : 'theil-sen'} onChange={(v) => set({ method: v }, 0)} label={t('peers.method')} size="sm" options={[{ value: 'theil-sen', label: t('peers.method.theilSen') }, { value: 'ols', label: t('peers.method.ols') }]} />
        <span className="tnum text-xs text-ink-3">
          {t('peers.stats', { n: grouped(data.n), year: data.year_used ?? '', r2: data.fit?.r2 != null ? fixed(data.fit.r2, 2) : t('common.na') })}
        </span>
      </div>

      <div className="mt-4">
        <BubbleChart points={points} xSpec={xs} ySpec={ys} logX={data.fit?.log_x ?? false} fit={data.fit ? { slope: data.fit.slope, intercept: data.fit.intercept, logX: data.fit.log_x, logY: false, label: t('peers.fitLine') } : null} highlight={highlight} labelCount={0} height={460} animate={false} onSelect={setSelected} defaultWidth={960} />
      </div>
      <p className="mt-2 text-xs text-ink-3">{data.note}</p>

      <div className="mt-6 grid gap-x-10 gap-y-6 lg:grid-cols-2">
        <ResidualList title={t('peers.above')} rows={data.above} spec={ys} tone="inc" onPick={setSelected} selected={selected} />
        <ResidualList title={t('peers.below')} rows={data.below} spec={ys} tone="dec" onPick={setSelected} selected={selected} />
      </div>

      <div className="mt-8 max-w-prose border-t border-rule pt-4 text-sm leading-relaxed text-ink-2">
        <h3 className="mb-1 text-sm font-semibold text-ink">{t('peers.methodology')}</h3>
        <p>{data.methodology}</p>
        <p className="mt-2 font-medium text-ink">{t('peers.disclaimer')}</p>
      </div>
    </div>
  );
}

function ResidualList({ title, rows, spec, tone, onPick, selected }: { title: string; rows: PeerPoint[]; spec: FormatSpec; tone: 'inc' | 'dec'; onPick: (id: string) => void; selected: string | null }) {
  const max = Math.max(1, ...rows.map((r) => Math.abs(r.residual_z ?? 0)));
  return (
    <div className="min-w-0">
      <h3 className={cn('mb-2 text-sm font-semibold', tone === 'inc' ? 'text-inc' : 'text-dec')}>{title}</h3>
      <ol className="divide-y divide-rule border-y border-rule">
        {rows.map((r, i) => (
          <li key={r.id} className={cn('grid grid-cols-[1.5rem_minmax(0,1fr)_5rem_4rem] items-center gap-x-2 py-1.5 text-sm', selected === r.id && 'bg-accent-soft/40')}>
            <span className="tnum text-xs text-ink-3">{i + 1}</span>
            <button type="button" onClick={() => onPick(r.id)} className="flex min-h-[36px] min-w-0 items-center gap-1.5 text-left">
              <span aria-hidden>{r.flag}</span>
              <span className="min-w-0">
                <Link href={routes.country(r.slug ?? r.id)} className="link-quiet block truncate font-medium text-ink">
                  {r.name}
                </Link>
                <span className="tnum block text-2xs text-ink-3">
                  {t('peers.actualVsExpected', { actual: formatValue(r.y, spec), expected: formatValue(r.expected, spec) })}
                </span>
              </span>
            </button>
            <span className="relative h-2 overflow-hidden rounded-xs bg-surface-2" aria-hidden>
              <span className={cn('absolute inset-y-0 left-0 rounded-xs', tone === 'inc' ? 'bg-inc' : 'bg-dec')} style={{ width: `${(Math.abs(r.residual_z ?? 0) / max) * 100}%` }} />
            </span>
            <span className={cn('tnum whitespace-nowrap text-right text-sm font-medium', tone === 'inc' ? 'text-inc' : 'text-dec')}>
              {r.residual != null ? `${r.residual > 0 ? '+' : '−'}${formatValue(Math.abs(r.residual), spec)}` : t('common.na')}
            </span>
          </li>
        ))}
      </ol>
    </div>
  );
}