// home-screen.jsx — Arcade cabinet style home screen
// Exports: HomeScreen

function HomeScreen({ onStart }) {
  const { useState, useRef, useEffect } = React;
  const [names, setNames] = useState(["", ""]);
  const [rounds, setRounds] = useState(2);
  const firstInputRef = useRef(null);

  useEffect(() => {
    // briefly focus first input for keyboard users
    if (firstInputRef.current) firstInputRef.current.focus({ preventScroll: true });
  }, []);

  const cleanName = (v) => v.toUpperCase().replace(/[^A-Z0-9]/g, "").slice(0, 5);
  const setName = (i, v) => setNames(names.map((x, j) => (j === i ? cleanName(v) : x)));
  const addTeam = () => names.length < 4 && setNames([...names, ""]);
  const removeTeam = (i) => names.length > 2 && setNames(names.filter((_, j) => j !== i));

  const valid = names.every((n) => n.trim().length > 0);

  const start = () => {
    if (!valid) return;
    window.sfx && window.sfx.lock();
    onStart({
      teams: names.map((n) => ({ name: n.trim(), score: 0 })),
      rounds,
      round: 1,
      teamIndex: 0,
    });
  };

  return (
    <div className="screen fade-in">
      <Marquee title="Guessdit" subtitle="High-Speed Charades · No Talking!" />

      {/* Player select panel */}
      <div style={panelStyle}>
        <div style={panelHeadStyle}>
          <span className="eyebrow">★ Player Select</span>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--fg-quiet)", letterSpacing: 1 }}>
            5 CHAR MAX
          </span>
        </div>
        <div className="col" style={{ gap: 8, marginTop: 10 }}>
          {names.map((n, i) => (
            <div key={i} className="row" style={{ gap: 8 }}>
              <span style={playerTagStyle}>P{i + 1}</span>
              <input
                ref={i === 0 ? firstInputRef : null}
                className="tag-input"
                value={n}
                placeholder="•••••"
                maxLength={5}
                inputMode="text"
                autoComplete="off"
                autoCapitalize="characters"
                spellCheck={false}
                onChange={(e) => setName(i, e.target.value)}
              />
              {names.length > 2 && (
                <button
                  onClick={() => { window.sfx && window.sfx.deselect(); removeTeam(i); }}
                  style={removeBtnStyle}
                  aria-label={`Remove player ${i + 1}`}
                >✕</button>
              )}
            </div>
          ))}
          {names.length < 4 && (
            <button onClick={() => { window.sfx && window.sfx.pick(); addTeam(); }} className="btn ghost" style={{ marginTop: 4 }}>
              + ADD PLAYER
            </button>
          )}
        </div>
      </div>

      {/* Rounds */}
      <div style={panelStyle}>
        <div style={panelHeadStyle}>
          <span className="eyebrow">▣ Rounds</span>
        </div>
        <div className="row" style={{ gap: 8, marginTop: 10 }}>
          {[1, 2, 3].map((r) => (
            <button
              key={r}
              onClick={() => { window.sfx && window.sfx.pick(); setRounds(r); }}
              style={{
                ...roundsBtnStyle,
                ...(r === rounds ? roundsBtnActiveStyle : null),
              }}
            >
              {r}
            </button>
          ))}
        </div>
      </div>

      {/* How to play */}
      <div style={panelStyle}>
        <div style={panelHeadStyle}>
          <span className="eyebrow">? How to play</span>
        </div>
        <ol style={howToStyle}>
          <li><b>Pick 4 cards</b> from 8 (one per slot)</li>
          <li><b>Order</b> them — early slots are faster</li>
          <li><b>Act</b> them out — no talking</li>
          <li>Before the card <b style={{ color: "var(--bad)" }}>blasts</b>, your team guesses</li>
        </ol>
      </div>

      <div className="spacer" />

      <button className="btn" onClick={start} disabled={!valid}>
        ▶ Insert Coin · Start
      </button>
    </div>
  );
}

// styles
const panelStyle = {
  background: "rgba(255, 255, 255, 0.04)",
  border: "1px solid rgba(255, 255, 255, 0.07)",
  borderRadius: "var(--r-lg)",
  padding: "16px 16px 18px",
};
const panelHeadStyle = {
  display: "flex",
  alignItems: "center",
  justifyContent: "space-between",
};
const playerTagStyle = {
  fontFamily: "var(--font-arcade)",
  fontSize: 11,
  letterSpacing: 2,
  color: "var(--accent)",
  padding: "0 8px",
  width: 40,
  textAlign: "center",
  borderRight: "1px dashed rgba(255, 94, 58, 0.4)",
};
const removeBtnStyle = {
  appearance: "none",
  border: "1px solid rgba(255, 79, 94, 0.35)",
  background: "rgba(255, 79, 94, 0.15)",
  color: "#ffb4b9",
  fontFamily: "var(--font-arcade)",
  fontSize: 10,
  padding: "10px 12px",
  borderRadius: 10,
  cursor: "pointer",
  flexShrink: 0,
};
const roundsBtnStyle = {
  appearance: "none",
  flex: 1,
  padding: "16px 0",
  borderRadius: 12,
  border: "1px solid rgba(255, 255, 255, 0.1)",
  background: "rgba(255, 255, 255, 0.04)",
  color: "var(--fg-dim)",
  fontFamily: "var(--font-arcade)",
  fontSize: 18,
  letterSpacing: 1,
  cursor: "pointer",
};
const roundsBtnActiveStyle = {
  background: "rgba(255, 94, 58, 0.18)",
  borderColor: "rgba(255, 94, 58, 0.55)",
  color: "var(--accent)",
  boxShadow: "0 0 0 1px rgba(255, 94, 58, 0.25)",
};
const howToStyle = {
  margin: "10px 0 0",
  paddingLeft: 22,
  color: "var(--fg-dim)",
  fontSize: 14,
  lineHeight: 1.85,
};

window.HomeScreen = HomeScreen;