/* BasedMTA — Panels batch 3: Dump, Spoof, Bots, Exploits */

const { useState: useState3, useEffect: useEffect3 } = React;

// ====================================================================
// DUMP PANEL
// ====================================================================
const DUMP_GROUPS = [
  { name: "NRGmod", count: 1, size: "0.1 KB" },
  { name: "admin", count: 27, size: "243.1 KB", children: [
    { f: "__loadstring/chunk_a11ac6095bb6e1b2.lua", s: "388 B" },
    { f: "__loadstring/chunk_924b9d5abbf5438f.lua", s: "426 B" },
    { f: "__loadstring/chunk_ee6e341ffe08b879.lua", s: "5.0 KB" },
    { f: "__loadstring/chunk_306693bb7b3407a7.lua", s: "4.7 KB" },
    { f: "__loadstring/chunk_d841c6b5b4d92503.lua", s: "747 B" },
    { f: "__loadstring/chunk_d9cc86a36e4e30ac.lua", s: "75.9 KB" },
    { f: "__loadstring/chunk_c1054501915ddb36.lua", s: "2.8 KB" },
    { f: "__loadstring/chunk_b09e761f00f6e0ba.lua", s: "5.5 KB" },
    { f: "__loadstring/chunk_359b5802a0f5db14.lua", s: "7.0 KB" },
    { f: "__loadstring/chunk_47d2ca04fe768edf.lua", s: "5.6 KB" },
    { f: "__loadstring/chunk_3558eeae0b1d2363.lua", s: "4.4 KB" },
    { f: "__loadstring/chunk_5c7367c0c6e9eb31.lua", s: "3.2 KB" },
  ]},
  { name: "area_zombies", count: 1, size: "10.5 KB" },
  { name: "at400", count: 1, size: "0.1 KB" },
  { name: "autobusmod", count: 1, size: "0.2 KB" },
  { name: "backtoschool", count: 1, size: "0.9 KB" },
  { name: "bansh", count: 1, size: "0.3 KB" },
  { name: "bentley", count: 1, size: "0.2 KB" },
  { name: "blimp", count: 1, size: "0.2 KB" },
  { name: "bloodharvest", count: 1, size: "5.2 KB" },
  { name: "bloodpool", count: 1, size: "0.3 KB" },
  { name: "bouncingbetty", count: 1, size: "1.0 KB" },
  { name: "bounty_hunt", count: 1, size: "10.3 KB" },
  { name: "mcafee", count: 4, size: "12.1 KB" },
];

function DumpPanel() {
  const [path, setPath] = useState3("C:\\BasedMTA_Dump");
  const [auto, setAuto] = useState3(false);
  const [search, setSearch] = useState3("");
  const [expanded, setExpanded] = useState3({ admin: true });
  const [exported, setExported] = useState3({});
  const list = DUMP_GROUPS.filter((g) => !search || g.name.includes(search.toLowerCase()));

  const exportAll = () => {
    const e = {};
    DUMP_GROUPS.forEach((g) => (e[g.name] = true));
    setExported(e);
  };

  return (
    <div className="bmta-panel">
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 8 }}>
        <span style={{ color: "var(--bmta-accent)" }}>378 scripts</span>
        <span><span className="bmta-dot info" />208 resources</span>
        <span style={{ color: "var(--bmta-text-dim)" }}>| 1.9 MB</span>
      </div>

      <div style={{ display: "flex", gap: 6, alignItems: "center", marginBottom: 8 }}>
        <BmtaButton variant="ghost">...</BmtaButton>
        <div style={{ flex: 1 }}>
          <BmtaInput value={path} onChange={setPath} />
        </div>
        <BmtaButton>Open</BmtaButton>
        <BmtaButton variant="green" onClick={exportAll}>Dump All</BmtaButton>
        <BmtaButton variant="ghost" disabled={!search}>Dump Filtered</BmtaButton>
        <BmtaButton variant="red" onClick={() => setExported({})}>Clear</BmtaButton>
      </div>

      <div style={{ marginBottom: 8 }}>
        <BmtaCheck checked={auto} onChange={setAuto} label="Auto-dump all scripts on join" />
      </div>

      <div style={{ marginBottom: 8 }}>
        <BmtaInput placeholder="Search resources or scripts…" value={search} onChange={setSearch} />
      </div>

      <div style={{ background: "var(--bmta-bg-2)", border: "1px solid var(--bmta-border)", flex: 1, overflow: "auto" }}>
        {list.map((g) => {
          const open = !!expanded[g.name];
          const isExported = !!exported[g.name];
          return (
            <div key={g.name}>
              <div style={{ display: "grid", gridTemplateColumns: "20px 16px 1fr 80px", padding: "4px 10px", alignItems: "center", borderBottom: "1px solid rgba(255,255,255,0.02)" }}>
                <span
                  onClick={() => g.children && setExpanded((e) => ({ ...e, [g.name]: !open }))}
                  style={{ cursor: g.children ? "pointer" : "default", color: "var(--bmta-text-faint)" }}
                >
                  {g.children ? (open ? "v" : ">") : ""}
                </span>
                <span className="bmta-dot info" style={{ margin: 0 }} />
                <span style={{ paddingLeft: 4 }}>
                  <span style={{ color: "var(--bmta-text-strong)" }}>{g.name}</span>
                  <span style={{ color: "var(--bmta-text-dim)", marginLeft: 8 }}>{g.count} script{g.count !== 1 ? "s" : ""} ({g.size})</span>
                </span>
                <BmtaButton
                  variant={isExported ? "green" : "ghost"}
                  onClick={() => setExported((e) => ({ ...e, [g.name]: !isExported }))}
                >
                  {isExported ? "Done" : "Export"}
                </BmtaButton>
              </div>
              {open && g.children && g.children.map((c, i) => (
                <div key={i} style={{ display: "grid", gridTemplateColumns: "20px 16px 1fr 80px", padding: "2px 10px", color: "var(--bmta-text-dim)", fontSize: 12 }}>
                  <span></span>
                  <span className="bmta-dot info" style={{ margin: 0, opacity: 0.5 }} />
                  <span style={{ paddingLeft: 4 }}>{c.f}</span>
                  <span style={{ color: "var(--bmta-text-faint)", textAlign: "right" }}>{c.s}</span>
                </div>
              ))}
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ====================================================================
// SPOOF PANEL
// ====================================================================
function SpoofPanel() {
  const [serial, setSerial] = useState3("4031AC47DEADAC7831UBEEF7831DBCFC");
  const [rotated, setRotated] = useState3(true);
  const [net, setNet] = useState3("");

  const rotate = () => {
    const hex = "0123456789ABCDEF";
    let s = "";
    for (let i = 0; i < 32; i++) s += hex[Math.floor(Math.random() * 16)];
    setSerial(s);
    setRotated(true);
  };

  return (
    <div className="bmta-panel">
      <div className="bmta-banner">IDENTITY</div>
      <div style={{ marginBottom: 8 }}>
        <span style={{ color: "var(--bmta-ok)" }}>●</span>
        <span style={{ marginLeft: 6 }}>Active</span>
        <span style={{ color: "var(--bmta-text-dim)" }}> — license online</span>
      </div>
      <div style={{ color: "var(--bmta-text-dim)", fontSize: 12, marginBottom: 4 }}>JOIN SERIAL</div>
      <div style={{ background: "var(--bmta-bg-3)", border: "1px solid var(--bmta-border)", padding: "6px 8px", textAlign: "center", letterSpacing: 1, marginBottom: 12 }}>
        {serial}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 16 }}>
        <div style={{ background: "var(--bmta-bg-2)", border: "1px solid var(--bmta-border)", padding: 10 }}>
          <div style={{ color: "var(--bmta-text-dim)", fontSize: 12, marginBottom: 6, letterSpacing: 1 }}>HOST</div>
          <KV k="CPU" v="Intel(R) Core(TM) i3-8100 CPU @ 3.60GHz" />
          <KV k="GPU" v="NVIDIA GeForce RTX 6080" />
          <KV k="Memory" v="8.0 GB — 4.0 GB VRAM" />
          <KV k="Hostname" v="DESKTOP-2FMH8QC" />
        </div>
        <div style={{ background: "var(--bmta-bg-2)", border: "1px solid var(--bmta-border)", padding: 10 }}>
          <div style={{ color: "var(--bmta-text-dim)", fontSize: 12, marginBottom: 6, letterSpacing: 1 }}>STORAGE</div>
          <KV k="Model" v="ST1400VE001-3L24A0" />
          <KV k="Serial" v="P6ZF5RQSSVJZ" />
          <KV k="Build" v="MTA 24103 (release)" />
          <KV k="Nick" v={<span style={{ color: "var(--bmta-text-faint)" }}>(none)</span>} />
        </div>
      </div>

      <div className="bmta-banner">KEY ROTATION</div>
      <BmtaButton wide onClick={rotate}>Rotate serial</BmtaButton>
      {rotated && (
        <div style={{ marginTop: 8, color: "var(--bmta-ok)" }}>
          ● Rotation accepted <span style={{ color: "var(--bmta-text-dim)" }}>— new identity is live</span>
        </div>
      )}

      <div className="bmta-banner" style={{ marginTop: 18 }}>NETWORK</div>
      <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
        <div style={{ flex: 1 }}>
          <BmtaInput placeholder="host:port or user:pass@host:port" value={net} onChange={setNet} />
        </div>
        <BmtaButton>Apply</BmtaButton>
        <span style={{ color: "var(--bmta-text-dim)" }}>{net ? "proxy" : "direct"}</span>
      </div>
    </div>
  );
}
function KV({ k, v }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "70px 1fr", padding: "2px 0", fontSize: 12 }}>
      <span style={{ color: "var(--bmta-text-dim)" }}>{k}</span>
      <span style={{ color: "var(--bmta-text-strong)" }}>{v}</span>
    </div>
  );
}

// ====================================================================
// BOTS PANEL — has two states: idle and live
// ====================================================================
const BOT_IDENTITIES = [
  "Dutchman.1 AFC78313..", "Nexida.cc DE4FFDE7..", "fastfetch 17AF99E7..",
  "MadCuzBad10 737E6FD6..", "bob 1342F47A..", "iKea7642 84C1CDE2..",
  "Kowalski 9D33F1C3..", "VulkOnTop742 8F195A55..", "PeguinInvador 9D28CF1E..",
  "Coolman2002 4845FFAB..",
];

function BotsPanel() {
  const [phase, setPhase] = useState3("idle"); // idle | live
  const [count, setCount] = useState3(10);
  const [delay, setDelay] = useState3(1.5);
  const [chatTo, setChatTo] = useState3("All Bots");
  const [chatText, setChatText] = useState3("");
  const [weapon, setWeapon] = useState3("Grenade");
  const [atkPerSec, setAtkPerSec] = useState3(5.0);
  const [excludeSelf, setExcludeSelf] = useState3(true);

  const items = [
    { id: "Dutchman.1",        st: "Alive", p: 2 },
    { id: "Nexida.cc",       st: "Alive", p: 1 },
    { id: "fastfetch",  st: "Alive", p: 1 },
    { id: "MadCuzBad10",      st: "Alive", p: 1 },
    { id: "bob",          st: "Alive", p: 1 },
    { id: "iKea7642",          st: "Alive", p: 1 },
    { id: "Kowalski",          st: "Alive", p: 0 },
    { id: "VulkOnTop742",    st: "Alive", p: 2 },
    { id: "PeguinInvador",   st: "Alive", p: 2 },
    { id: "Coolman2002",  st: "Alive", p: 2 },
  ];

  if (phase === "idle") {
    return (
      <div style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: 14, height: 470 }}>
        <div style={{ borderRight: "1px solid var(--bmta-border)", padding: "8px 12px 8px 0" }}>
          <div style={{ color: "var(--bmta-text-faint)", letterSpacing: 1, fontSize: 12 }}>IDLE</div>
          <BmtaEmpty>No bots active</BmtaEmpty>
        </div>
        <div>
          <div style={{ color: "var(--bmta-ok)", marginBottom: 10 }}>● Prepared 10 identities from server pool.</div>

          <BmtaSubheader># Identities</BmtaSubheader>
          <div style={{ color: "var(--bmta-text-dim)", marginBottom: 6 }}>
            <span style={{ color: "var(--bmta-accent)" }}>{count}</span> identities loaded
          </div>
          <div style={{ display: "flex", gap: 8, alignItems: "center", marginBottom: 8 }}>
            <div style={{ width: 60 }}>
              <BmtaInput value={String(count)} onChange={(v) => setCount(Math.min(20, Math.max(0, parseInt(v||"0",10))))} monospaceCenter />
            </div>
            <span style={{ color: "var(--bmta-text-dim)", whiteSpace: "nowrap" }}>/ 20 (20 free)</span>
          </div>
          <BmtaButton wide>Load</BmtaButton>

          <BmtaSubheader>Proxies <span style={{ color: "var(--bmta-text-faint)" }}>(none)</span></BmtaSubheader>
          <div style={{ display: "flex", gap: 6, alignItems: "stretch" }}>
            <textarea className="bmta-textarea" rows={3} placeholder="host:port one per line" style={{ flex: 1 }} />
            <BmtaButton>Import</BmtaButton>
          </div>

          <BmtaSubheader>Connection</BmtaSubheader>
          <BmtaSlider value={delay} min={0.1} max={10} step={0.1} onChange={setDelay} format={(v) => "Delay: " + v.toFixed(1) + "s"} />
          <div style={{ color: "var(--bmta-warn)", marginTop: 6 }}>! {count} bots/IP, need {(count * 0.75).toFixed(1)}s (4/30s limit)</div>

          <BmtaSubheader>Loaded</BmtaSubheader>
          <div style={{ background: "var(--bmta-bg-2)", border: "1px solid var(--bmta-border)", padding: 6, fontSize: 12, height: 110, overflow: "auto" }}>
            {BOT_IDENTITIES.slice(0, count).map((id, i) => (
              <div key={i}><span style={{ color: "var(--bmta-text-faint)" }}>{String(i+1).padStart(2,"0")} </span>{id}</div>
            ))}
          </div>

          <div style={{ marginTop: 10 }}>
            <BmtaButton variant="green" wide onClick={() => setPhase("live")}>Start Bots</BmtaButton>
          </div>
        </div>
      </div>
    );
  }

  // LIVE
  return (
    <div style={{ display: "grid", gridTemplateColumns: "300px 1fr", gap: 14, height: 470 }}>
      <div>
        <div style={{ background: "rgba(52,196,123,0.15)", color: "var(--bmta-ok)", padding: "3px 10px", marginBottom: 6, display: "flex", justifyContent: "space-between" }}>
          <span>● LIVE</span><span>10 0 0</span>
        </div>
        <div className="bmta-list-head" style={{ gridTemplateColumns: "20px 1fr 60px 50px" }}>
          <span /><span>Bot</span><span>Status</span><span style={{ textAlign: "right" }}>Ping</span>
        </div>
        <div style={{ height: 360, overflow: "auto" }}>
          {items.map((b, i) => (
            <div key={b.id} className="bmta-list-row" style={{ gridTemplateColumns: "20px 1fr 60px 50px" }}>
              <span className="bmta-list-index">{String(i+1).padStart(2,"0")}</span>
              <span>{b.id}</span>
              <span style={{ color: "var(--bmta-ok)" }}>●Alive</span>
              <span style={{ textAlign: "right", color: "var(--bmta-text-dim)" }}>{b.p}ms</span>
            </div>
          ))}
        </div>
      </div>

      <div>
        <div style={{ color: "var(--bmta-ok)", marginBottom: 6 }}>● 10 bots -&gt; 192.168.77.179:22003</div>
        <BmtaButton variant="red" wide onClick={() => setPhase("idle")}>Stop All Bots</BmtaButton>

        <BmtaSubheader>&gt; Chat</BmtaSubheader>
        <div style={{ marginBottom: 6 }}>
          <BmtaSelect value={chatTo} options={["All Bots","Andres.8","helix.lol","mad_vulture457","Connor"]} onChange={setChatTo} width={"100%"} />
        </div>
        <div style={{ display: "flex", gap: 6, alignItems: "stretch" }}>
          <div style={{ flex: 1 }}><BmtaInput value={chatText} onChange={setChatText} placeholder="BasedMTA on top" /></div>
          <BmtaButton onClick={() => setChatText("")}>Send</BmtaButton>
        </div>

        <BmtaSubheader>+ Explode</BmtaSubheader>
        <div style={{ display: "flex", gap: 6 }}>
          <div style={{ flex: 1 }}><BmtaSelect value={weapon} options={["Grenade","Molotov","Satchel","Tear Gas","RPG"]} onChange={setWeapon} width={"100%"} /></div>
          <BmtaButton>Attack</BmtaButton>
        </div>
        <div style={{ marginTop: 6 }}>
          <BmtaSlider value={atkPerSec} min={0.1} max={20} step={0.1} onChange={setAtkPerSec} format={(v) => v.toFixed(1) + " atk/s"} />
        </div>
        <div style={{ marginTop: 6 }}>
          <BmtaCheck checked={excludeSelf} onChange={setExcludeSelf} label="Exclude self" />
        </div>

        <BmtaSubheader>! Swarm</BmtaSubheader>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
          <BmtaButton>Redacted - Buy VIP</BmtaButton>
          <BmtaButton>Redacted - Buy VIP</BmtaButton>
        </div>
      </div>
    </div>
  );
}

// ====================================================================
// EXPLOITS PANEL — locked for free tier
// ====================================================================
function ExploitsPanel() {
  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "20px 0", gap: 14, textAlign: "center" }}>
      <div style={{ width: 56, height: 56, border: "2px solid var(--bmta-warn)", display: "grid", placeItems: "center", color: "var(--bmta-warn)", fontSize: 28, borderRadius: 3 }}>
        ⌧
      </div>
      <div style={{ fontSize: 20, color: "var(--bmta-text-strong)", letterSpacing: 4, whiteSpace: "nowrap" }}>VIP ONLY</div>
      <div style={{ color: "var(--bmta-text-dim)", maxWidth: 460, lineHeight: 1.6 }}>
        We're sorry, but this is an exclusive panel you can only see once you have purchased the VIP tier in order to prevent potential patches.
      </div>

      <div style={{ background: "var(--bmta-bg-2)", border: "1px solid var(--bmta-border)", borderRadius: 3, padding: 12, width: 460, marginTop: 4 }}>
        <div style={{ color: "var(--bmta-text-dim)", fontSize: 12, letterSpacing: 1, marginBottom: 8 }}>Potential Modules you might find</div>
        {[
          ["Server Crashers",       "Destroy servers without a clue what hit them"],
          ["Unique Bot Attacks",            "Swarms of bots unleashed with incredible damage"],
          ["Server Exploits",           "Things such as kill-all tools"],
          ["Anticheat Bypasses",       "Bypassing complex server-specific anticheats"],
        ].map(([n, d]) => (
          <div key={n} style={{ display: "grid", gridTemplateColumns: "150px 1fr 60px", padding: "4px 0", alignItems: "center", borderBottom: "1px solid rgba(255,255,255,0.04)", textAlign: "left", gap: 8 }}>
            <span style={{ color: "var(--bmta-text-strong)", whiteSpace: "nowrap" }}>{n}</span>
            <span style={{ color: "var(--bmta-text-dim)", fontSize: 12 }}>{d}</span>
            {/*<span className="bmta-badge tag-amber" style={{ justifySelf: "end" }}>LOCKED</span>*/}
          </div>
        ))}
      </div>

      <div style={{ display: "flex", gap: 8, marginTop: 4 }}>
        <BmtaButton variant="green">Upgrade to VIP</BmtaButton>
        <BmtaButton variant="ghost">Enter license key</BmtaButton>
      </div>  
    </div>
  );
}

Object.assign(window, { DumpPanel, SpoofPanel, BotsPanel, ExploitsPanel });