// App entry: mounts each screen into its slot, wires Tweaks panel
const { createRoot } = ReactDOM;

function mount(id, Comp) {
  const el = document.getElementById(id);
  if (el) createRoot(el).render(<Comp />);
}

mount('screen-dash', DashboardScreen);
mount('screen-list', ListScreen);
mount('screen-detail', DetailScreen);
mount('screen-auth', AuthScreen);
mount('screen-log', LogScreen);
mount('screen-my', MyScreen);

// label tabs for comments
document.querySelectorAll('#tabs button').forEach(b=>{
  b.setAttribute('data-screen-label', b.textContent.trim());
});
document.querySelectorAll('.screen').forEach(s=>{
  s.setAttribute('data-screen-label', s.id.replace('screen-',''));
});

// ----- Tweaks panel -----
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "paperBg": true,
  "strokeWeight": 1.6,
  "colorIntensity": "moderate",
  "handFont": "Architects Daughter"
}/*EDITMODE-END*/;

function TweaksMount() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(()=>{
    document.body.classList.toggle('paper-on', !!t.paperBg);
    document.documentElement.style.setProperty('--stroke', `${t.strokeWeight}px`);

    // color intensity → swap rainbow saturation
    const intense = t.colorIntensity === 'bold';
    const muted = t.colorIntensity === 'muted';
    const root = document.documentElement.style;
    if (intense) {
      root.setProperty('--r-red','#d83a1c');
      root.setProperty('--r-orange','#ec8a1f');
      root.setProperty('--r-yellow','#e8c41a');
      root.setProperty('--r-green','#3f8d3f');
      root.setProperty('--r-blue','#2d6f9a');
      root.setProperty('--r-violet','#7a4096');
    } else if (muted) {
      root.setProperty('--r-red','#a87266');
      root.setProperty('--r-orange','#b89878');
      root.setProperty('--r-yellow','#b8a878');
      root.setProperty('--r-green','#88967a');
      root.setProperty('--r-blue','#7a8a98');
      root.setProperty('--r-violet','#8a7e98');
    } else {
      root.setProperty('--r-red','#c8553d');
      root.setProperty('--r-orange','#d68642');
      root.setProperty('--r-yellow','#d6b042');
      root.setProperty('--r-green','#6a8d5a');
      root.setProperty('--r-blue','#4f7a96');
      root.setProperty('--r-violet','#7a6a96');
    }
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Paper">
        <TweakToggle label="Paper texture" value={t.paperBg} onChange={v=>setTweak('paperBg',v)} />
        <TweakSlider label="Stroke weight" min={1} max={3} step={0.1} value={t.strokeWeight} onChange={v=>setTweak('strokeWeight',v)} />
      </TweakSection>
      <TweakSection title="Color">
        <TweakRadio label="Status intensity"
          options={[{value:'muted',label:'Muted'},{value:'moderate',label:'Moderate'},{value:'bold',label:'Bold'}]}
          value={t.colorIntensity} onChange={v=>setTweak('colorIntensity',v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

const tweakRoot = document.createElement('div');
document.body.appendChild(tweakRoot);
createRoot(tweakRoot).render(<TweaksMount/>);