
/**
 * Phase 2: Enhanced Cockpit Dashboard
 * Main entry point for the operational command center with advanced features
 */

import { Suspense } from 'react';
import { getServerSession } from 'next-auth';
import { authOptions } from '@/lib/auth';
import { redirect } from 'next/navigation';
import { EnhancedCockpitDashboard } from '@/components/cockpit/enhanced-cockpit-dashboard';
import { Skeleton } from '@/components/ui/skeleton';

export const metadata = {
  title: 'Operational Cockpit | Quote2Contract',
  description: 'Advanced operational command center with role-based insights, export capabilities, and real-time monitoring'
};

export default async function CockpitPage() {
  const session = await getServerSession(authOptions);

  if (!session) {
    redirect('/auth/signin');
  }

  // Get user role
  const userRole = (session.user as any)?.role || "user";

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-950 dark:to-slate-900">
      <div className="container mx-auto p-4 lg:p-6">
        <Suspense fallback={<CockpitSkeleton />}>
          <EnhancedCockpitDashboard userRole={userRole} />
        </Suspense>
      </div>
    </div>
  );
}

function CockpitSkeleton() {
  return (
    <div className="space-y-6">
      <Skeleton className="h-12 w-64" />
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        {[...Array(4)].map((_, i) => (
          <Skeleton key={i} className="h-32" />
        ))}
      </div>
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Skeleton className="h-96" />
        <Skeleton className="h-96" />
      </div>
    </div>
  );
}
