'use client';
import { useEffect, useRef, useState } from 'react';
import Link from 'next/link';
import { t } from '@/i18n';
import { clientApi } from '@/lib/client-api';
import { cn } from '@/lib/cn';
import { displayValue, formatPeriod } from '@/lib/format';
import { routes } from '@/lib/site';
import type { MetricValue, SeriesResponse } from '@/lib/types';
import { LineChart } from '@/components/charts/line-chart';
import { pointsFromSeries, pointsFromSpark } from '@/components/charts/scales';
import { ChangeChip } from '@/components/data/change-chip';
import { EmptyState } from '@/components/data/empty-state';
import { payloadFor, type MetricCountry } from '@/components/data/metric';
import { useProvenance } from '@/components/data/provenance-context';
import { RankBadge } from '@/components/data/rank-badge';

const CHART_H = 220;

/**
 * One indicator on a topic page: name, latest value + change + rank, full-history LineChart (dashed forecast),
 * source line, Compare / Ranking / Indicator links. `series` (server-fetched) renders immediately; otherwise
 * the chart mounts on scroll (IntersectionObserver) and fetches `/countries/{id}/series/{slug}` client-side.
 * The chart area reserves its height so nothing shifts.
 */
export function IndicatorRow({ metric, country, regionName, series: initialSeries, eager = false }: { metric: MetricValue; country: MetricCountry; regionName?: string | null; series?: SeriesResponse | null; eager?: boolean }) {
  const { open } = useProvenance();
  const m = metric;
  const ref = useRef<HTMLDivElement>(null);
  const [series, setSeries] = useState<SeriesResponse | null | undefined>(initialSeries);
  const [visible, setVisible] = useState(eager || !!initialSeries);
  const [error, setError] = useState(false);

  useEffect(() => {
    if (visible || !ref.current) return;
    const el = ref.current;
    if (typeof IntersectionObserver === 'undefined') {
      setVisible(true);
      return;
    }
    const io = new IntersectionObserver(
      (entries) => {
        if (entries.some((e) => e.isIntersecting)) {
          setVisible(true);
          io.disconnect();
        }
      },
      { rootMargin: '400px 0px' },
    );
    io.observe(el);
    return () => io.disconnect();
  }, [visible]);

  useEffect(() => {
    if (!visible || series !== undefined || !m.has_data) return;
    const ctrl = new AbortController();
    clientApi
      .countrySeries(country.id, m.indicator, ctrl.signal)
      .then((r) => setSeries(r))
      .catch((e) => {
        if ((e as Error).name !== 'AbortError') {
          setError(true);
          setSeries(null);
        }
      });
    return () => ctrl.abort();
  }, [visible, series, m.has_data, m.indicator, country.id]);

  const name = m.indicator_name ?? m.indicator;
  const points = series ? pointsFromSeries(series.values) : pointsFromSpark(m.sparkline);
  const spec = { format: m.format, unit: m.unit, unit_short: m.unit_short, frequency: m.frequency, name, higher_is_better: m.higher_is_better, precision: series?.indicator.precision ?? null };
  const payload = payloadFor(m, country, { name: series?.indicator.name ?? name });

  return (
    <article id={m.indicator} ref={ref} className="scroll-mt-32 border-t border-rule py-5 md:py-6" aria-labelledby={`${m.indicator}-h`}>
      <div className="grid gap-x-8 gap-y-3 md:grid-cols-[minmax(0,17rem)_1fr] lg:grid-cols-[minmax(0,19rem)_1fr]">
        <div className="min-w-0">
          <h3 id={`${m.indicator}-h`} className="text-base font-semibold leading-snug text-ink">
            <Link href={routes.indicator(m.indicator)} className="link-quiet -my-2 inline-flex min-h-[44px] items-center py-2">
              {series?.indicator.name ?? name}
            </Link>
          </h3>
          {m.unit ? <p className="text-xs text-ink-3">{m.unit}</p> : null}
          {m.has_data ? (
            <button type="button" onClick={() => open(payload)} className="-mx-1 mt-2 flex min-h-[44px] flex-col items-start rounded-sm px-1 text-left hover:bg-surface-2" aria-label={t('common.openProvenance')}>
              <span className="pnum text-2xl font-semibold leading-none text-ink">{displayValue(m.value, spec, m.formatted)}</span>
              <span className="mt-1 flex flex-wrap items-baseline gap-x-2 text-xs text-ink-3">
                <span className="tnum">{formatPeriod(m.period, m.frequency)}</span>
                {m.is_estimate ? <span>{t('common.estimate')}</span> : null}
                <ChangeChip change={m.change} spec={spec} prevPeriod={m.prev?.period} />
              </span>
            </button>
          ) : null}
          <div className="mt-1 min-h-[1rem]">
            <RankBadge rank={m} regionName={regionName} />
          </div>
          <div className="mt-3 flex flex-wrap gap-x-3 gap-y-1 text-xs">
            <Link href={routes.compare(country.slug ?? country.id)} className="inline-flex min-h-[44px] items-center text-accent hover:underline md:min-h-[32px]">
              {t('topic.compareLink')}
            </Link>
            <Link href={routes.ranking(m.indicator)} className="inline-flex min-h-[44px] items-center text-accent hover:underline md:min-h-[32px]">
              {t('topic.rankingLink')}
            </Link>
            <Link href={routes.indicator(m.indicator)} className="inline-flex min-h-[44px] items-center text-ink-2 hover:text-accent hover:underline md:min-h-[32px]">
              {t('topic.indicatorLink')}
            </Link>
          </div>
        </div>
        <div className="min-w-0" style={{ minHeight: CHART_H + 40 }}>
          {!m.has_data ? (
            <EmptyState compact title={t('empty.title', { indicator: name, country: country.name })} />
          ) : error ? (
            <EmptyState compact title={t('common.errorHint')} />
          ) : points.length >= 2 ? (
            <LineChart
              series={[{ id: m.indicator, name: country.name, points }]}
              spec={spec}
              subject={`${country.name}'s ${(series?.indicator.short_name ?? name).toLowerCase()}`}
              height={CHART_H}
              provenance={series?.provenance ?? m.provenance}
              payload={payload}
              defaultWidth={720}
              className={cn(!series && 'opacity-90')}
            />
          ) : (
            <div className="grid h-full place-items-center text-sm text-ink-3" style={{ minHeight: CHART_H }}>
              {t('common.loading')}
            </div>
          )}
        </div>
      </div>
    </article>
  );
}