// Tweaks 패널 및 Edit Mode 연동

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "blue",
  "density": "normal",
  "scenario": "SCN-26042014-017"
}/*EDITMODE-END*/;

const ACCENTS = {
  blue:   { "--accent": "oklch(0.78 0.14 220)", "--accent-2": "oklch(0.65 0.14 220)", "--accent-soft": "oklch(0.30 0.06 220)" },
  teal:   { "--accent": "oklch(0.78 0.13 185)", "--accent-2": "oklch(0.65 0.13 185)", "--accent-soft": "oklch(0.30 0.06 185)" },
  violet: { "--accent": "oklch(0.75 0.15 290)", "--accent-2": "oklch(0.62 0.15 290)", "--accent-soft": "oklch(0.30 0.06 290)" },
  amber:  { "--accent": "oklch(0.82 0.15 75)",  "--accent-2": "oklch(0.70 0.15 75)",  "--accent-soft": "oklch(0.30 0.08 75)"  },
};

const TweaksPanel = ({ open, tweaks, setTweaks, close }) => {
  if (!open) return null;
  return (
    <div className="tweaks-panel">
      <div className="row between mb-12">
        <h4 style={{margin:0}}>Tweaks</h4>
        <button className="btn ghost" onClick={close}><Icon name="x" size={14}/></button>
      </div>

      <div className="row between mb-12">
        <span>액센트 색</span>
        <div className="swatches">
          {Object.keys(ACCENTS).map(k => (
            <div key={k} className={"sw " + (tweaks.accent===k?"active":"")}
              style={{background: ACCENTS[k]["--accent"]}}
              onClick={()=>setTweaks({...tweaks, accent: k})}/>
          ))}
        </div>
      </div>

      <div className="row between mb-12">
        <span>밀도</span>
        <select value={tweaks.density} onChange={e=>setTweaks({...tweaks, density:e.target.value})}>
          <option value="compact">촘촘</option>
          <option value="normal">보통</option>
          <option value="roomy">넓게</option>
          <option value="spacious">매우 넓게</option>
        </select>
      </div>

      <div className="row between mb-12">
        <span>기본 시나리오</span>
        <select value={tweaks.scenario} onChange={e=>setTweaks({...tweaks, scenario:e.target.value})} style={{maxWidth:200}}>
          {window.MOCK.scenarios.map(s => <option key={s.id} value={s.id}>{s.id.slice(-3)} · {s.title.slice(0,14)}</option>)}
        </select>
      </div>

      <div className="small muted" style={{marginTop:14, paddingTop:10, borderTop:"1px solid var(--border)"}}>
        변경 사항은 자동 저장됩니다.
      </div>
    </div>
  );
};

window.TWEAK_DEFAULTS = TWEAK_DEFAULTS;
window.ACCENTS = ACCENTS;
window.TweaksPanel = TweaksPanel;