// ui.jsx — shared presentational components. Exported to window.
const { useState, useEffect, useRef } = React;

const ICONS = {
  table: "M3 5h18M3 12h18M3 19h18",
  matches: "M4 5h16v14H4zM4 10h16M9 5v14",
  star: "M12 3l2.6 5.8 6.4.6-4.8 4.3 1.4 6.3L12 17l-5.6 3.3 1.4-6.3L3 9.4l6.4-.6z",
  info: "M12 8h.01M11 12h1v5h1M12 3a9 9 0 100 18 9 9 0 000-18z",
  chevron: "M9 6l6 6-6 6",
  check: "M5 13l4 4L19 7",
  lock: "M7 11V8a5 5 0 0110 0v3M5 11h14v9H5z",
  edit: "M4 20h4L19 9l-4-4L4 16v4z",
  trophy: "M8 4h8v3a4 4 0 01-8 0V4zM6 4H4v2a3 3 0 003 3M18 4h2v2a3 3 0 01-3 3M9 16h6M12 13v3M9 20h6",
  calendar: "M7 3v4M17 3v4M4 8h16M5 5h14a1 1 0 011 1v14H4V6a1 1 0 011-1z",
  pin: "M12 21s7-5.2 7-11a7 7 0 10-14 0c0 5.8 7 11 7 11zM12 10.5h.01",
  whistle: "M12 7a5 5 0 100 10 5 5 0 000-10zM12 7V4h6",
};

function Icon({ name, size = 22, stroke = 2.2, style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth={stroke} strokeLinecap="round"
      strokeLinejoin="round" style={style} aria-hidden="true">
      <path d={ICONS[name]} />
    </svg>
  );
}

function Flag({ code, size = 28 }) {
  const t = window.TEAMS[code];
  return (
    <span className="flag" style={{ fontSize: size, lineHeight: 1 }} role="img"
      aria-label={t ? t.name : code}>{t ? t.flag : "🏳️"}</span>
  );
}

// Stepper de marcador — grande, táctil. compact = versión chica para filas.
function ScoreStepper({ value, onChange, accent, compact }) {
  const v = value == null ? null : Number(value);
  const set = (n) => onChange(Math.max(0, Math.min(20, n)));
  return (
    <div className={"stepper" + (compact ? " stepper-c" : "")}>
      <button className="step-btn" onClick={() => set((v ?? 0) - 1)} aria-label="menos"
        disabled={v == null}>–</button>
      <div className="step-val" style={accent ? { color: accent } : null}>
        {v == null ? "–" : v}
      </div>
      <button className="step-btn" onClick={() => set((v ?? -1) + 1)} aria-label="más">+</button>
    </div>
  );
}

// chip de puntos por partido
function PtsChip({ outcome, pts }) {
  if (outcome == null) return <span className="pts-chip pts-pending">–</span>;
  const cls = outcome === "exact" ? "pts-exact" : outcome === "result" ? "pts-result" : "pts-miss";
  return <span className={"pts-chip " + cls}>{pts ?? 0}</span>;
}

// pequeño marcador 1-0 entre dos números
function ScoreReadout({ h, a, accent }) {
  return (
    <div className="readout">
      <span>{h == null ? "–" : h}</span>
      <span className="readout-dash">:</span>
      <span>{a == null ? "–" : a}</span>
    </div>
  );
}

function Eyebrow({ children, color }) {
  return <div className="eyebrow" style={color ? { color } : null}>{children}</div>;
}

function StripeBar() {
  return (
    <div className="stripebar">
      <span style={{ background: "var(--blue)" }}></span>
      <span style={{ background: "var(--magenta)" }}></span>
      <span style={{ background: "var(--green)" }}></span>
      <span style={{ background: "var(--yellow)" }}></span>
      <span style={{ background: "var(--red)" }}></span>
    </div>
  );
}

Object.assign(window, { Icon, Flag, ScoreStepper, PtsChip, ScoreReadout, Eyebrow, StripeBar });