/* ============ DAR AYLA OPS V2 — APP ROOT ============ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "lang": "FR",
  "density": "comfortable",
  "layout": "sidebar",
  "accent": "#c07d55",
  "italics": true
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = window.useTweaks ? useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, ()=>{}];
  const [page, setPage] = useState('today');
  const [resa, setResa] = useState(null);
  const [, _refresh] = useState(0);

  useEffect(() => {
    const onData = () => _refresh(n => n + 1);
    window.addEventListener('da-data-loaded', onData);
    return () => window.removeEventListener('da-data-loaded', onData);
  }, []);

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', tweaks.theme);
    document.documentElement.setAttribute('data-density', tweaks.density);
    document.documentElement.setAttribute('data-layout', tweaks.layout);
    document.documentElement.setAttribute('data-italics', tweaks.italics ? 'on' : 'off');
    document.documentElement.style.setProperty('--accent', tweaks.accent);
    window.__lang = tweaks.lang;
  }, [tweaks]);

  const lang = tweaks.lang;
  const D = window.DA_DATA;
  const kpis = D.computeKPIs();

  const onOpenResa = (r) => setResa(r);
  const onClose = () => setResa(null);

  const setLang = (l) => setTweak('lang', l);
  const setTheme = (th) => setTweak('theme', th);

  return (
    <div id="app-root">
      <Sidebar current={page} onNav={setPage} kpis={kpis} lang={lang}/>
      <Topbar current={page} lang={lang} setLang={setLang} theme={tweaks.theme} setTheme={setTheme} onCmd={()=>{}}/>
      <main className="app-main">
        {page==='today' && <PageToday kpis={kpis} onOpenResa={onOpenResa} lang={lang}/>}
        {page==='inbox' && <PageInbox onOpenResa={onOpenResa} lang={lang}/>}
        {page==='calendar' && <PageCalendar onOpenResa={onOpenResa} lang={lang}/>}
        {page==='reservations' && <PageReservations onOpenResa={onOpenResa} lang={lang}/>}
        {page==='suites' && <PageSuites lang={lang}/>}
        {page==='cleaning' && <PageCleaning lang={lang}/>}
        {page==='requests' && <PageRequests onOpenResa={onOpenResa} lang={lang}/>}
        {page==='inventory' && <PageInventory lang={lang}/>}
        {page==='incidents' && <PageIncidents lang={lang}/>}
        {page==='vendors' && <PageVendors lang={lang}/>}
        {page==='mobile' && <PageMobile lang={lang} onOpenResa={onOpenResa}/>}
        {page==='analytics' && <div style={{padding:40,textAlign:'center',color:'var(--muted)'}}><h2 style={{fontFamily:"'Cormorant Garamond',serif",fontStyle:'italic',fontSize:28,marginBottom:8}}>Analytics</h2>Bientôt disponible · Revenus, RevPAR, ADR, taux d'occupation par canal.</div>}
        {page==='finance' && <PageFinances lang={lang}/>}
        {page==='portals' && <div style={{padding:40,textAlign:'center',color:'var(--muted)'}}><h2 style={{fontFamily:"'Cormorant Garamond',serif",fontStyle:'italic',fontSize:28,marginBottom:8}}>Portails voyageurs</h2>Lien direct vers chaque portail personnalisé · synchronisé avec la réservation.</div>}
      </main>
      <ResaDrawer resa={resa} onClose={onClose} lang={lang}/>
      {window.TweaksPanel && (
        <TweaksPanel title="Tweaks">
          <TweakSection title="Apparence">
            <TweakRadio label="Thème" value={tweaks.theme} options={[{value:'light',label:'Clair'},{value:'dark',label:'Sombre'}]} onChange={v=>setTweak('theme',v)}/>
            <TweakColor label="Couleur d'accent" value={tweaks.accent} onChange={v=>setTweak('accent',v)}/>
            <TweakToggle label="Italiques éditoriales" value={tweaks.italics} onChange={v=>setTweak('italics',v)}/>
            <TweakRadio label="Densité" value={tweaks.density} options={[{value:'comfortable',label:'Confort'},{value:'compact',label:'Compact'}]} onChange={v=>setTweak('density',v)}/>
            <TweakRadio label="Layout" value={tweaks.layout} options={[{value:'sidebar',label:'Sidebar'},{value:'topbar',label:'Topbar'},{value:'split',label:'Split'}]} onChange={v=>setTweak('layout',v)}/>
            <TweakRadio label="Langue" value={tweaks.lang} options={[{value:'FR',label:'FR'},{value:'EN',label:'EN'}]} onChange={v=>setTweak('lang',v)}/>
          </TweakSection>
          <TweakSection title="Navigation rapide">
            <TweakButton label="Mobile" onClick={()=>setPage('mobile')}/>
            <TweakButton label="Calendrier" onClick={()=>setPage('calendar')}/>
            <TweakButton label="Suites" onClick={()=>setPage('suites')}/>
            <TweakButton label="Inbox Lodgify" onClick={()=>setPage('inbox')}/>
            <TweakButton label="Inventaire" onClick={()=>setPage('inventory')}/>
          </TweakSection>
          <TweakSection title="Données">
            <TweakButton label="Rafraîchir les données" onClick={()=>{ if(window.DA_REFRESH) window.DA_REFRESH(); window.toast?.({kind:'ok',icon:'check',title:'Données rechargées'}); }}/>
          </TweakSection>
        </TweaksPanel>
      )}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);