/* ============================================================
   Төрмен — App root: routing, header, mobile tabs, atmosphere,
   tweaks (charcoal/cream + embers; accent/surface/radius locked)
   ============================================================ */
const { useState:useStateA, useEffect:useEffectA, useMemo:useMemoA } = React;

const TWEAK_LOCKED = {
  accent: '#e2562b',
  surface: 'line',
  radius: 'round',
};
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "charcoal",
  "accent": "#e2562b",
  "embers": true,
  "radius": "round",
  "surface": "line"
}/*EDITMODE-END*/;

function hexA(hex, a){
  const h = hex.replace('#',''); const n = parseInt(h.length===3? h.split('').map(c=>c+c).join(''):h,16);
  return `rgba(${(n>>16)&255},${(n>>8)&255},${n&255},${a})`;
}

/* ---------- ambient embers ---------- */
function Embers({ on }){
  const sparks = useMemoA(()=> Array.from({length:18}).map((_,i)=>({
    left: Math.random()*100,
    dur: 7+Math.random()*9,
    delay: -Math.random()*16,
    drift: (Math.random()*80-40)+'px',
    size: 2+Math.random()*2.5,
  })), []);
  if(!on) return null;
  return (
    <>
      {sparks.map((s,i)=>(
        <span key={i} className="ember-spark" style={{
          left:s.left+'%', width:s.size, height:s.size,
          animationDuration:s.dur+'s', animationDelay:s.delay+'s', '--drift':s.drift }} />
      ))}
    </>
  );
}

function Atmosphere({ embers }){
  return (
    <div className="atmos">
      <div className="glow g1" /><div className="glow g2" />
      <Embers on={embers} />
      <div className="grain" /><div className="vignette" />
    </div>
  );
}

/* ---------- header ---------- */
function Header({ route, go, theme, onThemeToggle }){
  const { t, lang, setLang } = useLang();
  const isLight = theme === 'cream';
  const { count } = useCart();
  const { count:favCount } = useFav();
  const { user, initial } = useAuth();
  const [scrolled,setScrolled]=useStateA(false);
  useEffectA(()=>{ const f=()=>setScrolled(window.scrollY>20); window.addEventListener('scroll',f); return ()=>window.removeEventListener('scroll',f); },[]);
  const links=[['catalog','nav_catalog'],['blog','nav_blog'],['about','nav_about']];
  return (
    <header className="site-header">
      <div className="site-header__inner max-w-7xl mx-auto">
        <div className={`site-nav ${scrolled?'is-scrolled':''}`}>
          <div className="site-nav__bar">
            <Logo onClick={()=>go('home')} emblem={false} variant="nav" />
            <nav className="site-nav__links hidden md:flex">
              {links.map(([r,k])=> <span key={r} className={`navlink ${route===r?'on':''}`} onClick={()=>go(r)}>{t(k)}</span>)}
            </nav>
            <div className="site-nav__actions">
              <div className="site-nav__cluster">
                <button type="button" className="site-nav-btn site-nav-btn--theme" onClick={onThemeToggle}
                  aria-label={isLight ? t('tw_theme_dark') : t('tw_theme_light')}
                  title={isLight ? t('tw_theme_dark') : t('tw_theme_light')}>
                  <Icon name={isLight ? 'moon' : 'sun'} size={17} />
                </button>
                <span className="site-nav__sep hidden sm:block" aria-hidden="true" />
                <div className="site-lang hidden sm:flex">
                  {['ru','kz'].map(l=>(
                    <button key={l} type="button" onClick={()=>setLang(l)} className={lang===l?'on':''}>
                      {l==='ru'?'RU':'ҚАЗ'}
                    </button>
                  ))}
                </div>
                <span className="site-nav__sep" aria-hidden="true" />
                <button type="button" onClick={()=>go('profile')} aria-label={t('nav_profile')}
                  className="site-nav-btn hidden md:grid relative"
                  style={user ? { color:'var(--gold-2)', fontFamily:'var(--font-brand)', fontWeight:600, fontSize:13 } : undefined}>
                  {user ? initial : <Icon name="user" size={17} />}
                </button>
                <button type="button" onClick={()=>go('favorites')} aria-label={t('nav_fav')}
                  className={`site-nav-btn relative ${route==='favorites'?'on':''}`}>
                  <Icon name="heart" size={17} style={{ fill: favCount>0?'currentColor':'transparent' }} stroke={favCount>0?0:1.7} />
                  {favCount>0 && <span className="site-nav__badge site-nav__badge--gold">{favCount}</span>}
                </button>
                <button type="button" onClick={()=>go('cart')} data-cart-target aria-label={t('cart')}
                  className="site-nav-btn relative">
                  <Icon name="shopping-bag" size={17} />
                  {count>0 && <span className="site-nav__badge site-nav__badge--ember">{count}</span>}
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}

/* ---------- mobile bottom tab bar ---------- */
function TabBar({ route, go }){
  const { t } = useLang();
  const { count } = useCart();
  const tabs=[['home','home','nav_home'],['catalog','utensils-crossed','nav_catalog'],['blog','play-circle','nav_blog'],['cart','shopping-bag','cart'],['profile','user','nav_profile']];
  return (
    <nav className="md:hidden fixed bottom-0 inset-x-0 z-[95]" style={{
      background:'color-mix(in srgb,var(--bg) 82%,transparent)', backdropFilter:'blur(20px)',
      borderTop:'1px solid var(--border-soft)', paddingBottom:'env(safe-area-inset-bottom,0px)' }}>
      <div className="flex items-stretch justify-around">
        {tabs.map(([r,ic,k])=>{
          const on = route===r || (r==='catalog'&&route==='set');
          return (
            <button key={r} onClick={()=>go(r)} data-cart-target={r==='cart'?'':undefined} className="flex flex-col items-center gap-1 py-2.5 flex-1 relative" style={{ color: on?'var(--ember)':'var(--ink-3)' }}>
              <span className="relative">
                <Icon name={ic} size={22} stroke={on?2:1.6} />
                {r==='cart'&&count>0 && <span className="absolute -top-1.5 -right-2 grid place-items-center rounded-full text-[9px] font-bold tnum" style={{ minWidth:15, height:15, background:'var(--ember)', color:'var(--on-accent)' }}>{count}</span>}
              </span>
              <span className="text-[10px] font-medium">{t(k)}</span>
            </button>
          );
        })}
      </div>
    </nav>
  );
}

/* ---------- routed content ---------- */
function Screen({ route, params, query, go, openChat }){
  switch(route){
    case 'catalog': return <CatalogScreen go={go} openChat={openChat} />;
    case 'set':     return <ProductScreen id={params.id} go={go} openChat={openChat} />;
    case 'broths':  return <BrothsScreen />;
    case 'blog':    return <BlogScreen />;
    case 'about':   return <AboutScreen go={go} />;
    case 'login':   return <AuthScreen go={go} redirectTo="profile" />;
    case 'profile': return <ProfileScreen go={go} />;
    case 'favorites': return <FavoritesScreen go={go} />;
    case 'cart':    return <CartView go={go} />;
    case 'builder': return <CatalogScreen go={go} openChat={openChat} />;
    case 'checkout':return <CheckoutScreen go={go} />;
    case 'track':   return <TrackOrderScreen go={go} />;
    case 'order':   return <OrderTrackScreen go={go} params={params} query={query} />;
    case 'loyalty': return <LoyaltyScreen go={go} />;
    default:        return <HomeScreen go={go} openChat={openChat} />;
  }
}

function parseRouteHash(){
  const h = (location.hash || '').replace(/^#/, '');
  const qIdx = h.indexOf('?');
  const path = qIdx >= 0 ? h.slice(0, qIdx) : h;
  const query = {};
  if(qIdx >= 0){
    new URLSearchParams(h.slice(qIdx + 1)).forEach((v,k)=>{ query[k] = v; });
  }
  const slash = path.indexOf('/');
  if(slash < 0) return { route: path || 'home', params: {}, query };
  const route = path.slice(0, slash) || 'home';
  const rawId = path.slice(slash + 1);
  const id = window.decodeRouteId ? window.decodeRouteId(rawId) : rawId;
  return { route, params: id ? { id } : {}, query };
}

/* ---------- App ---------- */
function AppInner(){
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [nav, setNav] = useStateA(()=> parseRouteHash());
  const [chatOpen, setChatOpen] = useStateA(false);
  const [chatSeed, setChatSeed] = useStateA(null);

  const theme = tw.theme === 'cream' ? 'cream' : 'charcoal';

  // apply theme tweaks (accent / surface / radius are fixed in TWEAK_LOCKED)
  useEffectA(()=>{
    const root = document.documentElement;
    root.setAttribute('data-theme', theme);
    root.setAttribute('data-surface', TWEAK_LOCKED.surface);
    root.style.setProperty('--radius', '34px');
    root.style.setProperty('--ember', TWEAK_LOCKED.accent);
    root.style.setProperty('--ember-2', TWEAK_LOCKED.accent);
    root.style.setProperty('--glow-ember', hexA(TWEAK_LOCKED.accent, 0.40));
  }, [theme]);

  const go = (route, params={}, query={})=>{
    setNav({ route, params, query });
    let hash = route;
    if(route === 'set' && params.id) hash = `set/${encodeURIComponent(params.id)}`;
    else if(route === 'order' && params.id) hash = `order/${encodeURIComponent(params.id)}`;
    const qs = Object.keys(query).length ? new URLSearchParams(query).toString() : '';
    if(qs) hash += `?${qs}`;
    location.hash = hash;
    window.scrollTo({ top:0, behavior:'auto' });
    setChatOpen(false);
    setChatSeed(null);
  };
  const openChat = (seed)=>{
    setChatSeed(seed || null);
    setChatOpen(true);
  };
  useEffectA(()=>{
    const f=()=> setNav(parseRouteHash());
    window.addEventListener('hashchange', f); return ()=>window.removeEventListener('hashchange', f);
  },[]);

  const { t } = useLang();

  return (
    <>
      <Atmosphere embers={tw.embers} />
      <Header route={nav.route} go={go} theme={theme}
        onThemeToggle={()=> setTweak('theme', theme==='cream'?'charcoal':'cream')} />
      <main><Screen route={nav.route} params={nav.params} query={nav.query} go={go} openChat={openChat} /></main>
      <TabBar route={nav.route} go={go} />
      <ToastHost />
      <ChatFab open={chatOpen} onClick={()=>{ setChatOpen(o=>!o); if(chatOpen) setChatSeed(null); }} hidden={false} />
      <ChatPanel open={chatOpen} onClose={()=>{ setChatOpen(false); setChatSeed(null); }} seed={chatSeed} />

      <TweaksPanel>
        <TweakToggle label={t('tw_embers')} value={tw.embers} onChange={v=>setTweak('embers', v)} />
      </TweaksPanel>
    </>
  );
}

function App(){
  return (
    <LangProvider>
      <AuthProvider>
        <CatalogProvider>
          <BlogProvider>
            <OrdersProvider>
              <CartProvider>
                <FavoritesProvider>
                  <AppInner />
                </FavoritesProvider>
              </CartProvider>
            </OrdersProvider>
          </BlogProvider>
        </CatalogProvider>
      </AuthProvider>
    </LangProvider>
  );
}

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