import Dashboard from "@/components/dashboard/dashboard";
import { fetchServer } from '@/lib/api';
import { performance } from 'perf_hooks';
import { Info, GitCommit, User, Zap } from 'lucide-react';
import packageJson from '../../package.json';
import { getGitInfo, getShortGitHash } from '@/lib/utils/git';
import { Suspense } from 'react';
import dynamic from 'next/dynamic';
import { Skeleton } from '@/components/ui/skeleton';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';

// Lazy load the Content component
const Content = dynamic(() => import("@/components/dashboard/content"), {
  loading: () => <DashboardContentSkeleton />
});

// Loading skeleton for the dashboard content
function DashboardContentSkeleton() {
  return (
    <div className="space-y-6">
      {/* Header skeleton */}
      <div>
        <Skeleton className="h-8 w-64 mb-2" />
        <Skeleton className="h-4 w-96" />
      </div>

      {/* Stats cards skeleton */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-6">
        {[...Array(4)].map((_, i) => (
          <Card key={i}>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <Skeleton className="h-4 w-20" />
              <Skeleton className="h-5 w-5 rounded" />
            </CardHeader>
            <CardContent>
              <Skeleton className="h-7 w-16 mb-1" />
              <Skeleton className="h-3 w-24" />
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Best selling products skeleton */}
      <Card>
        <CardHeader>
          <Skeleton className="h-6 w-48" />
          <Skeleton className="h-4 w-72" />
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {[...Array(5)].map((_, i) => (
              <div key={i} className="flex items-center gap-4">
                <Skeleton className="h-12 w-12 rounded-md" />
                <div className="space-y-2">
                  <Skeleton className="h-4 w-40" />
                  <Skeleton className="h-4 w-20" />
                </div>
                <div className="ml-auto text-right">
                  <Skeleton className="h-4 w-16 ml-auto" />
                  <Skeleton className="h-4 w-16 ml-auto mt-2" />
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

// ✅ Corrected Vendor Type
interface Vendor {
  _id: string;
  username: string;
  storeId: string;
  pgpKey: string;
  __v: number;
}

interface User {
  vendor: Vendor;
}

interface OrderStats {
  totalOrders: number;
  pendingOrders: number;
  completedOrders: number;
  cancelledOrders: number;
}

export default async function DashboardPage() {
  const startTime = performance.now();

  const [userResponse, orderStats] = await Promise.all([
    fetchServer<User>("/auth/me"),
    fetchServer<OrderStats>("/orders/stats")
  ]);
  
  // Get git info using the new utility
  const gitInfo = getGitInfo();

  const endTime = performance.now();
  const generationTime = (endTime - startTime).toFixed(2);
  const panelVersion = packageJson.version;
  const commitHash = gitInfo.hash;

  const vendor = userResponse.vendor; 

  return (
    <Dashboard>
      <Suspense fallback={<DashboardContentSkeleton />}>
        <Content username={vendor.username} orderStats={orderStats} />
      </Suspense>
      <div className="fixed bottom-2 right-2 text-xs text-muted-foreground bg-background/80 backdrop-blur-sm px-2 py-1 rounded border border-border/50 z-50 flex items-center space-x-2">
        <div className="flex items-center gap-1">
          <Info size={12} className="text-muted-foreground/80" /> 
          <span>v{panelVersion}</span>
        </div>

        <div className="flex items-center gap-1">
          <User size={12} className="text-muted-foreground/80" />
          <span>{vendor.username}</span>
        </div>

        <div className="flex items-center gap-1">
          <GitCommit size={12} className="text-muted-foreground/80" />
          <span>{commitHash}</span>
        </div>

        <div className="flex items-center gap-1">
          <Zap size={12} className="text-amber-500" />
          <span>Generated in {generationTime}ms</span>
        </div>

        <span className="px-1.5 py-0.5 text-xs rounded-sm bg-emerald-500/20 text-emerald-300">
          {process.env.NODE_ENV || 'development'}
        </span>
      </div>
    </Dashboard>
  );
}