'use client';

import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
import { PageHeader } from '@/components/shared/page-header';
import { KpiCardsWithBoundary } from './kpi-cards';
import { PipelineChart } from './pipeline-chart';
import { RevenueForecast } from './revenue-forecast';
import { ActivityFeed } from './activity-feed';

export function DashboardShell() {
  useRealtimeInvalidation({
    'interest:stageChanged': [
      ['dashboard', 'pipeline'],
      ['dashboard', 'forecast'],
    ],
    'client:created': [['dashboard', 'kpis']],
    'berth:statusChanged': [
      ['dashboard', 'kpis'],
      ['dashboard', 'forecast'],
    ],
  });

  return (
    <div className="space-y-6">
      <PageHeader
        title="Dashboard"
        eyebrow="Overview"
        description="Live snapshot of your marina activity"
        kpiLine={<span>Last 30 days</span>}
        variant="gradient"
      />

      {/* Row 1: KPI cards */}
      <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
        <KpiCardsWithBoundary />
      </div>

      {/* Row 2: Pipeline chart + Revenue forecast */}
      <div className="grid gap-4 grid-cols-1 lg:grid-cols-3">
        <div className="lg:col-span-2">
          <PipelineChart />
        </div>
        <div className="lg:col-span-1">
          <RevenueForecast />
        </div>
      </div>

      {/* Row 3: Activity feed */}
      <ActivityFeed />
    </div>
  );
}