/* global React, Icon, COLOR_PALETTE, TEAM_LETTERS */
const { useState: useStatePool, useRef: useRefPool, useEffect: useEffectPool } = React;

// ============ PLAYER POOL ============
function PlayerPool({ players, setPlayers, teams, onAssign, poolMode }) {
  const advanced = poolMode !== "standard";
  const [name, setName] = useStatePool("");
  const [filter, setFilter] = useStatePool("");
  const inputRef = useRefPool(null);

  const addPlayer = () => {
    const trimmed = name.trim();
    if (!trimmed) return;
    setPlayers([...players, { id: "p" + Date.now(), name: trimmed, teamId: null, stars: 3 }]);
    setName("");
    inputRef.current?.focus();
  };
  const removePlayer = (id) => setPlayers(players.filter(p => p.id !== id));
  const setStars = (id, stars) => setPlayers(players.map(p => p.id === id ? { ...p, stars } : p));

  const StarRating = ({ value, onChange }) => (
    <div className="row gap-1" style={{ alignItems: "center" }}>
      {[1, 2, 3, 4, 5].map(n => (
        <button
          key={n}
          onClick={() => onChange(value === n ? n - 1 : n)}
          title={n + " Stern" + (n > 1 ? "e" : "")}
          style={{
            background: "transparent",
            border: "none",
            cursor: "pointer",
            padding: 2,
            color: n <= value ? "#F1C453" : "var(--ink-300)",
            lineHeight: 0,
          }}
        >
          <svg width="16" height="16" viewBox="0 0 24 24" fill={n <= value ? "currentColor" : "none"} stroke="currentColor" strokeWidth="2" strokeLinejoin="round"><polygon points="12 2 15 8.5 22 9.3 17 14.1 18.2 21 12 17.8 5.8 21 7 14.1 2 9.3 9 8.5"/></svg>
        </button>
      ))}
    </div>
  );

  const filtered = players.filter(p =>
    !filter || p.name.toLowerCase().includes(filter.toLowerCase())
  );

  const teamOf = (pid) => teams.find(t => t.playerIds.includes(pid));
  const unassigned = players.filter(p => !teams.some(t => t.playerIds.includes(p.id)));
  const activeCount = players.filter(p => p.active !== false).length;
  const setActive = (id, active) => setPlayers(players.map(p => p.id === id ? { ...p, active } : p));
  const setAll = (active) => setPlayers(players.map(p => ({ ...p, active })));
  const [pendingDelete, setPendingDelete] = useStatePool(null);

  return (
    <div>
      <div className="page-header">
        <div>
          <h1 className="page-title">Spielerpool</h1>
          <p className="page-subtitle">Lege deine Spieler einmal pro Saison an. Sie stehen dir dann für alle Trainings zur Verfügung.</p>
        </div>
      </div>

      <div className="stat-grid">
        <div className="stat">
          <div className="stat-label">Im Pool</div>
          <div className="stat-value">{players.length}</div>
          <div className="stat-meta">Spieler diese Saison</div>
        </div>
        <div className="stat" style={{ borderColor: "var(--primary)", background: "var(--primary-pale)" }}>
          <div className="stat-label">Anwesend heute</div>
          <div className="stat-value" style={{ color: "var(--primary)" }}>{activeCount}</div>
          <div className="stat-meta">kommen in den Plan</div>
        </div>
        {advanced && (
        <div className="stat">
          <div className="stat-label">Zugeteilt</div>
          <div className="stat-value">{players.length - unassigned.length}</div>
          <div className="stat-meta">in einer Mannschaft</div>
        </div>
        )}
      </div>

      <div className="card card-pad mb-3">
        <div className="row gap-3" style={{ flexWrap: "wrap" }}>
          <div style={{ flex: 1, minWidth: 240 }}>
            <input
              ref={inputRef}
              className="input"
              placeholder="Vor- + Nachname (z.B. Lukas H.)"
              value={name}
              onChange={(e) => setName(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && addPlayer()}
            />
          </div>
          <button className="btn" onClick={addPlayer}>
            <Icon.Plus /> Spieler hinzufügen
          </button>
        </div>
      </div>

      <div className="row gap-3 mb-3" style={{ flexWrap: "wrap" }}>
        <input
          className="input"
          placeholder="Suche…"
          value={filter}
          onChange={(e) => setFilter(e.target.value)}
          style={{ maxWidth: 280 }}
        />
        <span className="muted text-sm flex-1">{filtered.length} angezeigt · Toggle = anwesend heute</span>
        <button className="btn btn-secondary btn-sm" onClick={() => setAll(true)}>Alle anwesend</button>
        <button className="btn btn-secondary btn-sm" onClick={() => setAll(false)}>Alle abwählen</button>
      </div>

      {filtered.length === 0 ? (
        <div className="card card-pad-lg">
          <div className="empty-state">
            <h3>Noch keine Spieler im Pool</h3>
            <p>Füge oben den ersten Spieler hinzu — Enter drücken um schnell mehrere anzulegen.</p>
          </div>
        </div>
      ) : (
        <div>
          {filtered.map((p, idx) => {
            const team = teamOf(p.id);
            const active = p.active !== false;
            return (
              <div key={p.id} className={"player-row" + (active ? "" : " is-inactive")}>
                <button
                  className={"switch" + (active ? " on" : "")}
                  onClick={() => setActive(p.id, !active)}
                  role="switch"
                  aria-checked={active}
                  title={active ? "Anwesend — antippen zum Abwählen" : "Abwesend — antippen für anwesend"}
                >
                  <span className="switch-knob" />
                </button>
                <div className="player-main">
                  <div className="player-name">{p.name}</div>
                  <div className="player-meta">
                    {!active ? "Heute abwesend" : advanced ? (team ? `In ${team.name}` : "Noch nicht zugeordnet") : "Anwesend"}
                  </div>
                </div>
                {advanced && <StarRating value={p.stars ?? 3} onChange={(v) => setStars(p.id, v)} />}
                {advanced && (
                <select
                  className="select input-sm"
                  style={{ width: 150, height: 38 }}
                  value={team?.id || ""}
                  onChange={(e) => onAssign(p.id, e.target.value || null)}
                >
                  <option value="">— Keine Mannschaft —</option>
                  {teams.map(t => (
                    <option key={t.id} value={t.id}>{t.name}</option>
                  ))}
                </select>
                )}
                <button className="btn btn-icon btn-danger" onClick={() => setPendingDelete(p)} title="Entfernen">
                  <Icon.Trash />
                </button>
              </div>
            );
          })}
        </div>
      )}

      {pendingDelete && (
        <div className="modal-backdrop" onClick={() => setPendingDelete(null)}>
          <div className="modal" style={{ maxWidth: 400 }} onClick={(e) => e.stopPropagation()}>
            <div className="modal-head">
              <h3>Spieler löschen?</h3>
            </div>
            <div className="modal-body">
              <p style={{ margin: 0, fontSize: 14, lineHeight: 1.5 }}>
                Soll <strong>{pendingDelete.name}</strong> wirklich dauerhaft aus dem Spielerpool entfernt werden?
                Das kann nicht rückgängig gemacht werden.
              </p>
            </div>
            <div className="modal-foot">
              <button className="btn btn-secondary" onClick={() => setPendingDelete(null)}>Abbrechen</button>
              <button className="btn" style={{ background: "var(--danger)" }} onClick={() => { removePlayer(pendingDelete.id); setPendingDelete(null); }}>
                Endgültig löschen
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
function ColorPopover({ value, onChange, onClose }) {
  const ref = useRefPool(null);
  useEffectPool(() => {
    const handler = (e) => {
      if (ref.current && !ref.current.contains(e.target)) onClose();
    };
    setTimeout(() => document.addEventListener("click", handler), 0);
    return () => document.removeEventListener("click", handler);
  }, []);
  return (
    <div className="color-popover" ref={ref}>
      <div className="color-swatches">
        {COLOR_PALETTE.map(c => (
          <button
            key={c}
            className={"color-swatch" + (c.toLowerCase() === value.toLowerCase() ? " selected" : "")}
            style={{ background: c }}
            onClick={() => onChange(c)}
          />
        ))}
      </div>
      <div className="color-input-row">
        <input type="color" value={value} onChange={(e) => onChange(e.target.value)} />
        <input
          className="input input-sm"
          value={value}
          onChange={(e) => onChange(e.target.value)}
          style={{ flex: 1, fontFamily: "var(--font-mono)" }}
        />
      </div>
    </div>
  );
}

function Teams({ players, teams, setTeams, onAssign, poolMode }) {
  const advanced = poolMode !== "standard";
  const [openColor, setOpenColor] = useStatePool(null);
  const [draggingId, setDraggingId] = useStatePool(null);
  const [dragOverTeam, setDragOverTeam] = useStatePool(null);
  const [target, setTarget] = useStatePool(null);

  useEffectPool(() => {
    if (teams.length && !teams.find(t => t.id === target)) setTarget(teams[0].id);
  }, [teams, target]);

  const setTeamCount = (n) => {
    const cur = teams.length;
    if (n > cur) {
      const newTeams = [...teams];
      for (let i = cur; i < n; i++) {
        newTeams.push({
          id: "t" + Date.now() + "_" + i,
          letter: TEAM_LETTERS[i],
          name: "Mannschaft " + TEAM_LETTERS[i],
          color: COLOR_PALETTE[i % COLOR_PALETTE.length],
          playerIds: [],
        });
      }
      setTeams(newTeams);
    } else if (n < cur) {
      setTeams(teams.slice(0, n));
    }
  };

  const updateTeam = (id, patch) => {
    setTeams(teams.map(t => t.id === id ? { ...t, ...patch } : t));
  };

  const playerById = (id) => players.find(p => p.id === id);
  const unassigned = players.filter(p => !teams.some(t => t.playerIds.includes(p.id)));
  const targetTeam = teams.find(t => t.id === target);

  const onDrop = (teamId) => {
    if (draggingId) {
      onAssign(draggingId, teamId);
      setDraggingId(null);
      setDragOverTeam(null);
    }
  };

  // Auto-distribute. Erweitert: snake-draft by stars so total stars per team are
  // as equal as possible. Standard (no rating): plain round-robin.
  const balance = () => {
    if (teams.length === 0) return;
    const fresh = teams.map(t => ({ ...t, playerIds: [] }));
    if (!advanced) {
      players.forEach((p, i) => { fresh[i % fresh.length].playerIds.push(p.id); });
      setTeams(fresh);
      return;
    }
    const sorted = players.slice().sort((a, b) => (b.stars ?? 3) - (a.stars ?? 3));
    sorted.forEach((p, i) => {
      const round = Math.floor(i / fresh.length);
      const idxInRound = i % fresh.length;
      const teamIdx = round % 2 === 0 ? idxInRound : (fresh.length - 1 - idxInRound);
      fresh[teamIdx].playerIds.push(p.id);
    });
    setTeams(fresh);
  };

  const teamStats = (t) => {
    const ps = t.playerIds.map(id => players.find(p => p.id === id)).filter(Boolean);
    if (ps.length === 0) return { sum: 0, avg: 0, count: 0 };
    const sum = ps.reduce((s, p) => s + (p.stars ?? 3), 0);
    return { sum, avg: sum / ps.length, count: ps.length };
  };

  return (
    <div>
      <div className="page-header">
        <div>
          <h1 className="page-title">Mannschaften</h1>
          <p className="page-subtitle">Wähle eine Zielmannschaft und tippe Spieler an — oder ziehe sie per Drag &amp; Drop.</p>
        </div>
        <div className="row gap-2">
          <div className="stepper">
            <button onClick={() => setTeamCount(Math.max(2, teams.length - 1))}>−</button>
            <input value={teams.length} readOnly />
            <button onClick={() => setTeamCount(Math.min(8, teams.length + 1))}>+</button>
          </div>
          <button className="btn btn-secondary" onClick={balance}>
            <Icon.Sparkles /> Auto-Verteilen
          </button>
        </div>
      </div>

      {/* Target picker + tappable pool */}
      <div className="card card-pad mb-4">
        <div className="assign-bar">
          <span className="assign-bar-label">Zielmannschaft</span>
          <div className="assign-chips">
            {teams.map(t => (
              <button
                key={t.id}
                className={"assign-chip" + (target === t.id ? " active" : "")}
                onClick={() => setTarget(t.id)}
              >
                <span className="assign-chip-dot" style={{ background: t.color }}>{t.letter}</span>
                <span className="assign-chip-name">{t.name}</span>
                <span className="assign-chip-count">{t.playerIds.length}</span>
              </button>
            ))}
          </div>
        </div>

        <div className="section-h" style={{ margin: "16px 0 10px" }}>
          <h3>Pool ({unassigned.length} frei)</h3>
          <span className="section-meta">
            {targetTeam ? <>Spieler antippen → <b style={{ color: "var(--text)" }}>{targetTeam.name}</b></> : "Wähle oben eine Mannschaft"}
          </span>
        </div>
        {unassigned.length === 0 ? (
          <div className="muted text-sm" style={{ padding: 8 }}>Alle Spieler sind zugeteilt.</div>
        ) : (
          <div className="pool-chips">
            {unassigned.map(p => (
              <button
                key={p.id}
                className="pool-chip"
                draggable
                onDragStart={() => setDraggingId(p.id)}
                onDragEnd={() => { setDraggingId(null); setDragOverTeam(null); }}
                onClick={() => target && onAssign(p.id, target)}
                disabled={!target}
                title={targetTeam ? "Zu " + targetTeam.name + " hinzufügen" : "Erst Mannschaft wählen"}
              >
                <span className="team-dot" style={{ background: "var(--ink-300)" }} />
                <span>{p.name}</span>
                <span className="pool-chip-add">+</span>
              </button>
            ))}
          </div>
        )}
      </div>

      <div className="teams-grid">
        {teams.map((t, ti) => (
          <div
            key={t.id}
            className={"team-card" + (dragOverTeam === t.id ? " dragging-over" : "") + (target === t.id ? " is-target" : "")}
            onDragOver={(e) => { e.preventDefault(); setDragOverTeam(t.id); }}
            onDragLeave={() => setDragOverTeam(null)}
            onDrop={() => onDrop(t.id)}
          >
            <div className="team-card-head" style={{ background: t.color + "10" }}>
              <button className="team-letter team-letter-btn" style={{ background: t.color }} onClick={() => setTarget(t.id)} title="Als Zielmannschaft wählen">{t.letter}</button>
              <input
                className="team-name-input"
                value={t.name}
                onChange={(e) => updateTeam(t.id, { name: e.target.value })}
              />
              <div style={{ position: "relative" }}>
                <button
                  className="team-color-btn"
                  style={{ background: t.color }}
                  onClick={(e) => { e.stopPropagation(); setOpenColor(openColor === t.id ? null : t.id); }}
                />
                {openColor === t.id && (
                  <div style={{ position: "absolute", top: 36, right: 0 }}>
                    <ColorPopover
                      value={t.color}
                      onChange={(c) => updateTeam(t.id, { color: c })}
                      onClose={() => setOpenColor(null)}
                    />
                  </div>
                )}
              </div>
            </div>
            <div className="team-roster">
              {t.playerIds.length === 0 ? (
                <div className="team-empty">Spieler hierher ziehen</div>
              ) : (
                t.playerIds.map(pid => {
                  const p = playerById(pid);
                  if (!p) return null;
                  return (
                    <div
                      key={pid}
                      className={"team-player" + (target && target !== t.id ? " movable" : "")}
                      draggable
                      onDragStart={() => setDraggingId(pid)}
                      onDragEnd={() => { setDraggingId(null); setDragOverTeam(null); }}
                      onClick={() => { if (target && target !== t.id) onAssign(pid, target); }}
                      title={target && target !== t.id ? "Antippen → " + targetTeam.name : ""}
                    >
                      <span className="team-dot" style={{ background: t.color }} />
                      <span className="flex-1">{p.name}</span>
                      <button
                        className="btn-ghost"
                        style={{ border: "none", background: "transparent", padding: 4, color: "var(--text-soft)" }}
                        onClick={(e) => { e.stopPropagation(); onAssign(pid, null); }}
                        title="Aus Mannschaft entfernen"
                      >
                        <Icon.X />
                      </button>
                    </div>
                  );
                })
              )}
            </div>
            <div style={{ padding: "8px 14px", borderTop: "1px solid var(--border)", fontSize: 12, color: "var(--text-muted)", background: "var(--ink-50)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8 }}>
              <span>{teamStats(t).count} Spieler</span>
              {advanced && (
              <span style={{ display: "flex", alignItems: "center", gap: 4, color: "#B8860B", fontWeight: 600 }}>
                <svg width="13" height="13" viewBox="0 0 24 24" fill="#F1C453" stroke="#F1C453" strokeWidth="1" strokeLinejoin="round"><polygon points="12 2 15 8.5 22 9.3 17 14.1 18.2 21 12 17.8 5.8 21 7 14.1 2 9.3 9 8.5"/></svg>
                Ø {teamStats(t).avg.toFixed(1)} · Σ {teamStats(t).sum}
              </span>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.PlayerPool = PlayerPool;
window.Teams = Teams;