// Fill by Flow — Tweaks panel

const { useState: useStT, useEffect: useEfT } = React;

function TweaksPanel({ tweaks, setTweaks, visible }) {
  if (!visible) return null;

  const set = (k, v) => setTweaks(prev => ({ ...prev, [k]: v }));

  return (
    <div style={{
      position:'fixed', right:12, bottom:12, zIndex:200,
      width:270, maxHeight:'82vh', overflowY:'auto',
      background:'var(--panel)',
      border:'2px solid var(--accent)',
      fontFamily:"'DM Mono',monospace", color:'var(--text)'
    }}>
      <div style={{
        padding:'10px 12px', borderBottom:'2px solid var(--accent)',
        background:'rgba(0,229,255,0.04)',
        display:'flex', justifyContent:'space-between', alignItems:'center'
      }}>
        <div style={{fontWeight:500, fontSize:10, letterSpacing:'0.24em', color:'var(--accent)', textTransform:'uppercase'}}>
          TWEAKS
        </div>
        <div style={{fontSize:8, color:'var(--muted)', letterSpacing:'0.18em', textTransform:'uppercase'}}>
          FILL · FLOW
        </div>
      </div>

      {/* Accent */}
      <Section label="Accent Color">
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:4}}>
          {Object.entries(ACCENTS).map(([k, a]) => (
            <button key={k} onClick={() => set('accent', k)} style={{
              padding:'8px 4px',
              background: tweaks.accent === k ? a.dim : 'var(--panel-2)',
              border: tweaks.accent === k ? `2px solid ${a.hex}` : '1px solid var(--border-h)',
              cursor:'pointer',
              display:'flex', flexDirection:'column', alignItems:'center', gap:5
            }}>
              <div style={{width:24, height:24, background:a.hex, boxShadow:`0 0 10px ${a.hex}55`}} />
              <div style={{fontSize:7, color: tweaks.accent === k ? a.hex : 'var(--muted)', letterSpacing:'0.1em'}}>
                {a.name.split(' ')[0]}
              </div>
            </button>
          ))}
        </div>
      </Section>

      {/* Density */}
      <Section label="Visual Density">
        {['industrial', 'medium', 'heavy'].map(d => (
          <TweakOpt key={d} active={tweaks.density === d} onClick={() => set('density', d)}>
            {d === 'industrial' ? 'INDUSTRIAL · Slab, no fluid cues' :
             d === 'medium'     ? 'MEDIUM · Fill meters + menisci' :
                                   'HEAVY · Sloshing + drips'}
          </TweakOpt>
        ))}
      </Section>

      {/* Units */}
      <Section label="Units">
        {['us', 'metric'].map(u => (
          <TweakOpt key={u} active={tweaks.units === u} onClick={() => set('units', u)}>
            {u === 'us' ? 'US · Quarts / Gallons' : 'METRIC · Liters'}
          </TweakOpt>
        ))}
      </Section>

      {/* Layout */}
      <Section label="Job Table Layout">
        {['dense', 'cards'].map(l => (
          <TweakOpt key={l} active={tweaks.layout === l} onClick={() => set('layout', l)}>
            {l === 'dense' ? 'DENSE · Checkbox rows' : 'CARDS · Spaced cards'}
          </TweakOpt>
        ))}
      </Section>

      {/* Demo shortcuts */}
      <Section label="Jump To Screen">
        {[
          ['listen', 'LISTEN (idle)'],
          ['single', 'SINGLE FLUID'],
          ['job', 'JOB TABLE'],
          ['capacity', 'CAPACITY ONLY'],
          ['safety', 'SAFETY WALL (DOT)']
        ].map(([v, label]) => (
          <TweakOpt key={v} active={tweaks.screen === v} onClick={() => set('screen', v)}>
            {label}
          </TweakOpt>
        ))}
      </Section>

      <div style={{padding:'8px 12px', borderTop:'1px solid var(--border)', fontSize:8, color:'var(--muted)', letterSpacing:'0.12em', lineHeight:1.5}}>
        Toggle Tweaks from toolbar
      </div>
    </div>
  );
}

function Section({ label, children }) {
  return (
    <div style={{padding:'10px 12px', borderBottom:'1px solid var(--border)'}}>
      <div style={{fontSize:8, color:'var(--muted)', letterSpacing:'0.22em', textTransform:'uppercase', marginBottom:7}}>
        {label}
      </div>
      {children}
    </div>
  );
}

function TweakOpt({ active, onClick, children }) {
  return (
    <button onClick={onClick} style={{
      width:'100%', padding:'7px 9px', marginBottom:3,
      background: active ? 'var(--acc-dim)' : 'var(--panel-2)',
      border: active ? '1px solid var(--accent)' : '1px solid var(--border-h)',
      color: active ? 'var(--accent)' : 'var(--text-d)',
      fontFamily:"'DM Mono',monospace", fontSize:9,
      letterSpacing:'0.08em', textAlign:'left', cursor:'pointer',
      textTransform:'uppercase'
    }}>
      {children}
    </button>
  );
}

Object.assign(window, { TweaksPanel });