// TroveAppControlled — the core app shell used by both the design canvas and standalone views.
// Extracted so it can be shared across root.jsx and mono-root.jsx.

function TroveAppControlled({ variant, theme: themeProp, density: densityProp, initialPage }) {
  const [page, setPage] = React.useState(initialPage);
  const [collection, setCollection] = React.useState(null);
  const [theme, setTheme] = React.useState(themeProp);
  const [density] = React.useState(densityProp);
  const [openBookmark, setOpenBookmark] = React.useState(null);
  const [cmdkOpen, setCmdkOpen] = React.useState(false);
  const [quickAddOpen, setQuickAddOpen] = React.useState(false);
  const [aiOpen, setAiOpen] = React.useState(false);
  const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false);
  const [gateOpen, setGateOpen] = React.useState(false);

  const GATED_PAGES = ['collections', 'community'];

  const navigate = (id) => {
    if (window.__PUBLIC_MODE__ && !window.__FULL_ACCESS__ && GATED_PAGES.includes(id)) {
      setGateOpen(true);
    } else {
      setPage(id);
      setCollection(null);
      setOpenBookmark(null);
    }
  };

  React.useEffect(() => { setTheme(themeProp); }, [themeProp]);
  React.useEffect(() => { setPage(initialPage); setCollection(null); setOpenBookmark(null); }, [initialPage]);

  const variantStyle = (() => {
    if (variant === 'mono') {
      return {
        '--bg': theme === 'dark' ? '#0F0F0F' : '#FFFFFF',
        '--surface': theme === 'dark' ? '#1A1A1A' : '#FAFAFA',
        '--surface-2': theme === 'dark' ? '#1F1F1F' : '#F5F5F5',
        '--surface-3': theme === 'dark' ? '#262626' : '#EEEEEE',
        '--border': theme === 'dark' ? '#2A2A2A' : '#E5E5E5',
        '--border-sub': theme === 'dark' ? '#222' : '#EEEEEE',
        '--blue': theme === 'dark' ? '#F0F0F0' : '#1A1A1A',
        '--blue-hover': theme === 'dark' ? '#FFFFFF' : '#000000',
        '--blue-bg': theme === 'dark' ? 'rgba(255,255,255,0.08)' : '#F0F0F0',
        '--blue-text': theme === 'dark' ? '#F0F0F0' : '#1A1A1A',
        '--select-bg': theme === 'dark' ? 'rgba(255,255,255,0.06)' : '#F5F5F5',
      };
    }
    return {};
  })();

  React.useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
        e.preventDefault(); setCmdkOpen(o => !o);
      }
      if (e.key === 'Escape') { setCmdkOpen(false); setQuickAddOpen(false); setAiOpen(false); }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const onTab = (id) => navigate(id);
  const onSidebar = (id) => navigate(id);
  const onSidebarCollection = (id) => {
    if (window.__PUBLIC_MODE__ && !window.__FULL_ACCESS__) {
      setGateOpen(true);
    } else {
      setPage('collections');
      setCollection(id);
      setOpenBookmark(null);
    }
  };
  const onCollectionDetail = (id) => { setPage('collections'); setCollection(id); setOpenBookmark(null); };
  const onCmdAction = (a) => {
    if (a === 'add') setQuickAddOpen(true);
    if (a === 'theme') setTheme(t => t === 'light' ? 'dark' : 'light');
    if (a === 'map') { setPage('map'); setCollection(null); setOpenBookmark(null); }
    if (a === 'bulk') { setPage('bulk'); setCollection(null); setOpenBookmark(null); }
    if (a === 'feedback') { setPage('feedback'); setCollection(null); setOpenBookmark(null); }
  };

  const isLanding = page === 'landing';
  let activeTab = page === 'bookmarks' || page === 'inbox' || page === 'archive' ? 'bookmarks'
                : page === 'map' ? 'map'
                : page === 'community' ? 'community'
                : page === 'collections' ? 'collections'
                : 'catchup';

  return (
    <div className="app" data-theme={theme} data-density={density} style={{...variantStyle, height:'100%'}}>
      {!isLanding && (
        <TopNav
          activeTab={activeTab}
          activePage={page}
          onTab={onTab}
          theme={theme}
          onTheme={() => setTheme(t => t === 'light' ? 'dark' : 'light')}
          onSearchClick={() => setCmdkOpen(true)}
          aiOpen={aiOpen}
          onToggleAI={() => setAiOpen(o => !o)}
          onPage={onSidebar}
          onCollection={onSidebarCollection}
          activeCollection={collection}
        />
      )}
      <div className="body">
        {!isLanding && (
          <Sidebar
            activePage={openBookmark ? '' : page}
            onPage={onSidebar}
            activeCollection={collection}
            onCollection={onSidebarCollection}
            collapsed={sidebarCollapsed}
            onToggleCollapse={() => setSidebarCollapsed(c => !c)}
          />
        )}
        <main className="main">
          {openBookmark
            ? <BookmarkDetail bookmarkId={openBookmark} onBack={() => setOpenBookmark(null)} />
            : page === 'landing' ? <Landing />
            : page === 'catchup' ? <CatchUp onOpenBookmark={(id) => setOpenBookmark(id)} onPage={onSidebar} />
            : (page === 'bookmarks' || page === 'inbox' || page === 'archive') ? <BookmarksPage onOpenBookmark={(id) => setOpenBookmark(id)} collectionFilter={null} />
            : page === 'collections' ? (
                collection
                  ? <CollectionDetail collectionId={collection} onBack={() => setCollection(null)} onOpenBookmark={(id) => setOpenBookmark(id)} onOpenCollection={onCollectionDetail} />
                  : <CollectionsPage onOpenCollection={onCollectionDetail} />
              )
            : page === 'map' ? <KnowledgeMap />
            : page === 'community' ? <CommunityPage />
            : page === 'feedback' ? <FeedbackPage />
            : page === 'bulk' ? <BulkUpload onClose={() => setPage('bookmarks')} />
            : null
          }
        </main>
      </div>
      <CommandPalette open={cmdkOpen} onClose={() => setCmdkOpen(false)} onAction={onCmdAction} />
      <QuickAddModal open={quickAddOpen} onClose={() => setQuickAddOpen(false)} />
      {aiOpen && !isLanding && <TroveAIPanel onClose={() => setAiOpen(false)} />}
      {gateOpen && (
        <PreviewGateModal
          onClose={() => setGateOpen(false)}
          onSuccess={() => setGateOpen(false)}
        />
      )}
    </div>
  );
}

window.TroveAppControlled = TroveAppControlled;