'use client';
import { X } from 'lucide-react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useEffect, useMemo, useRef, useState } from 'react';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';
import { formatDate, grouped } from '@/lib/format';
import { routes } from '@/lib/site';
import { TOPICS, topicById } from '@/lib/topics';
import type { IndicatorSummary } from '@/lib/types';
import { FreshnessBadge } from '@/components/data/freshness-badge';

/**
 * Indicator directory: ~260 rows server-rendered, filtered client-side. Topic anchor nav (sticky column on
 * desktop, horizontal chip bar on mobile) + text filter. `?topic=` selects one topic (membership from the API,
 * an indicator can belong to several topics); no topic = every topic as an anchored section.
 */
export function IndicatorDirectory({ items, topicMembers, initialTopic }: { items: IndicatorSummary[]; topicMembers: Record<string, string[]>; initialTopic: string | null }) {
  const router = useRouter();
  const [topic, setTopic] = useState<string | null>(initialTopic);
  const [q, setQ] = useState('');
  const navRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const el = navRef.current?.querySelector<HTMLElement>('[aria-current="true"]');
    el?.scrollIntoView({ block: 'nearest', inline: 'center', behavior: 'instant' as ScrollBehavior });
  }, [topic]);

  const bySlug = useMemo(() => new Map(items.map((i) => [i.slug, i])), [items]);
  const ql = q.trim().toLowerCase();
  const matches = (i: IndicatorSummary) => !ql || [i.name, i.short_name, i.slug, i.unit, i.subtopic, i.description].some((s) => (s ?? '').toLowerCase().includes(ql));

  const sections = useMemo(() => {
    const order = topic ? TOPICS.filter((tp) => tp.id === topic) : TOPICS;
    return order
      .map((tp) => {
        const slugs = topicMembers[tp.id] ?? items.filter((i) => i.topic === tp.id).map((i) => i.slug);
        const rows = slugs.map((s) => bySlug.get(s)).filter((i): i is IndicatorSummary => !!i && matches(i));
        return { tp, rows, total: slugs.length };
      })
      .filter((s) => s.rows.length > 0 || !ql);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [topic, ql, items, topicMembers, bySlug]);

  // Unique indicators shown: an indicator can belong to several topics, so summing section rows over-counts ("302 of 261").
  const shown = new Set(sections.flatMap((s) => s.rows.map((r) => r.slug))).size;

  const choose = (id: string | null) => {
    setTopic(id);
    router.replace(routes.indicators(id ?? undefined), { scroll: false });
  };

  const nav = (
    <nav ref={navRef} aria-label={t('indicators.topics')} className="lg:sticky lg:top-20">
      <ul className="scrollbar-none -mx-4 flex gap-1 overflow-x-auto px-4 pb-1 lg:mx-0 lg:flex-col lg:gap-0 lg:overflow-visible lg:px-0">
        <li className="shrink-0">
          <button type="button" aria-current={topic == null} onClick={() => choose(null)} className={cn('inline-flex h-11 w-full items-center justify-between gap-2 whitespace-nowrap rounded-sm px-3 text-sm lg:h-9 lg:px-2', topic == null ? 'bg-ink text-paper' : 'text-ink-2 hover:bg-surface-2 hover:text-ink')}>
            {t('indicators.allTopics')}
            <span className={cn('tnum text-2xs', topic == null ? 'text-paper/70' : 'text-ink-3')}>{grouped(items.length)}</span>
          </button>
        </li>
        {TOPICS.map((tp) => {
          const n = (topicMembers[tp.id] ?? []).length || items.filter((i) => i.topic === tp.id).length;
          const active = topic === tp.id;
          return (
            <li key={tp.id} className="shrink-0">
              <button type="button" aria-current={active} onClick={() => choose(tp.id)} className={cn('inline-flex h-11 w-full items-center justify-between gap-2 whitespace-nowrap rounded-sm px-3 text-sm lg:h-9 lg:px-2', active ? 'bg-ink text-paper' : 'text-ink-2 hover:bg-surface-2 hover:text-ink')}>
                {tp.short}
                <span className={cn('tnum text-2xs', active ? 'text-paper/70' : 'text-ink-3')}>{n}</span>
              </button>
            </li>
          );
        })}
      </ul>
    </nav>
  );

  return (
    <div className="lg:grid lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-10">
      <div className="lg:self-start">{nav}</div>
      <div className="min-w-0">
        <div className="flex flex-wrap items-center gap-2 py-3">
          <div className="relative min-w-0 flex-1 basis-56">
            <input type="search" value={q} onChange={(e) => setQ(e.target.value)} placeholder={t('indicators.search')} aria-label={t('indicators.search')} className="h-11 w-full rounded-sm border border-rule bg-surface px-3 text-sm outline-none placeholder:text-ink-3 focus:border-accent md:h-10" />
            {q ? (
              <button type="button" onClick={() => setQ('')} className="absolute right-0 top-0 grid h-11 w-10 place-items-center text-ink-3 hover:text-ink md:h-10" aria-label={t('search.clear')}>
                <X size={14} aria-hidden />
              </button>
            ) : null}
          </div>
          <span className="tnum ml-auto text-xs text-ink-3">{t('indicators.count', { n: grouped(shown), total: grouped(items.length) })}</span>
        </div>

        {shown === 0 ? <p className="py-10 text-center text-sm text-ink-3">{t('indicators.noMatch')}</p> : null}

        {sections.map(({ tp, rows }) =>
          rows.length === 0 ? null : (
            <section key={tp.id} id={`topic-${tp.id}`} className="scroll-mt-28 pt-4 pb-6">
              <div className="flex items-baseline justify-between gap-3 border-b border-rule pb-1.5">
                <h2 className="display text-xl text-ink md:text-2xl">
                  {topic ? tp.name : <button type="button" onClick={() => choose(tp.id)} className="link-quiet text-left">{tp.name}</button>}
                </h2>
                <span className="tnum text-xs text-ink-3">{t('indicators.inTopic', { n: rows.length, topic: tp.short })}</span>
              </div>
              {topic ? <p className="mt-1 text-sm text-ink-2">{tp.blurb}</p> : null}
              <ul className="divide-y divide-rule">
                {rows.map((i) => (
                  <IndicatorRowItem key={`${tp.id}-${i.slug}`} i={i} />
                ))}
              </ul>
            </section>
          ),
        )}
      </div>
    </div>
  );
}

function IndicatorRowItem({ i }: { i: IndicatorSummary }) {
  const cov = i.n_countries != null ? (i.first_year && i.last_year ? t('indicators.coverage', { n: grouped(i.n_countries), y0: i.first_year, y1: i.last_year }) : t('indicators.coverageShort', { n: grouped(i.n_countries) })) : t('common.noData');
  const tp = topicById(i.topic ?? '');
  return (
    <li className="py-2.5">
      <div className="grid gap-x-6 gap-y-1 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center">
        <div className="min-w-0">
          <Link href={routes.indicator(i.slug)} className="link-quiet -my-1 inline-flex min-h-[44px] items-center py-1 text-sm font-medium text-ink md:min-h-0">
            {i.name ?? i.slug}
            {i.featured ? <span className="ml-2 rounded-xs border border-rule px-1 text-2xs font-normal uppercase tracking-wide text-ink-3">{t('indicators.featured')}</span> : null}
          </Link>
          <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-ink-3">
            {i.unit ? <span>{i.unit}</span> : null}
            {i.subtopic ? <span>· {i.subtopic}</span> : tp ? <span>· {tp.short}</span> : null}
            <span className="tnum">· {cov}</span>
            {i.primary_source_id ? (
              <Link href={routes.source(i.primary_source_id)} className="-my-3 inline-flex min-h-[44px] items-center md:-my-1 md:min-h-0">
                <span className="rounded-xs border border-rule px-1 py-px text-2xs uppercase tracking-wide hover:border-accent hover:text-accent">
                  {i.primary_source_id}
                </span>
              </Link>
            ) : null}
            {i.latest_source_updated_at ? <FreshnessBadge retrievedAt={i.latest_source_updated_at} /> : null}
            {i.latest_source_updated_at ? <span className="sr-only">{t('indicators.freshness', { date: formatDate(i.latest_source_updated_at) })}</span> : null}
          </div>
        </div>
        <div className="flex flex-wrap gap-x-3 text-xs">
          <Link href={routes.indicator(i.slug)} className="inline-flex min-h-[44px] items-center text-accent hover:underline md:min-h-[32px]">
            {t('indicators.openLink')}
          </Link>
          {i.ranking_eligible !== false ? (
            <Link href={routes.ranking(i.slug)} className="inline-flex min-h-[44px] items-center text-accent hover:underline md:min-h-[32px]">
              {t('indicators.rankingLink')}
            </Link>
          ) : null}
          <Link href={`${routes.compare()}?indicator=${encodeURIComponent(i.slug)}`} className="inline-flex min-h-[44px] items-center text-ink-2 hover:text-accent hover:underline md:min-h-[32px]">
            {t('indicators.compareLink')}
          </Link>
        </div>
      </div>
    </li>
  );
}