// Top-level App: view router + auth modal + toast notifications
const { useState: useSA, useEffect: useEA } = React;

window.DEFAULT_FILTERS = {
  tiers: [],
  maxCost: 12000,
  vibes: [],
  biomes: [],
  minSafety: 0,
  minVisa: 0,
  minInternet: 0,
  minHealth: 0,
};

function App() {
  const store = useStore();
  const [view, setView] = useSA('map'); // map | playbooks | profile | feedback | admin
  const [authOpen, setAuthOpen] = useSA(false);
  const [toast, setToast] = useSA(null);
  const [selectedCityId, setSelectedCityId] = useSA(null);

  useEA(() => {
    const onSignIn = () => setAuthOpen(true);
    const onAdded = (e) => {
      setToast({ msg: `${e.detail.name} added to playbook ↗`, view: 'playbooks' });
      setTimeout(() => setToast(null), 4000);
    };
    window.addEventListener('expat:require-signin', onSignIn);
    window.addEventListener('expat:added-to-playbook', onAdded);
    return () => {
      window.removeEventListener('expat:require-signin', onSignIn);
      window.removeEventListener('expat:added-to-playbook', onAdded);
    };
  }, []);

  const openCity = (id) => { setSelectedCityId(id); setView('map'); };

  return (
    <div className="app-shell">
      <TopNav view={view} setView={setView} onSignIn={() => setAuthOpen(true)}/>

      <div className="app-body">
        {/* Map is mounted always so its state persists; just hidden when not active */}
        <div style={{ display: view === 'map' ? 'flex' : 'none', flex: 1, minHeight: 0 }}>
          <MapView selectedId={selectedCityId} setSelectedId={setSelectedCityId}/>
        </div>
        {view !== 'map' && (
          <div className="page-wrap">
            <button className="back-to-map" onClick={() => setView('map')}>
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4">
                <path d="M10 3L5 8l5 5"/>
              </svg>
              <span>Back to map</span>
              <span className="back-to-map-sep">·</span>
              <span className="back-to-map-context">{view === 'playbooks' ? 'Playbooks' : view === 'profile' ? 'Your bio' : view === 'feedback' ? 'Feedback' : view === 'admin' ? 'Admin center' : ''}</span>
            </button>
            {view === 'playbooks' && <PlaybooksView openCity={openCity}/>}
            {view === 'profile' && <ProfilePage/>}
            {view === 'feedback' && <FeedbackPage/>}
            {view === 'admin' && <AdminPage openCity={openCity}/>}
          </div>
        )}
      </div>

      <SignInModal open={authOpen} onClose={() => setAuthOpen(false)}/>

      {toast && (
        <div className="toast" onClick={() => { setView(toast.view); setToast(null); }}>
          {toast.msg}
        </div>
      )}
    </div>
  );
}

window.App = App;