// Tweaks — accent (yellow/blue/both) + hero variant (classic/bold)

function useTweaks(){
  const [state, setState] = React.useState(()=>({ ...(window.TWEAK_DEFAULTS||{}) }));
  const [visible, setVisible] = React.useState(false);

  React.useEffect(()=>{
    const onMsg = (e)=>{
      const d = e.data || {};
      if (d.type==='__activate_edit_mode') setVisible(true);
      if (d.type==='__deactivate_edit_mode') setVisible(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({type:'__edit_mode_available'}, '*');
    return ()=>window.removeEventListener('message', onMsg);
  },[]);

  React.useEffect(()=>{
    const root = document.documentElement;
    const a = state.accent;
    if (a==='yellow') {
      root.style.setProperty('--accent','var(--yellow)');
      root.style.setProperty('--accent-2','var(--yellow)');
    } else if (a==='blue') {
      root.style.setProperty('--accent','var(--blue)');
      root.style.setProperty('--accent-2','var(--blue)');
    } else {
      root.style.setProperty('--accent','var(--yellow)');
      root.style.setProperty('--accent-2','var(--blue)');
    }
  }, [state.accent]);

  const set = (k,v)=>{
    const next = {...state, [k]:v};
    setState(next);
    window.parent.postMessage({type:'__edit_mode_set_keys', edits:{[k]:v}}, '*');
  };

  return { state, set, visible };
}

function TweaksPanel({state, set, visible}){
  if (!visible) return null;
  const Row = ({label, children})=>(
    <div style={{display:'flex',flexDirection:'column',gap:8}}>
      <div className="mono" style={{fontSize:10,color:'var(--fg-mute)',letterSpacing:'.12em'}}>{label}</div>
      <div style={{display:'flex',gap:6,flexWrap:'wrap'}}>{children}</div>
    </div>
  );
  const Opt = ({active, onClick, tone, children})=>(
    <button
      onClick={onClick}
      style={{
        padding:'8px 12px',
        borderRadius:8,
        border: active?`1px solid ${tone==='yellow'?'var(--yellow)':tone==='blue'?'var(--blue)':'var(--fg)'}`:'1px solid var(--line-2)',
        background: active?(tone==='yellow'?'var(--yellow)':tone==='blue'?'var(--blue)':'var(--bg-2)'):'transparent',
        color: active?(tone==='yellow'?'#0a0a0b':'#fff'):'var(--fg-dim)',
        fontFamily:'Manrope,sans-serif',fontSize:12,fontWeight:600,
        cursor:'pointer',
      }}>{children}</button>
  );
  return (
    <div style={{
      position:'fixed',right:20,bottom:40,zIndex:100,
      width:280,
      background:'rgba(16,16,18,0.95)',
      backdropFilter:'blur(14px)',
      border:'1px solid var(--line-2)',
      borderRadius:14,
      boxShadow:'0 20px 60px rgba(0,0,0,0.7)',
      overflow:'hidden',
    }}>
      <div style={{
        padding:'10px 14px',
        background:'var(--bg-2)',
        borderBottom:'1px solid var(--line)',
        display:'flex',alignItems:'center',gap:8,
        fontFamily:'Manrope,sans-serif',fontSize:11,color:'var(--fg-mute)',
      }}>
        <span style={{color:'var(--yellow)'}}>▸</span>
        <span style={{letterSpacing:'.1em'}}>Tweaks</span>
        <span style={{marginLeft:'auto'}}>vibecode.config</span>
      </div>
      <div style={{padding:16,display:'flex',flexDirection:'column',gap:18}}>
        <Row label="accent">
          <Opt active={state.accent==='yellow'} onClick={()=>set('accent','yellow')} tone="yellow">yellow</Opt>
          <Opt active={state.accent==='blue'} onClick={()=>set('accent','blue')} tone="blue">blue</Opt>
          <Opt active={state.accent==='both'} onClick={()=>set('accent','both')}>both</Opt>
        </Row>
        <Row label="hero variant">
          <Opt active={state.heroVariant==='reference'} onClick={()=>set('heroVariant','reference')} tone="yellow">reference</Opt>
          <Opt active={state.heroVariant==='classic'} onClick={()=>set('heroVariant','classic')}>classic</Opt>
          <Opt active={state.heroVariant==='bold'} onClick={()=>set('heroVariant','bold')}>bold</Opt>
        </Row>
        <Row label="hero pills">
          <Opt active={state.pillsVariant==='glass'} onClick={()=>set('pillsVariant','glass')}>glass</Opt>
          <Opt active={state.pillsVariant==='colored'} onClick={()=>set('pillsVariant','colored')} tone="yellow">colored</Opt>
          <Opt active={state.pillsVariant==='stats'} onClick={()=>set('pillsVariant','stats')}>stats</Opt>
        </Row>
        <Row label="">
          <Opt active={state.pillsVariant==='terminal'} onClick={()=>set('pillsVariant','terminal')}>terminal</Opt>
          <Opt active={state.pillsVariant==='badges'} onClick={()=>set('pillsVariant','badges')} tone="blue">badges</Opt>
          <Opt active={state.pillsVariant==='banner'} onClick={()=>set('pillsVariant','banner')}>banner</Opt>
          <Opt active={state.pillsVariant==='cards'} onClick={()=>set('pillsVariant','cards')}>cards</Opt>
        </Row>
      </div>
    </div>
  );
}

Object.assign(window, { useTweaks, TweaksPanel });