/* ============================================================
   APP ROOT — client-side routing + shared state.
   ============================================================ */
(function(){
  const { STYLES, BLOCKS, MENU, Home, Collection, Detail } = window;

  function LanguageSelect({ locale, onChange }){
    return (
      <label className="relative inline-flex items-center shrink-0" title={locale==='fr'?'Choisir la langue':'Choose language'}>
        <span className="absolute left-2.5 text-xs pointer-events-none" aria-hidden="true">◎</span>
        <select value={locale} onChange={e=>onChange(e.target.value)}
          aria-label={locale==='fr'?'Choisir la langue':'Choose language'}
          className="h-9 rounded-lg pl-7 pr-7 text-xs font-bold cursor-pointer outline-none"
          style={{background:'#15151b',border:'1px solid var(--chrome-line)',color:'var(--chrome-text)'}}>
          <option value="en" style={{color:'#111'}}>EN</option>
          <option value="fr" style={{color:'#111'}}>FR</option>
        </select>
        <span className="absolute right-2 text-[9px] pointer-events-none" aria-hidden="true">▾</span>
      </label>
    );
  }

  function App(){
    const [locale,setLocale]=React.useState(()=>{
      const requested = new URLSearchParams(window.location.search).get('lang');
      const saved = window.localStorage.getItem('empire-language');
      return requested==='fr'||requested==='en' ? requested : (saved==='fr' ? 'fr' : 'en');
    });
    const [route,setRoute]=React.useState('home');          // 'home' | 'collection'
    const [styleId,setStyleId]=React.useState('glass');
    const [filter,setFilter]=React.useState({type:'all',subtype:null});
    const [expanded,setExpanded]=React.useState(new Set(['cards']));
    const [detail,setDetail]=React.useState(null);           // block or null
    const [drawer,setDrawer]=React.useState(false);
    const [temp,setTemp]=React.useState('base');             // ambiance: base | warm | cool

    const s = STYLES[styleId];
    const cycleTemp = ()=> setTemp(t=> t==='base' ? 'warm' : t==='warm' ? 'cool' : 'base');

    React.useEffect(()=>{
      window.localStorage.setItem('empire-language',locale);
      document.cookie=`empire-language=${locale};path=/;max-age=31536000;samesite=lax`;
      document.documentElement.lang=locale;
      document.title=locale==='fr' ? 'Empire UI — choisissez votre style' : 'Empire UI — choose your style';
      const url=new URL(window.location.href);
      if(locale==='fr') url.searchParams.set('lang','fr'); else url.searchParams.delete('lang');
      window.history.replaceState({},'',url.pathname+url.search+url.hash);
    },[locale]);

    const filtered = React.useMemo(()=>{
      if(filter.type==='all') return BLOCKS;
      return BLOCKS.filter(b=> b.type===filter.type && (!filter.subtype || b.subtype===filter.subtype));
    },[filter]);

    const openStyle = (id)=>{ setStyleId(id); setRoute('collection'); setFilter({type:'all',subtype:null}); setExpanded(new Set(['cards'])); setTemp('base'); window.scrollTo(0,0); };
    const toggleType = (id)=> setExpanded(prev=>{ const n=new Set(prev); n.has(id)?n.delete(id):n.add(id); return n; });
    const navDetail = (dir)=>{
      if(!detail) return;
      const i = filtered.findIndex(b=>b.id===detail.id);
      const ni = (i+dir+filtered.length)%filtered.length;
      setDetail(filtered[ni]);
    };

    return (
      <React.Fragment>
        {route==='home'
          ? <Home onOpen={openStyle} locale={locale} languageControl={<LanguageSelect locale={locale} onChange={setLocale}/>}/>
          : <Collection
              s={s} blocks={filtered} filter={filter} onFilter={setFilter}
              expanded={expanded} onToggle={toggleType}
              onOpenDetail={setDetail}
              onSwitchStyle={setStyleId}
              onHome={()=>{ setRoute('home'); window.scrollTo(0,0); }}
              drawer={drawer} setDrawer={setDrawer}
              temp={temp} onCycleTemp={cycleTemp}
              locale={locale} languageControl={<LanguageSelect locale={locale} onChange={setLocale}/>}/>
          }
        {detail && <Detail block={detail} blocks={filtered} s={s}
          onClose={()=>setDetail(null)} onNav={navDetail} onSwitchStyle={setStyleId}/>}
      </React.Fragment>
    );
  }

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