'use client';
import { Info } from 'lucide-react';
import { t } from '@/i18n';
import { formatDate } from '@/lib/format';
import type { Provenance } from '@/lib/types';
import { useProvenance, type ProvenancePayload } from '@/components/data/provenance-context';

/**
 * "Source: World Bank — WDI · NY.GDP.PCAP.CD · retrieved 11 Sep 2026". Click → provenance sheet
 * (when `payload` is given) — otherwise a plain text line.
 */
export function SourceLine({ provenance, payload, className }: { provenance: Provenance | null | undefined; payload?: ProvenancePayload | null; className?: string }) {
  const { open } = useProvenance();
  if (!provenance) return null;
  const parts = [provenance.source_name, provenance.dataset].filter(Boolean).join(' — ');
  const text = [parts, provenance.series_code, provenance.retrieved_at ? t('common.retrieved', { date: formatDate(provenance.retrieved_at) }) : null]
    .filter(Boolean)
    .join(' · ');
  const inner = (
    <>
      <span className="text-ink-3">{t('common.source')}: </span>
      <span>{text}</span>
    </>
  );
  if (!payload) return <p className={`text-2xs text-ink-2 ${className ?? ''}`}>{inner}</p>;
  return (
    <button
      type="button"
      onClick={() => open(payload)}
      className={`group inline-flex min-h-[32px] max-w-full items-center gap-1 text-left text-2xs text-ink-2 hover:text-accent ${className ?? ''}`}
      aria-label={t('common.openProvenance')}
    >
      <span className="truncate">{inner}</span>
      <Info size={12} aria-hidden className="shrink-0 text-ink-3 group-hover:text-accent" />
    </button>
  );
}