'use client';

import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
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">
      {/* 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>
  );
}