'use client';
import { ChevronRight, Search, X } from 'lucide-react';
import Link from 'next/link';
import { useMemo, useState } from 'react';
import { t } from '@/i18n';
import { grouped } from '@/lib/format';
import { routes } from '@/lib/site';
import { TOPICS } from '@/lib/topics';
import type { RankingRow } from '@/lib/types';
import type { RankableIndicator } from '@/lib/types-compare';
import { Top3Preview } from './top3-preview';

/**
 * /rankings directory: featured first, then every rankable indicator grouped by topic. Each entry shows
 * "n countries · year" and a top-3 preview. The search box filters client-side on name / unit / topic.
 */
export function RankingsDirectory({ items, previews }: { items: RankableIndicator[]; previews: Record<string, RankingRow[] | null> }) {
  const [q, setQ] = useState('');
  const ql = q.trim().toLowerCase();
  const filtered = useMemo(() => (ql ? items.filter((i) => (i.name ?? '').toLowerCase().includes(ql) || (i.short_name ?? '').toLowerCase().includes(ql) || (i.unit ?? '').toLowerCase().includes(ql) || (i.topic ?? '').includes(ql) || (i.subtopic ?? '').toLowerCase().includes(ql)) : items), [items, ql]);
  const featured = filtered.filter((i) => i.featured);
  const byTopic = TOPICS.map((tp) => ({ tp, items: filtered.filter((i) => i.topic === tp.id).sort((a, b) => Number(!!b.featured) - Number(!!a.featured) || (a.name ?? '').localeCompare(b.name ?? '')) })).filter((g) => g.items.length);
  const other = filtered.filter((i) => !TOPICS.some((tp) => tp.id === i.topic));

  return (
    <div>
      <div className="sticky top-[52px] z-20 -mx-4 border-b border-rule bg-paper/95 px-4 py-2 backdrop-blur supports-[backdrop-filter]:bg-paper/85 sm:-mx-6 sm:px-6 md:static md:mx-0 md:border-0 md:bg-transparent md:px-0 md:py-3">
        <div className="flex items-center gap-3">
          <div className="relative min-w-0 flex-1 md:max-w-md">
            <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" value={q} onChange={(e) => setQ(e.target.value)} placeholder={t('rankings.search')} aria-label={t('rankings.search')} className="h-11 w-full rounded-sm border border-rule bg-surface pl-9 pr-9 text-sm text-ink outline-none placeholder:text-ink-3 focus:border-accent md:h-10" />
            {q ? (
              <button type="button" onClick={() => setQ('')} className="absolute right-1 top-1/2 grid h-9 w-9 -translate-y-1/2 place-items-center text-ink-3 hover:text-ink" aria-label={t('search.clear')}>
                <X size={14} aria-hidden />
              </button>
            ) : null}
          </div>
          <span className="tnum shrink-0 text-xs text-ink-3">{ql ? t('rankings.countOf', { n: grouped(filtered.length), total: grouped(items.length) }) : t('rankings.count', { n: grouped(items.length) })}</span>
        </div>
      </div>

      {filtered.length === 0 ? <p className="py-10 text-center text-sm text-ink-3">{t('rankings.noMatch', { q })}</p> : null}

      {featured.length && !ql ? (
        <section className="pt-4 pb-6 md:pt-6 md:pb-8" aria-labelledby="featured-h">
          <h2 id="featured-h" className="display text-xl text-ink md:text-2xl">
            {t('rankings.featured')}
          </h2>
          <p className="mt-1 text-sm text-ink-2">{t('rankings.featured.sub')}</p>
          <ul className="mt-3 grid gap-x-8 sm:grid-cols-2 lg:grid-cols-3">
            {featured.map((i) => (
              <Entry key={i.slug} item={i} preview={previews[i.slug]} />
            ))}
          </ul>
        </section>
      ) : null}

      {byTopic.map(({ tp, items: rows }) => (
        <section key={tp.id} id={`topic-${tp.id}`} className="hairline scroll-mt-28 pt-5 pb-6 md:pt-6 md:pb-8" aria-labelledby={`topic-${tp.id}-h`}>
          <div className="flex flex-wrap items-baseline justify-between gap-x-6 gap-y-1">
            <h2 id={`topic-${tp.id}-h`} className="display text-xl text-ink md:text-2xl">
              {tp.name}
            </h2>
            <span className="tnum text-xs text-ink-3">{t('rankings.count', { n: rows.length })}</span>
          </div>
          <ul className="mt-2 grid gap-x-8 sm:grid-cols-2 lg:grid-cols-3">
            {rows.map((i) => (
              <Entry key={i.slug} item={i} preview={previews[i.slug]} />
            ))}
          </ul>
        </section>
      ))}

      {other.length ? (
        <section className="hairline pt-5 pb-6">
          <ul className="grid gap-x-8 sm:grid-cols-2 lg:grid-cols-3">
            {other.map((i) => (
              <Entry key={i.slug} item={i} preview={previews[i.slug]} />
            ))}
          </ul>
        </section>
      ) : null}
    </div>
  );
}

function Entry({ item, preview }: { item: RankableIndicator; preview: RankingRow[] | null | undefined }) {
  const name = item.name ?? item.slug;
  return (
    <li className="border-t border-rule">
      <Link href={routes.ranking(item.slug)} className="group block min-h-[72px] py-2.5" aria-label={t('rankings.open', { name })}>
        <span className="flex items-start justify-between gap-2">
          <span className="min-w-0">
            <span className="block text-sm font-medium leading-snug text-ink group-hover:text-accent">{name}</span>
            <span className="tnum block text-2xs text-ink-3">
              {t('rankings.meta', { n: grouped(item.ranking_n ?? item.n_countries ?? 0), year: item.ranking_year ?? item.last_year ?? '' })}
              {item.unit ? ` · ${item.unit}` : ''}
            </span>
          </span>
          <ChevronRight size={14} aria-hidden className="mt-0.5 shrink-0 text-ink-3 group-hover:text-accent" />
        </span>
        <span className="mt-1 block">
          <Top3Preview slug={item.slug} spec={item} initial={preview} />
        </span>
      </Link>
    </li>
  );
}