import Dashboard from "@/components/dashboard/dashboard";
import Content from "@/components/dashboard/content";
import { fetchServer } from '@/lib/server-service';
import { performance } from 'perf_hooks';
import { Info, GitCommit, User, Zap } from 'lucide-react';
import packageJson from '../../package.json';
import { getGitCommitInfo } from '@/lib/git-utils';

// ✅ 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, gitInfo] = await Promise.all([
    fetchServer<User>("/auth/me"),
    fetchServer<OrderStats>("/orders/stats"),
    getGitCommitInfo()
  ]);

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

  const vendor = userResponse.vendor; 

  return (
    <Dashboard>
      <Content username={vendor.username} orderStats={orderStats} />
      <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>
  );
}