/**
 * Small server-renderable SVG charts for account pages: one system (hairlines, tabular numbers,
 * neutral ink, accents only for gain/loss/index). No client JS required.
 */
import { cn } from '@/lib/format';

// Categorical identity: the four validated series tokens in fixed order; beyond four, fold into muted steps ('Other').
const PALETTE = ['var(--ri-series-1, #2f5bd6)', 'var(--ri-series-2, #c2410c)', 'var(--ri-series-3, #0e9384)', 'var(--ri-series-4, #7c3aed)', 'var(--ri-fg-muted)', 'var(--ri-fg-subtle)', 'var(--ri-border-strong)', 'var(--ri-border)'];

export function Donut({ data, size = 120, thickness = 14, className, centerLabel, centerValue }: { data: Array<{ label: string; value: number }>; size?: number; thickness?: number; className?: string; centerLabel?: string; centerValue?: string }) {
  const total = data.reduce((a, d) => a + d.value, 0);
  const r = (size - thickness) / 2;
  const c = 2 * Math.PI * r;
  let offset = 0;
  return (
    <div className={cn('flex items-center gap-4', className)}>
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} role="img" aria-label="Allocation">
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="var(--ri-bg-inset)" strokeWidth={thickness} />
        {total > 0
          ? data.map((d, i) => {
              const len = (d.value / total) * c;
              const gap = data.length > 1 ? Math.min(2, len / 2) : 0; // 2px surface gap between segments
              const el = <circle key={d.label} cx={size / 2} cy={size / 2} r={r} fill="none" stroke={PALETTE[i % PALETTE.length]} strokeWidth={thickness} strokeDasharray={`${Math.max(0, len - gap)} ${c - len + gap}`} strokeDashoffset={-offset} transform={`rotate(-90 ${size / 2} ${size / 2})`} />;
              offset += len;
              return el;
            })
          : null}
        {centerValue ? (
          <>
            <text x="50%" y="48%" textAnchor="middle" fontSize={size / 9} fontWeight={600} fill="var(--ri-fg)" style={{ fontVariantNumeric: 'tabular-nums' }}>
              {centerValue}
            </text>
            {centerLabel ? (
              <text x="50%" y="62%" textAnchor="middle" fontSize={size / 13} fill="var(--ri-fg-subtle)">
                {centerLabel}
              </text>
            ) : null}
          </>
        ) : null}
      </svg>
      <ul className="min-w-0 flex-1 space-y-1 text-xs">
        {data.slice(0, 8).map((d, i) => (
          <li key={d.label} className="flex items-center gap-2">
            <span className="h-2 w-2 shrink-0 rounded-sm" style={{ background: PALETTE[i % PALETTE.length] }} />
            <span className="min-w-0 flex-1 truncate text-muted">{d.label}</span>
            <span className="num text-fg">{total > 0 ? `${((d.value / total) * 100).toFixed(0)}%` : '—'}</span>
          </li>
        ))}
        {data.length === 0 ? <li className="text-subtle">No valued items yet.</li> : null}
      </ul>
    </div>
  );
}

export interface SeriesPoint {
  date: string;
  value: number;
}

export function LineChart({ series, height = 180, className, formatY = (v: number) => v.toFixed(0), showArea = true, ariaLabel = 'Value over time' }: { series: Array<{ name: string; points: SeriesPoint[]; color?: string; dashed?: boolean }>; height?: number; className?: string; formatY?: (v: number) => string; showArea?: boolean; ariaLabel?: string }) {
  const all = series.flatMap((s) => s.points);
  if (all.length < 2) {
    return (
      <div className={cn('flex items-center justify-center rounded-md border border-dashed border-border text-xs text-subtle', className)} style={{ height }}>
        Not enough history yet — values are snapshotted daily.
      </div>
    );
  }
  const W = 640;
  const H = height;
  const padL = 44;
  const padR = 8;
  const padT = 8;
  const padB = 20;
  const dates = [...new Set(all.map((p) => p.date))].sort();
  const t0 = new Date(dates[0]!).getTime();
  const t1 = new Date(dates[dates.length - 1]!).getTime();
  const min = Math.min(...all.map((p) => p.value));
  const max = Math.max(...all.map((p) => p.value));
  const span = max - min || max || 1;
  const yMin = min - span * 0.08;
  const yMax = max + span * 0.08;
  const x = (d: string) => padL + ((new Date(d).getTime() - t0) / Math.max(1, t1 - t0)) * (W - padL - padR);
  const y = (v: number) => padT + (1 - (v - yMin) / (yMax - yMin)) * (H - padT - padB);
  const ticks = [yMin + (yMax - yMin) * 0.1, (yMin + yMax) / 2, yMax - (yMax - yMin) * 0.1];
  return (
    <svg viewBox={`0 0 ${W} ${H}`} className={cn('h-auto w-full', className)} role="img" aria-label={ariaLabel} preserveAspectRatio="none">
      {ticks.map((t) => (
        <g key={t}>
          <line x1={padL} x2={W - padR} y1={y(t)} y2={y(t)} stroke="var(--ri-border)" />
          <text x={padL - 6} y={y(t) + 3} textAnchor="end" fontSize={10} fill="var(--ri-fg-subtle)" style={{ fontVariantNumeric: 'tabular-nums' }}>
            {formatY(t)}
          </text>
        </g>
      ))}
      {series.map((s, i) => {
        const pts = [...s.points].sort((a, b) => a.date.localeCompare(b.date));
        const d = pts.map((p, j) => `${j === 0 ? 'M' : 'L'}${x(p.date).toFixed(1)},${y(p.value).toFixed(1)}`).join(' ');
        const color = s.color ?? PALETTE[i % PALETTE.length];
        const last = pts[pts.length - 1]!;
        return (
          <g key={s.name}>
            {showArea && i === 0 ? <path d={`${d} L${x(last.date).toFixed(1)},${H - padB} L${x(pts[0]!.date).toFixed(1)},${H - padB} Z`} fill={color} opacity={0.06} /> : null}
            <path d={d} fill="none" stroke={color} strokeWidth={2} strokeDasharray={s.dashed ? '4 3' : undefined} vectorEffect="non-scaling-stroke" />
            <circle cx={x(last.date)} cy={y(last.value)} r={2.5} fill={color} />
          </g>
        );
      })}
      <text x={padL} y={H - 6} fontSize={10} fill="var(--ri-fg-subtle)">
        {dates[0]}
      </text>
      <text x={W - padR} y={H - 6} fontSize={10} textAnchor="end" fill="var(--ri-fg-subtle)">
        {dates[dates.length - 1]}
      </text>
    </svg>
  );
}

export function Sparkline({ points, width = 96, height = 24, positive }: { points: number[]; width?: number; height?: number; positive?: boolean | null }) {
  if (points.length < 2) return <span className="text-subtle">—</span>;
  const min = Math.min(...points);
  const max = Math.max(...points);
  const span = max - min || 1;
  const d = points.map((v, i) => `${i === 0 ? 'M' : 'L'}${((i / (points.length - 1)) * width).toFixed(1)},${(height - 2 - ((v - min) / span) * (height - 4)).toFixed(1)}`).join(' ');
  const stroke = positive === null || positive === undefined ? 'var(--ri-fg-muted)' : positive ? 'var(--ri-gain)' : 'var(--ri-loss)';
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} aria-hidden>
      <path d={d} fill="none" stroke={stroke} strokeWidth={1.4} />
    </svg>
  );
}

export function Bars({ data, className, format = (v: number) => v.toFixed(0) }: { data: Array<{ label: string; value: number; tone?: 'gain' | 'loss' | 'neutral' }>; className?: string; format?: (v: number) => string }) {
  const max = Math.max(1, ...data.map((d) => Math.abs(d.value)));
  return (
    <ul className={cn('space-y-1.5 text-xs', className)}>
      {data.map((d) => (
        <li key={d.label} className="grid grid-cols-[minmax(0,1fr)_120px_64px] items-center gap-2">
          <span className="truncate text-muted">{d.label}</span>
          <span className="h-2 rounded-sm bg-inset">
            <span className={cn('block h-2 rounded-sm', d.tone === 'loss' ? 'bg-loss' : d.tone === 'gain' ? 'bg-gain' : 'bg-index')} style={{ width: `${(Math.abs(d.value) / max) * 100}%` }} />
          </span>
          <span className={cn('num text-right', d.tone === 'loss' ? 'text-loss' : d.tone === 'gain' ? 'text-gain' : 'text-fg')}>{format(d.value)}</span>
        </li>
      ))}
    </ul>
  );
}

export function Progress({ value, className }: { value: number; className?: string }) {
  const v = Math.max(0, Math.min(1, value));
  return (
    <span className={cn('block h-1.5 w-full rounded-full bg-inset', className)}>
      <span className={cn('block h-1.5 rounded-full', v >= 1 ? 'bg-gain' : 'bg-index')} style={{ width: `${v * 100}%` }} />
    </span>
  );
}