import type { ReactNode } from 'react';
import { fmt, fmtDelta } from '@/lib/format';
import { levelById, levelFor, pressureColor, trendArrow, type LEVELS } from '@/lib/pressure';
import type { LevelId, Trend } from '@/lib/types';

export function Section({ id, label, title, right, children, className = '' }: { id?: string; label?: string; title?: string; right?: ReactNode; children: ReactNode; className?: string }) {
  return (
    <section id={id} className={`hairline pt-4 pb-6 ${className}`}>
      {(label || title || right) && (
        <header className="mb-3 flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1">
          <div className="flex items-baseline gap-3">
            {label && <span className="label">{label}</span>}
            {title && <h2 className="text-[15px] font-medium text-ink">{title}</h2>}
          </div>
          {right && <div className="text-xs text-ink-2">{right}</div>}
        </header>
      )}
      {children}
    </section>
  );
}

export function LevelBadge({ level, value, size = 'sm' }: { level?: LevelId | string | null; value?: number | null; size?: 'xs' | 'sm' | 'md' }) {
  const l = level ? levelById(level) : value != null ? levelFor(value) : undefined;
  const color = l?.color ?? '#3A4756';
  const cls = size === 'xs' ? 'text-[10px] tracking-[0.1em]' : size === 'md' ? 'text-[13px] tracking-[0.12em]' : 'text-[11px] tracking-[0.12em]';
  return (
    <span className={`inline-flex items-center gap-1.5 font-medium uppercase ${cls}`} style={{ color }}>
      <span className="inline-block size-1.5 rounded-full" style={{ background: color }} aria-hidden="true" />
      {l?.short ?? 'n/a'}
    </span>
  );
}

/** Pressure numeral coloured by level. */
export function PNum({ value, digits = 1, className = '' }: { value: number | null | undefined; digits?: number; className?: string }) {
  return (
    <span className={`num ${className}`} style={{ color: value == null ? 'var(--ink-3)' : pressureColor(value) }}>
      {fmt(value, digits)}
    </span>
  );
}

/** Signed delta with arrow; rising pressure is warm, falling is cool. */
export function Delta({ value, trend, digits = 1, suffix, className = '' }: { value: number | null | undefined; trend?: Trend; digits?: number; suffix?: string; className?: string }) {
  if (value == null) return <span className={`num text-ink-3 ${className}`}>—</span>;
  const arrow = trendArrow(trend, value);
  const color = value > 0.05 ? 'var(--p-stressed)' : value < -0.05 ? 'var(--p-calm)' : 'var(--ink-2)';
  return (
    <span className={`num ${className}`} style={{ color }}>
      {arrow} {fmtDelta(value, digits)}
      {suffix ? <span className="text-ink-3"> {suffix}</span> : null}
    </span>
  );
}

/** Thin horizontal bar 0–100 coloured by pressure (or a fixed colour). */
export function Bar({ value, max = 100, color, height = 3, className = '' }: { value: number | null | undefined; max?: number; color?: string; height?: number; className?: string }) {
  const v = value == null ? 0 : Math.max(0, Math.min(max, value));
  return (
    <span className={`block w-full overflow-hidden bg-line/70 ${className}`} style={{ height }} aria-hidden="true">
      <span className="block h-full transition-[width] duration-700 ease-out" style={{ width: `${(v / max) * 100}%`, background: color ?? (value == null ? 'var(--ink-3)' : pressureColor(value)) }} />
    </span>
  );
}

export function ConfBar({ value, className = '' }: { value: number | null | undefined; className?: string }) {
  return (
    <span className={`inline-flex items-center gap-2 ${className}`}>
      <Bar value={value == null ? null : value * 100} color="var(--accent)" className="w-14" />
      <span className="num text-xs text-ink-2">{value == null ? '—' : `${Math.round(value * 100)} %`}</span>
    </span>
  );
}

/** Pure-SVG sparkline; renders on the server. Nulls break the line (missing data is shown as a gap, never interpolated). */
export function Sparkline({ values, width = 240, height = 36, color = 'var(--accent)', bands = false, strokeWidth = 1.25, className = '' }: { values: (number | null)[]; width?: number; height?: number; color?: string; bands?: boolean; strokeWidth?: number; className?: string }) {
  const nums = values.filter((v): v is number => v != null);
  if (nums.length < 2) return <svg width={width} height={height} className={className} aria-hidden="true" />;
  const min = bands ? 0 : Math.min(...nums);
  const max = bands ? 100 : Math.max(...nums);
  const span = max - min || 1;
  const x = (i: number) => (i / (values.length - 1)) * (width - 2) + 1;
  const y = (v: number) => height - 2 - ((v - min) / span) * (height - 4);
  let d = '';
  let pen = false;
  values.forEach((v, i) => {
    if (v == null) {
      pen = false;
      return;
    }
    d += `${pen ? 'L' : 'M'}${x(i).toFixed(1)},${y(v).toFixed(1)} `;
    pen = true;
  });
  const last = [...values].reverse().find((v) => v != null);
  const lastI = values.length - 1 - [...values].reverse().findIndex((v) => v != null);
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} className={className} aria-hidden="true" preserveAspectRatio="none">
      <path d={d} fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinejoin="round" strokeLinecap="round" vectorEffect="non-scaling-stroke" />
      {last != null && <circle cx={x(lastI)} cy={y(last)} r={2} fill={color} />}
    </svg>
  );
}

export function Empty({ children = 'Not observed' }: { children?: ReactNode }) {
  return <p className="py-6 text-center text-xs text-ink-3">{children}</p>;
}

export function Stat({ label, value, sub, className = '' }: { label: string; value: ReactNode; sub?: ReactNode; className?: string }) {
  return (
    <div className={`min-w-0 ${className}`}>
      <div className="label truncate">{label}</div>
      <div className="num mt-0.5 text-[17px] leading-tight text-ink">{value}</div>
      {sub && <div className="mt-0.5 truncate text-[11px] text-ink-2">{sub}</div>}
    </div>
  );
}

export function StatusDot({ status }: { status: string }) {
  const color: Record<string, string> = { online: 'var(--ok)', stale: 'var(--warn)', offline: 'var(--bad)', excluded: 'var(--ink-3)', detected: 'var(--p-elevated)', developing: 'var(--p-stressed)', active: 'var(--p-high)', recovering: 'var(--p-calm)', resolved: 'var(--ink-3)', ok: 'var(--ok)', degraded: 'var(--warn)' };
  return (
    <span className="inline-flex items-center gap-1.5 text-[11px] uppercase tracking-[0.1em]" style={{ color: color[status] ?? 'var(--ink-2)' }}>
      <span className="size-1.5 rounded-full" style={{ background: color[status] ?? 'var(--ink-2)' }} aria-hidden="true" />
      {status}
    </span>
  );
}

export function LevelLegend({ compact = false }: { compact?: boolean }) {
  return (
    <ul className={`flex flex-wrap items-center gap-x-3 gap-y-1 ${compact ? 'text-[10px]' : 'text-[11px]'} text-ink-2`}>
      {(
        [
          ['calm', '≤10'],
          ['normal', '≤25'],
          ['elevated', '≤40'],
          ['stressed', '≤55'],
          ['high', '≤70'],
          ['severe', '≤85'],
          ['extreme', '≤100'],
        ] as [LevelId, string][]
      ).map(([id, range]) => {
        const l = levelById(id) as (typeof LEVELS)[number];
        return (
          <li key={id} className="inline-flex items-center gap-1.5">
            <span className="size-2 rounded-[1px]" style={{ background: l.color }} aria-hidden="true" />
            <span>{l.short}</span>
            {!compact && <span className="num text-ink-3">{range}</span>}
          </li>
        );
      })}
      <li className="inline-flex items-center gap-1.5">
        <span className="size-2 rounded-[1px] border border-line-2 bg-neutral" aria-hidden="true" />
        <span>not observed</span>
      </li>
    </ul>
  );
}