/* global React, Icon, generateMixPlan, generateFixedPlan, generateTournamentPlan, buildRoundMatches, buildCoPlay, TEAM_LETTERS, COLOR_PALETTE */
const { useState: useStateMx, useMemo: useMemoMx } = React;

const MODE_LABELS = {
  mix: { num: 1, name: "Mix", desc: "Jeder Spieler wechselt jede Runde Mitspieler" },
  fixed: { num: 2, name: "Mannschaftsmodus", desc: "Spieler ist fix einer Mannschaft zugeteilt" },
  tournament: { num: 3, name: "Turniermodus", desc: "Mannschaften spielen gegeneinander (klassischer Turnierplan)" },
};

// ============ SETTINGS ============
function Settings({ settings, setSettings, players, teams, tournamentGroups, setTournamentGroups, onGenerate }) {
  const update = (k, v) => setSettings({ ...settings, [k]: v });
  const updateNum = (k, v) => setSettings({ ...settings, [k]: Math.max(1, v) });

  const Stepper = ({ value, onChange, min = 1, max = 50, disabled = false }) => (
    <div className="stepper" style={disabled ? { opacity: 0.4, pointerEvents: "none" } : null}>
      <button onClick={() => onChange(Math.max(min, value - 1))}>−</button>
      <input
        value={value}
        onChange={(e) => {
          const n = parseInt(e.target.value);
          if (!isNaN(n)) onChange(Math.min(max, Math.max(min, n)));
        }}
      />
      <button onClick={() => onChange(Math.min(max, value + 1))}>+</button>
    </div>
  );

  const mode = settings.mode || "mix";
  const isMix = mode === "mix";
  const isFixed = mode === "fixed";
  const isTournament = mode === "tournament";
  const mixDriver = settings.mixDriver || "fields";

  // Mix layout: derive teamSize from fields (or vice versa) + Anzahl Mannschaften.
  const mixLayout = isMix
    ? computeMixLayout({ playerCount: settings.playerCount, fields: settings.fields, teamSize: settings.teamSize, mixDriver })
    : null;

  // Fixed mode: Anzahl Mannschaften = playerCount ÷ teamSize (half-teams)
  const derivedTeamCount = isFixed && settings.teamSize > 0
    ? Math.max(1, Math.floor(settings.playerCount / settings.teamSize))
    : 0;

  // Tournament group helpers
  const totalTournamentTeams = (tournamentGroups || []).reduce((s, g) => s + g.teamCount, 0);
  const setGroupCount = (n) => {
    const cur = (tournamentGroups || []).slice(0, n);
    while (cur.length < n) cur.push({ name: "Gruppe " + (cur.length + 1), teamCount: 4 });
    setTournamentGroups(cur);
  };
  const updateGroup = (i, patch) => {
    const next = (tournamentGroups || []).map((g, idx) => idx === i ? { ...g, ...patch } : g);
    setTournamentGroups(next);
  };

  return (
    <div>
      <div className="page-header">
        <div>
          <h1 className="page-title">Plan erstellen</h1>
          <p className="page-subtitle">Wähle den Modus und stelle die Parameter ein.</p>
        </div>
        <button className="btn btn-lg" onClick={onGenerate}>
          <Icon.Sparkles /> Plan erstellen
        </button>
      </div>

      {/* Mode picker */}
      <div className="card card-pad-lg mb-4">
        <div className="label" style={{ marginBottom: 12, fontSize: 12, letterSpacing: "0.06em", textTransform: "uppercase" }}>1. Variante wählen</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 12 }}>
          {Object.entries(MODE_LABELS).map(([key, m]) => {
            const active = mode === key;
            const icon = key === "mix" ? <Icon.Shuffle /> : key === "fixed" ? <Icon.Lock /> : <Icon.Trophy />;
            return (
              <button
                key={key}
                onClick={() => update("mode", key)}
                style={{
                  textAlign: "left",
                  padding: 16,
                  border: active ? "2px solid var(--primary)" : "1px solid var(--border-strong)",
                  background: active ? "var(--primary-pale)" : "var(--surface)",
                  borderRadius: 12,
                  cursor: "pointer",
                  color: "var(--text)",
                  transition: "all 0.15s",
                }}
              >
                <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
                  <span style={{ color: active ? "var(--primary)" : "var(--text-muted)" }}>{icon}</span>
                  <span style={{ fontSize: 12, fontWeight: 700, color: "var(--text-muted)", letterSpacing: "0.04em" }}>NR. {m.num}</span>
                </div>
                <div style={{ fontWeight: 700, fontSize: 16, marginBottom: 4 }}>{m.name}</div>
                <div style={{ fontSize: 12, color: "var(--text-muted)", lineHeight: 1.4 }}>{m.desc}</div>
              </button>
            );
          })}
        </div>
      </div>

      {/* Parameters */}
      <div className="card card-pad-lg mb-4">
        <div className="label" style={{ marginBottom: 12, fontSize: 12, letterSpacing: "0.06em", textTransform: "uppercase" }}>2. Parameter</div>

        {isMix && (
          <div className="settings-grid">
            <div>
              <div className="setting-row">
                <div className="setting-info">
                  <div className="setting-name">Spieleranzahl</div>
                  <div className="setting-desc">Wie viele Spieler heute dabei sind</div>
                </div>
                <Stepper value={settings.playerCount} onChange={(v) => updateNum("playerCount", v)} max={99} />
              </div>
              <div className="setting-row">
                <div className="setting-info">
                  <div className="setting-name">Spielrunden</div>
                  <div className="setting-desc">Wie oft rotiert wird</div>
                </div>
                <Stepper value={settings.rounds} onChange={(v) => updateNum("rounds", v)} max={20} />
              </div>
              <div className="setting-row">
                <div className="setting-info">
                  <div className="setting-name">Spielzeit (Min)</div>
                  <div className="setting-desc">Dauer pro Runde</div>
                </div>
                <Stepper value={settings.minutes} onChange={(v) => updateNum("minutes", v)} max={60} />
              </div>
            </div>
            <div>
              {/* Driver toggle */}
              <div className="setting-row" style={{ alignItems: "flex-start" }}>
                <div className="setting-info">
                  <div className="setting-name">Berechnen nach</div>
                  <div className="setting-desc">Welcher Wert wird vorgegeben — der andere wird daraus berechnet</div>
                </div>
                <div className="view-tabs" style={{ flexShrink: 0 }}>
                  <button
                    className={"view-tab" + (mixDriver === "fields" ? " active" : "")}
                    onClick={() => update("mixDriver", "fields")}
                  >Spielfelder</button>
                  <button
                    className={"view-tab" + (mixDriver === "teamSize" ? " active" : "")}
                    onClick={() => update("mixDriver", "teamSize")}
                  >Teamgröße</button>
                </div>
              </div>

              {/* Spielfelder — editable when driver=fields, else computed */}
              <div className="setting-row" style={mixDriver === "fields" ? null : { opacity: 0.6 }}>
                <div className="setting-info">
                  <div className="setting-name">Spielfelder</div>
                  <div className="setting-desc">
                    {mixDriver === "fields" ? "Anzahl paralleler Felder (1, 2, 3…)" : "Berechnet aus Spieleranzahl ÷ (Teamgröße × 2)"}
                  </div>
                </div>
                {mixDriver === "fields" ? (
                  <Stepper value={settings.fields} onChange={(v) => updateNum("fields", v)} max={12} />
                ) : (
                  <div style={{ fontSize: 22, fontWeight: 700, fontVariantNumeric: "tabular-nums", padding: "0 12px", color: "var(--text-muted)" }}>
                    {mixLayout.fields}
                  </div>
                )}
              </div>

              {/* Teamgröße — editable when driver=teamSize, else computed */}
              <div className="setting-row" style={mixDriver === "teamSize" ? null : { opacity: 0.6 }}>
                <div className="setting-info">
                  <div className="setting-name">Teamgröße pro Hälfte</div>
                  <div className="setting-desc">
                    {mixDriver === "teamSize" ? "Spieler je Hälfte einer Begegnung" : "Berechnet aus Spieleranzahl ÷ (Spielfelder × 2)"}
                  </div>
                </div>
                {mixDriver === "teamSize" ? (
                  <Stepper value={settings.teamSize} onChange={(v) => updateNum("teamSize", v)} max={11} />
                ) : (
                  <div style={{ fontSize: 22, fontWeight: 700, fontVariantNumeric: "tabular-nums", padding: "0 12px", color: "var(--text-muted)" }}>
                    {mixLayout.teamSize}
                  </div>
                )}
              </div>

              {/* Anzahl Mannschaften — always computed */}
              <div className="setting-row" style={{ opacity: 0.6 }}>
                <div className="setting-info">
                  <div className="setting-name">Anzahl Mannschaften</div>
                  <div className="setting-desc">Spielfelder × 2 — jede Hälfte ist eine Mannschaft</div>
                </div>
                <div style={{ fontSize: 22, fontWeight: 700, fontVariantNumeric: "tabular-nums", padding: "0 12px", color: "var(--text-muted)" }}>
                  {mixLayout.mannschaften}
                </div>
              </div>
            </div>
          </div>
        )}

        {isFixed && (
          <div className="settings-grid">
            <div>
              <div className="setting-row">
                <div className="setting-info">
                  <div className="setting-name">Spieleranzahl</div>
                  <div className="setting-desc">Wie viele Spieler heute dabei sind</div>
                </div>
                <Stepper value={settings.playerCount} onChange={(v) => updateNum("playerCount", v)} max={99} />
              </div>
              <div className="setting-row">
                <div className="setting-info">
                  <div className="setting-name">Spielfelder</div>
                  <div className="setting-desc">Anzahl paralleler Felder (1, 2, 3…)</div>
                </div>
                <Stepper value={settings.fields} onChange={(v) => updateNum("fields", v)} max={12} />
              </div>
              <div className="setting-row">
                <div className="setting-info">
                  <div className="setting-name">Spielrunden</div>
                  <div className="setting-desc">Wie oft rotiert wird</div>
                </div>
                <Stepper value={settings.rounds} onChange={(v) => updateNum("rounds", v)} max={20} />
              </div>
            </div>
            <div>
              <div className="setting-row">
                <div className="setting-info">
                  <div className="setting-name">Spielzeit (Min)</div>
                  <div className="setting-desc">Dauer pro Runde</div>
                </div>
                <Stepper value={settings.minutes} onChange={(v) => updateNum("minutes", v)} max={60} />
              </div>
              <div className="setting-row">
                <div className="setting-info">
                  <div className="setting-name">Teamgröße pro Hälfte</div>
                  <div className="setting-desc">Spieler je Hälfte einer Begegnung</div>
                </div>
                <Stepper value={settings.teamSize} onChange={(v) => updateNum("teamSize", v)} max={11} />
              </div>
              <div className="setting-row" style={{ opacity: 0.55 }}>
                <div className="setting-info">
                  <div className="setting-name">Anzahl Mannschaften</div>
                  <div className="setting-desc">Spieleranzahl ÷ Teamgröße</div>
                </div>
                <div style={{ fontSize: 22, fontWeight: 700, fontVariantNumeric: "tabular-nums", padding: "0 12px" }}>
                  {derivedTeamCount}
                </div>
              </div>
            </div>
          </div>
        )}

        {isTournament && (
          <div className="settings-grid">
            <div>
              <div className="setting-row" style={{ opacity: 0.4, pointerEvents: "none" }}>
                <div className="setting-info">
                  <div className="setting-name">Spieleranzahl</div>
                  <div className="setting-desc">Im Turniermodus nicht relevant</div>
                </div>
                <span className="muted">—</span>
              </div>
              <div className="setting-row">
                <div className="setting-info">
                  <div className="setting-name">Spielfelder</div>
                  <div className="setting-desc">Parallele Felder</div>
                </div>
                <Stepper value={settings.fields} onChange={(v) => updateNum("fields", v)} max={12} />
              </div>
              <div className="setting-row">
                <div className="setting-info">
                  <div className="setting-name">Spielrunden</div>
                  <div className="setting-desc">Anzahl Runden im Turnier</div>
                </div>
                <Stepper value={settings.rounds} onChange={(v) => updateNum("rounds", v)} max={20} />
              </div>
              <div className="setting-row">
                <div className="setting-info">
                  <div className="setting-name">Spielzeit (Min)</div>
                  <div className="setting-desc">Dauer pro Runde</div>
                </div>
                <Stepper value={settings.minutes} onChange={(v) => updateNum("minutes", v)} max={60} />
              </div>
            </div>
            <div>
              <div className="setting-row" style={{ opacity: 0.4, pointerEvents: "none" }}>
                <div className="setting-info">
                  <div className="setting-name">Teamgröße pro Hälfte</div>
                  <div className="setting-desc">Im Turniermodus nicht relevant</div>
                </div>
                <span className="muted">—</span>
              </div>
              <div className="setting-row">
                <div className="setting-info">
                  <div className="setting-name">Anzahl Gruppen</div>
                  <div className="setting-desc">In wie viele Gruppen das Turnier aufgeteilt wird</div>
                </div>
                <Stepper value={(tournamentGroups || []).length} onChange={setGroupCount} min={1} max={6} />
              </div>
              <div style={{ marginTop: 8 }}>
                {(tournamentGroups || []).map((g, i) => (
                  <div key={i} className="setting-row" style={{ paddingLeft: 16, borderLeft: "3px solid var(--primary)", marginBottom: 8 }}>
                    <div className="setting-info">
                      <input
                        className="input input-sm"
                        value={g.name}
                        onChange={(e) => updateGroup(i, { name: e.target.value })}
                        style={{ marginBottom: 4 }}
                      />
                      <div className="setting-desc">Anzahl Mannschaften in dieser Gruppe</div>
                    </div>
                    <Stepper value={g.teamCount} onChange={(v) => updateGroup(i, { teamCount: v })} min={2} max={10} />
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}

        <div style={{ marginTop: 24, padding: 16, background: "var(--primary-pale)", borderRadius: 10, fontSize: 13, lineHeight: 1.6, color: "var(--text)" }}>
          <strong>Berechnung:</strong>{" "}
          {isMix && <>{settings.playerCount} Spieler auf <strong>{mixLayout.fields} Feldern</strong> → <strong>{mixLayout.mannschaften} Mannschaften</strong> à {mixLayout.teamSize} Spieler{mixLayout.extras > 0 ? <> ({mixLayout.extras}× +1)</> : null} · {settings.rounds} Runden à {settings.minutes} Min · gesamt <strong>{settings.rounds * settings.minutes} Min</strong>. Jeder Spieler hat in jeder Runde möglichst neue Mitspieler.</>}
          {isFixed && <>{settings.playerCount} Spieler fix in <strong>{derivedTeamCount} Mannschaften</strong>. Mannschaften rotieren über {settings.fields} Felder · {settings.rounds} Runden · gesamt <strong>{settings.rounds * settings.minutes} Min</strong>.</>}
          {isTournament && <><strong>{totalTournamentTeams} Mannschaften</strong> in {(tournamentGroups || []).length} Gruppen · Round-Robin innerhalb jeder Gruppe · {settings.rounds} Runden · gesamt <strong>{settings.rounds * settings.minutes} Min</strong>.</>}
        </div>
      </div>

      <div className="card card-pad">
        <div className="row gap-3" style={{ justifyContent: "space-between", flexWrap: "wrap" }}>
          <div>
            <div className="text-sm muted">Status</div>
            <div className="fw-700" style={{ fontSize: 15 }}>
              {(isMix || isFixed) && <>{players.length} Spieler im Pool · {teams.length} Mannschaften angelegt</>}
              {isTournament && <>{totalTournamentTeams} Mannschaften im Turnier · {(tournamentGroups || []).length} Gruppen</>}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ============ MATRIX VIEW ============
function MatrixView({ plan, settings, teams, players, tournamentPlan, tournamentGroups }) {
  const [view, setView] = useStateMx("table");
  const [teamsOnly, setTeamsOnly] = useStateMx(false);

  const mode = settings.mode || "mix";
  const isTournament = mode === "tournament";

  const teamColor = (idx) => teams[idx]?.color || COLOR_PALETTE[idx % COLOR_PALETTE.length];
  // Field number → tinted hue (just for visual variety)
  const fieldColor = (fieldStr) => {
    const n = parseInt(fieldStr) || 1;
    const palette = ["#1E5BA8","#5BAEE0","#06A77D","#F4A261","#7B61FF","#E63946","#264653","#F1C453","#E76F51","#52B788","#FB8500","#A663CC"];
    return palette[(n - 1) % palette.length];
  };
  // Team (Mannschaft) → letter A,B,C… + distinct vivid color (Mix mode)
  const TEAM_HUES = ["#E63946","#2A9D8F","#F4A261","#7B61FF","#E76F51","#06A77D","#3A86FF","#FF006E","#8338EC","#FB8500","#264653","#52B788"];
  const teamLabel = (team) => String.fromCharCode(64 + team); // 1→A, 2→B…
  const teamHue = (team) => TEAM_HUES[(team - 1) % TEAM_HUES.length];
  // How many distinct teams across the plan (for the Mannschaften legend)
  const maxTeam = useMemoMx(() => {
    let m = 0;
    plan.forEach(row => (row.teamPerRound || []).forEach(t => { if (t > m) m = t; }));
    return m;
  }, [plan]);

  // Player-based modes
  const rounds = (plan && plan[0]?.rounds.length) || settings.rounds || 0;

  // ===== Empty state =====
  const noPlan = isTournament
    ? !tournamentPlan || tournamentPlan.length === 0
    : !plan || plan.length === 0;

  if (noPlan) {
    return (
      <div>
        <div className="page-header">
          <div>
            <h1 className="page-title">Matrixplan</h1>
            <p className="page-subtitle">Noch kein Plan generiert.</p>
          </div>
        </div>
        <div className="card card-pad-lg">
          <div className="empty-state">
            <h3>Kein Plan vorhanden</h3>
            <p>Geh zu „Plan erstellen", wähle den Modus und klicke auf „Plan erstellen".</p>
          </div>
        </div>
      </div>
    );
  }

  // ===== Tournament view =====
  if (isTournament) {
    return (
      <div>
        <div className="page-header">
          <div>
            <h1 className="page-title">Turnierplan</h1>
            <p className="page-subtitle">{(tournamentGroups || []).length} Gruppen · {tournamentPlan.length} Runden · {settings.minutes} Min/Runde</p>
          </div>
          <button className="btn btn-secondary btn-sm" onClick={() => window.print()}>Drucken</button>
        </div>

        <div className="rounds-grid">
          {tournamentPlan.map(rd => (
            <div key={rd.round} className="round-card">
              <div className="round-head">
                <div className="round-title">Runde {rd.round}</div>
                <div className="round-meta">{settings.minutes} Min</div>
              </div>
              {rd.matches.length === 0 && (
                <div className="match-row"><span className="muted text-sm">Spielfrei</span></div>
              )}
              {rd.matches.map((m, i) => (
                <div key={i} className="match-row">
                  <div className="match-field">F{m.field}</div>
                  <div className="match-team">
                    <span className="team-chip" style={{ background: m.teamA.color || "var(--primary)" }}>{m.teamA.letter || m.teamA.name}</span>
                    <span className="text-xs">{m.teamA.name}</span>
                  </div>
                  <div className="match-vs">vs</div>
                  <div className="match-team right">
                    <span className="text-xs">{m.teamB.name}</span>
                    <span className="team-chip" style={{ background: m.teamB.color || "var(--primary)" }}>{m.teamB.letter || m.teamB.name}</span>
                  </div>
                </div>
              ))}
              <div style={{ padding: "8px 14px", borderTop: "1px solid var(--border)", fontSize: 11, color: "var(--text-muted)", background: "var(--ink-50)" }}>
                {rd.matches[0]?.groupName || ""}
                {rd.matches.some(m => m.groupIdx !== rd.matches[0]?.groupIdx) && " (mehrere Gruppen)"}
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  // ===== Player-based modes (mix + fixed) =====
  const matches = useMemoMx(() => buildRoundMatches(plan, rounds), [plan, rounds]);

  // For "Nur Mannschaften" view (only meaningful in fixed mode):
  const teamRows = useMemoMx(() => {
    if (mode !== "fixed") return [];
    const seen = new Map();
    plan.forEach(row => {
      const key = row.teamLetter || row.rounds[0];
      if (!seen.has(key)) {
        const teamObj = teams.find(t => t.letter === key);
        const memberCount = plan.filter(r => (r.teamLetter || r.rounds[0]) === key).length;
        seen.set(key, {
          letter: key,
          name: teamObj?.name || ("Mannschaft " + key),
          color: teamObj?.color,
          memberCount,
          rounds: row.rounds,
        });
      }
    });
    return Array.from(seen.values()).sort((a, b) => Number(a.letter) - Number(b.letter));
  }, [plan, teams, mode]);

  const showTeamsOnly = teamsOnly && mode === "fixed";

  // Effective field count derived from the actual plan (max field number used),
  // so subtitle + legend never advertise a field the matrix doesn't use.
  const effectiveFields = useMemoMx(() => {
    let m = 0;
    plan.forEach(row => row.rounds.forEach(f => { const n = parseInt(f); if (n > m) m = n; }));
    return m || settings.fields;
  }, [plan, settings.fields]);

  return (
    <div>
      <div className="page-header">
        <div>
          <h1 className="page-title">Matrixplan</h1>
          <p className="page-subtitle">
            {MODE_LABELS[mode].name} · {plan.length} Spieler · {rounds} Runden · {effectiveFields} Felder · {settings.minutes} Min/Runde
          </p>
        </div>
        <div className="matrix-toolbar">
          <div className="view-tabs">
            <button className={"view-tab" + (view === "table" ? " active" : "")} onClick={() => setView("table")}>Tabelle</button>
            <button className={"view-tab" + (view === "letters" ? " active" : "")} onClick={() => setView("letters")}>Mit Farben</button>
            <button className={"view-tab" + (view === "cards" ? " active" : "")} onClick={() => setView("cards")}>Karten</button>
          </div>
          {mode === "fixed" && view !== "cards" && (
            <label className="row gap-2" style={{ cursor: "pointer", padding: "6px 12px", border: "1px solid var(--border-strong)", borderRadius: "var(--r-md)", background: "var(--surface)", fontSize: 13, fontWeight: 600, userSelect: "none" }}>
              <span className={"checkbox" + (teamsOnly ? " checked" : "")}>
                {teamsOnly && <Icon.Check />}
              </span>
              <input type="checkbox" checked={teamsOnly} onChange={(e) => setTeamsOnly(e.target.checked)} style={{ display: "none" }} />
              Nur Mannschaften
            </label>
          )}
          <button className="btn btn-secondary btn-sm" onClick={() => window.print()}>Drucken</button>
        </div>
      </div>

      {(view === "table" || view === "letters") && !showTeamsOnly && (
        <div className="matrix-table-wrap">
          <table className="matrix-table">
            <thead>
              <tr>
                <th style={{ width: 40 }}>Nr</th>
                <th style={{ textAlign: "left", paddingLeft: 16 }}>Name</th>
                {mode === "fixed" && <th style={{ width: 100 }}>Mannschaft</th>}
                {Array.from({ length: rounds }, (_, i) => (
                  <th key={i}>R{i + 1}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {plan.map((row) => (
                <tr key={row.idx}>
                  <td className="col-num">{row.idx}</td>
                  <td className="col-name" style={{ paddingLeft: 16 }}>{row.name || <span className="muted">Spieler {row.idx}</span>}</td>
                  {mode === "fixed" && (
                    <td>
                      <span className="team-chip" style={{ background: row.teamColor || "var(--primary)", fontSize: 11 }}>
                        {row.teamLetter}
                      </span>
                    </td>
                  )}
                  {row.rounds.map((field, ri) => {
                    const team = row.teamPerRound ? row.teamPerRound[ri] : null;
                    if (mode === "mix" && team != null) {
                      return (
                        <td key={ri}>
                          {view === "table" ? (
                            <span style={{ fontWeight: 700, fontVariantNumeric: "tabular-nums" }}>
                              <span style={{ color: fieldColor(field) }}>{field}</span>
                              <span style={{ color: teamHue(team), marginLeft: 1 }}>{teamLabel(team)}</span>
                            </span>
                          ) : (
                            <span style={{ display: "inline-flex", gap: 2, justifyContent: "center" }}>
                              <span className="matrix-cell-letter" style={{ background: fieldColor(field) }}>{field}</span>
                              <span className="matrix-cell-letter" style={{ background: teamHue(team) }}>{teamLabel(team)}</span>
                            </span>
                          )}
                        </td>
                      );
                    }
                    return (
                      <td key={ri}>
                        {field === "" ? (
                          <span className="muted">–</span>
                        ) : view === "table" ? (
                          <span style={{ color: fieldColor(field), fontWeight: 700 }}>{field}</span>
                        ) : (
                          <span className="matrix-cell-letter" style={{ background: fieldColor(field) }}>{field}</span>
                        )}
                      </td>
                    );
                  })}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {(view === "table" || view === "letters") && showTeamsOnly && (
        <div className="matrix-table-wrap">
          <table className="matrix-table">
            <thead>
              <tr>
                <th style={{ width: 60 }}>Mannschaft</th>
                <th style={{ textAlign: "left", paddingLeft: 16 }}>Name</th>
                <th style={{ width: 80 }}>Spieler</th>
                {Array.from({ length: rounds }, (_, i) => (
                  <th key={i}>R{i + 1}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {teamRows.map((tr) => (
                <tr key={tr.letter}>
                  <td>
                    <span className="matrix-cell-letter" style={{ background: tr.color || fieldColor(tr.letter) }}>{tr.letter}</span>
                  </td>
                  <td className="col-name" style={{ paddingLeft: 16 }}>{tr.name}</td>
                  <td className="col-num">{tr.memberCount}</td>
                  {tr.rounds.map((field, ri) => (
                    <td key={ri}>
                      {field === "" ? (
                        <span className="muted">–</span>
                      ) : view === "table" ? (
                        <span style={{ color: fieldColor(field), fontWeight: 700 }}>{field}</span>
                      ) : (
                        <span className="matrix-cell-letter" style={{ background: fieldColor(field) }}>{field}</span>
                      )}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {view === "cards" && (
        <div className="rounds-grid">
          {matches.map((round) => (
            <div key={round.round} className="round-card">
              <div className="round-head">
                <div className="round-title">Runde {round.round}</div>
                <div className="round-meta">{settings.minutes} Min</div>
              </div>
              {round.fields.map((f) => {
                const ri = round.round - 1;
                const homeTeam = f.home[0]?.teamPerRound ? f.home[0].teamPerRound[ri] : null;
                const awayTeam = f.away[0]?.teamPerRound ? f.away[0].teamPerRound[ri] : null;
                const homeColor = homeTeam != null ? teamHue(homeTeam) : (f.home[0]?.teamColor || fieldColor(f.field));
                const awayColor = awayTeam != null ? teamHue(awayTeam) : (f.away[0]?.teamColor || fieldColor(f.field));
                const homeLabel = homeTeam != null ? teamLabel(homeTeam) : (f.home[0]?.teamLetter ?? null);
                const awayLabel = awayTeam != null ? teamLabel(awayTeam) : (f.away[0]?.teamLetter ?? null);
                return (
                  <div key={f.field} className="match-row">
                    <div className="match-field" style={{ color: fieldColor(f.field) }}>F{f.field}</div>
                    <div className="match-team">
                      <span className="count-circle" style={{ background: homeColor }}>
                        {homeLabel != null && <b>{homeLabel}</b>}
                        <i>{f.home.length}</i>
                      </span>
                      <span className="text-xs muted" style={{ lineHeight: 1.2 }}>
                        {f.home.map(p => p.name || `#${p.idx}`).join(", ")}
                      </span>
                    </div>
                    <div className="match-vs">vs</div>
                    <div className="match-team right">
                      <span className="text-xs muted" style={{ lineHeight: 1.2 }}>
                        {f.away.map(p => p.name || `#${p.idx}`).join(", ")}
                      </span>
                      <span className="count-circle" style={{ background: awayColor }}>
                        {awayLabel != null && <b>{awayLabel}</b>}
                        <i>{f.away.length}</i>
                      </span>
                    </div>
                  </div>
                );
              })}
              {round.byeTeams && round.byeTeams.length > 0 && round.byeTeams.map((bt) => (
                <div key={"bye-" + bt.teamIdx} className="match-row" style={{ opacity: 0.7 }}>
                  <div className="match-field" style={{ color: "var(--text-muted)", fontSize: 11 }}>Frei</div>
                  <div className="match-team">
                    <span className="count-circle" style={{ background: bt.teamColor || "var(--text-muted)" }}>
                      {bt.teamLetter != null && <b>{bt.teamLetter}</b>}
                      <i>{bt.players.length}</i>
                    </span>
                    <span className="text-xs muted" style={{ lineHeight: 1.2 }}>
                      {bt.players.map(p => p.name || `#${p.idx}`).join(", ")} · pausiert
                    </span>
                  </div>
                </div>
              ))}
            </div>
          ))}
        </div>
      )}

      <div className="card card-pad mt-4">
        <div className="section-h" style={{ margin: "0 0 10px" }}>
          <h3>Felder-Legende</h3>
          <span className="section-meta">{mode === "mix" ? "Zahl = Feld · Buchstabe = Mannschaft" : view === "cards" ? "Kreis = Mannschaft · F = Spielfeld · kleine Zahl = Spieleranzahl" : "Zahl = Spielfeld-Nummer"}</span>
        </div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
          {Array.from({ length: effectiveFields }, (_, i) => String(i + 1)).map((l) => (
            <div key={l} className="row gap-2" style={{ background: "var(--ink-50)", padding: "6px 12px", borderRadius: 8 }}>
              <span className="matrix-cell-letter" style={{ background: fieldColor(l), width: 22, height: 22, fontSize: 11 }}>{l}</span>
              <span className="text-sm fw-600">Feld {l}</span>
            </div>
          ))}
        </div>
        {mode === "mix" && maxTeam > 0 && (
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10, marginTop: 12, paddingTop: 12, borderTop: "1px solid var(--border)" }}>
            {Array.from({ length: maxTeam }, (_, i) => i + 1).map((t) => (
              <div key={t} className="row gap-2" style={{ background: "var(--ink-50)", padding: "6px 12px", borderRadius: 8 }}>
                <span className="matrix-cell-letter" style={{ background: teamHue(t), width: 22, height: 22, fontSize: 11 }}>{teamLabel(t)}</span>
                <span className="text-sm fw-600">Mannschaft {teamLabel(t)}</span>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

// ============ HISTORY ============
function HistoryView({ plan, players, mode }) {
  const [tab, setTab] = useStateMx("heatmap");

  if (mode === "tournament") {
    return (
      <div>
        <div className="page-header">
          <div>
            <h1 className="page-title">Historie</h1>
            <p className="page-subtitle">Im Turniermodus wird auf Mannschaftsebene gespielt — keine Spieler-Historie verfügbar.</p>
          </div>
        </div>
        <div className="card card-pad-lg">
          <div className="empty-state">
            <h3>Spieler-Historie nur in Modus 1 + 2</h3>
            <p>Wechsle in den Mix- oder Mannschaftsmodus, um die Mitspieler-Historie zu sehen.</p>
          </div>
        </div>
      </div>
    );
  }

  const rounds = plan[0]?.rounds.length || 0;
  const co = useMemoMx(() => buildCoPlay(plan, rounds), [plan, rounds]);
  const max = useMemoMx(() => {
    let m = 0;
    co.forEach(row => row.forEach(v => { if (v > m) m = v; }));
    return m || 1;
  }, [co]);

  const heat = (v) => {
    if (v === 0) return "var(--ink-50)";
    const t = v / max;
    const a = 0.15 + t * 0.85;
    return `rgba(30, 91, 168, ${a.toFixed(2)})`;
  };

  if (!plan || plan.length === 0) {
    return (
      <div>
        <div className="page-header">
          <div>
            <h1 className="page-title">Historie</h1>
            <p className="page-subtitle">Wer hat mit wem zusammen gespielt.</p>
          </div>
        </div>
        <div className="card card-pad-lg">
          <div className="empty-state">
            <h3>Noch keine Daten</h3>
            <p>Erstelle einen Plan, dann zeigt die Historie wie oft jeder mit jedem zusammen gespielt hat.</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div>
      <div className="page-header">
        <div>
          <h1 className="page-title">Mitspieler-Historie</h1>
          <p className="page-subtitle">Wer war wie oft mit wem auf dem gleichen Feld?</p>
        </div>
        <div className="view-tabs">
          <button className={"view-tab" + (tab === "heatmap" ? " active" : "")} onClick={() => setTab("heatmap")}>Heatmap</button>
          <button className={"view-tab" + (tab === "cards" ? " active" : "")} onClick={() => setTab("cards")}>Pro Spieler</button>
        </div>
      </div>

      {tab === "heatmap" && (
        <div className="heatmap-wrap">
          <table className="heatmap">
            <thead>
              <tr>
                <th style={{ width: 120 }}></th>
                {plan.map((p, i) => (
                  <th key={i} className="col-h">
                    <span>{p.name || `#${p.idx}`}</span>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {plan.map((p, i) => (
                <tr key={i}>
                  <th className="row-h">{p.name || `Spieler ${p.idx}`}</th>
                  {plan.map((q, j) => {
                    if (i === j) return <td key={j} className="cell diag" />;
                    const v = co[i][j];
                    return (
                      <td
                        key={j}
                        className="cell"
                        style={{
                          background: heat(v),
                          color: v / max > 0.5 ? "white" : "var(--text-muted)"
                        }}
                        title={`${p.name || p.idx} & ${q.name || q.idx}: ${v}× zusammen`}
                      >
                        {v > 0 ? v : ""}
                      </td>
                    );
                  })}
                </tr>
              ))}
            </tbody>
          </table>
          <div className="row gap-2 mt-3" style={{ fontSize: 12, color: "var(--text-muted)" }}>
            <span>Selten</span>
            <span style={{ display: "inline-block", height: 10, width: 100, background: "linear-gradient(to right, rgba(30,91,168,0.15), rgba(30,91,168,1))", borderRadius: 5 }}></span>
            <span>Oft</span>
            <span className="muted" style={{ marginLeft: "auto" }}>Max: {max}× zusammen</span>
          </div>
        </div>
      )}

      {tab === "cards" && (
        <div className="history-grid">
          {plan.map((p, i) => {
            const mates = plan
              .map((q, j) => ({ q, j, count: co[i][j] }))
              .filter(x => x.j !== i)
              .sort((a, b) => b.count - a.count);
            return (
              <div key={i} className="history-card">
                <div className="history-card-head">
                  <div className="profile-avatar" style={{ background: "var(--primary)", width: 32, height: 32, fontSize: 12 }}>
                    {(p.name || "S" + p.idx).split(" ").map(s => s[0]).slice(0, 2).join("")}
                  </div>
                  <div className="flex-1">
                    <div className="fw-700 text-sm">{p.name || `Spieler ${p.idx}`}</div>
                    <div className="text-xs muted">{rounds} Spiele · {mates.filter(m => m.count > 0).length} Mitspieler</div>
                  </div>
                </div>
                {mates.slice(0, 6).map(m => (
                  <div key={m.j} className="history-mate">
                    <div className="history-mate-name">{m.q.name || `Spieler ${m.q.idx}`}</div>
                    <div className="history-bar">
                      <div className="history-bar-fill" style={{ width: ((m.count / max) * 100) + "%" }} />
                    </div>
                    <div className="history-count">{m.count}</div>
                  </div>
                ))}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

window.Settings = Settings;
window.MatrixView = MatrixView;
window.HistoryView = HistoryView;
window.MODE_LABELS = MODE_LABELS;