// app.jsx — Main SPA, routing, tweaks panel

const { useState: useState2, useEffect: useEffect2 } = React;

function App() {
  // persisted state
  const [lang, setLang] = useState2(() => localStorage.getItem('ss_lang') || 'en');
  const [route, setRoute] = useState2(() => {
    try { return JSON.parse(localStorage.getItem('ss_route') || '{"page":"home"}'); }
    catch { return { page: 'home' }; }
  });
  const [onDark, setOnDark] = useState2(false);
  const [tweaksOn, setTweaksOn] = useState2(false);
  const [tweaks, setTweaks] = useState2(() => {
    try { return JSON.parse(localStorage.getItem('ss_tweaks') || 'null') || TWEAK_DEFAULTS; }
    catch { return TWEAK_DEFAULTS; }
  });

  useEffect2(() => { localStorage.setItem('ss_lang', lang); document.documentElement.lang = lang; }, [lang]);
  useEffect2(() => { localStorage.setItem('ss_route', JSON.stringify(route)); }, [route]);
  useEffect2(() => { localStorage.setItem('ss_tweaks', JSON.stringify(tweaks)); }, [tweaks]);

  // scroll to top on route change
  useEffect2(() => {
    window.scrollTo({ top: 0, behavior: 'instant' });
    if (route.page !== 'home') setOnDark(false);
  }, [route.page, route.id, route.filter]);

  // apply tweak vars
  useEffect2(() => {
    const root = document.documentElement;
    // palette
    if (tweaks.palette === 'cream') {
      root.style.setProperty('--parchment', '#FBF6EC');
      root.style.setProperty('--cream', '#F5EDE0');
      root.style.setProperty('--bone', '#EFE4D2');
    } else if (tweaks.palette === 'bone') {
      root.style.setProperty('--parchment', '#F2EADB');
      root.style.setProperty('--cream', '#EBDFC7');
      root.style.setProperty('--bone', '#E3D3B4');
    } else if (tweaks.palette === 'noir') {
      root.style.setProperty('--parchment', '#1B120A');
      root.style.setProperty('--cream', '#F5EDE0');
      root.style.setProperty('--bone', '#2A1F14');
      root.style.setProperty('--ink', '#F5EDE0');
      root.style.setProperty('--charcoal', '#EFE4D2');
      root.style.setProperty('--muted', '#C0A982');
    } else {
      root.style.setProperty('--parchment', '#FBF6EC');
      root.style.setProperty('--cream', '#F5EDE0');
      root.style.setProperty('--bone', '#EFE4D2');
      root.style.setProperty('--ink', '#1B120A');
      root.style.setProperty('--charcoal', '#3A2B1E');
      root.style.setProperty('--muted', '#6B5A46');
    }
    // font pairing
    if (tweaks.fontPair === 'modern') {
      root.style.setProperty('--font-display', '"Playfair Display", serif');
      root.style.setProperty('--font-body', '"Inter", system-ui, sans-serif');
    } else if (tweaks.fontPair === 'doubleserif') {
      root.style.setProperty('--font-display', '"Playfair Display", serif');
      root.style.setProperty('--font-body', '"Cormorant Garamond", Georgia, serif');
    } else if (tweaks.fontPair === 'editorial') {
      root.style.setProperty('--font-display', '"Bodoni Moda", "Playfair Display", serif');
      root.style.setProperty('--font-body', '"Cormorant Garamond", Georgia, serif');
    }
  }, [tweaks]);

  // Edit mode handshake
  useEffect2(() => {
    const onMsg = (e) => {
      if (!e.data || typeof e.data !== 'object') return;
      if (e.data.type === '__activate_edit_mode') setTweaksOn(true);
      else if (e.data.type === '__deactivate_edit_mode') setTweaksOn(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const navigate = (r) => setRoute(r);
  const updateTweak = (k, v) => {
    setTweaks((prev) => {
      const next = { ...prev, [k]: v };
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
      return next;
    });
  };

  const headerDark = onDark && route.page === 'home';

  return (
    <>
      <Header lang={lang} setLang={setLang} route={route} navigate={navigate} onDark={headerDark} />
      <main id="main-content" role="main">
        {route.page === 'home'         && <HomePage lang={lang} navigate={navigate} onHeaderDark={setOnDark} />}
        {route.page === 'sombreros'    && <HatsPage lang={lang} navigate={navigate} initialFilter={route.filter} key={route.filter || 'all'} />}
        {route.page === 'hebillas'     && <HebillasPage lang={lang} navigate={navigate} />}
        {route.page === 'correas'      && <CoreasPage lang={lang} navigate={navigate} />}
        {route.page === 'collection'   && <HatsPage lang={lang} navigate={navigate} initialFilter={route.filter} key={route.filter || 'all'} />}
        {route.page === 'product'      && <ProductDetailPage lang={lang} navigate={navigate} id={route.id} key={route.id} />}
        {route.page === 'distributors' && <DistributorsPage lang={lang} navigate={navigate} />}
        {route.page === 'about'        && <AboutPage lang={lang} navigate={navigate} />}
        {route.page === 'gallery'      && <GalleryPage lang={lang} />}
        {route.page === 'blog'         && <BlogPage lang={lang} navigate={navigate} />}
        {route.page === 'blog-post'    && <BlogPostPage lang={lang} navigate={navigate} slug={route.slug} key={route.slug} />}
        {route.page === 'contact'      && <ContactPage lang={lang} />}
        {route.page === 'wholesale'    && <WholesalePage lang={lang} navigate={navigate} initialView={route.view} key={route.view || 'login'} />}
        {route.page === 'privacy'     && <PrivacyPage lang={lang} navigate={navigate} />}
        {route.page === 'terms'        && <TermsPage lang={lang} navigate={navigate} />}
        {route.page === 'cookies'      && <CookiesPage lang={lang} navigate={navigate} />}
      </main>
      <Footer lang={lang} navigate={navigate} />
      <ChatWidget lang={lang} navigate={navigate} />
      {tweaksOn && <TweaksPanel tweaks={tweaks} setTweak={updateTweak} onClose={() => setTweaksOn(false)} />}
    </>
  );
}

function TweaksPanel({ tweaks, setTweak, onClose }) {
  return (
    <div className="tweaks">
      <h4>Tweaks <button onClick={onClose} style={{ fontSize: 14, letterSpacing: 0 }}>✕</button></h4>

      <div className="tweak-group">
        <div className="label">Palette</div>
        <div className="tweak-options">
          {[
            { id: 'cream', l: 'Cream' },
            { id: 'bone', l: 'Bone' },
            { id: 'noir', l: 'Noir' },
          ].map(o => (
            <button key={o.id}
              className={`tweak-opt ${tweaks.palette === o.id ? 'active' : ''}`}
              onClick={() => setTweak('palette', o.id)}
            >{o.l}</button>
          ))}
        </div>
      </div>

      <div className="tweak-group">
        <div className="label">Type pairing</div>
        <div className="tweak-options">
          {[
            { id: 'doubleserif', l: 'Double Serif' },
            { id: 'editorial', l: 'Editorial' },
            { id: 'modern', l: 'Modern' },
          ].map(o => (
            <button key={o.id}
              className={`tweak-opt ${tweaks.fontPair === o.id ? 'active' : ''}`}
              onClick={() => setTweak('fontPair', o.id)}
            >{o.l}</button>
          ))}
        </div>
      </div>

      <div className="tweak-group">
        <div className="label">Hero style</div>
        <div className="tweak-options">
          {['classic', 'editorial', 'split'].map(o => (
            <button key={o}
              className={`tweak-opt ${tweaks.hero === o ? 'active' : ''}`}
              onClick={() => setTweak('hero', o)}
            >{o}</button>
          ))}
        </div>
      </div>

      <div className="tweak-group" style={{ marginTop: 20, paddingTop: 16, borderTop: '1px solid rgba(27,18,10,0.1)' }}>
        <div className="label" style={{ marginBottom: 4 }}>Note</div>
        <div style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.08em', lineHeight: 1.5 }}>
          Palette and type are live. Hero style reserved for the next iteration.
        </div>
      </div>
    </div>
  );
}

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