/* ===== Shared small components & icons ===== */
const { useState, useEffect, useRef } = React;

function EyeLogo({size=30}){
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
      <path d="M4 24 C12 14, 28 14, 36 24" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"/>
      <circle cx="20" cy="22.5" r="6.2" stroke="currentColor" strokeWidth="2.4"/>
      <circle cx="20" cy="22.5" r="2.1" fill="currentColor"/>
      <path d="M30 12 l2.4 -4" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"/>
    </svg>
  );
}

function RadarIcon({size=44}){
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none">
      <circle cx="24" cy="24" r="19" stroke="currentColor" strokeWidth="2" opacity="0.5"/>
      <circle cx="24" cy="24" r="11" stroke="currentColor" strokeWidth="2" opacity="0.5"/>
      <circle cx="24" cy="24" r="2.6" fill="currentColor"/>
      <path d="M24 24 L24 5 A19 19 0 0 1 40 14 Z" fill="currentColor" opacity="0.28"/>
      <path d="M24 24 L24 5" stroke="currentColor" strokeWidth="2"/>
    </svg>
  );
}

/* ---------- toggle / segmented ---------- */
function Toggle({on, onClick}){
  return <div className={"tg"+(on?" on":"")} onClick={onClick}></div>;
}
function Seg({opts, value, onChange}){
  return (
    <div className="seg">
      {opts.map(o=>(
        <button key={o} className={value===o?"act":""} onClick={()=>onChange(o)}>{o}</button>
      ))}
    </div>
  );
}

/* ---------- LEFT PANEL ---------- */
const LEFT_SECTIONS = [
  {title:'Players', count:'Enable 5/5', rows:[
    {k:'p_enable', type:'tg', lbl:'Enable', def:true},
    {k:'p_kd', type:'seg', lbl:'Show K/D', opts:['K/D','Statistic'], def:'K/D'},
    {k:'p_hp', type:'tg', lbl:'HP Status', def:true},
    {k:'p_shield', type:'tg', lbl:'Shield Status', def:true},
    {k:'p_names', type:'seg', lbl:'Heroes', opts:['NAME','ICON'], def:'ICON'},
    {k:'p_souls', type:'tg', lbl:'Show Souls', def:true},
    {k:'p_range', type:'seg', lbl:'Range', opts:['SHORT','LONG'], def:'SHORT'},
  ]},
  {title:'Items', count:'Enable 4/4', rows:[
    {k:'i_enable', type:'tg', lbl:'Enable', def:true},
    {k:'i_tier', type:'tg', lbl:'Tier Colors', def:true},
    {k:'i_active', type:'tg', lbl:'Active Items', def:true},
    {k:'i_imbued', type:'tg', lbl:'Imbued Only', def:false},
  ]},
  {title:'Abilities', count:'Enable 2/2', rows:[
    {k:'a_enable', type:'tg', lbl:'Show Cooldowns', def:true},
    {k:'a_ult', type:'tg', lbl:'Highlight Ultimate', def:true},
  ]},
  {title:'HUD', count:'Enable 3/3', rows:[
    {k:'h_time', type:'seg', lbl:'Match Time', opts:['SECONDS','MIN/SEC'], def:'MIN/SEC'},
    {k:'h_party', type:'tg', lbl:'Show Party Color', def:true},
    {k:'h_id', type:'tg', lbl:'Show ID', def:true},
  ]},
];

function LeftPanel(){
  const init = {};
  LEFT_SECTIONS.forEach(s=>s.rows.forEach(r=>init[r.k]=r.def));
  const [st,setSt]=useState(init);
  const set=(k,v)=>setSt(p=>({...p,[k]:v}));
  return (
    <aside className="panel left">
      <div className="brand">
        <img className="brand-logo" src="logo.svg" alt="CURSE" />
        <span className="tag">RADAR</span>
      </div>
      <div className="brand-rule"></div>
      <div className="settings">
        {LEFT_SECTIONS.map(sec=>(
          <div key={sec.title}>
            <div className="sec-head">
              <div className="t">{sec.title}</div>
              <div className="c">{sec.count}</div>
            </div>
            {sec.rows.map(r=>(
              r.type==='tg' ? (
                <div className="row" key={r.k}>
                  <span className="lbl">{r.lbl}</span>
                  <Toggle on={st[r.k]} onClick={()=>set(r.k,!st[r.k])}/>
                </div>
              ) : (
                <div className="row sub" key={r.k} style={{display:'block'}}>
                  <span className="lbl">{r.lbl}</span>
                  <Seg opts={r.opts} value={st[r.k]} onChange={v=>set(r.k,v)}/>
                </div>
              )
            ))}
          </div>
        ))}
      </div>
      <div className="collapse">«</div>
    </aside>
  );
}

Object.assign(window, { EyeLogo, RadarIcon, Toggle, Seg, LeftPanel });