/* ============================================================
   WorkStay — app router + tweaks
   ============================================================ */
const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "centered",
  "accent": "#7c6cf0",
  "serifHeads": true,
  "grain": true
}/*EDITMODE-END*/;

const ACCENTS = {
  '#7c6cf0': { soft: '#9d90f6', deep: '#5b4cd0', glow: 'rgba(124,108,240,0.40)' },
  '#4f6bff': { soft: '#7d92ff', deep: '#3a4fd0', glow: 'rgba(79,107,255,0.40)' },
  '#c9a26a': { soft: '#dcbb8c', deep: '#a07e48', glow: 'rgba(201,162,106,0.40)' },
  '#3aa6a0': { soft: '#5fc7c1', deep: '#2a7d78', glow: 'rgba(58,166,160,0.40)' },
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useStateApp('home');
  const [params, setParams] = useStateApp({});
  const [wish, setWish] = useStateApp(() => {
    try { return JSON.parse(localStorage.getItem('ws_wish') || '[]'); } catch { return []; }
  });

  // apply accent tweak to CSS vars
  useEffectApp(() => {
    const a = ACCENTS[t.accent] || ACCENTS['#7c6cf0'];
    const r = document.documentElement.style;
    r.setProperty('--violet', t.accent);
    r.setProperty('--violet-soft', a.soft);
    r.setProperty('--violet-deep', a.deep);
    r.setProperty('--violet-glow', a.glow);
  }, [t.accent]);

  useEffectApp(() => {
    document.body.style.setProperty('--serif', t.serifHeads ? "'Instrument Serif', Georgia, serif" : "'Space Grotesk', sans-serif");
  }, [t.serifHeads]);

  const go = (r, p = {}) => {
    setRoute(r); setParams(p);
    window.scrollTo({ top: 0, behavior: 'instant' in window ? 'instant' : 'auto' });
  };

  const toggleWish = (id) => {
    setWish(prev => {
      const next = prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id];
      try { localStorage.setItem('ws_wish', JSON.stringify(next)); } catch {}
      return next;
    });
  };

  let page;
  if (route === 'home') page = <HomePage go={go} heroVariant={t.heroVariant} />;
  else if (route === 'explore') page = <ExplorePage go={go} params={params} wish={wish} toggleWish={toggleWish} />;
  else if (route === 'property') page = <PropertyPage go={go} params={params} wish={wish} toggleWish={toggleWish} />;
  else if (route === 'operator') page = <OperatorPage go={go} params={params} />;
  else if (route === 'booking') page = <BookingFlow go={go} params={params} />;
  else page = <HomePage go={go} heroVariant={t.heroVariant} />;

  return (
    <>
      <NavBar route={route} go={go} onWish={() => go('explore', { wishOnly: true })} wishCount={wish.length} />
      <div key={route} className="fade">{page}</div>
      {route !== 'booking' && <FooterBar go={go} />}
    </>
  );
}

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