'use client';
import { ArrowLeftRight } from 'lucide-react';
import { useRouter } from 'next/navigation';
import { t } from '@/i18n';
import { routes } from '@/lib/site';
import type { RegionItem } from '@/lib/types-explore';

const KIND_ORDER = ['world', 'region', 'continent', 'income', 'org'];

/** Two group selects (grouped by kind) → /regions/compare?a=&b=. Also used inline on a group page with `fixedA`. */
export function GroupComparePicker({ groups, a, b, fixedA = false }: { groups: RegionItem[]; a: string; b: string; fixedA?: boolean }) {
  const router = useRouter();
  const go = (na: string, nb: string) => router.push(routes.regionCompare(na, nb));
  const byKind = KIND_ORDER.map((k) => ({ kind: k, items: groups.filter((g) => (g.kind ?? 'custom') === k).sort((x, y) => (x.name ?? '').localeCompare(y.name ?? '')) })).filter((g) => g.items.length);
  const select = (value: string, onChange: (v: string) => void, label: string) => (
    <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">{label}</span>
      <select value={value} onChange={(e) => onChange(e.target.value)} className="max-w-[14rem] truncate bg-transparent text-ink outline-none" aria-label={label}>
        {byKind.map((g) => (
          <optgroup key={g.kind} label={t(`regions.kind.${g.kind}` as 'regions.kind.region')}>
            {g.items.map((it) => (
              <option key={it.slug ?? it.id} value={it.slug ?? it.id}>
                {it.name}
              </option>
            ))}
          </optgroup>
        ))}
      </select>
    </label>
  );
  return (
    <div className="flex flex-wrap items-center gap-2">
      {fixedA ? <span className="inline-flex h-11 items-center rounded-sm border border-rule bg-surface-2 px-3 text-sm font-medium text-ink md:h-10">{groups.find((g) => g.slug === a)?.name ?? a}</span> : select(a, (v) => go(v, b), t('regions.compare.a'))}
      <button type="button" onClick={() => go(b, a)} className="tap grid place-items-center rounded-sm text-ink-3 hover:bg-surface-2 hover:text-ink md:min-h-[40px] md:min-w-[40px]" aria-label={t('regions.compare.swap')} disabled={fixedA}>
        <ArrowLeftRight size={16} aria-hidden />
      </button>
      {select(b, (v) => go(a, v), t('regions.compare.b'))}
    </div>
  );
}