// Main app: view switcher + router

const App = () => {
  const [view, setView] = useState(() => localStorage.getItem('pxs.view') || 'public');
  const [publicRoute, setPublicRoute] = useState(() => {
    try { return JSON.parse(localStorage.getItem('pxs.publicRoute')) || { route: 'home' }; } catch { return { route: 'home' }; }
  });
  const [cmsRoute, setCmsRoute] = useState(() => {
    try { return JSON.parse(localStorage.getItem('pxs.cmsRoute')) || { route: 'dashboard' }; } catch { return { route: 'dashboard' }; }
  });

  const [state, setState] = useState({
    packages: INITIAL_PACKAGES,
    vehicles: INITIAL_VEHICLES,
    blogs: INITIAL_BLOGS,
    pages: INITIAL_PAGES,
    inquiries: INITIAL_INQUIRIES,
    users: INITIAL_USERS,
    settings: INITIAL_SETTINGS,
    nav: INITIAL_NAV,
  });

  const [tweaksActive, setTweaksActive] = useState(false);
  const [tweaks, setTweaks] = useState({ accent: '#E85D2F', greenDeep: '#1F3A2B', radius: 'medium', displayFont: 'Fraunces' });

  useEffect(() => {
    window.addEventListener('message', (e) => {
      if (e.data?.type === '__activate_edit_mode') setTweaksActive(true);
      if (e.data?.type === '__deactivate_edit_mode') setTweaksActive(false);
    });
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
  }, []);

  useEffect(() => { localStorage.setItem('pxs.view', view); }, [view]);
  useEffect(() => { localStorage.setItem('pxs.publicRoute', JSON.stringify(publicRoute)); }, [publicRoute]);
  useEffect(() => { localStorage.setItem('pxs.cmsRoute', JSON.stringify(cmsRoute)); }, [cmsRoute]);

  const navigate = (r) => { setPublicRoute(r); window.scrollTo(0, 0); };

  const renderPublic = () => {
    switch (publicRoute.route) {
      case 'tours': return <PublicTours state={state} navigate={navigate} />;
      case 'tour': return <PublicTour state={state} navigate={navigate} slug={publicRoute.slug} />;
      case 'vehicles': return <PublicVehicles state={state} navigate={navigate} />;
      case 'blog': return <PublicBlog state={state} navigate={navigate} />;
      case 'blogpost': return <PublicBlogPost state={state} navigate={navigate} slug={publicRoute.slug} />;
      case 'page': return <PublicPage state={state} navigate={navigate} slug={publicRoute.slug} />;
      case 'contact': return <PublicContact state={state} navigate={navigate} setState={setState} nav={publicRoute} />;
      default: return <PublicHome state={state} navigate={navigate} />;
    }
  };

  const renderCms = () => {
    switch (cmsRoute.route) {
      case 'packages': return <CmsPackages state={state} setState={setState} setCmsRoute={setCmsRoute} />;
      case 'packages-edit': return <CmsPackageEditor state={state} setState={setState} cmsRoute={cmsRoute} setCmsRoute={setCmsRoute} />;
      case 'vehicles': return <CmsVehicles state={state} setState={setState} setCmsRoute={setCmsRoute} />;
      case 'vehicles-edit': return <CmsVehicleEditor state={state} setState={setState} cmsRoute={cmsRoute} setCmsRoute={setCmsRoute} />;
      case 'blogs': return <CmsBlogs state={state} setState={setState} setCmsRoute={setCmsRoute} />;
      case 'blogs-edit': return <CmsBlogEditor state={state} setState={setState} cmsRoute={cmsRoute} setCmsRoute={setCmsRoute} />;
      case 'pages': return <CmsPages state={state} setState={setState} setCmsRoute={setCmsRoute} />;
      case 'pages-edit': return <CmsPageEditor state={state} setState={setState} cmsRoute={cmsRoute} setCmsRoute={setCmsRoute} />;
      case 'inquiries': return <CmsInquiries state={state} setState={setState} cmsRoute={cmsRoute} setCmsRoute={setCmsRoute} />;
      case 'users': return <CmsUsers state={state} setState={setState} />;
      case 'menu': return <CmsMenu state={state} setState={setState} />;
      case 'settings': return <CmsSettings state={state} setState={setState} />;
      default: return <CmsDashboard state={state} setCmsRoute={setCmsRoute} />;
    }
  };

  const styleRadius = tweaks.radius === 'sharp' ? '0px' : tweaks.radius === 'rounded' ? '24px' : '14px';

  return (
    <div style={{ position: 'relative', '--tweak-radius': styleRadius }}>
      {view === 'public' ? renderPublic() : (
        <CmsShell state={state} cmsRoute={cmsRoute} setCmsRoute={setCmsRoute}>
          {renderCms()}
        </CmsShell>
      )}

      {/* View switcher - always visible floating pill */}
      <div data-pxs-viewswitch style={{ position: 'fixed', bottom: 20, left: 20, zIndex: 100, background: 'var(--ink)', color: 'white', borderRadius: 999, padding: 4, display: 'flex', gap: 2, boxShadow: '0 10px 30px rgba(0,0,0,0.3)', fontSize: 13 }}>
        <button onClick={() => setView('public')} style={{ padding: '8px 14px', borderRadius: 999, fontWeight: 500, background: view === 'public' ? 'var(--accent)' : 'transparent', color: 'white', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <Icon name="globe" size={13} /> Public site
        </button>
        <button onClick={() => setView('cms')} style={{ padding: '8px 14px', borderRadius: 999, fontWeight: 500, background: view === 'cms' ? 'var(--accent)' : 'transparent', color: 'white', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <Icon name="settings-2" size={13} /> CMS admin
        </button>
      </div>

      <TweaksPanel active={tweaksActive} setActive={setTweaksActive} state={state} setState={setState} tweaks={tweaks} setTweaks={setTweaks} />
    </div>
  );
};

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