import { useState, useEffect } from "react";

const SectionLabel = ({ children }) => (
  <div style={{
    fontSize: 9, fontWeight: 800, letterSpacing: "0.2em",
    color: "var(--text-muted)", textTransform: "uppercase",
    marginBottom: 2, marginTop: 4,
  }}>
    {children}
  </div>
);

const Toggle = ({ label, desc, checked, onChange }) => (
  <label style={{
    display: "flex", alignItems: "center", justifyContent: "space-between",
    padding: "7px 0", cursor: "pointer", gap: 10,
  }}>
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ fontSize: 12, fontWeight: 600, color: "var(--text-secondary)", lineHeight: 1.2 }}>{label}</div>
      {desc && <div style={{ fontSize: 9, color: "var(--text-muted)", marginTop: 2, lineHeight: 1.3 }}>{desc}</div>}
    </div>
    <div style={{ position: "relative", flexShrink: 0 }}>
      <input type="checkbox" checked={checked} onChange={onChange} style={{ position: "absolute", opacity: 0, width: 0, height: 0 }} />
      <div style={{
        width: 34, height: 18, borderRadius: 9,
        background: checked ? "var(--ct-color)" : "var(--bg-border)",
        transition: "background 0.15s", position: "relative",
      }}>
        <div style={{
          position: "absolute", top: 2, left: checked ? 14 : 2,
          width: 14, height: 14, borderRadius: "50%",
          background: checked ? "white" : "rgba(255,255,255,0.3)",
          transition: "left 0.15s", boxShadow: "0 1px 3px rgba(0,0,0,0.4)",
        }} />
      </div>
    </div>
  </label>
);

const Slider = ({ label, value, min, max, step, onChange, color, format }) => {
  const pct = ((value - min) / (max - min)) * 100;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span style={{ fontSize: 12, fontWeight: 600, color: "var(--text-secondary)" }}>{label}</span>
        <span style={{ fontSize: 11, fontFamily: "monospace", fontWeight: 700, color }}>{format ? format(value) : value}</span>
      </div>
      <div style={{ position: "relative", height: 4, borderRadius: 2, background: "var(--bg-border)" }}>
        <div style={{ position: "absolute", left: 0, top: 0, height: "100%", width: `${pct}%`, borderRadius: 2, background: color, transition: "width 0.1s" }} />
        <input type="range" min={min} max={max} step={step} value={value} onChange={onChange}
          style={{ position: "absolute", inset: "-7px 0", width: "100%", opacity: 0, cursor: "pointer" }} />
      </div>
    </div>
  );
};

const Divider = () => (
  <div style={{ height: 1, background: "var(--bg-border-dim)", margin: "8px 0" }} />
);

// ── Weapon / utility lists for the custom filter ──────────────────────
const WEAPON_CATEGORIES = [
  {
    label: "Rifles",
    items: [
      { id: "ak47", name: "AK-47" }, { id: "aug", name: "AUG" },
      { id: "famas", name: "FAMAS" }, { id: "galilar", name: "Galil AR" },
      { id: "m4a1", name: "M4A1" }, { id: "m4a1_silencer", name: "M4A1-S" },
      { id: "sg556", name: "SG 556" },
    ],
  },
  {
    label: "SMGs",
    items: [
      { id: "bizon", name: "PP-Bizon" }, { id: "mac10", name: "MAC-10" },
      { id: "mp5sd", name: "MP5-SD" }, { id: "mp7", name: "MP7" },
      { id: "mp9", name: "MP9" }, { id: "p90", name: "P90" },
      { id: "ump45", name: "UMP-45" },
    ],
  },
  {
    label: "Heavy",
    items: [
      { id: "mag7", name: "MAG-7" }, { id: "nova", name: "Nova" },
      { id: "sawedoff", name: "Sawed-Off" }, { id: "xm1014", name: "XM1014" },
      { id: "m249", name: "M249" }, { id: "negev", name: "Negev" },
    ],
  },
  {
    label: "Pistols",
    items: [
      { id: "cz75a", name: "CZ75-Auto" }, { id: "deagle", name: "Desert Eagle" },
      { id: "elite", name: "Dual Berettas" }, { id: "fiveseven", name: "Five-SeveN" },
      { id: "glock", name: "Glock-18" }, { id: "hkp2000", name: "P2000" },
      { id: "p250", name: "P250" }, { id: "revolver", name: "R8 Revolver" },
      { id: "tec9", name: "Tec-9" }, { id: "usp_silencer", name: "USP-S" },
    ],
  },
  {
    label: "Sniper Rifles",
    items: [
      { id: "awp", name: "AWP" }, { id: "g3sg1", name: "G3SG1" },
      { id: "scar20", name: "SCAR-20" }, { id: "ssg08", name: "SSG 08" },
    ],
  },
  {
    label: "Other",
    items: [
      { id: "taser", name: "Zeus x27" },
    ],
  },
];

const ALL_WEAPON_IDS = WEAPON_CATEGORIES.flatMap(c => c.items.map(i => i.id));

const UTILITY_IDS = new Set([
  "flashbang", "hegrenade", "smokegrenade",
  "molotov", "incgrenade", "decoy",
]);

const isUtility = (type) => UTILITY_IDS.has(type);
// We also need this exported — will re-export as a shared module later.
// For now it's defined inline here and in radar.jsx — keep in sync.

const SettingsButton = ({ settings, onSettingsChange }) => {
  const [isOpen, setIsOpen] = useState(false);
  const [isMobile, setIsMobile] = useState(false);
  const [weaponSearch, setWeaponSearch] = useState("");

  useEffect(() => {
    const check = () => setIsMobile(window.innerWidth < 640);
    check();
    window.addEventListener("resize", check);
    return () => window.removeEventListener("resize", check);
  }, []);

  const upd = (key, val) => onSettingsChange({ ...settings, [key]: val });

  return (
    <div style={{ position: "relative", zIndex: 50 }}>
      {/* Trigger */}
      <button
        onClick={() => setIsOpen(o => !o)}
        style={{
          display: "flex", alignItems: "center", gap: 6, padding: "6px 12px",
          borderRadius: 6, fontFamily: "inherit", fontSize: 12, fontWeight: 700,
          letterSpacing: "0.04em", cursor: "pointer", transition: "all 0.15s",
          background: isOpen ? "var(--bg-card)" : "transparent",
          border: `1px solid ${isOpen ? "var(--bg-border)" : "var(--bg-border-dim)"}`,
          color: isOpen ? "var(--text-primary)" : "var(--text-secondary)",
        }}
        onMouseEnter={e => { e.currentTarget.style.borderColor = "var(--bg-border)"; e.currentTarget.style.color = "var(--text-primary)"; }}
        onMouseLeave={e => { if (!isOpen) { e.currentTarget.style.borderColor = "var(--bg-border-dim)"; e.currentTarget.style.color = "var(--text-secondary)"; }}}
      >
        <svg class="w-3 h-3 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13v-2a1 1 0 0 0-1-1h-.757l-.707-1.707.535-.536a1 1 0 0 0 0-1.414l-1.414-1.414a1 1 0 0 0-1.414 0l-.536.535L14 4.757V4a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v.757l-1.707.707-.536-.535a1 1 0 0 0-1.414 0L4.929 6.343a1 1 0 0 0 0 1.414l.536.536L4.757 10H4a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h.757l.707 1.707-.535.536a1 1 0 0 0 0 1.414l1.414 1.414a1 1 0 0 0 1.414 0l.536-.535 1.707.707V20a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-.757l1.707-.708.536.536a1 1 0 0 0 1.414 0l1.414-1.414a1 1 0 0 0 0-1.414l-.535-.536.707-1.707H20a1 1 0 0 0 1-1Z"/>
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"/>
        </svg>

        <span style={{ display: isMobile ? "none" : "inline" }}>Settings</span>
      </button>

      {isOpen && (
        <>
          {isMobile && (
            <div onClick={() => setIsOpen(false)} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.65)", zIndex: 40, backdropFilter: "blur(4px)" }} />
          )}
          <div style={{
            position: isMobile ? "fixed" : "absolute",
            ...(isMobile
              ? { bottom: 0, left: 0, right: 0, borderRadius: "12px 12px 0 0", maxHeight: "90vh", overflowY: "auto" }
              : { right: 0, top: "calc(100% + 6px)", width: 300, borderRadius: 8, maxHeight: "85vh", overflowY: "auto" }
            ),
            background: "var(--bg-panel)",
            border: "1px solid var(--bg-border)",
            boxShadow: "0 20px 60px rgba(0,0,0,0.75)",
            padding: "16px 18px 20px",
            zIndex: 50,
          }}>
            {/* Header */}
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16 }}>
              <span style={{ fontSize: 10, fontWeight: 800, letterSpacing: "0.2em", color: "var(--text-secondary)", textTransform: "uppercase" }}>
                Radar Settings
              </span>
              <button onClick={() => setIsOpen(false)} style={{ background: "none", border: "none", color: "var(--text-muted)", cursor: "pointer", padding: 2, lineHeight: 1 }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
              </button>
            </div>

            {/* ── DISPLAY ── */}
            <SectionLabel>Display</SectionLabel>
            <Divider />
            <div style={{ display: "flex", flexDirection: "column" }}>
              <Toggle label="Ally Names"    checked={settings.showAllNames   ?? true}  onChange={e => upd("showAllNames",    e.target.checked)} />
              <Toggle label="Enemy Names"   checked={settings.showEnemyNames ?? false} onChange={e => upd("showEnemyNames",  e.target.checked)} />
              <Toggle label="View Cones"    checked={settings.showViewCones  ?? true}  onChange={e => upd("showViewCones",   e.target.checked)} desc="FOV cone per player" />
              <Toggle label="Health Bars"   checked={settings.showHealthBars ?? true}  onChange={e => upd("showHealthBars",  e.target.checked)} desc="HP bar at bottom of card" />
              <Toggle label="Ammo Counter"  checked={settings.showAmmo       ?? true}  onChange={e => upd("showAmmo",        e.target.checked)} desc="Ammo pips on player cards" />
              <Toggle label="Armor"         checked={settings.showArmor      ?? true}  onChange={e => upd("showArmor",       e.target.checked)} desc="Armor value on cards" />
              <Toggle label="Ping"          checked={settings.showPing       ?? true}  onChange={e => upd("showPing",        e.target.checked)} desc="Latency on player cards" />
              <Toggle label="Money"         checked={settings.showMoney      ?? true}  onChange={e => upd("showMoney",       e.target.checked)} desc="$ economy on player cards" />
              <Toggle label="Flash Effect"  checked={settings.showFlashEffect?? true}  onChange={e => upd("showFlashEffect", e.target.checked)} desc="White overlay when flashed" />
              <>
                <Toggle label="Flag Indicators" checked={settings.showIndicators ?? true} onChange={e => upd("showIndicators", e.target.checked)} desc="Show ducking, shifting, scoped, reloading flags" />
                <div style={{ display: "flex", flexDirection: "column", gap: 4, marginTop: 4 }}>
                  <SectionLabel>Flag Display</SectionLabel>
                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <span style={{ fontSize: 12, fontWeight: 600, color: "var(--text-secondary)" }}>Display Mode</span>
                    <select value={settings.flagDisplayMode ?? "abbreviated"} onChange={e => upd("flagDisplayMode", e.target.value)} style={{
                      padding: "4px 8px",
                      borderRadius: 4,
                      border: "1px solid var(--bg-border)",
                      background: "var(--bg-input)",
                      color: "var(--text-primary)",
                      fontSize: 12
                    }}>
                      <option value="abbreviated">Abbreviated (S,W,Z,R)</option>
                      <option value="full">Full Text (Walk,Crouch,Scope,Reload)</option>
                    </select>
                  </div>
                </div>
              </>
            </div>

            <Divider />

            {/* ── PLAYER CARDS (NEW) ── */}
            <SectionLabel>Player Cards</SectionLabel>
            <Divider />
            <div style={{ display: "flex", flexDirection: "column" }}>
              <Toggle
                label="Show Scoreboard"
                desc="Score / timer / bomb timer bar"
                checked={settings.showScoreboard !== false}
                onChange={e => upd("showScoreboard", e.target.checked)}
              />
              <Toggle
                label="Show T Cards"
                desc="Terrorist player cards panel"
                checked={settings.showTCards !== false}
                onChange={e => upd("showTCards", e.target.checked)}
              />
              <Toggle
                label="Show CT Cards"
                desc="Counter-Terrorist player cards panel"
                checked={settings.showCTCards !== false}
                onChange={e => upd("showCTCards", e.target.checked)}
              />
            </div>

            <Divider />

            {/* ── MAP ── */}
            <SectionLabel>Map</SectionLabel>
            <Divider />
            <div style={{ display: "flex", flexDirection: "column" }}>
              <Toggle label="Grenades"         checked={settings.showGrenades           ?? true} onChange={e => upd("showGrenades",           e.target.checked)} desc="Flash, HE, decoy projectiles" />
              <Toggle label="Grenade Trajectory" checked={settings.showGrenadeTrajectory ?? true} onChange={e => upd("showGrenadeTrajectory", e.target.checked)} desc="Flight path and landing position" />
              <Toggle label="Weapon Drop ESP" checked={settings.showDroppedWeapons ?? true} onChange={e => upd("showDroppedWeapons", e.target.checked)} desc="Show dropped weapons on radar" />
              {settings.showDroppedWeapons !== false && (
                <div style={{ display: "flex", flexDirection: "column", gap: 8, padding: "6px 0 4px 12px", borderLeft: "2px solid var(--bg-border-dim)" }}>
                  {/* Filter mode selector */}
                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                    <span style={{ fontSize: 11, fontWeight: 600, color: "var(--text-secondary)" }}>Weapon Filter</span>
                    <select value={settings.droppedWeaponFilterMode ?? "all"} onChange={e => upd("droppedWeaponFilterMode", e.target.value)} style={{
                      padding: "3px 8px", borderRadius: 4,
                      border: "1px solid var(--bg-border)",
                      background: "var(--bg-input)",
                      color: "var(--text-primary)", fontSize: 11, fontFamily: "inherit",
                    }}>
                      <option value="all">All Weapons</option>
                      <option value="custom">Custom Selection</option>
                    </select>
                  </div>

                  {/* Custom multi-select list */}
                  {settings.droppedWeaponFilterMode === "custom" && (
                    <div style={{
                      maxHeight: 180, overflowY: "auto",
                      border: "1px solid var(--bg-border-dim)",
                      borderRadius: 4, padding: "4px 6px",
                      background: "rgba(0,0,0,0.15)",
                    }}>
                      {/* Search box */}
                      <input
                        type="text"
                        placeholder="Search weapon..."
                        value={weaponSearch}
                        onChange={e => setWeaponSearch(e.target.value.toLowerCase())}
                        style={{
                          width: "100%", padding: "4px 6px", marginBottom: 4,
                          borderRadius: 3, border: "1px solid var(--bg-border-dim)",
                          background: "var(--bg-input)", color: "var(--text-primary)",
                          fontSize: 10, fontFamily: "inherit", outline: "none", boxSizing: "border-box",
                        }}
                      />
                      {/* Select all / deselect all */}
                      <div style={{ display: "flex", gap: 4, marginBottom: 4 }}>
                        <button
                          onClick={() => {
                            const allIds = weaponSearch
                              ? ALL_WEAPON_IDS.filter(id => id.includes(weaponSearch))
                              : ALL_WEAPON_IDS;
                            upd("droppedWeaponFilterList", [...new Set([...settings.droppedWeaponFilterList, ...allIds])]);
                          }}
                          style={{
                            flex: 1, padding: "2px 0", borderRadius: 3, cursor: "pointer",
                            background: "rgba(74,158,255,0.1)", border: "1px solid rgba(74,158,255,0.25)",
                            color: "#7dd3fc", fontSize: 9, fontWeight: 700, fontFamily: "inherit",
                          }}
                        >Select All</button>
                        <button
                          onClick={() => {
                            if (weaponSearch) {
                              upd("droppedWeaponFilterList", settings.droppedWeaponFilterList.filter(id => !id.includes(weaponSearch)));
                            } else {
                              upd("droppedWeaponFilterList", []);
                            }
                          }}
                          style={{
                            flex: 1, padding: "2px 0", borderRadius: 3, cursor: "pointer",
                            background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.1)",
                            color: "rgba(255,255,255,0.5)", fontSize: 9, fontWeight: 700, fontFamily: "inherit",
                          }}
                        >Deselect All</button>
                      </div>
                      {/* Category list */}
                      {WEAPON_CATEGORIES.map(cat => {
                        const filtered = weaponSearch
                          ? cat.items.filter(i => i.id.includes(weaponSearch) || i.name.toLowerCase().includes(weaponSearch))
                          : cat.items;
                        if (filtered.length === 0) return null;
                        return (
                          <div key={cat.label} style={{ marginBottom: 2 }}>
                            <div style={{ fontSize: 8, fontWeight: 800, color: "rgba(255,255,255,0.3)", letterSpacing: "0.1em", padding: "2px 2px 1px" }}>
                              {cat.label}
                            </div>
                            {filtered.map(item => {
                              const checked = (settings.droppedWeaponFilterList ?? []).includes(item.id);
                              return (
                                <label key={item.id} style={{
                                  display: "flex", alignItems: "center", gap: 4, padding: "1px 4px",
                                  cursor: "pointer", borderRadius: 2, fontSize: 10,
                                  color: checked ? "var(--text-primary)" : "rgba(255,255,255,0.5)",
                                  background: checked ? "rgba(74,158,255,0.08)" : "transparent",
                                }}>
                                  <input
                                    type="checkbox"
                                    checked={checked}
                                    onChange={() => {
                                      const list = settings.droppedWeaponFilterList ?? [];
                                      const next = checked
                                        ? list.filter(id => id !== item.id)
                                        : [...list, item.id];
                                      upd("droppedWeaponFilterList", next);
                                    }}
                                    style={{ accentColor: "#4a9eff", width: 11, height: 11, flexShrink: 0 }}
                                  />
                                  <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                                    {item.name}
                                  </span>
                                  <span style={{ marginLeft: "auto", fontSize: 8, color: "rgba(255,255,255,0.2)", fontFamily: "monospace" }}>
                                    {item.id}
                                  </span>
                                </label>
                              );
                            })}
                          </div>
                        );
                      })}
                    </div>
                  )}

                  <Slider label="Icon Size" value={settings.droppedWeaponSize ?? 1.0} min={0.3} max={3.0} step={0.1}
                    onChange={e => upd("droppedWeaponSize", parseFloat(e.target.value))}
                    color="var(--t-color)" format={v => `${v.toFixed(1)}×`} />
                  <Slider label="Icon Opacity" value={settings.droppedWeaponOpacity ?? 0.92} min={0.1} max={1.0} step={0.05}
                    onChange={e => upd("droppedWeaponOpacity", parseFloat(e.target.value))}
                    color="var(--t-color)" format={v => `${(v*100).toFixed(0)}%`} />
                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                    <span style={{ fontSize: 12, fontWeight: 600, color: "var(--text-secondary)" }}>Fallback Color</span>
                    <input type="color" value={settings.droppedWeaponColor ?? "#94a3b8"} onChange={e => upd("droppedWeaponColor", e.target.value)} style={{ width: 40, height: 24, border: "1px solid var(--bg-border)", borderRadius: 4, padding: 2 }} />
                  </div>
                </div>
              )}

              {/* Separate toggle for dropped utilities (nades/decoy) */}
              <Toggle label="Utilities Drop ESP" checked={settings.showDroppedUtilities ?? true} onChange={e => upd("showDroppedUtilities", e.target.checked)} desc="Show dropped flashbang, HE, smoke, molotov, decoy on radar" />
              {settings.showDroppedUtilities !== false && (
                <div style={{ display: "flex", flexDirection: "column", gap: 8, padding: "6px 0 4px 12px", borderLeft: "2px solid var(--bg-border-dim)" }}>
                  <Slider label="Icon Size" value={settings.droppedUtilitySize ?? 1.0} min={0.3} max={3.0} step={0.1}
                    onChange={e => upd("droppedUtilitySize", parseFloat(e.target.value))}
                    color="var(--t-color)" format={v => `${v.toFixed(1)}×`} />
                  <Slider label="Icon Opacity" value={settings.droppedUtilityOpacity ?? 0.92} min={0.1} max={1.0} step={0.05}
                    onChange={e => upd("droppedUtilityOpacity", parseFloat(e.target.value))}
                    color="var(--t-color)" format={v => `${(v*100).toFixed(0)}%`} />
                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                    <span style={{ fontSize: 12, fontWeight: 600, color: "var(--text-secondary)" }}>Fallback Color</span>
                    <input type="color" value={settings.droppedUtilityColor ?? "#94a3b8"} onChange={e => upd("droppedUtilityColor", e.target.value)} style={{ width: 40, height: 24, border: "1px solid var(--bg-border)", borderRadius: 4, padding: 2 }} />
                  </div>
                </div>
              )}
              <Toggle label="Smoke Overlay"  checked={settings.showSmoke          ?? true} onChange={e => upd("showSmoke",          e.target.checked)} desc="Deployed smoke cloud area" />
              <Toggle label="Fire Overlay"   checked={settings.showFire           ?? true} onChange={e => upd("showFire",           e.target.checked)} desc="Molotov / incendiary area" />
              <Toggle label="Grenade Labels" checked={settings.showGrenadeLabels  ?? true} onChange={e => upd("showGrenadeLabels",  e.target.checked)} desc="SMK / HE / FLB type labels" />
              <Toggle label="Bomb Timer"     checked={settings.showBombTimer      ?? true} onChange={e => upd("showBombTimer",      e.target.checked)} desc="Countdown when bomb planted" />
              <Toggle label="Kill Feed"      checked={settings.showKillFeed       ?? true} onChange={e => upd("showKillFeed",       e.target.checked)} desc="Kill events corner" />
              <Toggle label="Follow Yourself" checked={settings.followYourself ?? false} onChange={e => upd("followYourself", e.target.checked)} desc="Auto-center radar on your player" />
              {settings.followYourself && (
                <>
                  <Toggle label="Rotate with Player" checked={settings.followYourselfRotation ?? false} onChange={e => upd("followYourselfRotation", e.target.checked)} desc="Rotate the map so your view direction faces up" />
                  <Slider label="Follow Zoom" value={settings.followZoom ?? 3.5} min={1.5} max={8} step={0.5}
                    onChange={e => upd("followZoom", parseFloat(e.target.value))}
                    color="var(--ct-color)" format={v => `${v.toFixed(1)}×`} />
                </>
              )}
              <Toggle label="Auto Zoom"      checked={settings.autoZoom           ?? false} onChange={e => upd("autoZoom",          e.target.checked)} desc="Follow alive players automatically" />
              <Toggle label="Advisories"     checked={settings.showAdvisories     ?? true} onChange={e => upd("showAdvisories",     e.target.checked)} desc="Sole survivor, plant, defuse alerts" />
              <Toggle label="Picture-in-Picture" checked={settings.showPip ?? false} onChange={e => upd("showPip", e.target.checked)} desc="Floating radar overlay" />
            </div>

            <Divider />

            {/* ── SIZES ── */}
            <SectionLabel>Sizes</SectionLabel>
            <Divider />
            <div style={{ display: "flex", flexDirection: "column", gap: 16, paddingTop: 4 }}>
              <Slider label="Player Size" value={settings.dotSize ?? 1} min={0.5} max={10.0} step={0.1}
                onChange={e => upd("dotSize", parseFloat(e.target.value))}
                color="var(--t-color)" format={v => `${v.toFixed(1)}×`} />
              <Slider label="Bomb Size" value={settings.bombSize ?? 1} min={0.1} max={2} step={0.1}
                onChange={e => upd("bombSize", parseFloat(e.target.value))}
                color="var(--hp-low)" format={v => `${v.toFixed(1)}×`} />
              <Slider label="View Cone Length" value={settings.coneLength ?? 1} min={0.5} max={3} step={0.1}
                onChange={e => upd("coneLength", parseFloat(e.target.value))}
                color="var(--ct-color)" format={v => `${v.toFixed(1)}×`} />

            <Divider />

            {/* ── MAP IMAGE (Group 1) ── */}
            <SectionLabel>Map Image</SectionLabel>
            <Divider />
            <div style={{ display: "flex", flexDirection: "column", gap: 16, paddingTop: 4 }}>
              <Slider label="Brightness" value={settings.mapBrightness ?? 1} min={0.2} max={2} step={0.05}
                onChange={e => upd("mapBrightness", parseFloat(e.target.value))}
                color="var(--ct-color)" format={v => `${(v*100).toFixed(0)}%`} />
              <Slider label="Contrast" value={settings.mapContrast ?? 1} min={0.5} max={2} step={0.05}
                onChange={e => upd("mapContrast", parseFloat(e.target.value))}
                color="var(--ct-color)" format={v => `${(v*100).toFixed(0)}%`} />
              <Slider label="Map Opacity" value={settings.mapOpacity ?? 1} min={0.1} max={1} step={0.05}
                onChange={e => upd("mapOpacity", parseFloat(e.target.value))}
                color="var(--ct-color)" format={v => `${(v*100).toFixed(0)}%`} />
              <Slider label="Map Blur" value={settings.mapBlur ?? 0} min={0} max={10} step={0.5}
                onChange={e => upd("mapBlur", parseFloat(e.target.value))}
                color="var(--ct-color)" format={v => `${v.toFixed(1)}px`} />
            </div>

            <Divider />

            {/* ── DISPLAY OPACITY (Group 1) ── */}
            <SectionLabel>Display Opacity</SectionLabel>
            <Divider />
            <div style={{ display: "flex", flexDirection: "column", gap: 16, paddingTop: 4 }}>
              <Slider label="Names" value={settings.nameOpacity ?? 1} min={0.1} max={1} step={0.05}
                onChange={e => upd("nameOpacity", parseFloat(e.target.value))}
                color="var(--t-color)" format={v => `${(v*100).toFixed(0)}%`} />
              <Slider label="Flag Indicators" value={settings.indicatorOpacity ?? 1} min={0.1} max={1} step={0.05}
                onChange={e => upd("indicatorOpacity", parseFloat(e.target.value))}
                color="var(--t-color)" format={v => `${(v*100).toFixed(0)}%`} />
              <Slider label="Weapon Icons" value={settings.weaponIconOpacity ?? 1} min={0.1} max={1} step={0.05}
                onChange={e => upd("weaponIconOpacity", parseFloat(e.target.value))}
                color="var(--t-color)" format={v => `${(v*100).toFixed(0)}%`} />
            </div>

            <Divider />

            {/* ── THEME / COLORS (Group 2) ── */}
            <SectionLabel>Theme & Colors</SectionLabel>
            <Divider />
            <div style={{ display: "flex", flexDirection: "column", gap: 16, paddingTop: 4 }}>
              <Slider label="Background Dim" value={settings.backgroundDim ?? 0} min={0} max={0.9} step={0.05}
                onChange={e => upd("backgroundDim", parseFloat(e.target.value))}
                color="var(--hp-low)" format={v => `${(v*100).toFixed(0)}%`} />
              <Slider label="Dot Opacity" value={settings.dotOpacity ?? 1} min={0.2} max={1} step={0.05}
                onChange={e => upd("dotOpacity", parseFloat(e.target.value))}
                color="var(--t-color)" format={v => `${(v*100).toFixed(0)}%`} />
              <Slider label="Dot Glow" value={settings.dotGlow ?? 0} min={0} max={1} step={0.05}
                onChange={e => upd("dotGlow", parseFloat(e.target.value))}
                color="var(--ct-color)" format={v => `${(v*100).toFixed(0)}%`} />
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <span style={{ fontSize: 12, fontWeight: 600, color: "var(--text-secondary)" }}>Enemy Color</span>
                <input type="color" value={settings.enemyColor ?? "#FF4444"} onChange={e => upd("enemyColor", e.target.value)} style={{ width: 40, height: 24, border: "1px solid var(--bg-border)", borderRadius: 4, padding: 2 }} />
              </div>
            </div>

            <Divider />

            {/* ── VIEW CONE (Group 3) ── */}
            <SectionLabel>View Cone</SectionLabel>
            <Divider />
            <div style={{ display: "flex", flexDirection: "column" }}>
              <Toggle label="Narrow When Scoped" checked={settings.scopedConeNarrow !== false} onChange={e => upd("scopedConeNarrow", e.target.checked)} desc="Tighten + extend cone while a player is scoped/zoomed" />
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 16, paddingTop: 4 }}>
              <Slider label="Cone Width" value={settings.coneWidth ?? 1} min={0.3} max={2} step={0.1}
                onChange={e => upd("coneWidth", parseFloat(e.target.value))}
                color="var(--ct-color)" format={v => `${v.toFixed(1)}×`} />
              <Slider label="Cone Opacity" value={settings.coneOpacity ?? 1} min={0.1} max={1} step={0.05}
                onChange={e => upd("coneOpacity", parseFloat(e.target.value))}
                color="var(--ct-color)" format={v => `${(v*100).toFixed(0)}%`} />
            </div>

            <Divider />

            {/* ── SOUND ALERTS (Group 4) ── */}
            <SectionLabel>Sound Alerts</SectionLabel>
            <Divider />
            <div style={{ display: "flex", flexDirection: "column" }}>
              <Toggle label="Sound Alerts" checked={settings.soundAlerts ?? false} onChange={e => upd("soundAlerts", e.target.checked)} desc="Beep on bomb plant & sole survivor" />
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 16, paddingTop: 4 }}>
              <Slider label="Volume" value={settings.soundVolume ?? 0.5} min={0} max={1} step={0.05}
                onChange={e => upd("soundVolume", parseFloat(e.target.value))}
                color="var(--hp-high)" format={v => `${(v*100).toFixed(0)}%`} />
            </div>

            <Divider />

            {/* ── INDICATORS ── */}
            <SectionLabel>Indicators</SectionLabel>
            <Divider />
            <div style={{ display: "flex", flexDirection: "column", gap: 16, paddingTop: 4 }}>
              <Slider label="Indicator Size" value={settings.indicatorSize ?? 1} min={0.5} max={3} step={0.1}
                onChange={e => upd("indicatorSize", parseFloat(e.target.value))}
                color="var(--t-color)" format={v => `${v.toFixed(1)}×`} />
              <Slider label="Advisories Opacity" value={settings.advisoriesOpacity ?? 1.0} min={0.1} max={1.0} step={0.05}
                onChange={e => upd("advisoriesOpacity", parseFloat(e.target.value))}
                color="var(--t-color)" format={v => `${(v*100).toFixed(0)}%`} />
              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                <div style={{ fontSize: 10, fontWeight: 600, color: "var(--text-secondary)", marginBottom: 4 }}>
                  Ducking Color
                </div>
                <input type="color" value={settings.indicatorColors?.ducking ?? "#4a9eff"} onChange={e => upd("indicatorColors", { ...(settings.indicatorColors ?? {}), ducking: e.target.value })} style={{ width: 40, height: 24, border: "1px solid var(--bg-border)", borderRadius: 4, padding: 2 }} />
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                <div style={{ fontSize: 10, fontWeight: 600, color: "var(--text-secondary)", marginBottom: 4 }}>
                  Shifting Color
                </div>
                <input type="color" value={settings.indicatorColors?.shifting ?? "#fbbf24"} onChange={e => upd("indicatorColors", { ...(settings.indicatorColors ?? {}), shifting: e.target.value })} style={{ width: 40, height: 24, border: "1px solid var(--bg-border)", borderRadius: 4, padding: 2 }} />
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                <div style={{ fontSize: 10, fontWeight: 600, color: "var(--text-secondary)", marginBottom: 4 }}>
                  Scoped Color
                </div>
                <input type="color" value={settings.indicatorColors?.scoped ?? "#10b981"} onChange={e => upd("indicatorColors", { ...(settings.indicatorColors ?? {}), scoped: e.target.value })} style={{ width: 40, height: 24, border: "1px solid var(--bg-border)", borderRadius: 4, padding: 2 }} />
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                <div style={{ fontSize: 10, fontWeight: 600, color: "var(--text-secondary)", marginBottom: 4 }}>
                  Reloading Color
                </div>
                <input type="color" value={settings.indicatorColors?.reloading ?? "#ef4444"} onChange={e => upd("indicatorColors", { ...(settings.indicatorColors ?? {}), reloading: e.target.value })} style={{ width: 40, height: 24, border: "1px solid var(--bg-border)", borderRadius: 4, padding: 2 }} />
              </div>
            </div>

            <Divider />

            {/* ── AUTO ZOOM ── */}
            <SectionLabel>Auto Zoom</SectionLabel>
            <Divider />
            <div style={{ display: "flex", flexDirection: "column", gap: 16, paddingTop: 4 }}>
              <Slider
                label="Zoom Padding"
                value={settings.autoZoomPadding ?? 0.15}
                min={0.01}
                max={0.3}
                step={0.01}
                onChange={e => upd("autoZoomPadding", parseFloat(e.target.value))}
                color="var(--ct-color)"
                format={v => `${(v*100).toFixed(0)}%`}
                desc="Space around players edge of screen"
              />
              <Slider
                label="Min Zoom"
                value={settings.autoZoomMinZoom ?? 1.0}
                min={1.0}
                max={3.0}
                step={0.1}
                onChange={e => upd("autoZoomMinZoom", parseFloat(e.target.value))}
                color="var(--t-color)"
                format={v => `${v.toFixed(1)}×`}
              />
              <Slider
                label="Max Zoom"
                value={settings.autoZoomMaxZoom ?? 6.0}
                min={2.0}
                max={10.0}
                step={0.5}
                onChange={e => upd("autoZoomMaxZoom", parseFloat(e.target.value))}
                color="var(--hp-low)"
                format={v => `${v.toFixed(1)}×`}
              />
            </div>
            </div>

            {isMobile && (
              <button onClick={() => setIsOpen(false)} style={{
                display: "block", width: "100%", marginTop: 20, padding: "10px",
                borderRadius: 6, background: "var(--ct-color)", border: "none",
                color: "white", fontSize: 12, fontWeight: 800, letterSpacing: "0.1em",
                textTransform: "uppercase", cursor: "pointer", fontFamily: "inherit",
              }}>
                Done
              </button>
            )}
          </div>
        </>
      )}
    </div>
  );
};

export default SettingsButton;