// ============================================================
// SocialPulse — Live App Shell (API-connected, no mock data)
// Wraps the same pages with auth gate + real API
// ============================================================

const { useState: _useState2, useEffect: _useEffect2, useMemo } = React;

const _VALID_PAGES = ['overview','brands','posts','reports','calendar','credits'];

function _pageFromHash() {
  const h = (location.hash || '').replace(/^#\/?/, '').split('?')[0].split('/')[0];
  if (_VALID_PAGES.includes(h)) return h;
  return null;
}

function _hashParams() {
  const q = (location.hash || '').split('?')[1];
  return q ? Object.fromEntries(new URLSearchParams(q)) : {};
}

// Second hash path segment, e.g. '#/brands/15' → '15'. Lets pages deep-link
// into a sub-resource while the top-level router keys off the first segment.
function _hashSub() {
  const parts = (location.hash || '').replace(/^#\/?/, '').split('?')[0].split('/');
  return parts[1] || null;
}

function spNavigate(page, params) {
  let h = '#/' + page;
  if (params && Object.keys(params).length) {
    h += '?' + new URLSearchParams(params).toString();
  }
  if (location.hash !== h) location.hash = h;
}

function LiveApp() {
  const { user, isLoggedIn } = useAuth();
  const [booting, setBooting] = useState(true);
  const [page, setPageState] = useState(
    _pageFromHash() || localStorage.getItem('sp_page') || 'overview'
  );
  const [showWelcome, setShowWelcome] = useState(false);

  const setPage = (p, params) => {
    setPageState(p);
    spNavigate(p, params);
  };

  // Restore session on mount
  useEffect(() => {
    (async () => {
      if (spIsLoggedIn()) {
        try { await spFetchMe(); } catch(e) {}
      }
      setBooting(false);
    })();
  }, []);

  // Hash routing — sync hash → page and back.
  useEffect(() => {
    const onHash = () => {
      const p = _pageFromHash();
      if (p && p !== page) setPageState(p);
    };
    window.addEventListener('hashchange', onHash);
    // Ensure hash matches initial page for deep links.
    if (!_pageFromHash()) spNavigate(page);
    return () => window.removeEventListener('hashchange', onHash);
  }, [page]);

  // Once logged in: resume any in-flight scrape tasks and show welcome if first-time.
  useEffect(() => {
    if (!isLoggedIn) return;
    spRestoreScrapeTasks();
    spRestoreReportJobs();
    if (!spIsOnboarded()) setShowWelcome(true);
  }, [isLoggedIn]);

  useEffect(() => { localStorage.setItem('sp_page', page); }, [page]);

  if (booting) return <LoadingState label="Loading SocialPulse…"/>;
  if (!isLoggedIn) return <AuthPage onSuccess={() => setPage('overview')}/>;

  const dismissWelcome = () => { spSetOnboarded(); setShowWelcome(false); };

  const pages = [
    { key:'overview', label:'Overview' },
    { key:'brands', label:'Brands' },
    { key:'posts', label:'Posts' },
    { key:'reports', label:'Reports' },
    { key:'calendar', label:'Calendar' },
    { key:'credits', label:'Credits' },
  ];

  return (
    <div style={{minHeight:'100vh',display:'flex',flexDirection:'column'}}>
      <header className="app-header">
        <div className="app-logo" onClick={() => setPage('overview')} style={{cursor:'pointer'}} role="button" aria-label="Overview">
          <div className="app-logo-mark">
            <svg viewBox="0 0 24 24"><path d="M3.5 18.49l6-6.01 4 4L22 6.92l-1.41-1.41-7.09 7.97-4-4L2 16.99z"/></svg>
          </div>
          <span className="app-logo-text">SocialPulse</span>
          <span style={{
            fontFamily:'var(--font-mono)',fontSize:9,fontWeight:700,
            padding:'2px 6px',borderRadius:'var(--r-xs)',
            background:'var(--lime)',color:'var(--bg)',
            marginLeft:6,letterSpacing:'.08em',
          }}>LIVE</span>
        </div>
        <nav className="app-nav">
          {pages.map(p => (
            <button key={p.key}
              className={`app-nav-btn ${page===p.key?'active':''}`}
              onClick={() => setPage(p.key)}>
              {p.label}
            </button>
          ))}
        </nav>
        <div className="app-header-right">
          <span style={{fontFamily:'var(--font-mono)',fontSize:11,color:'var(--text3)'}}>{user?.email}</span>
          <button className="btn btn-ghost btn-sm" onClick={() => { spLogout(); setPage('overview'); }}>
            Sign out
          </button>
        </div>
      </header>

      <main className="app-container" style={{flex:1}}>
        {page === 'overview' && <OverviewPage onNavigate={setPage}/>}
        {page === 'brands' && <BrandsPage onNavigate={setPage}/>}
        {page === 'posts' && <PostsPage onNavigate={setPage}/>}
        {page === 'reports' && <ReportsPage/>}
        {page === 'calendar' && <CalendarPage onNavigate={setPage}/>}
        {page === 'credits' && <CreditsPage/>}
      </main>

      {showWelcome && (
        <WelcomeModal
          onSkip={() => { dismissWelcome(); setPage('reports'); }}
          onGoBrands={() => { dismissWelcome(); setPage('brands'); }}
        />
      )}

      <ToastHost/>
    </div>
  );
}

Object.assign(window, { spNavigate, _hashParams, _hashSub });

const liveRoot = ReactDOM.createRoot(document.getElementById('root'));
liveRoot.render(<LiveApp/>);