// order-screen.jsx — Stack your cards in play order
// Exports: OrderScreen

function OrderScreen({ cards, teamName, metaphor, onReady }) {
  const { useState } = React;
  const [order, setOrder] = useState(cards);

  const SLOT_TIMES = window.SLOT_TIMES || [8, 12, 18, 25];

  const move = (i, dir) => {
    const j = i + dir;
    if (j < 0 || j >= order.length) return;
    const next = [...order];
    [next[i], next[j]] = [next[j], next[i]];
    setOrder(next);
    window.sfx && window.sfx.pick();
  };

  const start = () => {
    window.sfx && window.sfx.start();
    // Reassign slot times: position determines time bucket
    const sequenced = order.map((c, i) => ({ ...c, slotTime: SLOT_TIMES[i], slotId: i }));
    onReady(sequenced);
  };

  return (
    <div className="screen fade-in" style={{ paddingTop: 12 }}>
      <div style={{ textAlign: "center" }}>
        <div className="eyebrow">— Stack Your Deck —</div>
        <div style={{ fontFamily: "var(--font-arcade)", fontSize: 16, letterSpacing: 2, margin: "8px 0 4px" }}>
          <span style={{ color: "var(--accent)" }}>{teamName}</span>
        </div>
        <div style={{ color: "var(--fg-dim)", fontSize: 13, lineHeight: 1.55 }}>
          First card has the <b style={{ color: "var(--accent-2)" }}>least</b> time.<br />
          Last card has the <b style={{ color: "var(--accent-2)" }}>most</b>.
        </div>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 6 }}>
        {order.map((c, i) => (
          <div key={c.word} style={rowStyle}>
            <div style={posStyle}>{i + 1}</div>
            <div style={{ flex: 1 }}>
              <div style={{
                fontFamily: "var(--font-arcade)",
                fontSize: 9,
                letterSpacing: 2,
                color: "var(--fg-quiet)",
                marginBottom: 4,
              }}>
                {SLOT_TIMES[i]}s · {window.DIFF_LABEL?.[c.difficulty]} · {c.pts}pt{c.pts > 1 ? "s" : ""}
              </div>
              <div style={{
                fontFamily: "var(--font-display)",
                fontSize: 20,
                lineHeight: 1.1,
                color: "var(--fg)",
                textTransform: "uppercase",
                letterSpacing: -0.3,
              }}>{c.word}</div>
            </div>
            <Pip pts={c.pts} diff={c.difficulty} metaphor={metaphor} size="small" />
            <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
              <button onClick={() => move(i, -1)} disabled={i === 0} style={arrowStyle}>↑</button>
              <button onClick={() => move(i, +1)} disabled={i === order.length - 1} style={arrowStyle}>↓</button>
            </div>
          </div>
        ))}
      </div>

      <div className="spacer" />

      <button className="btn go" onClick={start}>🎬 Deal & Start</button>
    </div>
  );
}

const rowStyle = {
  display: "flex",
  alignItems: "center",
  gap: 10,
  padding: "12px 14px",
  borderRadius: 14,
  background: "linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02))",
  border: "1px solid rgba(255, 255, 255, 0.08)",
};
const posStyle = {
  width: 36, height: 36, borderRadius: 8,
  background: "var(--accent)",
  color: "#fff",
  fontFamily: "var(--font-arcade)",
  fontSize: 14,
  display: "flex", alignItems: "center", justifyContent: "center",
  boxShadow: "0 3px 0 #2a1207",
  flexShrink: 0,
};
const arrowStyle = {
  appearance: "none",
  width: 30, height: 22,
  background: "rgba(255, 255, 255, 0.06)",
  border: "1px solid rgba(255, 255, 255, 0.1)",
  color: "var(--fg)",
  borderRadius: 6,
  cursor: "pointer",
  fontSize: 13,
};

window.OrderScreen = OrderScreen;