'use client';
import { useRouter } from 'next/navigation';
import { t } from '@/i18n';
import { routes } from '@/lib/site';
import { TOPICS } from '@/lib/topics';
import { Segmented } from '@/components/controls/indicator-select';

const WINDOWS = ['1', '5', '10', '25', 'since1990'] as const;

/** Window · topic · population toggle — every change navigates (server re-renders the facets). */
export function ExtremesControls({ window, topic, all }: { window: string; topic: string | null; all: boolean }) {
  const router = useRouter();
  const go = (patch: { window?: string; topic?: string | null; all?: boolean }) => {
    const w = patch.window ?? window;
    const tp = patch.topic === undefined ? topic : patch.topic;
    const a = patch.all ?? all;
    const p = new URLSearchParams();
    if (w !== '10') p.set('window', w);
    if (tp) p.set('topic', tp);
    if (a) p.set('all', '1');
    const s = p.toString();
    router.replace(`${routes.extremes()}${s ? `?${s}` : ''}`, { scroll: false });
  };
  return (
    <div className="flex flex-wrap items-center gap-2 border-y border-rule py-3">
      <Segmented value={window} onChange={(w) => go({ window: w })} options={WINDOWS.map((w) => ({ value: w, label: t(`extremes.window.${w}` as 'extremes.window.1') }))} label={t('extremes.window')} size="sm" className="max-w-full overflow-x-auto" />
      <label className="inline-flex h-11 items-center gap-1 rounded-sm border border-rule bg-surface px-2 text-sm text-ink-2 md:h-9">
        <span className="text-2xs uppercase tracking-wide text-ink-3">{t('extremes.topic')}</span>
        <select value={topic ?? ''} onChange={(e) => go({ topic: e.target.value || null })} className="bg-transparent text-ink outline-none" aria-label={t('extremes.topic')}>
          <option value="">{t('extremes.allTopics')}</option>
          {TOPICS.map((tp) => (
            <option key={tp.id} value={tp.id}>
              {tp.short}
            </option>
          ))}
        </select>
      </label>
      <label className="inline-flex h-11 cursor-pointer items-center gap-1.5 rounded-sm border border-rule px-2.5 text-sm text-ink-2 md:h-9">
        <input type="checkbox" checked={!all} onChange={(e) => go({ all: !e.target.checked })} className="accent-[var(--accent)]" />
        {t('extremes.minPop')}
      </label>
    </div>
  );
}