// pick-screen.jsx — Card Pack hero: pick 1 of 2 per slot
// Exports: PickScreen

function PickScreen({ slots, teamName, metaphor, onDone }) {
  const { useState } = React;
  // picks[slotIdx] = optionIdx or null
  const [picks, setPicks] = useState(slots.map(() => null));
  const allPicked = picks.every((p) => p !== null);

  const pick = (si, oi) => {
    setPicks(picks.map((p, i) => (i === si ? (p === oi ? null : oi) : p)));
    window.sfx && (picks[si] === oi ? window.sfx.deselect() : window.sfx.flip());
  };

  return (
    <div className="screen fade-in" style={{ paddingTop: 12 }}>
      <div style={{ textAlign: "center" }}>
        <div className="eyebrow">— Hand off the phone —</div>
        <div style={teamLineStyle}>
          <span style={{ color: "var(--fg-quiet)" }}>YOU ARE</span>{" "}
          <span style={{ color: "var(--accent)" }}>{teamName}</span>
        </div>
        <div style={{ color: "var(--fg-dim)", fontSize: 13 }}>
          Pick one card per slot. Don't show your team.
        </div>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 18, marginTop: 6 }}>
        {slots.map((slot, si) => (
          <div key={si} className="slot">
            <div className="slot-meta">
              <span className="label">SLOT {si + 1}</span>
              <span className="time">⏱ {slot.time}s</span>
            </div>
            <div className="slot-cards">
              {slot.options.map((opt, oi) => {
                const selected = picks[si] === oi;
                const otherPicked = picks[si] !== null && !selected;
                return (
                  <Card
                    key={oi}
                    word={opt.word}
                    pts={opt.pts}
                    diff={opt.difficulty}
                    time={slot.time}
                    showTime={false}
                    size="sm"
                    metaphor={metaphor}
                    state={selected ? "selected" : (otherPicked ? "dim" : "face")}
                    onClick={() => pick(si, oi)}
                    style={{
                      transform: selected
                        ? "translateY(-4px) rotate(-1deg)"
                        : (oi === 0 ? "rotate(-1.5deg)" : "rotate(1.5deg)"),
                      transition: "transform 200ms cubic-bezier(.2,.8,.3,1.3), box-shadow 200ms, filter 200ms, opacity 200ms",
                    }}
                  />
                );
              })}
            </div>
          </div>
        ))}
      </div>

      <div className="spacer" />

      <button
        className="btn"
        disabled={!allPicked}
        onClick={() => {
          if (!allPicked) return;
          window.sfx && window.sfx.lock();
          onDone(picks.map((p, i) => ({
            ...slots[i].options[p],
            slotTime: slots[i].time,
            slotId: i,
          })));
        }}
      >
        {allPicked ? "▶ Lock In Hand" : `Pick ${picks.filter((p) => p !== null).length}/4`}
      </button>
    </div>
  );
}

const teamLineStyle = {
  fontFamily: "var(--font-arcade)",
  fontSize: 18,
  letterSpacing: 2,
  margin: "8px 0 6px",
  lineHeight: 1,
};

window.PickScreen = PickScreen;