// Floating tweaks panel: palette + density. Persists to localStorage.
// Exposed globals: useTweaks, TweaksPanel, TweakSection, TweakRadio.

const TWEAKS_STORAGE_KEY = 'coffee_stats.tweaks.v1';

function useTweaks(defaults){
  const [t, setT] = React.useState(() => {
    try {
      const raw = localStorage.getItem(TWEAKS_STORAGE_KEY);
      if(!raw) return defaults;
      const parsed = JSON.parse(raw);
      return { ...defaults, ...parsed };
    } catch { return defaults; }
  });
  const setTweak = (key, value) => {
    setT(prev => {
      const next = { ...prev, [key]: value };
      try { localStorage.setItem(TWEAKS_STORAGE_KEY, JSON.stringify(next)); } catch {}
      return next;
    });
  };
  return [t, setTweak];
}

function TweaksPanel({ title='Tweaks', children }){
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <style>{`
        .tweaks-fab{
          position:fixed; bottom:18px; right:18px; z-index:50;
          width:42px; height:42px; border-radius:50%;
          background: var(--surface-2); color: var(--ink);
          border:.5px solid var(--line-strong);
          box-shadow: 0 8px 22px -10px rgba(0,0,0,.6);
          font-family:'JetBrains Mono',monospace; font-size:18px;
          display:flex; align-items:center; justify-content:center;
          cursor:pointer; user-select:none;
        }
        .tweaks-fab:hover{ filter: brightness(1.15); }
        .tweaks-panel{
          position:fixed; bottom:74px; right:18px; z-index:50;
          width:260px; padding:14px 16px 18px;
          background: var(--surface); border:.5px solid var(--line-strong);
          border-radius:12px; box-shadow: 0 18px 50px -20px rgba(0,0,0,.7);
          font-family:'Inter',sans-serif; color:var(--ink);
        }
        .tweaks-panel h3{
          margin:0 0 12px; font-family:'Fraunces',serif; font-style:italic;
          font-weight:500; font-size:15px; color:var(--ink-dim);
        }
        .tweaks-section{ margin-bottom:14px; }
        .tweaks-section:last-child{ margin-bottom:0; }
        .tweaks-section-lbl{
          font-family:'JetBrains Mono',monospace; font-size:10px;
          letter-spacing:.12em; text-transform:uppercase;
          color:var(--ink-mute); margin-bottom:6px;
        }
        .tweaks-radio{
          display:flex; gap:6px; flex-wrap:wrap;
        }
        .tweaks-radio label{
          flex:1; min-width:60px; text-align:center; cursor:pointer;
          padding:6px 8px; border-radius:6px;
          border:.5px solid var(--line); background:var(--surface-2);
          font-size:11px; color:var(--ink-dim);
          transition: all .12s;
        }
        .tweaks-radio label:hover{ filter:brightness(1.1); }
        .tweaks-radio label.active{
          background: color-mix(in oklab, var(--gold) 18%, var(--surface-2));
          border-color: color-mix(in oklab, var(--gold) 40%, var(--line));
          color:var(--ink);
        }
        .tweaks-radio input{ display:none; }
      `}</style>
      <button className="tweaks-fab" onClick={()=>setOpen(!open)} title={title}>
        {open ? '×' : '⚙'}
      </button>
      {open && (
        <div className="tweaks-panel">
          <h3>{title}</h3>
          {children}
        </div>
      )}
    </>
  );
}

function TweakSection({ label, children }){
  return (
    <div className="tweaks-section">
      <div className="tweaks-section-lbl">{label}</div>
      {children}
    </div>
  );
}

function TweakRadio({ label, value, options, onChange }){
  return (
    <div className="tweaks-radio" role="radiogroup" aria-label={label}>
      {options.map(o => (
        <label key={o.value} className={value===o.value ? 'active' : ''}>
          <input type="radio" name={label} value={o.value}
                 checked={value===o.value}
                 onChange={()=>onChange(o.value)}/>
          {o.label}
        </label>
      ))}
    </div>
  );
}