'use client';
import { ChevronDown, Search, X } from 'lucide-react';
import { useEffect, useId, useMemo, useRef, useState } from 'react';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';
import { topicById } from '@/lib/topics';

import { toIndicatorOption, type IndicatorOption } from '@/lib/indicator-options';
export { toIndicatorOption, type IndicatorOption };

/**
 * Indicator picker for the analytical views: a button showing the current indicator, opening a searchable
 * list grouped by topic (featured first). Client-side filtering over the full list (≈ 260 rows, passed from
 * the server). Keyboard: type to filter, ↑↓ ↵ esc. Closes on outside pointerdown.
 */
export function IndicatorSelect({
  options,
  value,
  onChange,
  label,
  className,
  size = 'md',
  align = 'left',
}: {
  options: IndicatorOption[];
  value: string;
  onChange: (slug: string) => void;
  label?: string;
  className?: string;
  size?: 'sm' | 'md';
  align?: 'left' | 'right';
}) {
  const id = useId();
  const [open, setOpen] = useState(false);
  const [q, setQ] = useState('');
  const [active, setActive] = useState(0);
  const wrap = useRef<HTMLDivElement>(null);
  const input = useRef<HTMLInputElement>(null);
  const current = options.find((o) => o.slug === value) ?? null;

  useEffect(() => {
    if (!open) return;
    setTimeout(() => input.current?.focus(), 20);
    const onDoc = (e: PointerEvent) => {
      if (!wrap.current?.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener('pointerdown', onDoc);
    return () => document.removeEventListener('pointerdown', onDoc);
  }, [open]);

  const groups = useMemo(() => {
    const ql = q.trim().toLowerCase();
    const pool = ql ? options.filter((o) => `${o.name} ${o.short_name ?? ''} ${o.slug} ${o.unit ?? ''}`.toLowerCase().includes(ql)) : options;
    const featured = ql ? [] : pool.filter((o) => o.featured);
    const byTopic = new Map<string, IndicatorOption[]>();
    for (const o of pool) {
      const k = o.topic ?? 'other';
      if (!byTopic.has(k)) byTopic.set(k, []);
      byTopic.get(k)!.push(o);
    }
    const out: Array<{ key: string; label: string; items: IndicatorOption[] }> = [];
    if (featured.length) out.push({ key: 'featured', label: t('control.featured'), items: featured });
    for (const [k, items] of Array.from(byTopic.entries()).sort((a, b) => (topicById(a[0])?.order ?? 99) - (topicById(b[0])?.order ?? 99))) out.push({ key: k, label: topicById(k)?.name ?? k, items });
    return out;
  }, [options, q]);
  const flat = useMemo(() => groups.flatMap((g) => g.items), [groups]);

  useEffect(() => setActive(0), [q]);

  const pick = (o: IndicatorOption) => {
    onChange(o.slug);
    setOpen(false);
    setQ('');
  };
  const onKey = (e: React.KeyboardEvent) => {
    if (e.key === 'ArrowDown') {
      e.preventDefault();
      setActive((a) => Math.min(flat.length - 1, a + 1));
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      setActive((a) => Math.max(0, a - 1));
    } else if (e.key === 'Enter') {
      e.preventDefault();
      const o = flat[active];
      if (o) pick(o);
    } else if (e.key === 'Escape') {
      setOpen(false);
    }
  };
  useEffect(() => {
    if (!open) return;
    const el = wrap.current?.querySelector<HTMLElement>(`[data-idx="${active}"]`);
    el?.scrollIntoView({ block: 'nearest' });
  }, [active, open]);

  return (
    <div ref={wrap} className={cn('relative min-w-0', className)}>
      <button
        type="button"
        onClick={() => setOpen((o) => !o)}
        aria-haspopup="listbox"
        aria-expanded={open}
        aria-controls={`${id}-list`}
        className={cn('flex w-full min-w-0 items-center gap-2 rounded-sm border border-rule bg-surface text-left text-ink hover:border-rule-strong', size === 'sm' ? 'h-11 px-2.5 text-sm md:h-9' : 'h-12 px-3 text-base md:h-10 md:text-sm')}
      >
        <span className="min-w-0 flex-1">
          {label ? <span className="block text-2xs uppercase tracking-wide text-ink-3">{label}</span> : null}
          <span className="block truncate font-medium">{current?.short_name ?? current?.name ?? value}</span>
        </span>
        <ChevronDown size={15} aria-hidden className={cn('shrink-0 text-ink-3 transition-transform', open && 'rotate-180')} />
      </button>
      {open ? (
        <div className={cn('absolute top-full z-40 mt-1 w-[min(92vw,28rem)] rounded-sm border border-rule bg-surface shadow-pop', align === 'right' ? 'right-0' : 'left-0')}>
          <div className="relative border-b border-rule p-2">
            <Search size={14} aria-hidden className="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-ink-3" />
            <input ref={input} type="search" value={q} onChange={(e) => setQ(e.target.value)} onKeyDown={onKey} placeholder={t('control.searchIndicators')} aria-label={t('control.searchIndicators')} role="combobox" aria-expanded={open} aria-controls={`${id}-list`} aria-autocomplete="list" aria-activedescendant={flat[active] ? `${id}-opt-${flat[active].slug}` : undefined} autoComplete="off" className="h-10 w-full rounded-sm border border-rule bg-paper pl-8 pr-8 text-sm outline-none placeholder:text-ink-3 focus:border-accent" />
            {q ? (
              <button type="button" onClick={() => setQ('')} className="absolute right-3 top-1/2 grid h-8 w-8 -translate-y-1/2 place-items-center text-ink-3 hover:text-ink" aria-label={t('search.clear')}>
                <X size={13} aria-hidden />
              </button>
            ) : null}
          </div>
          <ul id={`${id}-list`} role="listbox" className="max-h-[min(60vh,22rem)] overflow-y-auto py-1">
            {flat.length === 0 ? <li className="px-3 py-3 text-sm text-ink-3">{t('control.noMatch')}</li> : null}
            {groups.map((g) => (
              <li key={g.key} role="presentation">
                <div className="eyebrow px-3 pb-1 pt-2">{g.label}</div>
                <ul role="group" aria-label={g.label}>
                  {g.items.map((o) => {
                    const i = flat.indexOf(o);
                    const sel = o.slug === value;
                    return (
                      <li key={`${g.key}-${o.slug}`} id={`${id}-opt-${o.slug}`} role="option" aria-selected={sel} data-idx={i}>
                        <button type="button" onMouseEnter={() => setActive(i)} onClick={() => pick(o)} className={cn('flex min-h-[44px] w-full items-center gap-2 px-3 py-1.5 text-left text-sm md:min-h-[36px]', i === active ? 'bg-surface-2' : 'hover:bg-surface-2/60', sel && 'font-medium text-accent')}>
                          <span className="min-w-0 flex-1">
                            <span className="block truncate">{o.name}</span>
                            <span className="tnum block truncate text-2xs text-ink-3">
                              {o.unit ?? ''}
                              {o.first_year && o.last_year ? ` · ${o.first_year}–${o.last_year}` : ''}
                              {o.n_countries != null ? ` · ${o.n_countries} countries` : ''}
                            </span>
                          </span>
                        </button>
                      </li>
                    );
                  })}
                </ul>
              </li>
            ))}
          </ul>
        </div>
      ) : null}
    </div>
  );
}

/** Small segmented control (radio group look) used by the analytical views for view/mode switches. */
export function Segmented<T extends string>({ value, onChange, options, label, className, size = 'md' }: { value: T; onChange: (v: T) => void; options: Array<{ value: T; label: string; icon?: React.ReactNode }>; label: string; className?: string; size?: 'sm' | 'md' }) {
  return (
    <div role="radiogroup" aria-label={label} className={cn('inline-flex max-w-full items-center gap-0.5 rounded-sm border border-rule bg-surface p-0.5', className)}>
      {options.map((o) => (
        <button key={o.value} type="button" role="radio" aria-checked={value === o.value} onClick={() => onChange(o.value)} className={cn('inline-flex shrink-0 items-center gap-1 rounded-xs px-2.5 text-sm', size === 'sm' ? 'h-9 md:h-8 md:px-2 md:text-xs' : 'h-10 md:h-8', value === o.value ? 'bg-ink text-paper' : 'text-ink-2 hover:bg-surface-2 hover:text-ink')}>
          {o.icon}
          <span className="truncate">{o.label}</span>
        </button>
      ))}
    </div>
  );
}