'use client';
import { Download } from 'lucide-react';
import Link from 'next/link';
import { useState } from 'react';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';
import { routes } from '@/lib/site';
import { EntityPicker, type PickedEntity } from './entity-picker';

/** Typeahead → CSV / JSON download links for a country or an indicator dataset. */
export function DownloadPicker({ type }: { type: 'country' | 'indicator' }) {
  const [picked, setPicked] = useState<PickedEntity | null>(null);
  const href = (fmt: 'csv' | 'json') => (picked ? (type === 'country' ? routes.countryDownload(picked.id, fmt) : routes.indicatorDownload(picked.slug, fmt)) : '#');
  const disabled = !picked;
  const cls = cn('inline-flex min-h-[44px] items-center gap-1.5 rounded-sm border px-3 text-sm md:min-h-[36px]', disabled ? 'pointer-events-none border-rule text-ink-3' : 'border-rule text-ink hover:bg-surface-2');
  return (
    <div className="min-w-0">
      <EntityPicker type={type} placeholder={type === 'country' ? t('data.country.search') : t('data.indicator.search')} onPick={setPicked} keepValue className="max-w-md" />
      <div className="mt-3 flex flex-wrap items-center gap-2">
        <a href={href('csv')} className={cls} aria-disabled={disabled} download>
          <Download size={14} aria-hidden /> CSV
        </a>
        <a href={href('json')} className={cls} aria-disabled={disabled} download>
          <Download size={14} aria-hidden /> JSON
        </a>
        {picked ? (
          <Link href={type === 'country' ? routes.country(picked.slug) : routes.indicator(picked.slug)} className="inline-flex min-h-[44px] items-center gap-1 text-sm text-accent hover:underline md:min-h-[36px]">
            {picked.flag ? <span aria-hidden>{picked.flag}</span> : null}
            {picked.name} →
          </Link>
        ) : (
          <span className="text-xs text-ink-3">{t('data.pick')}</span>
        )}
      </div>
    </div>
  );
}