'use client';
import { ArrowDown, ArrowUp } from 'lucide-react';
import Link from 'next/link';
import { useMemo, useState } from 'react';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';
import { formatValue, isNum } from '@/lib/format';
import { routes } from '@/lib/site';
import type { IndicatorCard } from '@/lib/types';
import type { RegionMember } from '@/lib/types-explore';

/**
 * Sortable members table (flag, name + up to 5 headline values). Table on sm+, list rows on phones (each row
 * shows the country and the first three values). Sorting is client-side; default = population desc.
 */
export function MembersTable({ members, indicators }: { members: RegionMember[]; indicators: IndicatorCard[] }) {
  const cols = indicators.slice(0, 5);
  const [sort, setSort] = useState<{ key: string; dir: 'asc' | 'desc' }>({ key: cols[0]?.slug ?? 'name', dir: 'desc' });

  const rows = useMemo(() => {
    const copy = [...members];
    const num = (m: RegionMember, k: string) => {
      const v = m.values[k]?.value;
      return isNum(v) ? v : null;
    };
    copy.sort((a, b) => {
      if (sort.key === 'name') return (sort.dir === 'asc' ? 1 : -1) * (a.name ?? '').localeCompare(b.name ?? '');
      const va = num(a, sort.key);
      const vb = num(b, sort.key);
      if (va == null && vb == null) return (a.name ?? '').localeCompare(b.name ?? '');
      if (va == null) return 1;
      if (vb == null) return -1;
      return sort.dir === 'asc' ? va - vb : vb - va;
    });
    return copy;
  }, [members, sort]);

  const toggle = (key: string) => setSort((s) => (s.key === key ? { key, dir: s.dir === 'asc' ? 'desc' : 'asc' } : { key, dir: key === 'name' ? 'asc' : 'desc' }));
  const Th = ({ k, label, numeric }: { k: string; label: string; numeric?: boolean }) => {
    const active = sort.key === k;
    return (
      <th scope="col" aria-sort={active ? (sort.dir === 'asc' ? 'ascending' : 'descending') : 'none'} className={cn('py-1.5 pr-3 font-medium', numeric && 'text-right')}>
        <button type="button" onClick={() => toggle(k)} className={cn('inline-flex min-h-[32px] items-center gap-1 rounded-xs hover:text-ink', active ? 'text-ink' : 'text-ink-3', numeric && 'justify-end')}>
          {label}
          {active ? sort.dir === 'asc' ? <ArrowUp size={12} aria-hidden /> : <ArrowDown size={12} aria-hidden /> : null}
        </button>
      </th>
    );
  };

  return (
    <div className="min-w-0">
      {/* Mobile sort control */}
      <div className="mb-2 flex items-center gap-2 sm:hidden">
        <label className="inline-flex h-11 items-center gap-1.5 rounded-sm border border-rule bg-surface px-2 text-sm text-ink-2">
          <span className="text-xs">{t('common.sortBy')}</span>
          <select value={sort.key} onChange={(e) => setSort({ key: e.target.value, dir: e.target.value === 'name' ? 'asc' : 'desc' })} className="bg-transparent pr-1 text-ink outline-none">
            <option value="name">{t('common.name')}</option>
            {cols.map((c) => (
              <option key={c.slug} value={c.slug}>
                {c.short_name ?? c.name}
              </option>
            ))}
          </select>
        </label>
        <button type="button" onClick={() => setSort((s) => ({ ...s, dir: s.dir === 'asc' ? 'desc' : 'asc' }))} className="tap inline-flex items-center justify-center rounded-sm border border-rule text-ink-2" aria-label={sort.dir === 'asc' ? t('table.sortAsc') : t('table.sortDesc')}>
          {sort.dir === 'asc' ? <ArrowUp size={15} aria-hidden /> : <ArrowDown size={15} aria-hidden />}
        </button>
      </div>

      <table className="hidden w-full border-collapse text-sm sm:table">
        <thead>
          <tr className="border-b border-rule text-left text-xs">
            <Th k="name" label={t('region.members.country')} />
            {cols.map((c) => (
              <Th key={c.slug} k={c.slug} label={c.short_name ?? c.name ?? c.slug} numeric />
            ))}
          </tr>
        </thead>
        <tbody className="divide-y divide-rule">
          {rows.map((m) => (
            <tr key={m.id} className="hover:bg-surface-2/60">
              <td className="py-2 pr-3">
                <Link href={routes.country(m.slug ?? m.id)} className="link-quiet inline-flex min-h-[32px] items-center gap-2 text-ink">
                  <span aria-hidden className="text-base leading-none">{m.flag}</span>
                  <span className="truncate">{m.name}</span>
                </Link>
              </td>
              {cols.map((c) => {
                const v = m.values[c.slug];
                return (
                  <td key={c.slug} className="tnum py-2 pr-3 text-right text-ink">
                    {v && isNum(v.value) ? (
                      <>
                        {formatValue(v.value, c)}
                        {v.year ? <span className="ml-1 text-2xs text-ink-3">{v.year}</span> : null}
                      </>
                    ) : (
                      <span className="text-ink-3">{t('region.members.noValue')}</span>
                    )}
                  </td>
                );
              })}
            </tr>
          ))}
        </tbody>
      </table>

      <ul className="divide-y divide-rule sm:hidden">
        {rows.map((m) => (
          <li key={m.id} className="py-2.5">
            <Link href={routes.country(m.slug ?? m.id)} className="link-quiet flex min-h-[44px] items-center gap-2 text-sm font-medium text-ink">
              <span aria-hidden className="text-lg leading-none">{m.flag}</span>
              <span className="truncate">{m.name}</span>
            </Link>
            {/* Values never truncate: the year sits on its own line under the value. */}
            <dl className="mt-1 grid grid-cols-3 gap-x-3">
              {cols.slice(0, 3).map((c) => {
                const v = m.values[c.slug];
                const has = !!v && isNum(v.value);
                return (
                  <div key={c.slug} className="min-w-0">
                    <dt className="truncate text-2xs text-ink-3">{c.short_name ?? c.name}</dt>
                    <dd className="tnum text-sm leading-tight text-ink">
                      <span className="block break-words">{has ? formatValue(v.value, c) : t('region.members.noValue')}</span>
                      {has && v.year ? <span className="block text-2xs text-ink-3">{v.year}</span> : null}
                    </dd>
                  </div>
                );
              })}
            </dl>
          </li>
        ))}
      </ul>
    </div>
  );
}