// Global views accessible from the sidebar: full audit log, global live chat, ban list.

const GlobalAudit = ({ audit, servers }) => {
  const [filter, setFilter] = React.useState("all");
  const items = filter === "all" ? audit : audit.filter(a => a.action === filter);
  return (
    <div>
      <div className="dash-head">
        <div>
          <div className="dash-title">Staff audit log</div>
          <div className="dash-sub">Every action taken by staff across all 5 servers · last 72 hours</div>
        </div>
        <div className="seg" style={{ alignSelf: "center" }}>
          {["all","kicked","tempbanned","permbanned","warned","broadcast","restarted"].map(f => (
            <button key={f} className={filter===f?"active":""} onClick={() => setFilter(f)}>
              {f === "all" ? "All" : f}
            </button>
          ))}
        </div>
      </div>
      <div className="panel">
        <div className="panel-body">
          {items.map(a => {
            const s = servers.find(x => x.id === a.server);
            return (
              <div className="log-row" key={a.id} style={{ gridTemplateColumns: "90px 1fr" }}>
                <span className="ts">{DATA.fmtClockShort(a.ts)}<br/><span className="muted" style={{fontSize:10}}>{DATA.timeAgoStr(Math.floor((Date.now()-a.ts)/60000))}</span></span>
                <span className="body">
                  <span style={{ color: "var(--text)", fontWeight: 500 }}>{a.who}</span>
                  <span className="muted" style={{margin:"0 6px"}}>{a.action}</span>
                  {a.target && <span style={{ color: "var(--text)" }}>{a.target}</span>}
                  <span className="muted" style={{margin:"0 6px"}}>on</span>
                  <span className="mono" style={{ color: "var(--text-2)" }}>{s?.name}</span>
                  {a.detail && <div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>{a.detail}</div>}
                </span>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

const GlobalChat = ({ servers, live = false }) => {
  const [serverId, setServerId] = React.useState(servers[0].id);
  const server = servers.find(s => s.id === serverId);
  const items = (DATA.CHAT[serverId]||[]).slice().reverse();
  return (
    <div>
      <div className="dash-head">
        <div>
          <div className="dash-title">Live chat</div>
          <div className="dash-sub">Real-time in-game chat across servers · pick a feed to monitor</div>
        </div>
      </div>
      <div className="row" style={{ gap: 6, marginBottom: 12, flexWrap: "wrap" }}>
        {servers.map(s => (
          <button key={s.id}
            className={"btn sm " + (s.id === serverId ? "primary" : "")}
            onClick={() => setServerId(s.id)}>
            {s.name} <span className="muted mono" style={{marginLeft:4}}>{s.players.length}</span>
          </button>
        ))}
      </div>
      <div className="panel" style={{ height: "calc(100vh - 220px)" }}>
        <div className="panel-head">
          <span className="h">{server.name}</span>
          <span className="count">{live ? "unavailable" : `${items.length} messages`}</span>
        </div>
        <div className="panel-body">
          {live ? <FeedUnavailable what="Player chat" /> : items.map(m => (
            <div className="log-row" key={m.id}>
              <span className="ts">{DATA.fmtClockShort(m.ts)}</span>
              <span className="body">
                <span className="me" style={{ color: m.faction === "US" ? "var(--info)" : "var(--bad)" }}>{m.name}</span>
                <span className="muted" style={{margin:"0 6px"}}>›</span>
                {m.text}
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

const BansView = ({ audit, servers }) => {
  const toast = useToast();
  const [liveBans, setLiveBans] = React.useState(null);   // null until/unless the live API answers

  const load = React.useCallback(() => {
    API.bans().then(setLiveBans).catch(() => setLiveBans(null));
  }, []);
  React.useEffect(() => { load(); }, [load]);

  const revoke = async (id, label) => {
    if (!window.confirm(`Revoke the ban on ${label}? They'll be able to rejoin.`)) return;
    try { await API.revoke(id); toast("Ban revoked", "ok"); load(); }
    catch (e) { toast(e.message || "revoke failed", "bad"); }
  };

  // Live mode: real ban rows from the DB (revocable). Mock/offline: derive a
  // read-only view from the audit log so the prototype still shows something.
  const rows = liveBans
    ? liveBans.map(b => ({
        id: b.id, live: true,
        target: b.player_name || b.player_guid, guid: b.player_guid,
        action: b.kind === "perm" ? "permbanned" : "tempbanned",
        server: b.server_id, who: b.issued_by, ts: b.ts, detail: b.reason, scope: b.scope
      }))
    : audit.filter(a => a.action === "tempbanned" || a.action === "permbanned");

  return (
    <div>
      <div className="dash-head">
        <div>
          <div className="dash-title">Active bans</div>
          <div className="dash-sub">{rows.length} ban{rows.length === 1 ? "" : "s"} on record · Revoke lifts it in-game</div>
        </div>
      </div>
      <div className="panel">
        <div className="panel-body">
          <table className="roster">
            <thead>
              <tr>
                <th>Player</th>
                <th>Type</th>
                <th>Server</th>
                <th>Issued by</th>
                <th>When</th>
                <th>Reason</th>
                <th style={{width: 80}}></th>
              </tr>
            </thead>
            <tbody>
              {rows.map(b => {
                const s = servers.find(x => x.id === b.server);
                return (
                  <tr key={b.id}>
                    <td className="pname">{b.target || "—"}</td>
                    <td>
                      <span className={"pill " + (b.action==="permbanned"?"bad":"warn")}>
                        <span className="dot"/>{b.action === "permbanned" ? "permanent" : "temporary"}
                        {b.scope === "network" && " · network"}
                      </span>
                    </td>
                    <td className="mono muted" style={{fontSize:11.5}}>{b.scope === "network" ? "all servers" : (s?.name || b.server || "—")}</td>
                    <td>{b.who}</td>
                    <td className="mono muted" style={{fontSize:11.5}}>{DATA.timeAgoStr(Math.floor((Date.now()-b.ts)/60000))}</td>
                    <td className="muted">{b.detail}</td>
                    <td>
                      {b.live
                        ? <button className="btn sm" onClick={() => revoke(b.id, b.target)}>Revoke</button>
                        : <button className="btn sm" disabled title="Connect to the live bridge to revoke">Revoke</button>}
                    </td>
                  </tr>
                );
              })}
              {rows.length === 0 && (
                <tr><td colSpan={7} className="muted" style={{padding:"14px 4px", fontSize:12}}>No active bans.</td></tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { GlobalAudit, GlobalChat, BansView });