/* BasedMTA shared ImGui components. Babel-transpiled. */
/* All names prefixed with Bmta to avoid global collisions when embedded. */

const { useState, useRef, useEffect, useCallback, useMemo } = React;

// ---------- Icon: tiny check tick ----------
function BmtaCheckIcon({ size = 10 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 10 10" fill="none">
      <path
        d="M1.5 5.2 L4 7.5 L8.5 2.5"
        stroke="#5b9eff"
        strokeWidth="1.8"
        strokeLinecap="square"
        strokeLinejoin="miter"
        fill="none" />
      
    </svg>);

}

// ---------- Checkbox ----------
function BmtaCheck({ checked, onChange, label, disabled }) {
  return (
    <label
      className={"bmta-check" + (checked ? " checked" : "")}
      onClick={() => !disabled && onChange && onChange(!checked)}
      style={disabled ? { opacity: 0.4, cursor: "not-allowed" } : null}>
      
      <span className="bmta-check-box">{checked ? <BmtaCheckIcon /> : null}</span>
      {label != null && <span>{label}</span>}
    </label>);

}

// ---------- Radio (single in a group) ----------
function BmtaRadio({ checked, onChange, label }) {
  return (
    <label
      className={"bmta-radio" + (checked ? " checked" : "")}
      onClick={() => onChange && onChange(true)}>
      
      <span className="bmta-radio-dot" />
      {label != null && <span>{label}</span>}
    </label>);

}

// ---------- Button ----------
function BmtaButton({ children, onClick, variant, wide, disabled, style }) {
  const cls = ["bmta-btn"];
  if (variant) cls.push(variant);
  if (wide) cls.push("wide");
  return (
    <button className={cls.join(" ")} onClick={onClick} disabled={disabled} style={style}>
      {children}
    </button>);

}

// ---------- Text input ----------
function BmtaInput({ value, onChange, placeholder, type = "text", style, readOnly, monospaceCenter }) {
  return (
    <input
      type={type}
      className="bmta-input"
      value={value}
      placeholder={placeholder}
      onChange={(e) => onChange && onChange(e.target.value)}
      readOnly={readOnly}
      style={Object.assign({ textAlign: monospaceCenter ? "center" : "left" }, style || {})} />);


}

// ---------- Select / Dropdown ----------
function BmtaSelect({ value, options, onChange, width }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    if (!open) return;
    const f = (e) => {if (ref.current && !ref.current.contains(e.target)) setOpen(false);};
    document.addEventListener("mousedown", f);
    return () => document.removeEventListener("mousedown", f);
  }, [open]);
  const display = (() => {
    const found = options.find((o) => typeof o === "string" ? o === value : o.value === value);
    if (!found) return value;
    return typeof found === "string" ? found : found.label;
  })();
  return (
    <div className="bmta-select" style={{ width }} ref={ref} onClick={() => setOpen((o) => !o)}>
      <span className="bmta-select-value">{display}</span>
      <span className="bmta-select-caret">▼</span>
      {open &&
      <div className="bmta-select-menu" onClick={(e) => e.stopPropagation()}>
          {options.map((o, i) => {
          const v = typeof o === "string" ? o : o.value;
          const l = typeof o === "string" ? o : o.label;
          return (
            <div
              key={i}
              className={"bmta-select-option" + (v === value ? " selected" : "")}
              onClick={() => {onChange && onChange(v);setOpen(false);}}>
              
                {l}
              </div>);

        })}
        </div>
      }
    </div>);

}

// ---------- Slider ----------
function BmtaSlider({ value, min = 0, max = 100, step = 1, onChange, format, width }) {
  const ref = useRef(null);
  const draggingRef = useRef(false);

  const setFromX = useCallback(
    (clientX) => {
      const el = ref.current;
      if (!el) return;
      const r = el.getBoundingClientRect();
      const t = Math.max(0, Math.min(1, (clientX - r.left) / r.width));
      let v = min + t * (max - min);
      if (step) v = Math.round(v / step) * step;
      v = Math.max(min, Math.min(max, v));
      onChange && onChange(v);
    },
    [min, max, step, onChange]
  );

  const onDown = (e) => {
    draggingRef.current = true;
    setFromX(e.clientX);
    const move = (ev) => draggingRef.current && setFromX(ev.clientX);
    const up = () => {
      draggingRef.current = false;
      window.removeEventListener("mousemove", move);
      window.removeEventListener("mouseup", up);
    };
    window.addEventListener("mousemove", move);
    window.addEventListener("mouseup", up);
  };

  const pct = (value - min) / (max - min) * 100;
  const fmt = typeof format === "function" ? format(value) : String(value) + (format || "");

  // Thumb is 9px wide and we want it fully visible at both ends:
  // shift left by 0px at pct=0 and by thumbWidth at pct=100 (linear).
  const thumbW = 9;
  const thumbLeft = `calc(${pct}% - ${pct / 100 * thumbW}px)`;

  return (
    <div className="bmta-slider" ref={ref} onMouseDown={onDown} style={{ width }}>
      <div className="bmta-slider-fill" style={{ width: pct + "%" }} />
      <div className="bmta-slider-thumb" style={{ left: thumbLeft }} />
      <div className="bmta-slider-value">{fmt}</div>
    </div>);

}

// ---------- Sub-header ("General", "Tuning"...) ----------
function BmtaSubheader({ children }) {
  return <div className="bmta-subheader" style={{ color: "rgb(58, 125, 204)", borderColor: "rgb(29, 29, 33)" }}>{children}</div>;
}

// ---------- Top tabs ----------
function BmtaTabs({ tabs, active, onSelect }) {
  return (
    <div className="bmta-tabs">
      {tabs.map((t) => {
        const id = typeof t === "string" ? t : t.id;
        const label = typeof t === "string" ? t : t.label;
        return (
          <div
            key={id}
            className={"bmta-tab" + (id === active ? " active" : "")}
            onClick={() => onSelect(id)}>
            
            {label}
          </div>);

      })}
    </div>);

}

// ---------- Sidebar (Aimbot/Local/Visuals nav) ----------
function BmtaSidebar({ items, active, onSelect }) {
  return (
    <div className="bmta-sidebar">
      {items.map((it) => {
        const id = typeof it === "string" ? it : it.id;
        const label = typeof it === "string" ? it : it.label;
        const count = typeof it === "object" ? it.count : null;
        return (
          <div
            key={id}
            className={"bmta-sidebar-item" + (id === active ? " active" : "")}
            onClick={() => onSelect(id)}>
            
            {label}
            {count != null && <span className="count">{count}</span>}
          </div>);

      })}
    </div>);

}

// ---------- Sub-tab strip (Logger/Intercept/...) ----------
function BmtaSubtabs({ tabs, active, onSelect }) {
  return (
    <div className="bmta-subtabs">
      {tabs.map((t) =>
      <div
        key={t}
        className={"bmta-subtab" + (t === active ? " active" : "")}
        onClick={() => onSelect(t)}>
        
          {t}
        </div>
      )}
    </div>);

}

// ---------- Status dot ----------
function BmtaDot({ tone = "info" }) {
  return <span className={"bmta-dot " + tone} />;
}

// ---------- Section util ----------
function BmtaField({ label, children }) {
  return (
    <div className="bmta-field">
      <div className="bmta-field-label">{label}</div>
      <div>{children}</div>
    </div>);

}

// ---------- Section row (multi-checkbox row) ----------
function BmtaRow({ children, cols }) {
  const cls = "bmta-row" + (cols === 2 ? " cols-2" : cols === 4 ? " cols-4" : "");
  return <div className={cls}>{children}</div>;
}

// ---------- Profile selector (Save as / Reset) ----------
function BmtaProfileBar({ profile, onProfileChange, onSaveAs, onReset, profiles = ["default", "competitive", "stealth"] }) {
  return (
    <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
      <BmtaSelect value={profile} options={profiles} onChange={onProfileChange} width={140} />
      <BmtaButton onClick={onSaveAs}>Save as</BmtaButton>
      <BmtaButton onClick={onReset}>Reset</BmtaButton>
    </div>);

}

// ---------- Faux placeholder area ----------
function BmtaEmpty({ children }) {
  return <div className="bmta-empty">{children}</div>;
}

// Export to window so panel files can use them
Object.assign(window, {
  BmtaCheck,
  BmtaCheckIcon,
  BmtaRadio,
  BmtaButton,
  BmtaInput,
  BmtaSelect,
  BmtaSlider,
  BmtaSubheader,
  BmtaTabs,
  BmtaSidebar,
  BmtaSubtabs,
  BmtaDot,
  BmtaField,
  BmtaRow,
  BmtaProfileBar,
  BmtaEmpty
});