/* global React */
const { useState, useRef, useEffect, useCallback } = React;

/* ---------------- Lucide-style inline icons (stroke, 1.75) ---------------- */
const ICONS = {
  camera: "M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3zM12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8z",
  user: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z",
  building: "M4 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16M16 21h4V9a2 2 0 0 0-2-2h-2M9 7h.01M13 7h.01M9 11h.01M13 11h.01M9 15h.01M13 15h.01",
  phone: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z",
  mail: "M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zM22 6l-10 7L2 6",
  search: "M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM21 21l-4.35-4.35",
  check: "M20 6 9 17l-5-5",
  arrowRight: "M5 12h14M13 5l7 7-7 7",
  arrowLeft: "M19 12H5M11 19l-7-7 7-7",
  logOut: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9",
  logIn: "M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3",
  clock: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 6v6l4 2",
  users: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75",
  shield: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z",
  x: "M18 6 6 18M6 6l12 12",
  delete: "M21 4H8l-7 8 7 8h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zM18 9l-6 6M12 9l6 6",
  chevronRight: "M9 18l6-6-6-6",
  scan: "M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2M8 12a4 4 0 1 0 8 0 4 4 0 0 0-8 0",
  sparkles: "M12 3l1.9 4.6L18.5 9.5l-4.6 1.9L12 16l-1.9-4.6L5.5 9.5l4.6-1.9L12 3zM19 14l.9 2.1L22 17l-2.1.9L19 20l-.9-2.1L16 17l2.1-.9L19 14z",
  doorOpen: "M13 4h3a2 2 0 0 1 2 2v14M2 20h20M13 2 6 4v17M9 12v.01",
  refresh: "M3 12a9 9 0 0 1 15-6.7L21 8M21 3v5h-5M21 12a9 9 0 0 1-15 6.7L3 16M3 21v-5h5",
  send: "M22 2 11 13M22 2l-7 20-4-9-9-4 20-7z",
  idCard: "M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zM8 12a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM5 16c.5-1.5 1.8-2 3-2s2.5.5 3 2M14 9h5M14 13h5",
  upload: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12",
  plus: "M12 5v14M5 12h14",
  userPlus: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM19 8v6M22 11h-6",
  history: "M3 3v5h5M3.05 13A9 9 0 1 0 6 5.3L3 8M12 7v5l4 2",
  alertTriangle: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01",
  fileCheck: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM14 2v6h6M9 15l2 2 4-4",
};
function Icon({ name, size = 24, stroke = 2, fill = "none", style }) {
  const d = ICONS[name];
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={fill}
      stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
      style={style} aria-hidden="true">
      {d.split("M").filter(Boolean).map((seg, i) => <path key={i} d={"M" + seg} />)}
    </svg>
  );
}

/* ---------------- Medallion (initials avatar) ---------------- */
function Medallion({ person, size = 64, round = false, className = "" }) {
  return (
    <div className={"medallion " + (round ? "round " : "") + (person.img ? "has-img " : "") + className}
      style={{ width: size, height: size, fontSize: size * 0.36 }}>
      {person.img ? <img src={person.img} alt={person.first} /> : window.initialsOf(person)}
    </div>
  );
}

/* ---------------- League card ---------------- */
function LeagueCard({ person, selected, onClick }) {
  return (
    <button className={"league-card" + (selected ? " sel" : "")} onClick={onClick}>
      <div className="lc-portrait">
        {person.img
          ? <img src={person.img} alt={person.first} />
          : <div className="lc-initials">{window.initialsOf(person)}</div>}
        <span className="lc-eyebrow">Grappler League</span>
        <div className="lc-check"><Icon name="check" size={22} stroke={3} /></div>
      </div>
      <div className="lc-body">
        {person.titleImg
          ? <img className="lc-titleart" src={person.titleImg} alt={person.first + " — " + person.alias} />
          : <React.Fragment>
              <h3 className="lc-name">{person.first}</h3>
              <div className="lc-banner"><span>{person.alias}</span></div>
            </React.Fragment>}
      </div>
    </button>
  );
}

/* ---------------- On-screen keyboard ---------------- */
const KB_ROWS = [
  ["1","2","3","4","5","6","7","8","9","0"],
  ["q","w","e","r","t","y","u","i","o","p"],
  ["a","s","d","f","g","h","j","k","l"],
  ["z","x","c","v","b","n","m"],
];
function Keyboard({ open, onKey, onBackspace, onSpace, onDone, mode }) {
  const [shift, setShift] = useState(true);
  const emit = (ch) => {
    onKey(shift ? ch.toUpperCase() : ch);
    if (shift) setShift(false);
  };
  return (
    <div className={"keyboard" + (open ? " up" : "")}>
      {KB_ROWS.map((row, ri) => (
        <div className="kb-row" key={ri}>
          {ri === 2 && <button className="key wide" onClick={() => setShift(s => !s)} style={shift ? { background: "var(--blue)" } : null}>⇧</button>}
          {row.map((ch) => (
            <button className="key" key={ch} onClick={() => emit(ch)}>
              {shift && /[a-z]/.test(ch) ? ch.toUpperCase() : ch}
            </button>
          ))}
          {ri === 2 && <button className="key wide" onClick={onBackspace}><Icon name="delete" size={22} /></button>}
          {ri === 3 && <button className="key wide" onClick={onBackspace}><Icon name="delete" size={22} /></button>}
        </div>
      ))}
      <div className="kb-row">
        {mode === "email" && <button className="key sm" onClick={() => onKey("@")}>@</button>}
        {mode === "email" && <button className="key sm" onClick={() => onKey(".")}>.</button>}
        {mode === "email" && <button className="key sm" onClick={() => onKey("_")}>_</button>}
        <button className="key space" onClick={onSpace}>space</button>
        {mode === "email" && <button className="key sm" onClick={() => onKey(".com")}>.com</button>}
        <button className="key accent wide" onClick={onDone}>Done</button>
      </div>
    </div>
  );
}

Object.assign(window, { Icon, Medallion, LeagueCard, Keyboard });