"use client";

import { useCallback, useState } from "react";
import { ThemeProvider } from "next-themes";
import { AppProvider, useApp } from "@/components/app-context";
import { SiteHeader } from "@/components/site-header";
import { Hero } from "@/components/hero";
import { CategoryCards, StatsBar, ToolExplorer } from "@/components/sections/landing";
import { FeatureSections, WhatIs, FaqSection, TeaCard, SiteFooter } from "@/components/sections/site-sections";
import { ToolWorkbench } from "@/components/tool-workbench";
import { ScrollTop, TeaPopup } from "@/components/tea-popup";
import type { CatId } from "@/data/tools";

function Shell() {
  const { openTool } = useApp();
  const [tab, setTab] = useState<CatId | "popular">("popular");

  const handleNavigate = useCallback((id: string) => {
    openTool(id);
  }, [openTool]);

  const pickCategory = useCallback((cat: CatId) => {
    setTab(cat);
    document.getElementById("tools")?.scrollIntoView({ behavior: "smooth", block: "start" });
  }, []);

  return (
    <div className="flex min-h-screen flex-col bg-white text-foreground dark:bg-[#0c1512]">
      <SiteHeader onNavigate={handleNavigate} />
      <main className="flex-1">
        <div className="relative overflow-hidden">
          <div className="pointer-events-none absolute inset-0 -z-10 bg-[linear-gradient(180deg,#ffffff_0%,#edf5f0_16%,#dfece4_52%,#cee4d5_100%)] dark:bg-[linear-gradient(180deg,#0c1512_0%,#0f1a15_45%,#122018_100%)]" />
          <div className="pointer-events-none absolute -left-40 top-24 -z-10 h-96 w-96 rounded-full bg-emerald-300/30 blur-3xl dark:bg-emerald-500/10" />
          <div className="pointer-events-none absolute -right-40 top-64 -z-10 h-[28rem] w-[28rem] rounded-full bg-emerald-200/50 blur-3xl dark:bg-emerald-500/10" />
          <Hero onOpenTool={openTool} />
          <div id="features">
            <CategoryCards onPick={pickCategory} />
            <StatsBar />
          </div>
          <ToolExplorer tab={tab} setTab={setTab} onOpenTool={handleNavigate} />
        </div>
        <FeatureSections onOpenTool={handleNavigate} />
        <WhatIs onOpenTool={handleNavigate} />
        <FaqSection />
        <div id="donate">
          <TeaCard />
        </div>
      </main>
      <SiteFooter onNavigate={handleNavigate} />
      <ToolWorkbench />
      <ScrollTop />
      <TeaPopup />
    </div>
  );
}

export default function Page() {
  return (
    <ThemeProvider attribute="class" defaultTheme="light" enableSystem={false} disableTransitionOnChange>
      <AppProvider>
        <Shell />
      </AppProvider>
    </ThemeProvider>
  );
}