import { ScrollProvider } from "@/contexts/DashboardScrollContext";
import { ThemeProvider } from "@/components/dashboard/theme/ThemeProvider";
import AircallDashboard from "@/components/dashboard/AircallDashboard";
import EventFeed from "@/components/dashboard/EventFeed";
import StatCards from "@/components/dashboard/StatCards";
import ProductGrid from "@/components/dashboard/ProductGrid";
import SalesChart from "@/components/dashboard/SalesChart";
import KlaviyoCampaigns from "@/components/dashboard/KlaviyoCampaigns";
import MetaCampaigns from "@/components/dashboard/MetaCampaigns";
import GorgiasOverview from "@/components/dashboard/GorgiasOverview";
import AnalyticsDashboard from "@/components/dashboard/AnalyticsDashboard";
import RealtimeAnalytics from "@/components/dashboard/RealtimeAnalytics";
import UserBehaviorDashboard from "@/components/dashboard/UserBehaviorDashboard";
import TypeformDashboard from "@/components/dashboard/TypeformDashboard";
import Header from "@/components/dashboard/Header";
import Navigation from "@/components/dashboard/Navigation";

export function Dashboard() {
  return (
    <ThemeProvider>
      <ScrollProvider>
        <div className="flex-1 h-full relative">
          <div className="h-full overflow-auto" id="dashboard-scroll-container">
            <div className="min-h-screen max-w-[1600px] mx-auto relative">
              <div className="p-4">
                <Header />
              </div>
              <Navigation />
             
              <div className="p-4 space-y-4">
                <div className="grid grid-cols-1 xl:grid-cols-6 gap-4">
                  <div className="xl:col-span-4 col-span-6">
                    <div className="space-y-4 h-full w-full">
                      <div id="stats">
                        <StatCards />
                      </div>
                    </div>
                  </div>
                  <div id="realtime" className="xl:col-span-2 col-span-6 overflow-auto">
                    <div className="h-full">
                      <RealtimeAnalytics />
                    </div>
                  </div>
                </div>
                <div className="grid grid-cols-12 gap-4">
                  <div id="feed" className="col-span-12 lg:col-span-6 xl:col-span-4 h-[600px] lg:h-[740px]">
                    <EventFeed />
                  </div>
                  <div id="sales" className="col-span-12 xl:col-span-8 h-full w-full flex">
                    <SalesChart className="w-full h-full"/>
                  </div>
                </div>
                <div className="grid grid-cols-12 gap-4">
                  <div id="products" className="col-span-12 lg:col-span-4 h-[500px]">
                    <ProductGrid />
                  </div>
                  <div id="campaigns" className="col-span-12 lg:col-span-8">
                    <KlaviyoCampaigns />
                  </div>
                </div>
                <div className="grid grid-cols-12 gap-4">
                  <div id="analytics" className="col-span-12 xl:col-span-8">
                    <AnalyticsDashboard />
                  </div>
                  <div id="user-behavior" className="col-span-12 xl:col-span-4">
                    <UserBehaviorDashboard />
                  </div>
                </div>
                <div id="meta-campaigns">
                  <MetaCampaigns />
                </div>
                <div id="typeform">
                  <TypeformDashboard />
                </div>
                <div id="gorgias-overview">
                  <GorgiasOverview />
                </div>
                <div id="calls">
                  <AircallDashboard />
                </div>
              </div>
            </div>
          </div>
        </div>
      </ScrollProvider>
    </ThemeProvider>
  );
}

export default Dashboard; 