'use client';

import {VStack} from '@astryxdesign/core/Layout';
import {Grid} from '@astryxdesign/core/Grid';
import {PageHeader} from '@/shared/components/primitives/PageHeader';
import {ScopeControls} from '@/shared/components/scope/ScopeControls';
import {useScopeLabel} from '@/features/stores/hooks/useStoreDirectory';
import {CommerceKpiRow} from './CommerceKpiRow';
import {RevenueChart} from './analytics/RevenueChart';
import {OrdersChart} from './analytics/OrdersChart';
import {PaymentBreakdown} from './analytics/PaymentBreakdown';
import {StorePerformanceChart} from './analytics/StorePerformanceChart';
import {TopProductsTable} from './analytics/TopProductsTable';
import {CommerceSalesInsights} from './CommerceSalesInsights';
import {CommerceRevenueSummary} from './CommerceRevenueSummary';
import {CommerceRecentOrders} from './CommerceRecentOrders';

export function CommerceWorkspace() {
  const scopeLabel = useScopeLabel();

  return (
    <VStack gap={5}>
      {/* Sticky Header matching Dashboard visual language */}
      <div className="sticky -top-5 z-40 -mx-5 px-5 pt-5 pb-4 bg-[#0F0F10] border-b border-[#2F2F2F] shadow-sm">
        <PageHeader
          eyebrow="Sales & Revenue Analytics"
          title="Commerce"
          description={`Sales, orders, revenue and store performance across ${scopeLabel}.`}
          controls={<ScopeControls />}
        />
      </div>

      {/* 1 — Headline KPI Cards Row */}
      <CommerceKpiRow />

      {/* 2 — Primary Sales Trends (Revenue Trend & Orders Trend) */}
      <Grid columns={{minWidth: 360, max: 2, repeat: 'fit'}} gap={4}>
        <RevenueChart />
        <OrdersChart />
      </Grid>

      {/* 3 — Revenue Breakdown & Store Performance */}
      <Grid columns={{minWidth: 360, max: 2, repeat: 'fit'}} gap={4}>
        <PaymentBreakdown />
        <StorePerformanceChart />
      </Grid>

      {/* 4 — Top Selling Products Leaderboard & Automated Sales Insights */}
      <Grid columns={{minWidth: 360, max: 2, repeat: 'fit'}} gap={4}>
        <TopProductsTable />
        <CommerceSalesInsights />
      </Grid>

      {/* 5 — Financial Revenue Rollup & Recent Orders Live Feed */}
      <Grid columns={{minWidth: 360, max: 2, repeat: 'fit'}} gap={4}>
        <CommerceRevenueSummary />
        <CommerceRecentOrders />
      </Grid>
    </VStack>
  );
}
