// Tweaks panel
const ACCENT_PRESETS = [
  { name:"Teal",   v:"#2dd4bf" },
  { name:"Sky",    v:"#38bdf8" },
  { name:"Orange", v:"#f97316" },
  { name:"Lime",   v:"#a3e635" },
  { name:"Violet", v:"#a78bfa" },
  { name:"Rose",   v:"#f43f5e" },
];

const MANTRA_SETS = {
  "Action verbs":  ["TRAIN", "FUEL", "RECOVER", "IMPROVE", "WIN", "EMBRACE"],
  "Identity":      ["LEAD", "COMPETE", "ENDURE", "DOMINATE", "RISE", "FOCUS"],
  "Daily":         ["LOG", "EAT", "SLEEP", "REPEAT", "IMPROVE", "PERFORM"],
  "Original":      ["EMBRACE THE CHALLENGE", "OUTWORK YESTERDAY", "STAY CONSISTENT"],
};

const Tweaks = ({ state, setState, visible, onClose }) => {
  if (!visible) return null;
  return (
    <div className="tweaks">
      <h4>
        <span>Tweaks</span>
        <button onClick={onClose} aria-label="close">✕</button>
      </h4>
      <div className="tw-row">
        <label>Accent</label>
        <div className="sw">
          {ACCENT_PRESETS.map(p => (
            <button
              key={p.v}
              onClick={() => setState({ accent: p.v })}
              className={state.accent === p.v ? "on" : ""}
              title={p.name}
              style={{background: p.v}}
            />
          ))}
        </div>
      </div>
      <div className="tw-row">
        <label>Theme</label>
        <div className="sw" style={{gap:8}}>
          {["dark","light"].map(t => (
            <button key={t} onClick={()=>setState({theme:t})}
              style={{
                width:'auto',padding:'6px 12px',borderRadius:8,
                background: state.theme===t ? 'var(--fg)' : 'transparent',
                color: state.theme===t ? 'var(--bg)' : 'var(--fg-dim)',
                fontSize:12,fontWeight:700,textTransform:'uppercase',
                border:'1px solid var(--line-strong)'
              }}>{t}</button>
          ))}
        </div>
      </div>
      <div className="tw-row">
        <label>Mantra set</label>
        <select value={state.mantraSet} onChange={e=>setState({mantraSet:e.target.value})}>
          {Object.keys(MANTRA_SETS).map(k => <option key={k}>{k}</option>)}
        </select>
      </div>
    </div>
  );
};

Object.assign(window, { Tweaks, ACCENT_PRESETS, MANTRA_SETS });