// Manage Teams — roster management with drag-to-reorder

const TeamsPage = ({ persona, roster, onRosterChange }) => {
  const D = window.NASEF_DATA;
  const [activeTeam, setActiveTeam] = React.useState("ham-ssbu");
  const team = D.teams.find(t => t.id === activeTeam);
  const [list, setList] = React.useState(roster || D.hamiltonRoster);
  const [dragId, setDragId] = React.useState(null);
  const [editingId, setEditingId] = React.useState(null);
  const [showAdd, setShowAdd] = React.useState(false);
  const canEdit = persona === "coach" || persona === "admin";

  React.useEffect(() => {
    if (onRosterChange) onRosterChange(list);
  }, [list]);

  const move = (fromIdx, toIdx) => {
    const next = [...list];
    const [moved] = next.splice(fromIdx, 1);
    next.splice(toIdx, 0, moved);
    setList(next);
  };

  const remove = (id) => setList(list.filter(p => p.id !== id));
  const updateField = (id, field, value) => setList(list.map(p => p.id === id ? { ...p, [field]: value } : p));

  return (
    <div>
      <PageHeader
        eyebrow="Hamilton High · 4 teams"
        title="Manage Teams"
        subtitle="Edit rosters, link game accounts, and set lineups for upcoming matches."
        actions={canEdit ? [<button key="new" className="btn"><IconPlus size={14} />New team</button>] : null}
      />

      {/* Team picker tabs */}
      <div style={{ display: "flex", gap: 8, marginBottom: 24, flexWrap: "wrap" }}>
        {D.teams.map(t => (
          <button key={t.id} onClick={() => setActiveTeam(t.id)}
            className="card"
            style={{
              padding: "12px 16px",
              cursor: "pointer",
              border: activeTeam === t.id ? "1px solid var(--nasef-orange)" : "1px solid var(--border)",
              background: activeTeam === t.id ? "rgba(242,104,34,0.08)" : "var(--bg-raised)",
              minWidth: 200,
              textAlign: "left",
            }}>
            <div className="row-tight" style={{ marginBottom: 4 }}>
              <GameTag game={t.game} />
              {t.primary && <span className="upper" style={{ fontSize: 9, color: "var(--nasef-orange-soft)" }}>Featured</span>}
            </div>
            <div style={{ fontSize: 14, fontWeight: 600, marginTop: 6, color: "var(--text)" }}>{t.gameName}</div>
            <div className="muted" style={{ fontSize: 11, marginTop: 2 }}>{t.division} · {t.record} · {t.roster.length || "—"} players</div>
          </button>
        ))}
      </div>

      {team.roster.length === 0 ? (
        <Empty icon={IconUsers} title="No roster yet for this team"
          body="The demo only populates Hamilton's SSBU Varsity roster. In a real deployment, click 'Add player' to invite students by school email."
          action={<button className="btn" onClick={() => setActiveTeam("ham-ssbu")}>Switch to SSBU Varsity</button>}
        />
      ) : (
        <div style={{ display: "grid", gridTemplateColumns: "1fr 320px", gap: 20 }}>
          <div className="card" style={{ padding: 0 }}>
            <div className="card-header">
              <div>
                <h3>Active roster</h3>
              </div>
              <div className="row" style={{ gap: 8 }}>
                <span className="muted" style={{ fontSize: 12 }}>{list.length} players · drag to reorder lineup</span>
                {canEdit && <button className="btn sm" onClick={() => setShowAdd(true)}><IconPlus size={12} />Add</button>}
              </div>
            </div>
            <div style={{ padding: 8 }}>
              {list.map((p, idx) => (
                <div key={p.id}
                  draggable={canEdit}
                  onDragStart={() => setDragId(p.id)}
                  onDragOver={e => { e.preventDefault(); }}
                  onDrop={() => {
                    if (dragId && dragId !== p.id) {
                      const fromIdx = list.findIndex(x => x.id === dragId);
                      move(fromIdx, idx);
                    }
                    setDragId(null);
                  }}
                  style={{
                    display: "grid",
                    gridTemplateColumns: "auto auto 1fr auto auto auto auto",
                    gap: 14, alignItems: "center",
                    padding: "12px 14px",
                    borderRadius: "var(--r-md)",
                    cursor: canEdit ? "grab" : "default",
                    background: dragId === p.id ? "var(--bg-elevated)" : "transparent",
                    border: dragId === p.id ? "1px dashed var(--nasef-orange)" : "1px solid transparent",
                    transition: "background 0.1s",
                  }}
                  onMouseEnter={e => e.currentTarget.style.background = "var(--bg-elevated)"}
                  onMouseLeave={e => e.currentTarget.style.background = dragId === p.id ? "var(--bg-elevated)" : "transparent"}
                >
                  {canEdit ? <IconDrag size={16} style={{ color: "var(--text-muted)" }} /> : <span style={{ width: 16 }} />}
                  <div className="mono" style={{ fontWeight: 600, color: "var(--text-muted)", fontSize: 13, width: 22 }}>{idx + 1}</div>
                  <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                    <Avatar src={p.avatar} name={p.gamer} size={40} ring={p.role === "Captain" ? "var(--nasef-orange)" : "rgba(255,255,255,0.08)"} />
                    {editingId === p.id ? (
                      <input className="input" autoFocus value={p.gamer}
                        onChange={e => updateField(p.id, "gamer", e.target.value)}
                        onBlur={() => setEditingId(null)}
                        onKeyDown={e => e.key === "Enter" && setEditingId(null)}
                        style={{ fontSize: 13, padding: "4px 8px", height: 28 }}
                      />
                    ) : (
                      <div style={{ display: "flex", flexDirection: "column", gap: 2, cursor: canEdit ? "pointer" : "default" }}
                        onDoubleClick={() => canEdit && setEditingId(p.id)}>
                        <div style={{ fontWeight: 600, display: "flex", gap: 8, alignItems: "center" }}>
                          {p.gamer}
                          {p.role === "Captain" && <span className="badge orange" style={{ fontSize: 10 }}><IconStar size={9} />Captain</span>}
                          {p.role === "Sub" && <span className="badge" style={{ fontSize: 10 }}>Sub</span>}
                        </div>
                        <div className="muted" style={{ fontSize: 11 }}>{p.real} · Grade {p.grade}</div>
                      </div>
                    )}
                  </div>
                  <div style={{ minWidth: 140 }}>
                    <div className="upper muted" style={{ fontSize: 9, marginBottom: 2 }}>Main / Sec.</div>
                    <div style={{ fontSize: 12, fontWeight: 500 }}>{p.main}</div>
                    <div style={{ fontSize: 11, color: "var(--text-muted)" }}>{p.secondary}</div>
                  </div>
                  <div className="mono" style={{ fontSize: 12, color: "var(--text-secondary)", textAlign: "right", minWidth: 50 }}>{p.record}</div>
                  <div>
                    {p.linked ? (
                      <span className="badge complete" style={{ fontSize: 10 }}>
                        <IconLink size={9} />{p.linkedTag}
                      </span>
                    ) : (
                      <span className="badge warning" style={{ fontSize: 10 }}>Unlinked</span>
                    )}
                  </div>
                  <div className="row-tight">
                    {canEdit && <button className="btn ghost icon sm" onClick={() => setEditingId(p.id)}><IconEdit size={12} /></button>}
                    {canEdit && <button className="btn ghost icon sm" onClick={() => remove(p.id)}><IconTrash size={12} /></button>}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Side panel — game integrations + team info */}
          <div className="col" style={{ gap: 16 }}>
            <div className="card">
              <div className="card-header"><h3>Team info</h3></div>
              <div style={{ padding: 16, display: "flex", flexDirection: "column", gap: 12, fontSize: 13 }}>
                <Field label="Team name" value="Hamilton Yankees Varsity" />
                <Field label="Division" value="Pacific Coast" />
                <Field label="Season record" value="4-0" success />
                <Field label="Current rank" value="#2" />
                <Field label="Coach" value="Edwin Guama" />
              </div>
            </div>
            <div className="card">
              <div className="card-header"><h3>Game integration</h3></div>
              <div style={{ padding: 16, display: "flex", flexDirection: "column", gap: 12 }}>
                <Toast kind="info" body="SSBU is a manual-reporting title. Coaches exchange Friend Codes in the match lobby. Scores are coach-reported and confirmed by both sides." />
                <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                    <div>
                      <div style={{ fontSize: 13, fontWeight: 600 }}>Nintendo Switch</div>
                      <div className="muted" style={{ fontSize: 11 }}>Manual friend codes</div>
                    </div>
                    <span className="badge complete">Connected</span>
                  </div>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                    <div>
                      <div style={{ fontSize: 13, fontWeight: 600 }}>Discord (coach)</div>
                      <div className="muted" style={{ fontSize: 11 }}>guama_coach</div>
                    </div>
                    <span className="badge complete">Linked</span>
                  </div>
                </div>
              </div>
            </div>
            <div className="card">
              <div className="card-header"><h3>Compliance</h3></div>
              <div style={{ padding: 16, display: "flex", flexDirection: "column", gap: 8, fontSize: 12 }}>
                <div className="row-tight"><IconCheck size={13} style={{ color: "var(--success)" }} />All players 14+ (COPPA-exempt)</div>
                <div className="row-tight"><IconCheck size={13} style={{ color: "var(--success)" }} />Parental consent on file (6/6)</div>
                <div className="row-tight"><IconCheck size={13} style={{ color: "var(--success)" }} />School waivers verified</div>
              </div>
            </div>
          </div>
        </div>
      )}

      {showAdd && <AddPlayerModal onClose={() => setShowAdd(false)} onAdd={(p) => { setList([...list, p]); setShowAdd(false); }} />}
    </div>
  );
};

const Field = ({ label, value, success }) => (
  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
    <span className="muted" style={{ fontSize: 12 }}>{label}</span>
    <span style={{ fontWeight: 600, color: success ? "var(--success)" : "var(--text)" }}>{value}</span>
  </div>
);

const AddPlayerModal = ({ onClose, onAdd }) => {
  const [form, setForm] = React.useState({ gamer: "", real: "", grade: 11, main: "", secondary: "", role: "Starter" });
  return (
    <div style={{ position: "fixed", inset: 0, background: "var(--bg-overlay)", backdropFilter: "blur(4px)", zIndex: 100, display: "flex", alignItems: "center", justifyContent: "center" }} onClick={onClose}>
      <div className="card" style={{ width: 460, padding: 0 }} onClick={e => e.stopPropagation()}>
        <div style={{ padding: "18px 22px", borderBottom: "1px solid var(--border-soft)", display: "flex", justifyContent: "space-between" }}>
          <h2 style={{ fontSize: 18 }}>Add player</h2>
          <button className="btn ghost icon" onClick={onClose}><IconX size={14} /></button>
        </div>
        <div style={{ padding: 22, display: "flex", flexDirection: "column", gap: 12 }}>
          <div><label className="label">Gamertag</label><input className="input" placeholder="e.g. Slate" value={form.gamer} onChange={e => setForm({ ...form, gamer: e.target.value })} /></div>
          <div><label className="label">Real name</label><input className="input" placeholder="Jane Doe" value={form.real} onChange={e => setForm({ ...form, real: e.target.value })} /></div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
            <div><label className="label">Main</label><input className="input" placeholder="e.g. Joker" value={form.main} onChange={e => setForm({ ...form, main: e.target.value })} /></div>
            <div><label className="label">Secondary</label><input className="input" placeholder="e.g. Wolf" value={form.secondary} onChange={e => setForm({ ...form, secondary: e.target.value })} /></div>
          </div>
          <div className="row" style={{ justifyContent: "flex-end", gap: 8, marginTop: 6 }}>
            <button className="btn ghost" onClick={onClose}>Cancel</button>
            <button className="btn primary" onClick={() => onAdd({ id: "p" + Date.now(), ...form, record: "0-0", linked: false, linkedTag: null })}>Add player</button>
          </div>
        </div>
      </div>
    </div>
  );
};

window.TeamsPage = TeamsPage;