import { useState } from "react";

/** Grouped/stacked daily bars: ok vs bad. Thin marks, rounded ends, 2px gaps, hover tooltip. */
export function DailyBars({ data, width = 640, height = 170 }: { data: { day: string; ok: number; bad: number; n: number }[]; width?: number; height?: number }) {
  const [tip, setTip] = useState<{ x: number; y: number; d: (typeof data)[number] } | null>(null);
  if (!data.length) return <div className="empty">No executions in the last 14 days.</div>;
  const m = { l: 34, r: 8, t: 10, b: 24 };
  const w = width - m.l - m.r, h = height - m.t - m.b;
  const max = Math.max(1, ...data.map((d) => d.ok + d.bad));
  const bw = w / data.length;
  const ticks = [0, 0.5, 1].map((f) => Math.round(max * f));
  return (
    <div>
      <div className="legend"><span><i style={{ background: "var(--s1)" }} />succeeded</span><span><i style={{ background: "var(--s8)" }} />failed / blocked</span></div>
      <svg className="chart" viewBox={`0 0 ${width} ${height}`} role="img" aria-label="Executions per day, succeeded versus failed">
        <g className="grid">{ticks.map((t) => <line key={t} x1={m.l} x2={width - m.r} y1={m.t + h - (t / max) * h} y2={m.t + h - (t / max) * h} />)}</g>
        {ticks.map((t) => <text key={t} x={m.l - 4} y={m.t + h - (t / max) * h + 4} textAnchor="end">{t}</text>)}
        {data.map((d, i) => {
          const x = m.l + i * bw + bw * 0.2, bwi = Math.max(3, bw * 0.6);
          const hOk = (d.ok / max) * h, hBad = (d.bad / max) * h;
          const yBad = m.t + h - hBad, yOk = yBad - hOk - (hOk && hBad ? 2 : 0);
          return (
            <g key={d.day} onMouseEnter={(e) => setTip({ x: e.clientX, y: e.clientY, d })} onMouseMove={(e) => setTip({ x: e.clientX, y: e.clientY, d })} onMouseLeave={() => setTip(null)}>
              <rect x={m.l + i * bw} y={m.t} width={bw} height={h} fill="transparent" />
              {hBad > 0 && <rect x={x} y={yBad} width={bwi} height={hBad} rx={3} fill="var(--s8)" />}
              {hOk > 0 && <rect x={x} y={yOk} width={bwi} height={hOk} rx={3} fill="var(--s1)" />}
              {(i % Math.ceil(data.length / 7) === 0 || data.length <= 7) && <text x={x + bwi / 2} y={height - 6} textAnchor="middle">{d.day.slice(5)}</text>}
            </g>
          );
        })}
        <line className="axis" x1={m.l} x2={width - m.r} y1={m.t + h} y2={m.t + h} />
      </svg>
      {tip && <div className="tooltip" style={{ left: tip.x + 12, top: tip.y + 12 }}><b>{tip.d.day}</b><br />succeeded {tip.d.ok} · failed/blocked {tip.d.bad} · total {tip.d.n}</div>}
    </div>
  );
}

/** Horizontal breakdown bars for categorical counts (one hue, labels in text tokens). */
export function Breakdown({ items, color = "var(--s1)" }: { items: { label: string; n: number; tone?: string }[]; color?: string }) {
  if (!items.length) return <div className="empty">Nothing yet.</div>;
  const max = Math.max(1, ...items.map((i) => i.n));
  return (
    <div className="stack">
      {items.map((it) => (
        <div key={it.label} className="row" style={{ gap: 8, flexWrap: "nowrap" }}>
          <span style={{ width: 150, fontSize: 13, color: "var(--text-2)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{it.label}</span>
          <svg width="100%" height="12" style={{ flex: 1 }} role="img" aria-label={`${it.label}: ${it.n}`}><rect x={0} y={1} width={`${(it.n / max) * 100}%`} height={10} rx={3} fill={it.tone ? `var(--${it.tone})` : color} /></svg>
          <span style={{ width: 44, textAlign: "right", fontVariantNumeric: "tabular-nums", fontSize: 13 }}>{it.n}</span>
        </div>
      ))}
    </div>
  );
}

export function Sparkline({ points, width = 320, height = 48, label }: { points: { x: string; y: number }[]; width?: number; height?: number; label: string }) {
  const [tip, setTip] = useState<{ x: number; y: number; p: (typeof points)[number] } | null>(null);
  if (points.length < 2) return <div className="hint">not enough data for {label}</div>;
  const max = Math.max(1, ...points.map((p) => p.y));
  const step = width / (points.length - 1);
  const path = points.map((p, i) => `${i === 0 ? "M" : "L"}${i * step},${height - 4 - (p.y / max) * (height - 8)}`).join(" ");
  return (
    <div>
      <svg className="chart" viewBox={`0 0 ${width} ${height}`} role="img" aria-label={label} onMouseLeave={() => setTip(null)}
        onMouseMove={(e) => { const r = (e.currentTarget as SVGSVGElement).getBoundingClientRect(); const i = Math.round(((e.clientX - r.left) / r.width) * (points.length - 1)); const p = points[Math.max(0, Math.min(points.length - 1, i))]; if (p) setTip({ x: e.clientX, y: e.clientY, p }); }}>
        <path d={path} stroke="var(--s1)" strokeWidth={2} fill="none" />
      </svg>
      {tip && <div className="tooltip" style={{ left: tip.x + 12, top: tip.y + 12 }}>{tip.p.x}: {tip.p.y}</div>}
    </div>
  );
}