// Tombola (lottery drum) component with bouncing balls.
// Pulls teams one-by-one and assigns them to groups in order.

const { useState, useEffect, useRef, useMemo } = React;

function Tombola({ state, dispatch, t }) {
  const [spinning, setSpinning] = useState(true);
  const [pool, setPool] = useState(() => state.teams.map((tm) => tm.id));
  const [lastPulled, setLastPulled] = useState(null);
  const [autoTimer, setAutoTimer] = useState(null);
  const [manualMode, setManualMode] = useState(false);

  // Ball positions inside drum (deterministic-ish so they don't flicker)
  const ballPositions = useMemo(() => {
    return state.teams.map((_, i) => {
      const ang = (i * 47) % 360;
      const rad = 30 + ((i * 31) % 60);
      const tx = Math.cos((ang * Math.PI) / 180) * rad;
      const ty = Math.sin((ang * Math.PI) / 180) * rad;
      const delay = (i * 0.13) % 1.2;
      return { tx, ty, delay };
    });
  }, [state.teams.length]);

  // Reset pool when teams list shrinks
  useEffect(() => {
    setPool((prev) => prev.filter((id) => state.teams.find((tm) => tm.id === id)));
  }, [state.teams.length]);

  // Keep a ref to latest state so interval callbacks see fresh values
  const stateRef = useRef(state);
  useEffect(() => { stateRef.current = state; }, [state]);
  const poolRef = useRef(pool);
  useEffect(() => { poolRef.current = pool; }, [pool]);

  const numGroups = state.groups.length;
  const totalAssigned = state.teams.filter((tm) => tm.groupId).length;
  const nextGroupIdx = numGroups === 0 ? -1 : totalAssigned % numGroups;
  const nextGroup = state.groups[nextGroupIdx];

  function doPull() {
    const s = stateRef.current;
    const p = poolRef.current;
    const groups = s.groups;
    if (p.length === 0 || groups.length === 0) return false;
    const idx = Math.floor(Math.random() * p.length);
    const teamId = p[idx];
    const assigned = s.teams.filter((tm) => tm.groupId).length;
    const target = groups[assigned % groups.length];
    dispatch({ type: "ASSIGN_TEAM_GROUP", teamId, groupId: target.id });
    const team = s.teams.find((tm) => tm.id === teamId);
    setLastPulled(team);
    setPool((curr) => {
      const next = curr.filter((id) => id !== teamId);
      poolRef.current = next;
      return next;
    });
    return true;
  }

  function pullOne() { doPull(); }

  function startAuto() {
    if (autoTimer) return;
    if (!doPull()) return;
    const id = setInterval(() => {
      const ok = doPull();
      if (!ok) {
        clearInterval(id);
        setAutoTimer(null);
      }
    }, 1800);
    setAutoTimer(id);
  }
  function stopAuto() {
    if (autoTimer) {
      clearInterval(autoTimer);
      setAutoTimer(null);
    }
  }
  useEffect(() => () => autoTimer && clearInterval(autoTimer), [autoTimer]);

  const [resetArmed, setResetArmed] = useState(false);
  useEffect(() => {
    if (!resetArmed) return;
    const id = setTimeout(() => setResetArmed(false), 2500);
    return () => clearTimeout(id);
  }, [resetArmed]);
  function resetDraw() {
    if (!resetArmed) { setResetArmed(true); return; }
    stopAuto();
    dispatch({ type: "CLEAR_GROUPS" });
    setPool(state.teams.map((tm) => tm.id));
    setLastPulled(null);
    setResetArmed(false);
  }

  // Manual drag-drop
  const [dragging, setDragging] = useState(null);
  function onDragStart(teamId) { setDragging(teamId); }
  function onDropOn(groupId) {
    if (!dragging) return;
    dispatch({ type: "ASSIGN_TEAM_GROUP", teamId: dragging, groupId });
    setPool((p) => p.filter((id) => id !== dragging));
    setDragging(null);
  }
  function onDropOnPool() {
    if (!dragging) return;
    dispatch({ type: "ASSIGN_TEAM_GROUP", teamId: dragging, groupId: null });
    if (!pool.includes(dragging)) setPool((p) => [...p, dragging]);
    setDragging(null);
  }

  return (
    <div>
      <div className="page-head">
        <div>
          <h1 className="page-title">{t("draw_title")}</h1>
          <div className="page-sub">{t("draw_sub")}</div>
        </div>
        <div className="page-actions">
          <button className="btn" onClick={() => setManualMode((m) => !m)}>
            {manualMode ? "🎰 " + t("draw_auto") : "✋ " + t("draw_manual")}
          </button>
          <button
            className={"btn " + (resetArmed ? "btn-danger" : "")}
            onClick={resetDraw}
            style={resetArmed ? { background: "var(--hot)", color: "white", borderColor: "var(--hot)" } : {}}
          >
            {resetArmed ? "✓ Confirmar reset" : "↺ " + t("draw_reset")}
          </button>
        </div>
      </div>

      <div className="tombola-stage">
        {/* Drum */}
        <div className="drum-wrap">
          <div className={"drum " + (spinning ? "spinning" : "")}>
            <div className="balls-area">
              {state.teams.map((team, i) => {
                if (!pool.includes(team.id)) return null;
                const pos = ballPositions[i] || { tx: 0, ty: 0, delay: 0 };
                return (
                  <div
                    key={team.id}
                    className="ball"
                    style={{
                      "--tx": pos.tx + "px",
                      "--ty": pos.ty + "px",
                      animationDelay: pos.delay + "s",
                      background: `radial-gradient(circle at 35% 30%, ${lighten(team.color, 25)} 0%, ${team.color} 60%, ${darken(team.color, 20)} 100%)`,
                      left: "50%",
                      top: "50%",
                      marginLeft: "-19px",
                      marginTop: "-19px",
                    }}
                    title={team.name}
                  >
                    {team.short || abbrev(team.name)}
                  </div>
                );
              })}
            </div>
            <div className="drum-glass"></div>
            <div className="drum-chute"></div>
          </div>
          <div className="drum-stand"></div>

          <div className="reveal-area">
            <div className="muted" style={{ fontSize: 11, letterSpacing: ".15em", textTransform: "uppercase", fontWeight: 700 }}>
              {pool.length === 0 ? t("no_balls_left") :
                nextGroup ? t("next_group") + " " + nextGroup.name : "—"}
            </div>
            {lastPulled && (
              <div
                key={lastPulled.id + "-" + pool.length}
                className="last-ball"
                style={{
                  background: `radial-gradient(circle at 35% 30%, ${lighten(lastPulled.color, 25)} 0%, ${lastPulled.color} 60%, ${darken(lastPulled.color, 20)} 100%)`,
                  color: "white",
                  textShadow: "0 2px 6px rgba(0,0,0,.6)",
                }}
              >
                {lastPulled.name}
              </div>
            )}
            <div className="row gap-8" style={{ marginTop: 12 }}>
              <button
                className="btn"
                onClick={() => setSpinning((s) => !s)}
              >
                {spinning ? "⏸ " + t("draw_pause") : "▶ " + t("draw_start")}
              </button>
              <button
                className="btn btn-primary btn-lg"
                onClick={pullOne}
                disabled={pool.length === 0 || !nextGroup}
              >
                🎱 {t("draw_pull")}
              </button>
              <button
                className="btn"
                onClick={autoTimer ? stopAuto : startAuto}
                disabled={pool.length === 0 || !nextGroup}
              >
                {autoTimer ? "⏸" : "⏩"} {t("draw_auto")}
              </button>
            </div>
            <div className="muted mono" style={{ fontSize: 12, marginTop: 4 }}>
              {t("pool")}: {pool.length} / {state.teams.length}
            </div>
          </div>
        </div>

        {/* Groups side */}
        <div className="draw-side">
          <div className="row between center" style={{ marginBottom: 4 }}>
            <h2 style={{
              fontFamily: "var(--display)", textTransform: "uppercase",
              letterSpacing: ".04em", fontSize: 22, margin: 0,
            }}>
              {t("groups_label")}
            </h2>
            <div className="row gap-8">
              <button
                className="btn btn-icon"
                onClick={() => dispatch({ type: "ADD_GROUP" })}
                title="Add group"
              >+</button>
              <button
                className="btn btn-icon"
                onClick={() => {
                  const last = state.groups[state.groups.length - 1];
                  if (last) dispatch({ type: "REMOVE_GROUP", id: last.id });
                }}
                title="Remove last group"
                disabled={state.groups.length === 0}
              >−</button>
            </div>
          </div>
          {manualMode && <div className="muted" style={{ fontSize: 11 }}>{t("drag_hint")}</div>}

          <div className="groups-grid">
            {state.groups.map((g) => {
              const teams = state.teams.filter((tm) => tm.groupId === g.id);
              return (
                <div
                  key={g.id}
                  className="group-card"
                  onDragOver={(e) => manualMode && e.preventDefault()}
                  onDrop={() => manualMode && onDropOn(g.id)}
                >
                  <div className="group-head">
                    <div className="row gap-8 center">
                      <div className="group-letter">{g.name}</div>
                      <span style={{ fontSize: 11, color: "var(--muted)" }}>
                        {t("group")}
                      </span>
                    </div>
                    <span className="muted" style={{ fontSize: 10 }}>
                      {teams.length}
                    </span>
                  </div>
                  {teams.length === 0 ? (
                    <div className="group-team-empty">—</div>
                  ) : (
                    teams.map((tm) => (
                      <div
                        key={tm.id}
                        className={"group-team " + (dragging === tm.id ? "dragging" : "")}
                        draggable={manualMode}
                        onDragStart={() => onDragStart(tm.id)}
                      >
                        <div className="team-mini-badge" style={{ background: tm.color }}>
                          {tm.short || abbrev(tm.name)}
                        </div>
                        <span style={{ flex: 1 }}>{tm.name}</span>
                        {manualMode && (
                          <button
                            className="btn-ghost btn btn-icon"
                            onClick={() => {
                              dispatch({ type: "ASSIGN_TEAM_GROUP", teamId: tm.id, groupId: null });
                              if (!pool.includes(tm.id)) setPool((p) => [...p, tm.id]);
                            }}
                            title="Sacar"
                          >×</button>
                        )}
                      </div>
                    ))
                  )}
                </div>
              );
            })}
          </div>

          {manualMode && (
            <>
              <div className="section-row">
                <h2 style={{
                  fontFamily: "var(--display)", textTransform: "uppercase",
                  fontSize: 18, letterSpacing: ".04em", margin: 0,
                }}>
                  {t("pool")}
                </h2>
              </div>
              <div
                className="unassigned-pool"
                onDragOver={(e) => e.preventDefault()}
                onDrop={onDropOnPool}
              >
                <div className="row gap-8" style={{ flexWrap: "wrap" }}>
                  {state.teams.filter((tm) => !tm.groupId).length === 0 ? (
                    <span className="muted" style={{ fontSize: 12 }}>—</span>
                  ) : (
                    state.teams.filter((tm) => !tm.groupId).map((tm) => (
                      <div
                        key={tm.id}
                        className="group-team"
                        draggable
                        onDragStart={() => onDragStart(tm.id)}
                        style={{ borderRadius: 6, border: "1px solid var(--border)" }}
                      >
                        <div className="team-mini-badge" style={{ background: tm.color }}>
                          {tm.short || abbrev(tm.name)}
                        </div>
                        <span>{tm.name}</span>
                      </div>
                    ))
                  )}
                </div>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

// ---- color helpers ----
function hexToRgb(hex) {
  const m = hex.replace("#", "").match(/.{2}/g);
  if (!m) return [0, 0, 0];
  return m.map((x) => parseInt(x, 16));
}
function rgbToHex(r, g, b) {
  return "#" + [r, g, b].map((x) => Math.max(0, Math.min(255, Math.round(x))).toString(16).padStart(2, "0")).join("");
}
function lighten(hex, pct) {
  const [r, g, b] = hexToRgb(hex);
  return rgbToHex(r + (255 - r) * (pct / 100), g + (255 - g) * (pct / 100), b + (255 - b) * (pct / 100));
}
function darken(hex, pct) {
  const [r, g, b] = hexToRgb(hex);
  return rgbToHex(r * (1 - pct / 100), g * (1 - pct / 100), b * (1 - pct / 100));
}

window.Tombola = Tombola;
window.lighten = lighten;
window.darken = darken;