// setup.jsx — Wedstrijdinstellingen
const { useState: useState_S, useRef: useRef_S } = React;

function SetupView() {
  const {
    state,
    setMatch,
    addPlayer, updatePlayer, removePlayer,
    togglePosition, setFormation, setPositionLabel,
    setActiveTab,
    loadSample, resetAll,
    importJSON, exportJSON,
  } = useStore();
  const { match, players, formation, positionLabels } = state;

  const FORMATION_PRESETS = [
    { label: "5v5", positions: [1, 3, 7, 9, 11] },
    { label: "8v8", positions: [1, 2, 3, 5, 7, 9, 10, 11] },
    { label: "11v11", positions: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] },
  ];
  const sameSet = (a, b) =>
    a.length === b.length && a.every((x) => b.includes(x));
  const [newName, setNewName] = useState_S("");
  const [importing, setImporting] = useState_S(false);
  const fileInputRef = useRef_S(null);

  const canStart = match.homeTeam && match.awayTeam && players.length >= formation.length && formation.length > 0;

  const handleAdd = () => {
    addPlayer(newName.trim() || `Speler ${players.length + 1}`);
    setNewName("");
  };

  const handleImport = async (e) => {
    const file = e.target.files?.[0];
    if (!file) return;
    setImporting(true);
    try {
      await importJSON(file);
    } catch (err) {
      alert("Importeren mislukt: " + err.message);
    }
    setImporting(false);
    e.target.value = "";
  };

  return (
    <div className="setup-view">
      <div className="setup-grid">
        {/* Match info card */}
        <section className="card">
          <header className="card-h">
            <h2>Wedstrijd</h2>
          </header>
          <div className="field-grid two">
            <label className="field">
              <span className="field-label">Thuisploeg</span>
              <input
                className="input"
                placeholder="Thuisploeg"
                value={match.homeTeam}
                onChange={(e) => setMatch({ homeTeam: e.target.value })}
              />
            </label>
            <label className="field">
              <span className="field-label">Uitploeg</span>
              <input
                className="input"
                placeholder="Tegenstander"
                value={match.awayTeam}
                onChange={(e) => setMatch({ awayTeam: e.target.value })}
              />
            </label>
          </div>
          <div className="field" style={{ marginTop: 14 }}>
            <span className="field-label">Onze ploeg</span>
            <div className="seg" role="radiogroup">
              <button
                role="radio"
                aria-checked={match.isUserHomeTeam}
                className={"seg-btn " + (match.isUserHomeTeam ? "on" : "")}
                onClick={() => setMatch({ isUserHomeTeam: true })}
              >
                <span className="seg-dot" /> {match.homeTeam || "Thuis"}
              </button>
              <button
                role="radio"
                aria-checked={!match.isUserHomeTeam}
                className={"seg-btn " + (!match.isUserHomeTeam ? "on" : "")}
                onClick={() => setMatch({ isUserHomeTeam: false })}
              >
                <span className="seg-dot" /> {match.awayTeam || "Uit"}
              </button>
            </div>
          </div>
          <div className="field-grid two" style={{ marginTop: 14 }}>
            <label className="field">
              <span className="field-label">Periodes</span>
              <div className="num-row">
                <button className="num-btn" onClick={() => setMatch({ periods: Math.max(1, match.periods - 1) })}>−</button>
                <input
                  className="input num"
                  type="number" min="1" max="12"
                  value={match.periods}
                  onChange={(e) => setMatch({ periods: Math.max(1, Math.min(12, parseInt(e.target.value || "1", 10))) })}
                />
                <button className="num-btn" onClick={() => setMatch({ periods: Math.min(12, match.periods + 1) })}>+</button>
              </div>
            </label>
            <label className="field">
              <span className="field-label">Minuten per periode</span>
              <div className="num-row">
                <button className="num-btn" onClick={() => setMatch({ periodMinutes: Math.max(2, match.periodMinutes - 2) })}>−</button>
                <input
                  className="input num"
                  type="number" min="2" max="60" step="1"
                  value={match.periodMinutes}
                  onChange={(e) => setMatch({ periodMinutes: Math.max(2, Math.min(60, parseInt(e.target.value || "2", 10))) })}
                />
                <button className="num-btn" onClick={() => setMatch({ periodMinutes: Math.min(60, match.periodMinutes + 2) })}>+</button>
              </div>
            </label>
          </div>
        </section>

        {/* Formation card */}
        <section className="card">
          <header className="card-h">
            <h2>Posities</h2>
            <span className="card-meta">{formation.length}/11 actief</span>
          </header>
          <div className="preset-row">
            {FORMATION_PRESETS.map((p) => (
              <button
                key={p.label}
                className={"preset-btn " + (sameSet(formation, p.positions) ? "on" : "")}
                onClick={() => setFormation(p.positions)}
              >
                {p.label}
              </button>
            ))}
          </div>
          <p className="hint">Of selecteer handmatig. Klik op het label om aan te passen.</p>
          <div className="pos-grid">
            {Array.from({ length: 11 }, (_, i) => i + 1).map((pos) => {
              const on = formation.includes(pos);
              return (
                <div key={pos} className={"pos-chip " + (on ? "on" : "")}>
                  <button
                    className="pos-chip-toggle"
                    onClick={() => togglePosition(pos)}
                    aria-pressed={on}
                    aria-label={`Positie ${pos} ${on ? "uit" : "aan"}`}
                  >
                    <span className="pos-num">{pos}</span>
                  </button>
                  <input
                    className="pos-label-input"
                    value={positionLabels[pos] || ""}
                    onChange={(e) => setPositionLabel(pos, e.target.value.toUpperCase().slice(0, 4))}
                    placeholder="—"
                    aria-label={`Label voor positie ${pos}`}
                  />
                </div>
              );
            })}
          </div>
        </section>

        {/* Players card */}
        <section className="card card-wide">
          <header className="card-h">
            <h2>Spelers</h2>
            <span className="card-meta">{players.length} spelers · {formation.length}+ nodig</span>
          </header>
          <div className="add-row">
            <input
              className="input"
              placeholder="Naam toevoegen…"
              value={newName}
              onChange={(e) => setNewName(e.target.value)}
              onKeyDown={(e) => { if (e.key === "Enter") handleAdd(); }}
            />
            <button className="btn primary" onClick={handleAdd}>+ Toevoegen</button>
          </div>
          {players.length === 0 ? (
            <div className="empty-state">
              <p>Nog geen spelers. Voeg ze toe of laad een voorbeeldselectie.</p>
              <button className="btn ghost" onClick={loadSample}>Voorbeeldselectie laden</button>
            </div>
          ) : (
            <ul className="player-list">
              {players.map((p, i) => (
                <li key={p.id} className="player-row">
                  <span className="player-idx">{String(i + 1).padStart(2, "0")}</span>
                  <input
                    className="input bare"
                    value={p.name}
                    onChange={(e) => updatePlayer(p.id, e.target.value)}
                  />
                  <button className="trash-btn" onClick={() => removePlayer(p.id)} aria-label={`Verwijder ${p.name}`} title="Verwijder">
                    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                      <path d="M3 6h18" />
                      <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
                      <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
                      <path d="M10 11v6" />
                      <path d="M14 11v6" />
                    </svg>
                  </button>
                </li>
              ))}
            </ul>
          )}
        </section>
      </div>

      <footer className="setup-footer">
        <div className="footer-left">
          <button className="btn ghost" onClick={() => fileInputRef.current?.click()} disabled={importing}>
            ↑ Importeren
          </button>
          <input ref={fileInputRef} type="file" accept="application/json" style={{ display: "none" }} onChange={handleImport} />
          <button className="btn ghost" onClick={exportJSON}>↓ Exporteren</button>
          <button className="btn ghost danger" onClick={() => {
            if (confirm("Alles wissen? Dit verwijdert ploegen, spelers en het wisselplan.")) resetAll();
          }}>Wissen</button>
        </div>
        <div className="footer-right">
          {!canStart && (
            <span className="footer-warn">
              {!match.homeTeam || !match.awayTeam
                ? "Vul beide ploegen in"
                : formation.length === 0
                ? "Activeer minstens één positie"
                : `Nog ${formation.length - players.length} speler${formation.length - players.length === 1 ? "" : "s"} nodig`}
            </span>
          )}
          <button
            className="btn primary lg"
            onClick={() => setActiveTab("planner")}
            disabled={!canStart}
          >
            Naar Gameplan →
          </button>
        </div>
      </footer>
    </div>
  );
}

Object.assign(window, { SetupView });