/* ============================================================
   PRIMITIVES — Stepper, faction dot/glyph, defense-token icon
   ============================================================ */
const { useState: useStateP } = React;

function Stepper({ value, min = 0, max = 99, onChange, showMax, suffix, disabled = false }) {
  const dec = () => onChange(Math.max(min, value - 1));
  const inc = () => onChange(Math.min(max, value + 1));
  return (
    <div className="stepper" data-disabled={disabled || undefined}>
      <button onClick={dec} disabled={disabled || value <= min} aria-label="min">{"−"}</button>
      <div className="val">
        <span>{value}</span>
        {showMax != null ? <span className="mx">/{showMax}</span> : null}
        {suffix ? <span className="mx">{suffix}</span> : null}
      </div>
      <button onClick={inc} disabled={disabled || value >= max} aria-label="plus">+</button>
    </div>
  );
}

function FactionDot({ faction, size = 9 }) {
  const c = FACTIONS[faction] ? FACTIONS[faction].color : "var(--accent)";
  return <span className="fc-dot" style={{ width: size, height: size, background: c, color: c }} />;
}

// abstract ship silhouette used in roster rows; nose points up
function ShipGlyph({ baseSize = "medium", color = "currentColor", size = 22 }) {
  const paths = {
    small:  "M11 2 L17 16 L11 13 L5 16 Z",
    medium: "M11 2 L18 19 L11 15 L4 19 Z",
    large:  "M11 1 L16 8 L19 20 L11 16 L3 20 L6 8 Z",
    huge:   "M11 1 L14 7 L20 21 L11 17 L2 21 L8 7 Z",
  };
  return (
    <svg width={size} height={size} viewBox="0 0 22 22" style={{ display: "block" }}>
      <path d={paths[baseSize] || paths.medium} fill={color} opacity="0.92" />
    </svg>
  );
}

function DefTokenIcon({ type, size = 13 }) {
  const s = size, common = { width: s, height: s, viewBox: "0 0 16 16", style: { display: "block" } };
  switch (type) {
    case "Brace":
      return <svg {...common}><path d="M8 1 L14 3.5 V8 C14 12 8 15 8 15 C8 15 2 12 2 8 V3.5 Z" fill="none" stroke="currentColor" strokeWidth="1.4" /></svg>;
    case "Redirect":
      return <svg {...common}><path d="M3 6 A5 5 0 1 1 3 10" fill="none" stroke="currentColor" strokeWidth="1.4" /><path d="M3 3 L3 7 L7 7" fill="none" stroke="currentColor" strokeWidth="1.4" /></svg>;
    case "Evade":
      return <svg {...common}><circle cx="8" cy="8" r="5.5" fill="none" stroke="currentColor" strokeWidth="1.4" strokeDasharray="2.4 2.2" /></svg>;
    case "Contain":
      return <svg {...common}><path d="M4 2 H2 V14 H4 M12 2 H14 V14 H12" fill="none" stroke="currentColor" strokeWidth="1.4" /><circle cx="8" cy="8" r="2" fill="currentColor" /></svg>;
    case "Scatter":
      return <svg {...common}>{[0,45,90,135].map(a => <line key={a} x1="8" y1="8" x2={8 + Math.cos(a*Math.PI/180)*6} y2={8 + Math.sin(a*Math.PI/180)*6} stroke="currentColor" strokeWidth="1.4" transform={`rotate(${a/2} 8 8)`} />)}<line x1="2" y1="8" x2="14" y2="8" stroke="currentColor" strokeWidth="1.4"/><line x1="8" y1="2" x2="8" y2="14" stroke="currentColor" strokeWidth="1.4"/><line x1="3.7" y1="3.7" x2="12.3" y2="12.3" stroke="currentColor" strokeWidth="1.4"/><line x1="12.3" y1="3.7" x2="3.7" y2="12.3" stroke="currentColor" strokeWidth="1.4"/></svg>;
    case "Salvo":
      return <svg {...common}><circle cx="8" cy="8" r="5.5" fill="none" stroke="currentColor" strokeWidth="1.4" /><line x1="8" y1="0.5" x2="8" y2="3.5" stroke="currentColor" strokeWidth="1.4"/><line x1="8" y1="12.5" x2="8" y2="15.5" stroke="currentColor" strokeWidth="1.4"/><line x1="0.5" y1="8" x2="3.5" y2="8" stroke="currentColor" strokeWidth="1.4"/><line x1="12.5" y1="8" x2="15.5" y2="8" stroke="currentColor" strokeWidth="1.4"/></svg>;
    default:
      return <svg {...common}><circle cx="8" cy="8" r="4" fill="currentColor" /></svg>;
  }
}

function ArcSwatch({ arc, size = 8 }) {
  // tiny directional indicator
  const rot = { front: 0, rear: 180, left: 270, right: 90 }[arc] || 0;
  return (
    <svg className="arc-mini" width={size} height={size} viewBox="0 0 12 12" style={{ transform: `rotate(${rot}deg)` }}>
      <path d="M6 1 L10 9 L6 7 L2 9 Z" fill="currentColor" />
    </svg>
  );
}

Object.assign(window, { Stepper, FactionDot, ShipGlyph, DefTokenIcon, ArcSwatch });