/* Tweaks panel wired to ChareonKit variation state */
function TweaksPanelCK(){
  const { tweaks, setTweaks } = useCK();
  const set = (k,v)=>setTweaks(t=>({...t,[k]:v}));
  return (
    <TweaksPanel title="Tweaks · ตัวเลือกดีไซน์">
      <TweakSection label="Variations">
        <TweakRadio label="สไตล์ปฏิทิน" value={tweaks.calendarStyle}
          options={[{value:'badge',label:'ป้าย'},{value:'dot',label:'จุด'},{value:'heat',label:'ความร้อน'}]}
          onChange={v=>set('calendarStyle',v)} />
        <TweakRadio label="ตารางคิว" value={tweaks.queueLayout}
          options={[{value:'card',label:'การ์ด'},{value:'table',label:'ตาราง'}]}
          onChange={v=>set('queueLayout',v)} />
        <TweakRadio label="มอบหมายช่าง" value={tweaks.assignMethod}
          options={[{value:'select',label:'เลือก'},{value:'drag',label:'ลาก'}]}
          onChange={v=>set('assignMethod',v)} />
        <TweakRadio label="Dashboard" value={tweaks.dashboardStyle}
          options={[{value:'charts',label:'กราฟ'},{value:'cards',label:'การ์ด'}]}
          onChange={v=>set('dashboardStyle',v)} />
      </TweakSection>
      <TweakSection label="ธีม">
        <TweakRadio label="สี Header / เมนู" value={tweaks.headerTheme}
          options={[{value:'red',label:'แดง'},{value:'dark',label:'เข้ม'}]}
          onChange={v=>set('headerTheme',v)} />
        <TweakToggle label="กรอบมือถือ (Device frame)"
          value={tweaks.deviceFrame!==false} onChange={v=>set('deviceFrame',v)} />
      </TweakSection>
    </TweaksPanel>
  );
}
Object.assign(window, { TweaksPanelCK });