import { ScrollProvider } from "@/contexts/DashboardScrollContext";
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";
// @ts-expect-error - JSX module without type declarations
import { RealtimeChip } from "@/components/dashboard/RealtimeAnalytics";
import UserBehaviorDashboard from "@/components/dashboard/UserBehaviorDashboard";
import TypeformDashboard from "@/components/dashboard/TypeformDashboard";
import CustomerServiceDashboard from "@/components/dashboard/CustomerServiceDashboard";
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 (
    <ScrollProvider>
      <div className="dashboard-page flex-1 h-full relative bg-[#f8f7f5]">
        <div className="h-full overflow-auto" id="dashboard-scroll-container">
          <div className="min-h-screen max-w-[1460px]">
            <Header
              right={
                <Protected permission="dashboard:realtime">
                  <RealtimeChip />
                </Protected>
              }
            />
            <Navigation />

            <main className="px-3 pb-6 pt-3 sm:px-4 lg:px-5 space-y-3">
              <Protected permission="dashboard:stats">
                <section id="stats">
                  <StatCards />
                </section>
              </Protected>

              <Protected permission="dashboard:financial">
                <section id="financial">
                  <FinancialOverview />
                </section>
              </Protected>

              {/* Feed stretches to match the sales panel's height on xl so the
                  row bottoms align; below xl it gets its own bounded height */}
              <div className="grid grid-cols-12 gap-3 items-stretch">
                <Protected permission="dashboard:sales">
                  <section id="sales" className="col-span-12 xl:col-span-8">
                    <SalesChart className="w-full" />
                  </section>
                </Protected>
                <Protected permission="dashboard:feed">
                  <section id="feed" className="relative col-span-12 xl:col-span-4 h-[520px] xl:h-auto">
                    {/* absolute fill on xl: the feed matches the sales panel's
                        height instead of driving the row taller */}
                    <div className="h-full xl:absolute xl:inset-0">
                      <EventFeed />
                    </div>
                  </section>
                </Protected>
              </div>

              <Protected permission="dashboard:operations">
                <section id="operations-metrics">
                  <OperationsMetrics />
                </section>
              </Protected>
              <Protected permission="dashboard:payroll">
                <section id="payroll-metrics">
                  <PayrollMetrics />
                </section>
              </Protected>

              {/* Top sellers scrolls internally and stretches to match the
                  campaigns table height so the row bottoms align */}
              <div className="grid grid-cols-12 gap-3 items-stretch">
                <Protected permission="dashboard:products">
                  <section id="products" className="relative col-span-12 lg:col-span-5 h-[480px] lg:h-auto">
                    <div className="h-full lg:absolute lg:inset-0">
                      <ProductGrid />
                    </div>
                  </section>
                </Protected>
                <Protected permission="dashboard:campaigns">
                  <section id="campaigns" className="col-span-12 lg:col-span-7">
                    <KlaviyoCampaigns />
                  </section>
                </Protected>
              </div>

              <div className="grid grid-cols-12 gap-3 items-stretch">
                <Protected permission="dashboard:analytics">
                  <section id="analytics" className="col-span-12 xl:col-span-8">
                    <AnalyticsDashboard />
                  </section>
                </Protected>
                <Protected permission="dashboard:user_behavior">
                  <section id="user-behavior" className="relative col-span-12 xl:col-span-4">
                    {/* absolute-fill on xl so the card matches the Analytics
                        panel's height; tabs scroll internally rather than
                        driving the row height per selected tab */}
                    <div className="h-full xl:absolute xl:inset-0">
                      <UserBehaviorDashboard />
                    </div>
                  </section>
                </Protected>
              </div>

              <Protected permission="dashboard:meta_campaigns">
                <section id="meta-campaigns">
                  <MetaCampaigns />
                </section>
              </Protected>
              <Protected permission="dashboard:typeform">
                <section id="typeform">
                  <TypeformDashboard />
                </section>
              </Protected>
              <Protected permission="dashboard:customer_service">
                <section id="customer-service">
                  <CustomerServiceDashboard />
                </section>
              </Protected>
            </main>
          </div>
        </div>
      </div>
    </ScrollProvider>
  );
}

export default Dashboard; 
