// Server detail: roster table + secondary panel (chat / kills / audit) + right drawer (selected player)

const ServerDetail = ({ server, search, selected, setSelected, openModal, audit, addNote, players, notes, onBack, onBroadcast, onPower, live = false }) => {
  const [bottomTab, setBottomTab] = React.useState("chat"); // chat | kills | audit
  const auth = useAuth();

  const filtered = React.useMemo(() => {
    const q = search.trim().toLowerCase();
    if (!q) return players;
    return players.filter(p =>
      p.name.toLowerCase().includes(q) ||
      (p.guid || "").toLowerCase().includes(q) ||
      (p.ip || "").includes(q)
    );
  }, [players, search]);

  return (
    <div className="detail">
      <div className="detail-head">
        <button className="btn sm" onClick={onBack}><Icon name="arrow-left"/> Back</button>
        <div>
          <div className="title">{server.name}</div>
          <div className="sub">
            <span className="mono">{DATA.REGIONS.find(r=>r.id===server.region)?.label || server.region}</span>
            <span style={{margin: "0 8px", opacity: 0.5}}>·</span>
                        {(DATA.MAPS.find(m=>m.id===server.map)?.label || server.map)} / {(DATA.MODES.find(m=>m.id===server.mode)?.label || server.mode)}
            <span style={{margin: "0 8px", opacity: 0.5}}>·</span>
            <span className="mono">{server.players.length}/{server.maxPlayers}</span>
            {live && server.fps > 0 && <>
              <span style={{margin: "0 8px", opacity: 0.5}}>·</span>
              <span className="mono">{server.fps} fps{server.memMb ? ` · ${(server.memMb/1024).toFixed(1)} GB` : ""}</span>
            </>}
            {!live && <>
              <span style={{margin: "0 8px", opacity: 0.5}}>·</span>
              <span className="mono">{server.fps} fps · {server.cpu}% cpu · {server.ramGB} GB</span>
              <span style={{margin: "0 8px", opacity: 0.5}}>·</span>
              <span className="mono">up {server.uptimeHrs}h</span>
            </>}
          </div>
          {server.status === "offline" && server.error && (
            <div className="server-err" style={{ marginTop: 6, maxWidth: 620 }}>
              <Icon name="alert" /> <span style={{ WebkitLineClamp: 3 }}>{server.error}</span>
            </div>
          )}
        </div>
        <div className="detail-actions">
          <GatedButton action="server.broadcast.one" className="btn" onClick={onBroadcast}><Icon name="megaphone"/> Broadcast</GatedButton>
          <GatedButton action="server.power" className="btn danger" onClick={onPower}><Icon name="power"/> Restart</GatedButton>
        </div>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 12, minHeight: 0 }}>
        {/* Roster */}
        <div className="panel" style={{ flex: "1 1 60%", minHeight: 280 }}>
          <div className="panel-head">
            <span className="h">Players</span>
            <span className="count">{filtered.length} of {players.length}</span>
            <div style={{ flex: 1 }} />
            <span className="count muted">click row to inspect</span>
          </div>
          <div className="panel-body">
            <table className="roster">
              <thead>
                <tr>
                  <th style={{width: 28}}></th>
                  <th>Player</th>
                  <th>Platform</th>
                  <th>GUID</th>
                  <th>IP</th>
                  {!live && <th>Ping</th>}
                  <th>Session</th>
                  {!live && <th style={{width: 60}}>K / D</th>}
                </tr>
              </thead>
              <tbody>
                {filtered.map(p => (
                  <tr key={p.id}
                      className={selected?.id === p.id ? "selected" : ""}
                      onClick={() => setSelected(p)}>
                    <td>{p.flagged && <span title="Flagged" style={{color:"var(--warn)"}}><Icon name="flag" size={12}/></span>}</td>
                    <td className="pname">
                      <span>{p.name}</span>
                      {p.isAdmin && <span className="badge" style={{background:"rgba(139,149,255,0.15)", color:"#c8cdff"}}>STAFF</span>}
                      {!live && <span className="mono muted" style={{fontSize:11}}>{p.faction}</span>}
                    </td>
                    <td><Platform p={p.platform}/></td>
                    <td className="id">{(() => { const g = auth.maskGUID(p.guid); return g.length > 22 ? g.slice(0,22) + "…" : g; })()}</td>
                    <td className="id">{p.ip ? auth.maskIP(p.ip) : "—"}</td>
                    {!live && <td className={`ping ${pingClass(p.ping || 0)}`}>{p.ping != null ? p.ping + "ms" : "—"}</td>}
                    <td className="mono muted" style={{fontSize:11.5}}>{DATA.timeAgoStr(p.sessionMin).replace(" ago","")}</td>
                    {!live && <td className="mono">{p.kills}/{p.deaths}</td>}
                  </tr>
                ))}
                {!filtered.length && (
                  <tr><td colSpan={live ? 6 : 8} className="empty">No players match “{search}”</td></tr>
                )}
              </tbody>
            </table>
          </div>
        </div>

        {/* Bottom tabs: Chat feed / Kill feed / Audit */}
        <div className="panel" style={{ flex: "0 0 38%", minHeight: 200 }}>
          <div className="panel-head">
            <span className="h">Activity</span>
            <div className="panel-tabs" style={{marginLeft: 6}}>
              <button className={"panel-tab " + (bottomTab==="chat" ? "active":"")} onClick={() => setBottomTab("chat")}>Live chat</button>
              <button className={"panel-tab " + (bottomTab==="kills" ? "active":"")} onClick={() => setBottomTab("kills")}>Kill feed</button>
              <button className={"panel-tab " + (bottomTab==="audit" ? "active":"")} onClick={() => setBottomTab("audit")}>Staff audit</button>
            </div>
            <div style={{flex:1}}/>
            <span className="count muted">
              {bottomTab==="chat" && (live ? "unavailable" : `${(DATA.CHAT[server.id]||[]).length} msgs`)}
              {bottomTab==="kills" && (live ? `${(server.kills||[]).length} kills` : `${(DATA.KILLS[server.id]||[]).length} events`)}
              {bottomTab==="audit" && `${audit.filter(a => a.server === server.id).length} actions`}
            </span>
          </div>
          <div className="panel-body">
            {bottomTab === "chat" && (live ? <FeedUnavailable what="Player chat" /> : <ChatList items={(DATA.CHAT[server.id]||[]).slice().reverse()} onPick={(id) => { const p = players.find(x => x.id===id); if (p) setSelected(p); }} />)}
            {bottomTab === "kills" && (live
              ? ((server.kills||[]).length
                  ? <LiveKillList items={(server.kills||[]).slice().reverse()} onPick={(guid) => { const p = players.find(x => x.guid===guid); if (p) setSelected(p); }} />
                  : <FeedUnavailable what="Kill feed" />)
              : <KillList items={(DATA.KILLS[server.id]||[]).slice().reverse()} onPick={(id) => { const p = players.find(x => x.id===id); if (p) setSelected(p); }} />)}
            {bottomTab === "audit" && <AuditList items={audit.filter(a => a.server === server.id).filter(a => auth.can("view.audit.all") || a.who === auth.user.handle)} />}
          </div>
        </div>
      </div>

      {/* Drawer */}
      <PlayerDrawer
        player={selected}
        server={server}
        live={live}
        notes={notes}
        onClose={() => setSelected(null)}
        openModal={openModal}
        addNote={addNote}
      />
    </div>
  );
};

const FeedUnavailable = ({ what }) => (
  <div className="feed-unavailable">
    <div className="fu-card">
      <div className="fu-title">{what} isn’t available yet</div>
      <div className="fu-sub">
        {what} isn’t broadcast over BattlEye RCON — it lives in the game server’s
        log files. Once log access is enabled on the server, this feed lights up
        automatically. Staff audit below is unaffected.
      </div>
      <div className="fu-pill">Pending · needs game-server log access</div>
    </div>
  </div>
);

const ChatList = ({ items, onPick }) => (
  <div>
    {items.map(m => (
      <div className="log-row" key={m.id}>
        <span className="ts">{DATA.fmtClockShort(m.ts)}</span>
        <span className="body">
          <button className="me" style={{ color: m.faction === "US" ? "var(--info)" : "var(--bad)" }} onClick={() => onPick(m.playerId)}>{m.name}</button>
          <span className="muted" style={{margin:"0 6px"}}>›</span>
          {m.text}
        </span>
      </div>
    ))}
  </div>
);

const KillList = ({ items, onPick }) => (
  <div>
    {items.map(k => (
      <div className="log-row kill" key={k.id}>
        <span className="ts">{DATA.fmtClockShort(k.ts)}</span>
        <span className="body">
          <button className="killer" onClick={() => onPick(k.killerId)}>{k.killerName}</button>
          <span className="muted" style={{margin:"0 6px"}}>→</span>
          <button className="victim" onClick={() => onPick(k.victimId)}>{k.victimName}</button>
          <span className="weap" style={{marginLeft: 8}}>{k.weapon} · {k.distance}m</span>
          {k.tk && <span className="badge" style={{marginLeft:8, background:"rgba(229,123,123,0.18)", color:"#f0c5c5"}}>TK</span>}
        </span>
      </div>
    ))}
  </div>
);

// Live kill feed (from the SFTP log tailer / ServerAdminTools).
const LiveKillList = ({ items, onPick }) => (
  <div>
    {items.map(k => (
      <div className="log-row kill" key={k.id}>
        <span className="ts">{DATA.fmtClockShort(k.ts)}</span>
        <span className="body">
          {k.suicide
            ? <><button className="victim" onClick={() => onPick(k.victimGuid)}>{k.victimName}</button><span className="muted" style={{margin:"0 6px"}}>died — self</span></>
            : <><button className="killer" onClick={() => onPick(k.killerGuid)}>{k.killerName}</button><span className="muted" style={{margin:"0 6px"}}>→</span><button className="victim" onClick={() => onPick(k.victimGuid)}>{k.victimName}</button></>}
          <span className="weap" style={{marginLeft: 8}}>{k.weapon}{k.hitzone ? ` · ${k.hitzone}` : ""}</span>
        </span>
      </div>
    ))}
    {items.length === 0 && <div className="empty">No kills recorded yet.</div>}
  </div>
);

const AuditList = ({ items }) => (
  <div>
    {items.length === 0 && <div className="empty">No staff actions yet on this server.</div>}
    {items.map(a => (
      <div className="log-row" key={a.id}>
        <span className="ts">{DATA.fmtClockShort(a.ts)}</span>
        <span className="body">
          <span className="me">{a.who}</span>
          <span className="muted" style={{margin:"0 6px"}}>{a.action}</span>
          {a.target && <span style={{ color: "var(--text)" }}>{a.target}</span>}
          {a.detail && <div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>{a.detail}</div>}
        </span>
      </div>
    ))}
  </div>
);

Object.assign(window, { ServerDetail, ChatList, KillList, LiveKillList, AuditList, FeedUnavailable });