// Main app: state, routing, mounting

const { useState, useEffect, useMemo } = React;

const App = () => {
  const [route, setRoute] = useState(() => {
    try { const s = localStorage.getItem('zct-route'); if (s) return JSON.parse(s); } catch(e){}
    return { page:'home' };
  });
  const [cart, setCart] = useState([]);
  const [wish, setWish] = useState([]);
  const [cartOpen, setCartOpen] = useState(false);
  const [tweaks, setTweaks] = useState(() => { try { return {...TWEAKS_DEFAULTS, ...(JSON.parse(localStorage.getItem('zct-tweaks')||'{}'))}; } catch(e){ return TWEAKS_DEFAULTS; }});
  const [tweaksAvail, setTweaksAvail] = useState(false);
  const [tweaksOpen, setTweaksOpen] = useState(false);

  useEffect(()=>{
    localStorage.setItem('zct-route', JSON.stringify(route));
    window.scrollTo({top:0, behavior:'instant'});
  },[route]);
  useEffect(()=>{ localStorage.setItem('zct-tweaks', JSON.stringify(tweaks)); }, [tweaks]);

  // apply theme tweaks
  useEffect(()=>{
    document.body.setAttribute('data-display', tweaks.display||'bricolage');
    document.body.setAttribute('data-density', tweaks.density||'comfortable');
    document.body.setAttribute('data-hero', tweaks.heroVariant||'editorial');
    const accents = {brass:'#897643',copper:'#b06a3b',steel:'#6e6e6e',ink:'#000000',white:'#ffffff'};
    const deeps  = {brass:'#6e5f36',copper:'#7c4a2a',steel:'#3a3a3a',ink:'#000000',white:'#ffffff'};
    const accent = accents[tweaks.accent] || accents.brass;
    const deep   = deeps[tweaks.accent]   || deeps.brass;
    document.documentElement.style.setProperty('--accent', accent);
    document.documentElement.style.setProperty('--brass', accent);
    document.documentElement.style.setProperty('--brass-deep', deep);
  },[tweaks]);

  // measure nav height for hero margin-top
  useEffect(()=>{
    const measure = () => {
      const nav = document.querySelector('nav.nav');
      if (nav) document.documentElement.style.setProperty('--nav-h', nav.offsetHeight + 'px');
    };
    measure();
    window.addEventListener('resize', measure);
    const id = setInterval(measure, 500);
    return () => { window.removeEventListener('resize', measure); clearInterval(id); };
  },[]);

  // edit mode protocol
  useEffect(()=>{
    const handler = (e)=>{
      if (!e.data || typeof e.data !== 'object') return;
      if (e.data.type==='__activate_edit_mode') setTweaksOpen(true);
      if (e.data.type==='__deactivate_edit_mode') setTweaksOpen(false);
    };
    window.addEventListener('message', handler);
    setTweaksAvail(true);
    window.parent.postMessage({type:'__edit_mode_available'}, '*');
    return ()=>window.removeEventListener('message', handler);
  },[]);

  // persist tweaks on host
  useEffect(()=>{
    if (!tweaksAvail) return;
    window.parent.postMessage({type:'__edit_mode_set_keys', edits: tweaks}, '*');
  },[tweaks, tweaksAvail]);

  const go = (r)=> setRoute(r);
  const openPDP = (p)=> setRoute({page:'pdp', id:p.id});

  const addToCart = (line)=>{
    setCart(c=>{
      const idx = c.findIndex(l=>l.id===line.id && l.size===line.size && l.finish===line.finish);
      if (idx>=0){ const copy=[...c]; copy[idx] = {...copy[idx], qty: copy[idx].qty+line.qty}; return copy; }
      return [...c, line];
    });
  };
  const quickAdd = (p)=>{
    if (p.price==null) { openPDP(p); return; }
    if (p.sizes.length>1 || p.tones.length>1) { openPDP(p); return; }
    addToCart({id:p.id,name:p.name,tone:p.tone,price:p.price,size:p.sizes[0].k,finish:p.tones[0],qty:1});
    setCartOpen(true);
  };
  const removeFromCart = (i)=> setCart(c=>c.filter((_,idx)=>idx!==i));
  const updateQty = (i, q)=> setCart(c=> q<=0 ? c.filter((_,idx)=>idx!==i) : c.map((l,idx)=>idx===i?{...l,qty:q}:l));
  const toggleWish = (id)=> setWish(w=>w.includes(id)?w.filter(x=>x!==id):[...w,id]);

  const ctx = {
    route, go, openPDP, cart, addToCart, quickAdd, removeFromCart, updateQty,
    wish, toggleWish,
    cartOpen, openCart:()=>setCartOpen(true), closeCart:()=>setCartOpen(false),
    tweaks, setTweaks, tweaksAvail, tweaksOpen,
  };

  const page = route.page;
  const product = page==='pdp' ? PRODUCTS.find(p=>p.id===route.id) : null;

  return (
    <AppContext.Provider value={ctx}>
      <div data-screen-label={
        page==='home' ? 'Home' :
        page==='shop' ? 'Shop' :
        page==='pdp' && product ? `PDP · ${product.name}` :
        page==='about' ? 'About' :
        page==='b2b' ? 'B2B Login' : 'Page'
      }>
        <Announcement />
        <Nav />
        {page==='home' && <Home />}
        {page==='shop' && <Shop />}
        {page==='pdp' && product && <PDP product={product}/>}
        {page==='about' && <About />}
        {page==='b2b' && <B2B />}
        <Footer />
      </div>
      <CartDrawer />
      <Tweaks />
    </AppContext.Provider>
  );
};

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