/**
 * App root — composes all layers.
 *
 * Architecture:
 *   data/     -> raw data + cover mapping (static, no state)
 *   harness/  -> ContentService (pure logic) + useContentStore (state)
 *   components/ -> view layer (dumb components, props only)
 *
 * App wires them together. No business logic in App.
 */

function App() {
  const store = useContentStore();

  const [showBackToTop, setShowBackToTop] = React.useState(false);
  const [viewMode, setViewMode] = React.useState('grid');
  const [filterOpen, setFilterOpen] = React.useState(false);
  const [mobileTab, setMobileTab] = React.useState('home');
  const [loading, setLoading] = React.useState(true);

  // Simulated initial load (skeleton screen)
  React.useEffect(() => {
    const timer = setTimeout(() => setLoading(false), 600);
    return () => clearTimeout(timer);
  }, []);

  // Back to top visibility
  React.useEffect(() => {
    const onScroll = () => {
      setShowBackToTop(window.scrollY > 400);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const handleBackToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const handleTabChange = (tab) => {
    setMobileTab(tab);
    if (tab === 'favorites') {
      store.setFilter('onlyFavorites', true);
    } else {
      store.setFilter('onlyFavorites', false);
    }
  };

  const handleClearFilters = () => {
    store.clearFilters();
    setMobileTab('home');
  };

  return (
    <div className="app">
      <Header stats={store.stats} />

      <Sidebar
        filters={store.filters}
        bookList={store.bookList}
        dateList={store.dateList}
        hotspotList={store.hotspotList}
        tagList={store.tagList}
        angleList={store.angleList}
        sourceList={store.sourceList}
        batchList={store.batchList}
        onFilterChange={store.setFilter}
        onClear={store.clearFilters}
      />

      <main className="app-main">
        {loading ? (
          <SkeletonGrid count={6} />
        ) : (
          <ContentGrid
            groups={store.groups}
            onToggleFav={store.toggleFavorite}
            onCardClick={store.openDetail}
            totalVisible={store.stats.visible}
            allPosts={store.posts}
            viewMode={viewMode}
            preferredVersion={store.filters.version}
          />
        )}
      </main>

      <PostDetail
        post={store.detailPost}
        open={!!store.detailPost}
        onClose={store.closeDetail}
        onToggleFav={store.toggleFavorite}
      />

      <FavoriteBar
        count={store.stats.favorites}
        onClear={store.clearFavorites}
      />

      <MobileBottomNav
        onOpenFilter={() => setFilterOpen(true)}
        activeTab={mobileTab}
        onTabChange={handleTabChange}
        favCount={store.stats.favorites}
      />

      <MobileFilterDrawer
        open={filterOpen}
        filters={store.filters}
        bookList={store.bookList}
        dateList={store.dateList}
        hotspotList={store.hotspotList}
        categoryList={store.categoryList}
        batchList={store.batchList}
        onClose={() => setFilterOpen(false)}
        onFilterChange={store.setFilter}
        onClear={handleClearFilters}
      />

      <FloatingActionButton
        showBackToTop={showBackToTop}
        onBackToTop={handleBackToTop}
        viewMode={viewMode}
        onToggleView={() => setViewMode(viewMode === 'grid' ? 'list' : 'grid')}
      />
    </div>
  );
}

window.App = App;