// Survivors online + Leaderboard panels
const SurvivorsPanel = ({ data }) => (
  <Panel
    tag="//"
    title="Survivors on the Air"
    right={`${data.online.length} live`}
  >
    <div>
      {data.online.map((p, i) => (
        <div className="survivor-row" key={p.name}>
          <div className="idx">{pad2(i + 1)}</div>
          <div className="who">
            <span className="nm">{p.name}</span>
            <span className="lc">▸ {p.loc}</span>
          </div>
          <div className="job">{p.job}</div>
          <div className={`status-tag status-${p.status}`}>{p.status}</div>
        </div>
      ))}
    </div>
    <div style={{
      marginTop: 14, paddingTop: 12,
      borderTop: "1px dashed var(--line-soft)",
      fontSize: 11, color: "var(--amber-mute)",
      letterSpacing: "0.14em", textTransform: "uppercase",
      display: "flex", justifyContent: "space-between"
    }}>
      <span>▸ Hover any callsign for last-seen radio chatter.</span>
      <span>UPDATED · 12s ago</span>
    </div>
  </Panel>
);

const LB_TABS = [
  { id: "zombies", label: "Zeds Killed",  unit: ""  },
  { id: "hours",   label: "Hours Played", unit: "h" },
  { id: "skills",  label: "Skill Total",  unit: ""  },
];

const LeaderboardPanel = ({ data }) => {
  const [active, setActive] = useState("zombies");
  const tab  = LB_TABS.find((t) => t.id === active);
  const rows = (data.leaderboard && data.leaderboard[active]) || [];
  const max  = rows.length ? Math.max(...rows.map((r) => r.val)) : 0;

  return (
    <Panel tag="//" title="Leaderboard" right="ALL-TIME · PERSISTS ACROSS LOGINS">
      <div className="leader-tabs" style={{ padding: "0 0 12px 0" }}>
        {LB_TABS.map((t) => (
          <button
            key={t.id}
            className={`leader-tab ${active === t.id ? "active" : ""}`}
            onClick={() => setActive(t.id)}
          >
            {t.label}
          </button>
        ))}
      </div>
      {rows.length === 0 ? (
        <div style={{
          padding: "20px 4px",
          fontFamily: "var(--mono)",
          fontSize: 12,
          color: "var(--amber-mute)",
          letterSpacing: "0.16em",
          textTransform: "uppercase",
        }}>
          ▸ No survivors on record yet. Stats accrue as players log in.
        </div>
      ) : (
        <div>
          {rows.map((r, i) => {
            const pct = max > 0 ? (r.val / max) * 100 : 0;
            const valLabel = active === "hours"
              ? `${fmtNum(r.val, 1)}${tab.unit}`
              : fmtNum(r.val);
            return (
              <div className={`leader-row ${i === 0 ? "top1" : ""}`} key={r.name}>
                <div className="rk">#{i + 1}</div>
                <div className="nm">{r.name}</div>
                <div className="vl">{valLabel}</div>
                <div className="bar" style={{ width: `${pct}%` }}></div>
              </div>
            );
          })}
        </div>
      )}
    </Panel>
  );
};

Object.assign(window, { SurvivorsPanel, LeaderboardPanel });