import { ScrollProvider } from "@/contexts/DashboardScrollContext";
import { ThemeProvider } from "@/components/dashboard/theme/ThemeProvider";
import { Protected } from "@/components/auth/Protected";
import EventFeed from "@/components/dashboard/EventFeed";
import StatCards from "@/components/dashboard/StatCards";
import FinancialOverview from "@/components/dashboard/FinancialOverview";
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 AnalyticsDashboard from "@/components/dashboard/AnalyticsDashboard";
import RealtimeAnalytics from "@/components/dashboard/RealtimeAnalytics";
import UserBehaviorDashboard from "@/components/dashboard/UserBehaviorDashboard";
import TypeformDashboard from "@/components/dashboard/TypeformDashboard";
import PayrollMetrics from "@/components/dashboard/PayrollMetrics";
import OperationsMetrics from "@/components/dashboard/OperationsMetrics";
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">
                  <Protected permission="dashboard:stats">
                    <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>
                  </Protected>
                  <Protected permission="dashboard:realtime">
                    <div id="realtime" className="xl:col-span-2 col-span-6 overflow-auto">
                      <div className="h-full">
                        <RealtimeAnalytics />
                      </div>
                    </div>
                  </Protected>
                </div>
                <Protected permission="dashboard:financial">
                  <div className="grid grid-cols-12 gap-4">
                    <div id="financial" className="col-span-12">
                      <FinancialOverview />
                    </div>
                  </div>
                </Protected>
                <Protected permission="dashboard:payroll">
                  <div id="payroll-metrics">
                    <PayrollMetrics />
                  </div>
                </Protected>
                <Protected permission="dashboard:operations">
                  <div id="operations-metrics">
                    <OperationsMetrics />
                  </div>
                </Protected>
                <div className="grid grid-cols-12 gap-4">
                  <Protected permission="dashboard:feed">
                    <div id="feed" className="col-span-12 lg:col-span-6 xl:col-span-4 h-[600px] lg:h-[740px]">
                      <EventFeed />
                    </div>
                  </Protected>
                  <Protected permission="dashboard:sales">
                    <div id="sales" className="col-span-12 xl:col-span-8 h-full w-full flex">
                      <SalesChart className="w-full h-full"/>
                    </div>
                  </Protected>
                </div>
                <div className="grid grid-cols-12 gap-4">
                  <Protected permission="dashboard:products">
                    <div id="products" className="col-span-12 lg:col-span-4 h-[500px]">
                      <ProductGrid />
                    </div>
                  </Protected>
                  <Protected permission="dashboard:campaigns">
                    <div id="campaigns" className="col-span-12 lg:col-span-8">
                      <KlaviyoCampaigns />
                    </div>
                  </Protected>
                </div>
                <div className="grid grid-cols-12 gap-4">
                  <Protected permission="dashboard:analytics">
                    <div id="analytics" className="col-span-12 xl:col-span-8">
                      <AnalyticsDashboard />
                    </div>
                  </Protected>
                  <Protected permission="dashboard:user_behavior">
                    <div id="user-behavior" className="col-span-12 xl:col-span-4">
                      <UserBehaviorDashboard />
                    </div>
                  </Protected>
                </div>
                <Protected permission="dashboard:meta_campaigns">
                  <div id="meta-campaigns">
                    <MetaCampaigns />
                  </div>
                </Protected>
                <Protected permission="dashboard:typeform">
                  <div id="typeform">
                    <TypeformDashboard />
                  </div>
                </Protected>
              </div>
            </div>
          </div>
        </div>
      </ScrollProvider>
    </ThemeProvider>
  );
}

export default Dashboard; 
