'use client';
import { Check, Code2, Download, ExternalLink } from 'lucide-react';
import Link from 'next/link';
import { useEffect, useState } from 'react';
import { t } from '@/i18n';
import { displayValue, formatDate, formatPeriod } from '@/lib/format';
import { routes } from '@/lib/site';
import type { ObservationStatus } from '@/lib/types';
import { BottomSheet } from './bottom-sheet';
import { StatusBadge } from './freshness-badge';
import { useProvenance } from './provenance-context';
import { QualityBadges, QualityStrip, deriveBadges } from './quality-badge';

/**
 * Global provenance sheet 2.0: mounted once in the root layout; opened by <Metric>, chart source lines and any
 * component calling `useProvenance().open(payload)`. Layout: value block (indicator · country · period · value),
 * SOURCE / DATASET / SERIES / SOURCE UPDATED / RETRIEVED / LICENCE, transform + status, quality badges, actions
 * [Open original] [API] [Download series] [Indicator page].
 */
export function ProvenanceSheet() {
  const { payload, close } = useProvenance();
  const open = !!payload;
  const ind = payload?.indicator;
  const v = payload?.value ?? null;
  const p = v?.provenance ?? null;
  const country = payload?.country ?? null;
  const download = payload?.downloadHref ?? (country ? routes.countryDownload(country.id) : ind ? routes.indicatorDownload(ind.slug) : null);
  const apiPath = ind ? (country ? `/api/v1/countries/${country.id}/series/${ind.slug}` : `/api/v1/indicators/${ind.slug}`) : null;
  const [copied, setCopied] = useState(false);
  useEffect(() => {
    if (!open) setCopied(false);
  }, [open]);

  const copyApi = async () => {
    if (!apiPath) return;
    const url = `${window.location.origin}${apiPath}`;
    try {
      await navigator.clipboard.writeText(url);
      setCopied(true);
      setTimeout(() => setCopied(false), 1800);
    } catch {
      /* clipboard unavailable — the link below still opens the docs */
    }
  };

  const badges = payload?.quality?.badges ?? (v ? deriveBadges({ latestYear: v.year ?? null, firstYear: payload?.quality?.firstYear ?? null, points: payload?.quality?.points ?? null, hasForecast: v.is_forecast, referenceYear: payload?.quality?.referenceYear ?? null }) : []);

  return (
    <BottomSheet open={open} onClose={close} labelledBy="prov-title" title={<span id="prov-title">{t('prov.title')}</span>}>
      {payload && ind ? (
        <div className="space-y-5 text-sm">
          {/* Value block */}
          <div>
            <div className="eyebrow">{ind.name}</div>
            {country ? (
              <h3 className="display mt-1 text-xl text-ink">
                {country.flag ? <span aria-hidden>{country.flag} </span> : null}
                {country.name}
              </h3>
            ) : (
              <h3 className="display mt-1 text-xl text-ink">{t('common.world')}</h3>
            )}
            {v ? (
              <div className="mt-2 flex flex-wrap items-baseline gap-x-3 gap-y-1">
                <span className="tnum text-3xl font-semibold text-ink">{displayValue(v.value, ind, v.formatted)}</span>
                <span className="tnum text-ink-2">{formatPeriod(v.period, ind.frequency)}</span>
                {v.status ? <StatusBadge status={v.status as ObservationStatus} /> : null}
                {v.is_forecast ? <span className="text-xs text-ink-3">{t('common.forecast')}</span> : null}
                {v.is_estimate ? <span className="text-xs text-ink-3">{t('common.estimate')}</span> : null}
              </div>
            ) : (
              <p className="mt-2 text-ink-3">{t('prov.noValue')}</p>
            )}
            {v?.is_forecast ? <p className="mt-1 text-xs text-ink-3">{t('prov.status.forecastNote')}</p> : null}
          </div>

          <dl className="divide-y divide-rule border-y border-rule">
            <Row k={t('prov.source')} v={p?.source_name ?? t('common.na')} strong />
            <Row k={t('prov.dataset')} v={p?.dataset ?? t('common.na')} />
            <Row k={t('prov.series')} v={p?.series_code ?? t('common.na')} mono />
            <Row k={t('prov.observation')} v={formatPeriod(v?.period, ind.frequency)} />
            <Row k={t('prov.sourceUpdated')} v={formatDate(p?.source_updated_at)} />
            <Row k={t('prov.retrieved')} v={formatDate(p?.retrieved_at)} />
            <Row k={t('prov.unit')} v={v?.unit ?? ind.unit ?? t('common.na')} />
            <Row k={t('prov.transform')} v={p?.transform ?? t('prov.none')} mono={!!p?.transform} />
            <Row k={t('prov.licence')} v={p?.licence ?? t('common.na')} />
          </dl>

          {badges.length || payload.quality ? (
            <div>
              <div className="eyebrow mb-1">{t('prov.quality')}</div>
              {payload.quality ? <QualityStrip latestYear={payload.quality.latestYear} firstYear={payload.quality.firstYear} points={payload.quality.points} missingYears={payload.quality.missingYears} continuityPct={payload.quality.continuityPct} coveragePct={payload.quality.coveragePct} badges={badges} /> : <QualityBadges badges={badges} />}
              <p className="mt-1.5 text-xs text-ink-3">{t('quality.noScore')}</p>
            </div>
          ) : null}

          {ind.methodology || ind.description ? (
            <div>
              <div className="eyebrow">{ind.methodology ? t('prov.methodology') : t('prov.definition')}</div>
              <p className="mt-1 text-ink-2">{ind.methodology ?? ind.description}</p>
            </div>
          ) : null}

          <div className="flex flex-wrap gap-2 pt-1">
            {p?.url ? (
              <a href={p.url} target="_blank" rel="noopener noreferrer" className="tap inline-flex items-center gap-1.5 rounded-sm border border-rule px-3 text-sm hover:bg-surface-2">
                <ExternalLink size={14} aria-hidden /> {t('prov.openSource')}
              </a>
            ) : null}
            {apiPath ? (
              <Link href={routes.api()} onClick={() => void copyApi()} className="tap inline-flex items-center gap-1.5 rounded-sm border border-rule px-3 text-sm hover:bg-surface-2" title={t('prov.apiHint')} aria-live="polite">
                {copied ? <Check size={14} aria-hidden className="text-up" /> : <Code2 size={14} aria-hidden />}
                {copied ? t('prov.copiedApi') : t('prov.copyApi')}
              </Link>
            ) : null}
            {download ? (
              <a href={download} className="tap inline-flex items-center gap-1.5 rounded-sm border border-rule px-3 text-sm hover:bg-surface-2">
                <Download size={14} aria-hidden /> {t('prov.downloadSeries')}
              </a>
            ) : null}
            <Link href={routes.indicator(ind.slug)} className="tap inline-flex items-center rounded-sm px-3 text-sm text-accent hover:underline" onClick={close}>
              {t('prov.indicatorPage')} →
            </Link>
          </div>
          {apiPath ? <code className="block break-all font-mono text-2xs text-ink-3">{apiPath}</code> : null}
        </div>
      ) : null}
    </BottomSheet>
  );
}

function Row({ k, v, mono, strong }: { k: string; v: string; mono?: boolean; strong?: boolean }) {
  return (
    <div className="grid grid-cols-[8.5rem_1fr] gap-3 py-2">
      <dt className="text-2xs font-medium uppercase tracking-wide text-ink-3 pt-0.5">{k}</dt>
      <dd className={mono ? 'break-all font-mono text-[13px] text-ink' : strong ? 'font-medium text-ink' : 'text-ink'}>{v}</dd>
    </div>
  );
}