// Dashboard: server cards grid only

const Dashboard = ({ servers, onOpen, audit = [], live = false, onRefresh, lastSync }) => {
  const syncedAgo = lastSync ? Math.max(0, Math.round((Date.now() - lastSync) / 1000)) : null;

  return (
    <div>
      <div className="dash-head">
        <div>
          <div className="dash-title">Servers</div>
          <div className="dash-sub">
            {live ? "Live" : "Demo"} telemetry from {servers.length} dedicated {servers.length === 1 ? "instance" : "instances"}
            {syncedAgo != null && ` · synced ${syncedAgo}s ago`}
          </div>
        </div>
        <button className="btn" onClick={onRefresh}>
          <Icon name="refresh" /> Refresh
        </button>
      </div>

      <div className="server-grid">
        {servers.map(s => <ServerCard key={s.id} server={s} live={live} onOpen={() => onOpen(s.id)} />)}
      </div>
    </div>
  );
};

const ServerCard = ({ server, onOpen, live = false }) => {
  const pct = server.maxPlayers ? (server.players.length / server.maxPlayers) : 0;
  const capCls = pct > 0.9 ? "warn" : pct > 0.98 ? "bad" : "";
  const region = DATA.REGIONS.find(r => r.id === server.region) || { label: server.region };
  const map = DATA.MAPS.find(m => m.id === server.map) || { label: server.map };
  const mode = DATA.MODES.find(m => m.id === server.mode) || { label: server.mode };
  const statusPill =
    server.status === "online" ? <span className="pill ok"><span className="dot"/>online</span> :
    server.status === "warning" ? <span className="pill warn"><span className="dot"/>near full</span> :
    <span className="pill off"><span className="dot"/>offline</span>;

  // Live servers have no historical spark / fps / cpu telemetry over RCON.
  const hasSpark = Array.isArray(server.spark) && server.spark.length > 0;
  const hasTelemetry = !live && server.status !== "offline";

  return (
    <button className="server-card" onClick={onOpen}>
      <div className="row">
        <div className="flex1">
          <div className="name">{server.name}</div>
          <div className="region">{region?.label}</div>
        </div>
        {statusPill}
      </div>

      <div>
        <div className="row" style={{ justifyContent: "space-between", marginBottom: 4 }}>
          <span className="meta mono">{server.players.length} / {server.maxPlayers}</span>
          <span className="meta mono">{Math.round(pct*100)}%</span>
        </div>
        <div className={"capbar " + capCls}><i style={{ width: `${Math.max(2, pct*100)}%` }}/></div>
      </div>

      {hasSpark ? <Sparkline data={server.spark} /> : <div style={{ height: 28 }} />}

      {server.status === "offline" && server.error ? (
        <div className="server-err" title={server.error}>
          <Icon name="alert" /> <span>{server.error}</span>
        </div>
      ) : (
        <div className="row" style={{ justifyContent: "space-between" }}>
          <span className="meta"><span className="mono">{map?.label}</span> · {mode?.label}</span>
          <span className="meta mono">
            {hasTelemetry ? `${server.fps} fps · ${server.cpu}% cpu` : "—"}
          </span>
        </div>
      )}
    </button>
  );
};

Object.assign(window, { Dashboard });