'use client';

import { useCallback, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from 'react';
import { compactNumber, fmtDay, fmtDayFull, fullNumber, niceTicks, parseDay } from './scale';

/**
 * Price-history chart for asset pages: verified sales (dots), daily RareIndex Valuation (line) with its
 * low–high band, lowest ask and guide observations (dashed), a current-RIV reference line, period
 * control (URL hash), log/linear toggle and a touch-first crosshair. Follows the dataviz spec:
 * 2px lines, ≥8px markers with a surface ring, hairline solid grid, ≤5 axis ticks, text in text tokens,
 * legend for ≥2 series, hidden data table for assistive tech.
 */

export interface SalePoint {
  date: string;
  usd: number;
  label?: string;
  variantId?: string | null;
}
export interface DailyPoint {
  x: string;
  y: number;
  low?: number | null;
  high?: number | null;
}
export type Period = '1M' | '3M' | '6M' | '1Y' | '3Y' | '5Y' | 'ALL';
const PERIODS: Array<{ id: Period; days: number | null }> = [
  { id: '1M', days: 31 },
  { id: '3M', days: 92 },
  { id: '6M', days: 183 },
  { id: '1Y', days: 366 },
  { id: '3Y', days: 1096 },
  { id: '5Y', days: 1827 },
  { id: 'ALL', days: null },
];

export interface PriceChartProps {
  sales: SalePoint[];
  riv?: DailyPoint[];
  ask?: DailyPoint[];
  guide?: DailyPoint[];
  reference?: { value: number; label: string } | null;
  height?: number;
  ariaLabel: string;
  emptyLabel?: string;
  /** URL hash key used to persist the period (default "p") */
  hashKey?: string;
  defaultPeriod?: Period;
  className?: string;
}

const C = {
  riv: 'var(--ri-series-1, #2f5bd6)',
  sales: 'var(--ri-series-2, #c2410c)',
  ask: 'var(--ri-series-3, #0e9384)',
  guide: 'var(--ri-series-4, #7c3aed)',
};

function writeHash(key: string, value: string) {
  if (typeof window === 'undefined') return;
  const parts = window.location.hash.replace(/^#/, '').split('&').filter((kv) => kv && !kv.startsWith(`${key}=`));
  parts.push(`${key}=${encodeURIComponent(value)}`);
  window.history.replaceState(null, '', `${window.location.pathname}${window.location.search}#${parts.join('&')}`);
  for (const l of hashListeners) l();
}
const hashListeners = new Set<() => void>();
function subscribeHash(cb: () => void) {
  hashListeners.add(cb);
  window.addEventListener('hashchange', cb);
  return () => {
    hashListeners.delete(cb);
    window.removeEventListener('hashchange', cb);
  };
}

export function PriceChart({ sales, riv = [], ask = [], guide = [], reference = null, height = 300, ariaLabel, emptyLabel = 'No priced observations yet for this asset', hashKey = 'p', defaultPeriod = 'ALL', className }: PriceChartProps) {
  const wrap = useRef<HTMLDivElement>(null);
  const [width, setWidth] = useState(720);
  // Period/scale live in the URL hash (shareable, survives reloads). Read through an external store so
  // the server render (no hash) and the client stay consistent without effects.
  const hash = useSyncExternalStore(subscribeHash, () => (typeof window === 'undefined' ? '' : window.location.hash), () => '');
  const hashPeriod = (hash.replace(/^#/, '').split('&').find((kv) => kv.startsWith(`${hashKey}=`))?.slice(hashKey.length + 1) ?? null) as Period | null;
  const period: Period = hashPeriod && PERIODS.some((x) => x.id === hashPeriod) ? hashPeriod : defaultPeriod;
  const scaleChoice = hash.includes('scale=log') ? 'log' : hash.includes('scale=linear') ? 'linear' : null;
  const [hover, setHover] = useState<{ px: number; sticky: boolean } | null>(null);
  const uid = useId();

  useEffect(() => {
    const el = wrap.current;
    if (!el) return;
    const ro = new ResizeObserver((entries) => {
      for (const e of entries) setWidth(Math.max(280, Math.floor(e.contentRect.width)));
    });
    ro.observe(el);
    return () => ro.disconnect();
  }, []);

  const data = useMemo(() => {
    const s = sales.map((p) => ({ x: parseDay(p.date), y: p.usd, label: p.label ?? null })).filter((p) => Number.isFinite(p.x) && p.y > 0).sort((a, b) => a.x - b.x);
    const line = (pts: DailyPoint[]) => pts.map((p) => ({ x: parseDay(p.x), y: p.y, low: p.low ?? null, high: p.high ?? null })).filter((p) => Number.isFinite(p.x) && Number.isFinite(p.y) && p.y > 0).sort((a, b) => a.x - b.x);
    return { sales: s, riv: line(riv), ask: line(ask), guide: line(guide) };
  }, [sales, riv, ask, guide]);

  const all = [...data.sales, ...data.riv, ...data.ask, ...data.guide];
  const lastX = all.length ? Math.max(...all.map((p) => p.x)) : 0;
  const days = PERIODS.find((p) => p.id === period)?.days ?? null;
  const cutoff = days ? lastX - days * 86_400_000 : -Infinity;
  const vis = {
    sales: data.sales.filter((p) => p.x >= cutoff),
    riv: data.riv.filter((p) => p.x >= cutoff),
    ask: data.ask.filter((p) => p.x >= cutoff),
    guide: data.guide.filter((p) => p.x >= cutoff),
  };
  const visAll = [...vis.sales, ...vis.riv, ...vis.ask, ...vis.guide];
  const available = PERIODS.filter((p) => p.days === null || all.some((pt) => pt.x < lastX - p.days! * 86_400_000) || p.id === period);

  const setPeriodPersist = useCallback((p: Period) => writeHash(hashKey, p), [hashKey]);
  const setLog = (v: boolean) => writeHash('scale', v ? 'log' : 'linear');

  if (all.length === 0) {
    return (
      <div ref={wrap} className={className}>
        <div className="flex items-center justify-center rounded-md border border-dashed border-border text-xs text-subtle" style={{ height: Math.min(height, 180) }}>
          {emptyLabel}
        </div>
      </div>
    );
  }

  // ---- scales
  const pad = { top: 14, right: 58, bottom: 26, left: 6 };
  const W = width;
  const H = height;
  const iw = W - pad.left - pad.right;
  const ih = H - pad.top - pad.bottom;
  const xsAll = visAll.length ? visAll.map((p) => p.x) : [lastX];
  let xMin = Math.min(...xsAll);
  let xMax = Math.max(...xsAll);
  if (days) xMin = Math.min(xMin, cutoff);
  if (xMax - xMin < 7 * 86_400_000) {
    xMin -= 15 * 86_400_000;
    xMax += 15 * 86_400_000;
  }
  const ysRaw = visAll.flatMap((p) => ('low' in p && p.low != null && p.high != null ? [p.y, p.low, p.high] : [p.y])).concat(reference ? [reference.value] : []);
  const positive = ysRaw.filter((y) => y > 0);
  const spread = positive.length ? Math.max(...positive) / Math.min(...positive) : 1;
  const log = scaleChoice ? scaleChoice === 'log' : spread > 40;
  const canLog = log && ysRaw.every((y) => y > 0);
  const ty = (y: number) => (canLog ? Math.log10(y) : y);
  const fy = (v: number) => (canLog ? 10 ** v : v);
  let yMin = Math.min(...ysRaw.map(ty));
  let yMax = Math.max(...ysRaw.map(ty));
  if (!Number.isFinite(yMin) || !Number.isFinite(yMax)) {
    yMin = 0;
    yMax = 1;
  }
  if (yMin === yMax) {
    yMin -= Math.abs(yMin) * 0.05 || 1;
    yMax += Math.abs(yMax) * 0.05 || 1;
  }
  const yPad = (yMax - yMin) * 0.08;
  yMin -= yPad;
  yMax += yPad;
  const ticks = canLog ? logTicks(fy(yMin), fy(yMax)) : niceTicks(yMin, yMax, W < 480 ? 3 : 4);
  const sx = (x: number) => Math.round((pad.left + ((x - xMin) / (xMax - xMin)) * iw) * 100) / 100;
  const sy = (y: number) => Math.round((pad.top + ih - ((ty(y) - yMin) / (yMax - yMin)) * ih) * 100) / 100;
  const span = xMax - xMin;
  const xTicks = timeTicks(xMin, xMax, Math.max(2, Math.min(5, Math.floor(iw / 96))));
  const linePath = (pts: Array<{ x: number; y: number }>) => pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${sx(p.x).toFixed(1)},${sy(p.y).toFixed(1)}`).join(' ');
  const band = vis.riv.filter((p) => p.low != null && p.high != null);
  const bandPath = band.length >= 2 ? `${band.map((p, i) => `${i === 0 ? 'M' : 'L'}${sx(p.x).toFixed(1)},${sy(p.high!).toFixed(1)}`).join(' ')} ${[...band].reverse().map((p) => `L${sx(p.x).toFixed(1)},${sy(p.low!).toFixed(1)}`).join(' ')} Z` : null;

  // ---- hover: nearest date across series
  const hoverX = hover ? xMin + ((hover.px - pad.left) / iw) * (xMax - xMin) : null;
  const nearest = <T extends { x: number }>(pts: T[]): T | null => {
    if (hoverX === null || !pts.length) return null;
    let best = pts[0]!;
    let bd = Infinity;
    for (const p of pts) {
      const d = Math.abs(p.x - hoverX);
      if (d < bd) {
        bd = d;
        best = p;
      }
    }
    return best;
  };
  const hRiv = nearest(vis.riv);
  const hAsk = nearest(vis.ask);
  const hGuide = nearest(vis.guide);
  // sales: nearest within 3% of the span so a finger lands on a dot, not a random one far away
  const hSaleCand = nearest(vis.sales);
  const hSale = hSaleCand && hoverX !== null && Math.abs(hSaleCand.x - hoverX) <= Math.max(span * 0.03, 86_400_000) ? hSaleCand : null;
  const hDate = hover ? [hSale?.x, hRiv?.x, hAsk?.x, hGuide?.x].filter((x): x is number => x !== undefined).sort((a, b) => Math.abs(a - hoverX!) - Math.abs(b - hoverX!))[0] ?? null : null;

  const onPointer = (e: React.PointerEvent<SVGSVGElement>, sticky: boolean) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const px = ((e.clientX - rect.left) / Math.max(1, rect.width)) * W;
    if (px >= pad.left - 8 && px <= pad.left + iw + 8) setHover({ px: Math.min(pad.left + iw, Math.max(pad.left, px)), sticky });
  };

  const series = [
    vis.sales.length ? { id: 'sales', label: `Sales (${vis.sales.length})`, color: C.sales, kind: 'dots' as const } : null,
    vis.riv.length ? { id: 'riv', label: 'RIV (daily)', color: C.riv, kind: 'line' as const } : null,
    bandPath ? { id: 'band', label: 'RIV low–high', color: C.riv, kind: 'band' as const } : null,
    vis.ask.length ? { id: 'ask', label: 'Lowest ask', color: C.ask, kind: 'dashed' as const } : null,
    vis.guide.length ? { id: 'guide', label: 'Guide price', color: C.guide, kind: 'dashed' as const } : null,
  ].filter((s): s is NonNullable<typeof s> => Boolean(s));

  const readout = hDate !== null;
  const fmtFull = (v: number) => fullNumber(v, { currency: true });

  return (
    <div ref={wrap} className={`relative min-w-0 max-w-full overflow-hidden ${className ?? ''}`}>
      {/* controls */}
      <div className="mb-2 flex items-center justify-between gap-2">
        <div className="scrollbar-none -mx-1 flex min-w-0 flex-1 gap-0.5 overflow-x-auto px-1" role="group" aria-label="Period">
          {available.map((p) => (
            <button key={p.id} type="button" aria-pressed={period === p.id} onClick={() => setPeriodPersist(p.id)} className={`num h-8 min-w-[40px] shrink-0 rounded-md px-2 text-[12px] font-medium ${period === p.id ? 'bg-accent text-accent-fg' : 'text-muted hover:bg-inset hover:text-fg'}`}>
              {p.id}
            </button>
          ))}
        </div>
        <div className="flex shrink-0 items-center gap-1 text-[11px]">
          <button type="button" aria-pressed={canLog} onClick={() => setLog(!log)} disabled={!ysRaw.every((y) => y > 0)} className={`h-8 rounded-md border px-2 font-medium ${canLog ? 'border-fg bg-accent text-accent-fg' : 'border-border text-muted hover:text-fg'} disabled:opacity-40`} title="Logarithmic scale">
            Log
          </button>
        </div>
      </div>

      {/* readout (touch-friendly: never under the finger) */}
      <div className="mb-1 flex min-h-[34px] flex-wrap items-center gap-x-3 gap-y-0.5 rounded-md bg-sunken px-2.5 py-1.5 text-[11px]" aria-live="polite">
        {readout ? (
          <>
            <span className="font-medium text-fg">{fmtDayFull(hDate!)}</span>
            {hSale ? (
              <span className="inline-flex items-center gap-1 text-muted">
                <i className="inline-block h-2 w-2 rounded-full" style={{ background: C.sales }} />
                Sale <b className="num font-semibold text-fg">{fmtFull(hSale.y)}</b>
                {hSale.label ? <span className="text-subtle">· {hSale.label}</span> : null}
              </span>
            ) : null}
            {hRiv ? (
              <span className="inline-flex items-center gap-1 text-muted">
                <i className="inline-block h-0.5 w-3 rounded-full" style={{ background: C.riv }} />
                RIV <b className="num font-semibold text-fg">{fmtFull(hRiv.y)}</b>
                {hRiv.low != null && hRiv.high != null ? <span className="num text-subtle">({compactNumber(hRiv.low, { currency: true })}–{compactNumber(hRiv.high, { currency: true })})</span> : null}
              </span>
            ) : null}
            {hAsk ? (
              <span className="inline-flex items-center gap-1 text-muted">
                <i className="inline-block h-0.5 w-3 rounded-full" style={{ background: C.ask }} />
                Ask <b className="num font-semibold text-fg">{fmtFull(hAsk.y)}</b>
              </span>
            ) : null}
            {hGuide ? (
              <span className="inline-flex items-center gap-1 text-muted">
                <i className="inline-block h-0.5 w-3 rounded-full" style={{ background: C.guide }} />
                Guide <b className="num font-semibold text-fg">{fmtFull(hGuide.y)}</b>
              </span>
            ) : null}
          </>
        ) : (
          <span className="text-subtle">
            {visAll.length ? <>Touch or hover the chart · {vis.sales.length.toLocaleString('en-US')} sales · {vis.riv.length.toLocaleString('en-US')} daily valuations{canLog ? ' · log scale' : ''}</> : 'No observations in this period'}
          </span>
        )}
      </div>

      <svg
        width="100%"
        height={H}
        viewBox={`0 0 ${W} ${H}`}
        preserveAspectRatio="none"
        role="img"
        aria-label={ariaLabel}
        className="block max-w-full select-none"
        style={{ touchAction: 'pan-y' }}
        onPointerDown={(e) => onPointer(e, e.pointerType !== 'mouse')}
        onPointerMove={(e) => {
          if (e.pointerType === 'mouse' || e.buttons > 0) onPointer(e, e.pointerType !== 'mouse');
        }}
        onPointerLeave={(e) => {
          if (e.pointerType === 'mouse') setHover(null);
        }}
      >
        <defs>
          <clipPath id={`${uid}-clip`}>
            <rect x={pad.left - 6} y={0} width={iw + 12} height={H} />
          </clipPath>
        </defs>
        {ticks.map((t) => (
          <g key={t}>
            <line x1={pad.left} x2={pad.left + iw} y1={sy(t)} y2={sy(t)} stroke="var(--ri-border)" strokeWidth={1} shapeRendering="crispEdges" />
            <text x={W - pad.right + 6} y={sy(t)} dy="0.32em" fontSize={10} fill="var(--ri-fg-subtle)" className="num">
              {compactNumber(t, { currency: true })}
            </text>
          </g>
        ))}
        {xTicks.map((t) => (
          <text key={t} x={sx(t)} y={H - 8} fontSize={10} textAnchor="middle" fill="var(--ri-fg-subtle)">
            {fmtDay(t, span)}
          </text>
        ))}
        <g clipPath={`url(#${uid}-clip)`}>
          {bandPath ? <path d={bandPath} fill={C.riv} opacity={0.1} /> : null}
          {vis.guide.length >= 2 ? <path d={linePath(vis.guide)} fill="none" stroke={C.guide} strokeWidth={2} strokeDasharray="4 4" strokeLinejoin="round" strokeLinecap="round" /> : null}
          {vis.ask.length >= 2 ? <path d={linePath(vis.ask)} fill="none" stroke={C.ask} strokeWidth={2} strokeDasharray="4 4" strokeLinejoin="round" strokeLinecap="round" /> : null}
          {vis.riv.length >= 2 ? <path d={linePath(vis.riv)} fill="none" stroke={C.riv} strokeWidth={2} strokeLinejoin="round" strokeLinecap="round" /> : null}
          {vis.riv.length === 1 ? <circle cx={sx(vis.riv[0]!.x)} cy={sy(vis.riv[0]!.y)} r={4} fill={C.riv} stroke="var(--ri-bg-elevated)" strokeWidth={2} /> : null}
          {reference ? (
            <g>
              <line x1={pad.left} x2={pad.left + iw} y1={sy(reference.value)} y2={sy(reference.value)} stroke="var(--ri-fg-subtle)" strokeWidth={1} strokeDasharray="2 3" />
              <text x={pad.left + 4} y={sy(reference.value) - 4} fontSize={10} fill="var(--ri-fg-muted)">
                {reference.label}
              </text>
            </g>
          ) : null}
          {vis.sales.map((p, i) => (
            <circle key={i} cx={sx(p.x)} cy={sy(p.y)} r={vis.sales.length > 400 ? 3 : 4} fill={C.sales} stroke="var(--ri-bg-elevated)" strokeWidth={vis.sales.length > 400 ? 1 : 1.5} opacity={0.9} />
          ))}
          {hDate !== null ? <line x1={sx(hDate)} x2={sx(hDate)} y1={pad.top} y2={pad.top + ih} stroke="var(--ri-border-strong)" strokeWidth={1} /> : null}
          {hSale ? <circle cx={sx(hSale.x)} cy={sy(hSale.y)} r={6} fill={C.sales} stroke="var(--ri-bg-elevated)" strokeWidth={2} /> : null}
          {hRiv && hDate !== null ? <circle cx={sx(hRiv.x)} cy={sy(hRiv.y)} r={5} fill={C.riv} stroke="var(--ri-bg-elevated)" strokeWidth={2} /> : null}
        </g>
      </svg>

      {series.length > 1 ? (
        <ul className="mt-1.5 flex flex-wrap gap-x-4 gap-y-1 text-[11px] text-muted" aria-label="Legend">
          {series.map((s) => (
            <li key={s.id} className="flex items-center gap-1.5">
              {s.kind === 'dots' ? <span className="inline-block h-2 w-2 rounded-full" style={{ background: s.color }} /> : s.kind === 'band' ? <span className="inline-block h-2.5 w-4 rounded-sm" style={{ background: s.color, opacity: 0.2 }} /> : <span className="inline-block h-0.5 w-4 rounded-full" style={{ background: s.color, ...(s.kind === 'dashed' ? { backgroundImage: `repeating-linear-gradient(90deg, ${s.color} 0 4px, transparent 4px 7px)` } : {}) }} />}
              {s.label}
            </li>
          ))}
        </ul>
      ) : null}

      {/* accessible data table */}
      <table className="sr-only">
        <caption>{ariaLabel}</caption>
        <thead>
          <tr>
            <th>Date</th>
            <th>Series</th>
            <th>USD</th>
          </tr>
        </thead>
        <tbody>
          {vis.sales.slice(-200).map((p, i) => (
            <tr key={`s${i}`}>
              <td>{fmtDayFull(p.x)}</td>
              <td>Sale{p.label ? ` (${p.label})` : ''}</td>
              <td>{fmtFull(p.y)}</td>
            </tr>
          ))}
          {vis.riv.slice(-200).map((p, i) => (
            <tr key={`r${i}`}>
              <td>{fmtDayFull(p.x)}</td>
              <td>RIV</td>
              <td>{fmtFull(p.y)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function timeTicks(min: number, max: number, count: number): number[] {
  if (max <= min) return [min];
  const span = max - min;
  const day = 86_400_000;
  const candidates = [day, 2 * day, 7 * day, 14 * day, 30 * day, 61 * day, 91 * day, 182 * day, 365 * day, 730 * day, 1826 * day, 3652 * day];
  const want = Math.max(3, count);
  // largest step that still yields at least `want` ticks; otherwise the smallest step
  let step = candidates[0]!;
  for (const c of candidates) if (span / c >= want - 1) step = c;
  const out: number[] = [];
  const start = Math.ceil(min / step) * step;
  for (let t = start; t <= max; t += step) out.push(t);
  while (out.length > count + 1) out.splice(1, 1); // thin if the step produced too many
  if (out.length < 2) return [min + span * 0.15, min + span * 0.5, min + span * 0.85];
  return out;
}

function logTicks(min: number, max: number): number[] {
  const out: number[] = [];
  const lo = Math.floor(Math.log10(Math.max(min, 1e-9)));
  const hi = Math.ceil(Math.log10(Math.max(max, 1e-9)));
  for (let e = lo; e <= hi; e++) {
    for (const m of [1, 2, 5]) {
      const v = m * 10 ** e;
      if (v >= min && v <= max) out.push(v);
    }
  }
  if (out.length <= 5) return out;
  const n = out.length;
  return [0, 1, 2, 3, 4].map((i) => out[Math.round((i * (n - 1)) / 4)]!);
}