/* BasedMTA — Panels batch 1: Log, Exec, Visuals, Aimbot, Local */

// ====================================================================
// LOG PANEL — built from feel of the rest of the UI (no screenshot)
// ====================================================================
const LOG_SEEDS = [
  ["info",  "boot",      "BasedMTA v1.6 loaded — 12 modules registered"],
  ["info",  "net",       "Connected to 172.202.89.86:22005 — handshake ok"],
  ["info",  "spoof",     "Identity rotated — serial 4031AC47…1DBCFC"],
  ["ok",    "spoof",     "License online — entitlement: full"],
  ["info",  "scripts",   "Indexed 378 client scripts / 208 resources (1.9 MB)"],
  ["warn",  "events",    "Hook installed on triggerServerEvent — 1462 events captured"],
  ["info",  "visuals",   "Player ESP enabled — 9 players visible, 0 npcs"],
  ["ok",    "aimbot",    "Aimbot armed (silent) — bone=Head fov=352px"],
  ["info",  "local",     "Movement::ACTIVE — Airbreak available on Space"],
  ["warn",  "net",    "Detected dutchman.mad call — suppressed (47)"],
  ["info",  "bots",      "Bot pool ready — 10 identities, 20 slots free"],
  ["bad",   "exploits",  "License tier: Online Demo - Some things might differ from final product."],
];
function LogPanel() {
  const [filter, setFilter] = useState("");
  const [paused, setPaused] = useState(false);
  const [tick, setTick] = useState(0);

  // simulate a rolling log
  const [extra, setExtra] = useState([]);
  useEffect(() => {
    if (paused) return;
    const id = setInterval(() => {
      const ev = [
        ["info", "net",     "RPC latency 12ms (avg 14ms)"],
        ["info", "net",     "ping reply " + (8 + Math.floor(Math.random()*6)) + "ms"],
        ["warn", "events",  "burst: 23 events/s — buffer at 71%"],
        ["info", "scripts", "decompiled chunk_" + Math.random().toString(16).slice(2,10) + ".luac"],
        ["ok",   "bots",    "bot online: " + ["Dutchman.1","Kowalski","BasedMTAUser47","GreetingsFromIran","DutchmanBad"][Math.floor(Math.random()*5)]],
      ][Math.floor(Math.random()*5)];
      setExtra((arr) => [...arr.slice(-30), [ev[0], ev[1], ev[2], new Date()]]);
      setTick((t) => t + 1);
    }, 1400);
    return () => clearInterval(id);
  }, [paused]);

  const all = useMemo(() => {
    const base = LOG_SEEDS.map((r) => [...r, new Date(Date.now() - (LOG_SEEDS.length - LOG_SEEDS.indexOf(r)) * 1500)]);
    return [...base, ...extra];
  }, [extra]);

  const filtered = filter
    ? all.filter((r) => (r[1] + " " + r[2]).toLowerCase().includes(filter.toLowerCase()))
    : all;

  const fmtT = (d) => {
    const pad = (n) => String(n).padStart(2, "0");
    return pad(d.getHours()) + ":" + pad(d.getMinutes()) + ":" + pad(d.getSeconds());
  };
  const toneClass = { ok: "tag-green", warn: "tag-amber", bad: "tag-red", info: "tag-blue" };

  return (
    <div className="bmta-panel">
      <div style={{ display: "flex", gap: 8, alignItems: "center", marginBottom: 8 }}>
        <BmtaButton variant={paused ? "" : "red"} onClick={() => setPaused((p) => !p)}>
          {paused ? "Resume" : "Pause"}
        </BmtaButton>
        <BmtaButton onClick={() => setExtra([])}>Clear</BmtaButton>
        <div style={{ flex: 1 }}>
          <BmtaInput placeholder="Filter log…" value={filter} onChange={setFilter} />
        </div>
        <span style={{ color: "var(--bmta-text-faint)", fontSize: 12 }}>{filtered.length} entries</span>
      </div>
      <div style={{ background: "var(--bmta-bg-2)", border: "1px solid var(--bmta-border)", padding: 6, flex: 1, overflow: "auto" }}>
        {filtered.map((r, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "70px 60px 80px 1fr", padding: "3px 6px", borderBottom: "1px solid rgba(255,255,255,0.02)", fontSize: 12, alignItems: "center" }}>
            <span style={{ color: "var(--bmta-text-faint)" }}>{fmtT(r[3])}</span>
            <span className={"bmta-badge " + toneClass[r[0]]} style={{ justifySelf: "start" }}>{r[0].toUpperCase()}</span>
            <span style={{ color: "var(--bmta-text-dim)" }}>{r[1]}</span>
            <span>{r[2]}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ====================================================================
// EXEC PANEL
// ====================================================================
const EXEC_SAMPLE = `outputChatBox("hello from BasedMTA", 0, 200, 255, true)
local p = getLocalPlayer()
setElementHealth(p, 100)
setElementInterior(p, 0)
for i, ped in ipairs(getElementsByType("ped")) do
  setPedStat(ped, 24, 999)
end`;

function highlightLua(src) {
  // simple regex-based tokenizer for display only
  const KW = /\b(local|function|end|if|then|else|elseif|for|in|do|while|return|true|false|nil|and|or|not)\b/g;
  const FN = /\b(outputChatBox|getLocalPlayer|setElementHealth|setElementInterior|getElementsByType|ipairs|pairs|setPedStat|triggerServerEvent|getResourceName|addEventHandler|tonumber|tostring|print)\b/g;
  const STR = /(".*?"|'.*?')/g;
  const NUM = /\b(\d+(?:\.\d+)?)\b/g;
  const COM = /(--[^\n]*)/g;

  return src.split("\n").map((line, i) => {
    let html = line
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(COM, '<span class="com">$1</span>')
      .replace(STR, '<span class="str">$1</span>')
      .replace(KW, '<span class="kw">$1</span>')
      .replace(FN, '<span class="fn">$1</span>')
      .replace(NUM, '<span class="num">$1</span>');
    return (
      <div key={i}>
        <span className="ln">{String(i + 1).padStart(3, " ")}</span>
        <span dangerouslySetInnerHTML={{ __html: html || "&nbsp;" }} />
      </div>
    );
  });
}

function ExecPanel() {
  const [code, setCode] = useState(EXEC_SAMPLE);
  const [context, setContext] = useState("Auto (logger)");
  const [console_, setConsole] = useState([
    { tag: "out", text: 'hello from BasedMTA' },
    { tag: "info", text: "= [userdata: 0x7ff...]" },
    { tag: "out", text: "set health -> 100" },
  ]);
  const [cmd, setCmd] = useState("");
  const ta = useRef(null);

  const run = () => {
    const lines = code.split("\n").filter(Boolean);
    setConsole((c) => [
      ...c,
      { tag: "cmd", text: "> Run (" + lines.length + " lines, ctx=" + context + ")" },
      { tag: "out", text: "hello from BasedMTA" },
      { tag: "info", text: "exec ok in 2.3ms" },
    ]);
  };
  const send = () => {
    if (!cmd.trim()) return;
    setConsole((c) => [...c, { tag: "cmd", text: "Lua> " + cmd }, { tag: "out", text: "= " + cmd.length + " chars echoed" }]);
    setCmd("");
  };

  const lineNo = code.slice(0, ta.current ? ta.current.selectionStart : 0).split("\n").length;
  const colNo = (() => {
    if (!ta.current) return 1;
    const s = code.slice(0, ta.current.selectionStart);
    const last = s.lastIndexOf("\n");
    return s.length - last;
  })();

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8, height: "100%" }}>
      <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
        <span style={{ color: "var(--bmta-text-dim)" }}>Context</span>
        <BmtaSelect
          value={context}
          options={["Auto (logger)", "client (mcafee)", "client (admin)", "server (admin)", "global"]}
          onChange={setContext}
          width={180}
        />
        <BmtaSelect value="Options" options={["Options", "Beautify", "Insert helper", "Save snippet…", "Load snippet…"]} onChange={() => {}} width={110} />
        <BmtaButton onClick={run}>Run</BmtaButton>
        <BmtaButton>Clear</BmtaButton> {/* onClick={() => setCode("")} */}
        <BmtaButton onClick={() => {}}>Scripts</BmtaButton>
        <div style={{ flex: 1 }} />
        <span style={{ color: "var(--bmta-text-faint)", fontSize: 12 }}>
          Ln {lineNo}, Col {colNo} | {code.split("\n").length} lines
        </span>
      </div>

      <div style={{ position: "relative", flex: "1 1 auto", minHeight: 160, background: "var(--bmta-bg-3)", border: "1px solid var(--bmta-border)" }}>
        {/* highlighted layer */}
        <div className="bmta-code" style={{ position: "absolute", inset: 0, padding: "6px 8px", overflow: "auto", pointerEvents: "none", whiteSpace: "pre" }}>
          {highlightLua(code)}
        </div>
        {/* invisible textarea */}
        <textarea
          ref={ta}
          value={code}
          onChange={(e) => setCode(e.target.value)}
          className="bmta-textarea"
          disabled={true}
          style={{
            position: "absolute", inset: 0,
            background: "transparent",
            color: "transparent",
            caretColor: "var(--bmta-text-strong)",
            border: "none",
            padding: "6px 8px 6px 38px",
            fontFamily: "var(--bmta-font)",
            fontSize: "var(--bmta-fs)",
            lineHeight: "1.45",
          }}
          spellCheck={false}
        />
      </div>

      <div style={{ background: "var(--bmta-bg-3)", border: "1px solid var(--bmta-border)" }}>
        <div style={{ display: "flex", gap: 8, alignItems: "center", padding: "4px 6px", borderBottom: "1px solid var(--bmta-border)" }}>
          <span style={{ color: "var(--bmta-text-dim)" }}>Console ({console_.length})</span>
          <BmtaSelect value="All" options={["All", "Out", "Err", "Cmd"]} onChange={() => {}} width={70} />
          <div style={{ flex: 1 }}>
            <BmtaInput placeholder="Search…" value="" onChange={() => {}} />
          </div>
          <BmtaButton onClick={() => navigator.clipboard && navigator.clipboard.writeText(console_.map(c=>c.text).join("\n"))}>Copy</BmtaButton>
          <BmtaButton onClick={() => setConsole([])}>Clear</BmtaButton>
          <BmtaButton>Pop Out</BmtaButton>
        </div>
        <div style={{ height: 120, overflow: "auto", padding: "4px 8px", fontSize: 12 }}>
          {console_.map((c, i) => (
            <div key={i} style={{ color: c.tag === "cmd" ? "var(--bmta-accent)" : c.tag === "info" ? "var(--bmta-text-dim)" : "var(--bmta-text)" }}>
              {c.text}
            </div>
          ))}
        </div>
        <div style={{ display: "flex", gap: 0, borderTop: "1px solid var(--bmta-border)" }}>
          <span style={{ color: "var(--bmta-text-faint)", padding: "3px 8px", background: "var(--bmta-bg-4)" }}>Lua&gt;</span>
          <input
            className="bmta-input"
            value={cmd}
            onChange={(e) => setCmd(e.target.value)}
            onKeyDown={(e) => e.key === "Enter" && send()}
            placeholder="…"
            style={{ border: "none", background: "transparent" }}
          />
        </div>
      </div>
    </div>
  );
}

// ====================================================================
// AIMBOT PANEL
// ====================================================================
function AimbotPanel() {
  const [mode, setMode] = useState("silent");
  const [profile, setProfile] = useState("default");
  const [section, setSection] = useState("settings");
  const [s, setS] = useState({
    enabled: true,
    aimLock: true,
    prediction: true,
    players: true,
    peds: false,
    priority: "Lowest HP",
    bone: "Head",
    fov: 352,
    range: 1000,
    switchDelay: 0,
  });
  const upd = (k, v) => setS((x) => ({ ...x, [k]: v }));

  const sidebar = [
    { id: "settings",   label: "Settings" },
    { id: "checks",     label: "Checks" },
    { id: "trigger",    label: "Trigger Bot" },
    { id: "keybinds",   label: "Keybinds" },
    { id: "adjustments",label: "Adjustments" },
    { id: "visuals",    label: "Visuals" },
  ];

  return (
    <div className="bmta-panel">
      <div className="bmta-pageheader">
        <BmtaRadio checked={mode === "normal"} onChange={() => setMode("normal")} label="Normal" />
        <BmtaRadio checked={mode === "silent"} onChange={() => setMode("silent")} label="Silent" />
        <div className="spacer" />
        <BmtaProfileBar profile={profile} onProfileChange={setProfile} onSaveAs={()=>{}} onReset={()=>setS({enabled:true,aimLock:true,prediction:true,players:true,peds:false,priority:"Lowest HP",bone:"Head",fov:352,range:1000,switchDelay:0})} />
      </div>

      <div className="bmta-twocol">
        <BmtaSidebar items={sidebar} active={section} onSelect={setSection} />
        <div>
          {section === "settings" && (
            <>
              <BmtaSubheader>General</BmtaSubheader>
              <BmtaRow>
                <BmtaCheck checked={s.enabled}    onChange={(v) => upd("enabled", v)}    label="Enabled" />
                <BmtaCheck checked={s.aimLock}    onChange={(v) => upd("aimLock", v)}    label="Aim Lock" />
                <BmtaCheck checked={s.prediction} onChange={(v) => upd("prediction", v)} label="Prediction" />
              </BmtaRow>

              <BmtaSubheader>Target Entity</BmtaSubheader>
              <BmtaRow cols={2}>
                <BmtaCheck checked={s.players} onChange={(v) => upd("players", v)} label="Players" />
                <BmtaCheck checked={s.peds}    onChange={(v) => upd("peds", v)}    label="Peds" />
              </BmtaRow>
              <BmtaField label="Priority">
                <BmtaSelect value={s.priority} onChange={(v) => upd("priority", v)} options={["Lowest HP","Highest HP","Closest","Crosshair","Lowest Switch Time"]} />
              </BmtaField>

              <BmtaSubheader>Aim at Bone</BmtaSubheader>
              <BmtaField label="Bone">
                <BmtaSelect value={s.bone} onChange={(v) => upd("bone", v)} options={["Head","Neck","Chest","Pelvis","Closest"]} />
              </BmtaField>

              <BmtaSubheader>Tuning</BmtaSubheader>
              <BmtaField label="FOV">
                <BmtaSlider value={s.fov} min={1} max={720} onChange={(v) => upd("fov", v)} format={(v) => v + " px"} />
              </BmtaField>
              <BmtaField label="Range">
                <BmtaSlider value={s.range} min={0} max={2000} onChange={(v) => upd("range", v)} />
              </BmtaField>
              <BmtaField label="Switch Delay">
                <BmtaSlider value={s.switchDelay} min={0} max={2} step={0.01} onChange={(v) => upd("switchDelay", v)} format={(v) => v.toFixed(2) + "s"} />
              </BmtaField>
            </>
          )}
          {section === "checks" && (
            <>
              <BmtaSubheader>Visibility Checks</BmtaSubheader>
              <BmtaRow>
                <BmtaCheck checked={true} onChange={()=>{}} label="Line of sight" />
                <BmtaCheck checked={true} onChange={()=>{}} label="Hitbox in FOV" />
                <BmtaCheck checked={false} onChange={()=>{}} label="Ignore through walls" />
              </BmtaRow>
              <BmtaSubheader>State Filters</BmtaSubheader>
              <BmtaRow>
                <BmtaCheck checked={true}  onChange={()=>{}} label="Ignore downed" />
                <BmtaCheck checked={true}  onChange={()=>{}} label="Ignore in-vehicle" />
                <BmtaCheck checked={false} onChange={()=>{}} label="Ignore teammates" />
              </BmtaRow>
            </>
          )}
          {section === "trigger" && (
            <>
              <BmtaSubheader>Trigger Bot</BmtaSubheader>
              <BmtaRow>
                <BmtaCheck checked={true} onChange={()=>{}} label="Enabled" />
                <BmtaCheck checked={false} onChange={()=>{}} label="Burst mode" />
                <BmtaCheck checked={true} onChange={()=>{}} label="Hold to fire" />
              </BmtaRow>
              <BmtaField label="Hitchance"><BmtaSlider value={85} min={1} max={100} onChange={()=>{}} format={(v)=>v+"%"} /></BmtaField>
              <BmtaField label="Delay">    <BmtaSlider value={40} min={0} max={500} onChange={()=>{}} format={(v)=>v+" ms"} /></BmtaField>
              <BmtaField label="Cooldown"> <BmtaSlider value={80} min={0} max={1000} onChange={()=>{}} format={(v)=>v+" ms"} /></BmtaField>
            </>
          )}
          {section === "keybinds" && (
            <>
              <BmtaSubheader>Keybinds</BmtaSubheader>
              {["Aim Lock","Toggle FOV","Toggle Silent","Trigger Bot","Reload profile"].map((k, i) => (
                <div key={k} style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: 10, marginBottom: 4 }}>
                  <span>{k}</span>
                  <BmtaSelect value={["Mouse5","Mouse4","Shift","F","R"][i]} options={["None","Mouse4","Mouse5","Shift","Ctrl","Alt","F","R","V","Q","E"]} onChange={()=>{}} />
                </div>
              ))}
            </>
          )}
          {section === "adjustments" && (
            <>
              <BmtaSubheader>Smoothing</BmtaSubheader>
              <BmtaField label="Smooth X"><BmtaSlider value={2.4} min={0} max={10} step={0.1} onChange={()=>{}} /></BmtaField>
              <BmtaField label="Smooth Y"><BmtaSlider value={2.0} min={0} max={10} step={0.1} onChange={()=>{}} /></BmtaField>
              <BmtaSubheader>Recoil</BmtaSubheader>
              <BmtaField label="RCS X"><BmtaSlider value={1.0} min={0} max={2} step={0.01} onChange={()=>{}} /></BmtaField>
              <BmtaField label="RCS Y"><BmtaSlider value={1.0} min={0} max={2} step={0.01} onChange={()=>{}} /></BmtaField>
            </>
          )}
          {section === "visuals" && (
            <>
              <BmtaSubheader>Indicators</BmtaSubheader>
              <BmtaRow>
                <BmtaCheck checked={true} onChange={()=>{}} label="Draw FOV" />
                <BmtaCheck checked={true} onChange={()=>{}} label="Target line" />
                <BmtaCheck checked={false} onChange={()=>{}} label="Hit markers" />
              </BmtaRow>
              <BmtaField label="FOV color"><span className="bmta-colorchip" /></BmtaField>
              <BmtaField label="Target color"><span className="bmta-colorchip" style={{ background: "#e8b259" }} /></BmtaField>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

// ====================================================================
// VISUALS PANEL
// ====================================================================
function VisualsPanel() {
  const [g, setG] = useState({ enable: true, ignoreSelf: true, fade: true, range: 6000 });
  const [profile, setProfile] = useState("default");
  const [section, setSection] = useState("players");
  const [p, setP] = useState({
    enable: true, box: true, skeleton: false, snapline: false,
    healthBar: false, armorBar: false, hpText: false,
    name: true, ping: true, weapon: true, distance: true,
    boxStyle: "Corner", thickness: 1.4,
  });
  const upd = (k, v) => setP((x) => ({ ...x, [k]: v }));

  const items = [
    { id: "players",     label: "Players",     count: 9 },
    { id: "npcs",        label: "NPCs",        count: 0 },
    { id: "vehicles",    label: "Vehicles",    count: 0 },
    { id: "projectiles", label: "Projectiles", count: 0 },
    { id: "bullets",     label: "Bullets",     count: 0 },
    { id: "radar",       label: "Radar" },
    { id: "chams",       label: "Chams" },
    { id: "world",       label: "World" },
  ];

  return (
    <div className="bmta-panel">
      <div className="bmta-pageheader">
        <BmtaCheck checked={g.enable}     onChange={(v) => setG({ ...g, enable: v })}     label="Enable" />
        <BmtaCheck checked={g.ignoreSelf} onChange={(v) => setG({ ...g, ignoreSelf: v })} label="Ignore self" />
        <BmtaCheck checked={g.fade}       onChange={(v) => setG({ ...g, fade: v })}       label="Fade" />
        <span style={{ color: "var(--bmta-text-dim)" }}>Range</span>
        <div style={{ width: 110 }}>
          <BmtaSlider value={g.range} min={0} max={6000} step={50} onChange={(v) => setG({ ...g, range: v })} format={(v) => v + "m"} />
        </div>
        <div className="spacer" />
        <BmtaProfileBar profile={profile} onProfileChange={setProfile} />
      </div>

      <div className="bmta-twocol">
        <BmtaSidebar items={items} active={section} onSelect={setSection} />
        <div>
          {section === "players" && (
            <>
              <BmtaSubheader>General</BmtaSubheader>
              <BmtaRow cols={4}>
                <BmtaCheck checked={p.enable}    onChange={(v) => upd("enable", v)}    label="Enable" />
                <BmtaCheck checked={p.box}       onChange={(v) => upd("box", v)}       label="Box" />
                <BmtaCheck checked={p.skeleton}  onChange={(v) => upd("skeleton", v)}  label="Skeleton" />
                <BmtaCheck checked={p.snapline}  onChange={(v) => upd("snapline", v)}  label="Snapline" />
              </BmtaRow>
              <BmtaRow cols={4}>
                <BmtaCheck checked={p.healthBar} onChange={(v) => upd("healthBar", v)} label="Health bar" />
                <BmtaCheck checked={p.armorBar}  onChange={(v) => upd("armorBar", v)}  label="Armor bar" />
                <BmtaCheck checked={p.hpText}    onChange={(v) => upd("hpText", v)}    label="HP text" />
                <span />
              </BmtaRow>

              <BmtaSubheader>Info</BmtaSubheader>
              <BmtaRow cols={4}>
                <BmtaCheck checked={p.name}     onChange={(v) => upd("name", v)}     label="Name" />
                <BmtaCheck checked={p.ping}     onChange={(v) => upd("ping", v)}     label="Ping" />
                <BmtaCheck checked={p.weapon}   onChange={(v) => upd("weapon", v)}   label="Weapon" />
                <BmtaCheck checked={p.distance} onChange={(v) => upd("distance", v)} label="Distance" />
              </BmtaRow>
              <BmtaField label="Text color"><span className="bmta-colorchip" /></BmtaField>

              <BmtaSubheader>Box</BmtaSubheader>
              <div style={{ display: "grid", gridTemplateColumns: "100px 110px 110px 100px 1fr 80px", gap: 10, alignItems: "center" }}>
                <span>Style</span>
                <BmtaSelect value={p.boxStyle} onChange={(v) => upd("boxStyle", v)} options={["Corner","Full","2D","3D"]} />
                <span>Thickness</span>
                <div><BmtaSlider value={p.thickness} min={0.5} max={5} step={0.1} onChange={(v) => upd("thickness", v)} /></div>
                <span>Color</span>
                <span className="bmta-colorchip" />
              </div>
            </>
          )}
          {section === "npcs" && (
            <BmtaEmpty>No NPCs in range.<br/>Increase Range or enter a populated area to see entries.</BmtaEmpty>
          )}
          {section === "vehicles" && (
            <>
              <BmtaSubheader>General</BmtaSubheader>
              <BmtaRow cols={4}>
                <BmtaCheck checked={false} onChange={()=>{}} label="Enable" />
                <BmtaCheck checked={true}  onChange={()=>{}} label="Box" />
                <BmtaCheck checked={false} onChange={()=>{}} label="Model" />
                <BmtaCheck checked={true}  onChange={()=>{}} label="Driver" />
              </BmtaRow>
            </>
          )}
          {section === "projectiles" && <BmtaEmpty>No projectiles tracked.</BmtaEmpty>}
          {section === "bullets" && <BmtaEmpty>Bullet tracers disabled.</BmtaEmpty>}
          {section === "radar" && (
            <>
              <BmtaSubheader>Radar</BmtaSubheader>
              <BmtaRow><BmtaCheck checked={true} onChange={()=>{}} label="Enable" /><BmtaCheck checked={true} onChange={()=>{}} label="Players" /><BmtaCheck checked={false} onChange={()=>{}} label="Vehicles" /></BmtaRow>
              <BmtaField label="Size"><BmtaSlider value={200} min={80} max={400} onChange={()=>{}} /></BmtaField>
              <BmtaField label="Zoom"><BmtaSlider value={1.5} min={0.1} max={4} step={0.1} onChange={()=>{}} /></BmtaField>
            </>
          )}
          {section === "chams" && (
            <>
              <BmtaSubheader>Chams</BmtaSubheader>
              <BmtaRow><BmtaCheck checked={false} onChange={()=>{}} label="Enable" /><BmtaCheck checked={true} onChange={()=>{}} label="Visible only" /></BmtaRow>
              <BmtaField label="Material"><BmtaSelect value="Solid" options={["Solid","Flat","Wireframe","Glow"]} onChange={()=>{}} /></BmtaField>
              <BmtaField label="Color"><span className="bmta-colorchip" style={{ background: "#34c47b" }} /></BmtaField>
            </>
          )}
          {section === "world" && (
            <>
              <BmtaSubheader>World</BmtaSubheader>
              <BmtaRow><BmtaCheck checked={false} onChange={()=>{}} label="Nightmode" /><BmtaCheck checked={false} onChange={()=>{}} label="No fog" /><BmtaCheck checked={false} onChange={()=>{}} label="Force noon" /></BmtaRow>
              <BmtaField label="FOV"><BmtaSlider value={70} min={60} max={120} onChange={()=>{}} format={(v)=>v+"°"} /></BmtaField>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

// ====================================================================
// LOCAL PANEL
// ====================================================================
function LocalPanel() {
  const [profile, setProfile] = useState("default");
  const [section, setSection] = useState("movement");
  const [m, setM] = useState({
    airbreak: false, noclip: false,
    superJump: false, noFall: false,
    overrideG: false, overrideSpeed: false,
    godmode: false, antiStun: false, autoHeal: false,
  });
  const upd = (k, v) => setM((x) => ({ ...x, [k]: v }));

  const items = ["Movement", "Protection", "Stats", "Vehicle", "Weapons", "World", "Teleport"]
    .map((x) => ({ id: x.toLowerCase(), label: x }));

  return (
    <div className="bmta-panel">
      <div className="bmta-pageheader">
        <div className="bmta-banner">Local: <span className="banner-tag">ACTIVE</span></div>
        <div className="spacer" />
        <BmtaProfileBar profile={profile} onProfileChange={setProfile} />
      </div>

      <div className="bmta-twocol">
        <BmtaSidebar items={items} active={section} onSelect={setSection} />
        <div>
          {section === "movement" && (
            <>
              <BmtaSubheader>Fly / Flight</BmtaSubheader>
              <BmtaRow cols={2}>
                <BmtaCheck checked={m.airbreak} onChange={(v) => upd("airbreak", v)} label="Airbreak (hold Space)" />
                <BmtaCheck checked={m.noclip}   onChange={(v) => upd("noclip", v)}   label="Noclip (WASD + Space/Ctrl)" />
              </BmtaRow>
              <BmtaSubheader>Jump</BmtaSubheader>
              <BmtaRow cols={2}>
                <BmtaCheck checked={m.superJump} onChange={(v) => upd("superJump", v)} label="Super Jump" />
                <BmtaCheck checked={m.noFall}    onChange={(v) => upd("noFall", v)}    label="No Fall Damage" />
              </BmtaRow>
              <BmtaSubheader>Physics</BmtaSubheader>
              <BmtaRow cols={2}>
                <BmtaCheck checked={m.overrideG}     onChange={(v) => upd("overrideG", v)}     label="Override gravity" />
                <BmtaCheck checked={m.overrideSpeed} onChange={(v) => upd("overrideSpeed", v)} label="Override game speed" />
              </BmtaRow>
            </>
          )}
          {section === "protection" && (
            <>
              <BmtaSubheader>Damage</BmtaSubheader>
              <BmtaRow cols={2}>
                <BmtaCheck checked={m.godmode}  onChange={(v) => upd("godmode", v)}  label="Godmode" />
                <BmtaCheck checked={m.antiStun} onChange={(v) => upd("antiStun", v)} label="Anti-stun / anti-freeze" />
              </BmtaRow>
              <BmtaSubheader>Recovery</BmtaSubheader>
              <BmtaRow cols={2}>
                <BmtaCheck checked={m.autoHeal} onChange={(v) => upd("autoHeal", v)} label="Auto-heal under 30%" />
                <BmtaCheck checked={false}      onChange={()=>{}}                    label="Auto-armor refill" />
              </BmtaRow>
            </>
          )}
          {section === "stats" && (
            <>
              <BmtaSubheader>Stats</BmtaSubheader>
              <BmtaField label="Health"><BmtaSlider value={100} min={0} max={200} onChange={()=>{}} /></BmtaField>
              <BmtaField label="Armor"><BmtaSlider value={100} min={0} max={200} onChange={()=>{}} /></BmtaField>
              <BmtaField label="Run speed"><BmtaSlider value={1.0} min={0.5} max={3.0} step={0.05} onChange={()=>{}} format={(v)=>v.toFixed(2)+"x"} /></BmtaField>
            </>
          )}
          {section === "vehicle" && (
            <>
              <BmtaSubheader>Vehicle</BmtaSubheader>
              <BmtaRow><BmtaCheck checked={false} onChange={()=>{}} label="Vehicle godmode" /><BmtaCheck checked={false} onChange={()=>{}} label="Tank mode" /><BmtaCheck checked={false} onChange={()=>{}} label="No flip" /></BmtaRow>
              <BmtaField label="Top speed"><BmtaSlider value={1.0} min={0.5} max={5} step={0.1} onChange={()=>{}} format={(v)=>v.toFixed(1)+"x"} /></BmtaField>
            </>
          )}
          {section === "weapons" && (
            <>
              <BmtaSubheader>Weapons</BmtaSubheader>
              <BmtaRow><BmtaCheck checked={false} onChange={()=>{}} label="Infinite ammo" /><BmtaCheck checked={false} onChange={()=>{}} label="No recoil" /><BmtaCheck checked={false} onChange={()=>{}} label="Instant reload" /></BmtaRow>
            </>
          )}
          {section === "world" && (
            <>
              <BmtaSubheader>World</BmtaSubheader>
              <BmtaRow><BmtaCheck checked={false} onChange={()=>{}} label="No traffic" /><BmtaCheck checked={false} onChange={()=>{}} label="No peds" /><BmtaCheck checked={false} onChange={()=>{}} label="Force weather: clear" /></BmtaRow>
            </>
          )}
          {section === "teleport" && (
            <>
              <BmtaSubheader>Teleport</BmtaSubheader>
              <BmtaField label="Waypoint">
                <div style={{ display:"flex", gap: 6 }}>
                  <BmtaInput value="Los Santos · Verdant Bluffs" onChange={()=>{}} />
                  <BmtaButton>Go</BmtaButton>
                </div>
              </BmtaField>
              <BmtaField label="Saved">
                <BmtaSelect value="Spawn" options={["Spawn","SF Airport","LV Strip","Mt. Chiliad","Last position"]} onChange={()=>{}} />
              </BmtaField>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

// Export
Object.assign(window, { LogPanel, ExecPanel, AimbotPanel, VisualsPanel, LocalPanel });
