'use client';
import { Plus, Search, X } from 'lucide-react';
import { usePathname, useRouter } from 'next/navigation';
import { useEffect, useMemo, useState } from 'react';
import { t } from '@/i18n';
import { clientCompare } from '@/lib/client-api-compare';
import { cn } from '@/lib/cn';
import { MAX_CUSTOM_INDICATORS, compareQuery, type CompareState } from '@/lib/compare-state';
import { TOPICS, topicById } from '@/lib/topics';
import type { IndicatorCard, IndicatorSummary } from '@/lib/types';
import { BottomSheet } from '@/components/data/bottom-sheet';

/**
 * Custom tab header: selected indicator chips (remove) + a picker sheet searching `/api/v1/indicators`
 * (fetched once on first open). Selection is written to `?indicators=` in the URL; charts are server-rendered.
 */
export function CustomPanel({ selected, state }: { selected: IndicatorCard[]; state: CompareState }) {
  const router = useRouter();
  const pathname = usePathname();
  const [open, setOpen] = useState(false);
  const [q, setQ] = useState('');
  const [all, setAll] = useState<IndicatorSummary[] | null>(null);
  const [failed, setFailed] = useState(false);
  const slugs = state.indicators;
  const full = slugs.length >= MAX_CUSTOM_INDICATORS;

  useEffect(() => {
    if (!open || all || failed) return;
    const ctrl = new AbortController();
    clientCompare
      .indicators(ctrl.signal)
      .then((r) => setAll(r.items.filter((i) => (i.n_countries ?? 0) > 0)))
      .catch((e) => {
        if ((e as Error).name !== 'AbortError') setFailed(true);
      });
    return () => ctrl.abort();
  }, [open, all, failed]);

  const apply = (next: string[]) => router.replace(`${pathname}${compareQuery({ ...state, tab: 'custom', indicators: next, indicator: state.indicator && next.includes(state.indicator) ? state.indicator : null })}`, { scroll: false });

  const results = useMemo(() => {
    if (!all) return [];
    const ql = q.trim().toLowerCase();
    const pool = all.filter((i) => !slugs.includes(i.slug));
    const list = ql ? pool.filter((i) => (i.name ?? '').toLowerCase().includes(ql) || (i.short_name ?? '').toLowerCase().includes(ql) || i.slug.includes(ql) || (i.topic ?? '').includes(ql)) : pool;
    const order = new Map(TOPICS.map((tp, i) => [tp.id as string, i]));
    return [...list].sort((a, b) => (order.get(a.topic ?? '') ?? 99) - (order.get(b.topic ?? '') ?? 99) || Number(!!b.featured) - Number(!!a.featured) || (a.name ?? '').localeCompare(b.name ?? '')).slice(0, 80);
  }, [all, q, slugs]);

  return (
    <div>
      <div className="flex flex-wrap items-center gap-1.5">
        {selected.map((ind) => (
          <span key={ind.slug} className="inline-flex h-11 items-center gap-1 rounded-sm border border-rule bg-surface pl-2.5 text-sm md:h-9">
            <span className="max-w-[14rem] truncate text-ink">{ind.short_name ?? ind.name ?? ind.slug}</span>
            <button type="button" onClick={() => apply(slugs.filter((s) => s !== ind.slug))} className="grid h-11 w-9 place-items-center text-ink-3 hover:text-down md:h-9 md:w-7" aria-label={t('compare.custom.remove', { name: ind.short_name ?? ind.name ?? ind.slug })}>
              <X size={14} aria-hidden />
            </button>
          </span>
        ))}
        <button type="button" onClick={() => setOpen(true)} disabled={full} className={cn('inline-flex h-11 items-center gap-1 rounded-sm border border-dashed px-3 text-sm md:h-9', full ? 'border-rule text-ink-3' : 'border-rule-strong text-ink-2 hover:border-accent hover:text-accent')}>
          <Plus size={14} aria-hidden />
          {t('compare.custom.add')}
        </button>
        <span className="tnum ml-auto text-xs text-ink-3">{t('compare.custom.selected', { n: slugs.length, max: MAX_CUSTOM_INDICATORS })}</span>
      </div>
      {selected.length === 0 ? <p className="mt-4 border-t border-dashed border-rule-strong py-5 text-sm text-ink-3">{t('compare.custom.empty', { max: MAX_CUSTOM_INDICATORS })}</p> : null}

      <BottomSheet open={open} onClose={() => setOpen(false)} side="center" title={t('compare.custom.pick')}>
        <div className="relative">
          <Search size={15} aria-hidden className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-ink-3" />
          <input type="search" autoFocus value={q} onChange={(e) => setQ(e.target.value)} placeholder={t('compare.custom.search')} aria-label={t('compare.custom.search')} className="h-11 w-full rounded-sm border border-rule bg-surface pl-9 pr-3 text-sm text-ink outline-none placeholder:text-ink-3 focus:border-accent" />
        </div>
        <p className="tnum mt-2 text-xs text-ink-3">{full ? t('compare.custom.full', { max: MAX_CUSTOM_INDICATORS }) : t('compare.custom.selected', { n: slugs.length, max: MAX_CUSTOM_INDICATORS })}</p>
        {failed ? (
          <p className="py-6 text-sm text-ink-3">{t('common.errorHint')}</p>
        ) : !all ? (
          <p className="py-6 text-sm text-ink-3">{t('common.loading')}</p>
        ) : results.length === 0 ? (
          <p className="py-6 text-center text-sm text-ink-3">{t('compare.custom.noMatch', { q })}</p>
        ) : (
          <ul className="mt-2 divide-y divide-rule">
            {results.map((i) => (
              <li key={i.slug}>
                <button
                  type="button"
                  disabled={full}
                  onClick={() => {
                    apply([...slugs, i.slug]);
                    if (slugs.length + 1 >= MAX_CUSTOM_INDICATORS) setOpen(false);
                  }}
                  className="flex min-h-[48px] w-full items-center gap-3 py-1.5 text-left disabled:opacity-40"
                >
                  <span className="min-w-0 flex-1">
                    <span className="block truncate text-sm text-ink">{i.name ?? i.slug}</span>
                    <span className="block truncate text-2xs text-ink-3">
                      {topicById(i.topic ?? '')?.short ?? i.topic}
                      {i.unit ? ` · ${i.unit}` : ''}
                    </span>
                  </span>
                  <Plus size={16} aria-hidden className="shrink-0 text-ink-3" />
                </button>
              </li>
            ))}
          </ul>
        )}
      </BottomSheet>
    </div>
  );
}