import React, { useState, useMemo } from "react";
import { base44 } from "@/api/base44Client";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { Link, useNavigate } from "react-router-dom";
import { createPageUrl } from "@/utils";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Award, TrendingUp, Users, DollarSign, CheckCircle2, Clock, UserCheck, Mail, Edit, Bot, ArrowRight, Rocket, Star, Brain, Check, Sparkles, Zap, Calendar, Package, MessageSquare, AlertTriangle, MapPin, BarChart3, RefreshCw, Download, X, Lightbulb, TrendingDown, Timer } from "lucide-react";
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar } from 'recharts';
import { format, startOfMonth, endOfMonth, subMonths, differenceInHours, parseISO } from "date-fns";
import { useToast } from "@/components/ui/use-toast";

const mockWorkers = [
  { id: 1, name: "Maria G.", skill: "Server", rating: 4.9, distance: 3.2, reliability: 0.99, pro: 2 },
  { id: 2, name: "Andre P.", skill: "Culinary", rating: 4.8, distance: 5.5, reliability: 0.96, pro: 3 },
  { id: 3, name: "Jae L.", skill: "Dishwasher", rating: 4.6, distance: 1.1, reliability: 0.93, pro: 1 },
  { id: 4, name: "Rita C.", skill: "Server", rating: 4.7, distance: 4.0, reliability: 0.95, pro: 2 },
  { id: 5, name: "Luis M.", skill: "Culinary", rating: 4.5, distance: 7.4, reliability: 0.9, pro: 1 },
];

const proColors = {
  1: "bg-slate-200 text-slate-800",
  2: "bg-blue-100 text-blue-900",
  3: "bg-amber-100 text-amber-900",
};

const formatPct = (v) => `${Math.round(v * 100)}%`;

function AINudge({ text, cta, onCta, type = "success", onDismiss }) {
  const [dismissed, setDismissed] = useState(false);

  const handleDismiss = () => {
    setDismissed(true);
    if (onDismiss) onDismiss();
  };

  if (dismissed) return null;

  const typeConfig = {
    success: {
      icon: Sparkles,
      gradient: "from-emerald-500 via-teal-500 to-cyan-500",
      bgGradient: "from-emerald-50/80 via-teal-50/80 to-cyan-50/80",
      iconBg: "from-emerald-400 to-teal-500",
      textColor: "text-emerald-900",
      subTextColor: "text-emerald-700",
      buttonColor: "from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700",
      borderColor: "border-emerald-200/60",
      glowColor: "shadow-emerald-200/50"
    },
    insight: {
      icon: Lightbulb,
      gradient: "from-amber-500 via-orange-500 to-yellow-500",
      bgGradient: "from-amber-50/80 via-orange-50/80 to-yellow-50/80",
      iconBg: "from-amber-400 to-orange-500",
      textColor: "text-amber-900",
      subTextColor: "text-amber-700",
      buttonColor: "from-amber-600 to-orange-600 hover:from-amber-700 hover:to-orange-700",
      borderColor: "border-amber-200/60",
      glowColor: "shadow-amber-200/50"
    },
    achievement: {
      icon: Award,
      gradient: "from-purple-500 via-pink-500 to-rose-500",
      bgGradient: "from-purple-50/80 via-pink-50/80 to-rose-50/80",
      iconBg: "from-purple-400 to-pink-500",
      textColor: "text-purple-900",
      subTextColor: "text-purple-700",
      buttonColor: "from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700",
      borderColor: "border-purple-200/60",
      glowColor: "shadow-purple-200/50"
    }
  };

  const config = typeConfig[type];
  const IconComponent = config.icon;

  return (
    <div className={`relative overflow-hidden rounded-2xl bg-gradient-to-r ${config.bgGradient} backdrop-blur-sm border-2 ${config.borderColor} shadow-lg ${config.glowColor} transition-all duration-300 hover:shadow-xl hover:scale-[1.02]`}>
      <div className={`absolute top-0 left-0 right-0 h-1 bg-gradient-to-r ${config.gradient}`} />
      
      <div className="flex items-start gap-4 p-5">
        <div className={`flex-shrink-0 w-12 h-12 rounded-xl bg-gradient-to-br ${config.iconBg} flex items-center justify-center shadow-lg`}>
          <IconComponent className="w-6 h-6 text-white" />
        </div>

        <div className="flex-1 min-w-0 pt-1">
          <div className="flex items-start gap-2 mb-2">
            <Badge className={`bg-gradient-to-r ${config.gradient} text-white border-0 shadow-md text-xs font-bold px-2 py-0.5`}>
              AI INSIGHT
            </Badge>
          </div>
          <p className={`${config.textColor} font-semibold text-base leading-relaxed`}>
            {text}
          </p>
        </div>

        <div className="flex items-center gap-2 flex-shrink-0">
          {cta && (
            <Button 
              size="sm" 
              onClick={onCta} 
              className={`bg-gradient-to-r ${config.buttonColor} text-white shadow-lg rounded-xl font-semibold px-4 py-2 transition-all duration-200`}
            >
              {cta}
              <ArrowRight className="w-4 h-4 ml-2" />
            </Button>
          )}
          <Button
            size="icon"
            variant="ghost"
            onClick={handleDismiss}
            className={`h-8 w-8 rounded-lg ${config.subTextColor} hover:bg-white/50 transition-colors`}
          >
            <X className="w-4 h-4" />
          </Button>
        </div>
      </div>
    </div>
  );
}

export default function VendorDashboard() {
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const { toast } = useToast();

  const { data: user } = useQuery({
    queryKey: ['current-user-vendor'],
    queryFn: () => base44.auth.me(),
  });

  const { data: events } = useQuery({
    queryKey: ['vendor-events'],
    queryFn: async () => {
      const allEvents = await base44.entities.Event.list('-date');
      if (!user?.email) return [];
      return allEvents.filter(e => 
        e.vendor_name === user?.company_name || 
        e.vendor_id === user?.id ||
        e.created_by === user?.email
      );
    },
    initialData: [],
    enabled: !!user
  });

  const { data: staff } = useQuery({
    queryKey: ['vendor-staff'],
    queryFn: async () => {
      const allStaff = await base44.entities.Staff.list();
      if (!user?.company_name) return allStaff.slice(0, 10);
      return allStaff.filter(s => s.vendor_name === user?.company_name);
    },
    initialData: [],
    enabled: !!user
  });

  // Calculations
  const todayOrders = events.filter(e => {
    const eventDate = new Date(e.date);
    const today = new Date();
    return eventDate.toDateString() === today.toDateString();
  });

  const activeOrders = events.filter(e => e.status === "Active" || e.status === "Confirmed" || e.status === "In Progress");
  const completedOrders = events.filter(e => e.status === "Completed");
  const totalRevenue = completedOrders.reduce((sum, e) => sum + (e.total || 0), 0);
  
  const currentMonth = new Date().getMonth();
  const currentYear = new Date().getFullYear();
  const thisMonthOrders = events.filter(e => {
    const eventDate = new Date(e.date);
    return eventDate.getMonth() === currentMonth && 
           eventDate.getFullYear() === currentYear &&
           (e.status === "Completed" || e.status === "Active");
  });
  const thisMonthRevenue = thisMonthOrders.reduce((sum, e) => sum + (e.total || 0), 0);
  
  const activeStaff = staff.filter(s => s.employment_type !== "Medical Leave" && s.action !== "Inactive").length;
  const avgRating = staff.reduce((sum, s) => sum + (s.rating || 0), 0) / (staff.length || 1);
  const reliabilityScore = staff.reduce((sum, s) => sum + (s.reliability_score || 0), 0) / (staff.length || 1);

  // Rapid Orders (urgent orders within 24 hours)
  const rapidOrders = events
    .filter(e => {
      const eventDate = new Date(e.date);
      const now = new Date();
      const hoursUntil = differenceInHours(eventDate, now);
      return hoursUntil > 0 && hoursUntil <= 24 && 
             (e.status === "Active" || e.status === "Confirmed" || e.status === "Pending");
    })
    .sort((a, b) => new Date(a.date) - new Date(b.date))
    .slice(0, 3);

  // 6-month revenue and payroll trend
  const last6Months = Array.from({ length: 6 }, (_, i) => {
    const date = subMonths(new Date(), 5 - i);
    return {
      month: format(date, 'MMM'),
      fullDate: date
    };
  });

  const salesPayrollTrend = last6Months.map(({ month, fullDate }) => {
    const monthStart = startOfMonth(fullDate);
    const monthEnd = endOfMonth(fullDate);
    const monthOrders = events.filter(e => {
      const eventDate = new Date(e.date);
      return eventDate >= monthStart && eventDate <= monthEnd && e.status === "Completed";
    });
    const sales = monthOrders.reduce((sum, e) => sum + (e.total || 0), 0);
    const payroll = sales * 0.68; // Assume 68% payroll ratio
    return { month, sales, payroll };
  });

  // Top clients with fill rates
  const clientRevenue = completedOrders.reduce((acc, event) => {
    const client = event.business_name || "Unknown";
    if (!acc[client]) {
      acc[client] = { name: client, revenue: 0, orders: 0, requested: 0, assigned: 0 };
    }
    acc[client].revenue += (event.total || 0);
    acc[client].orders++;
    acc[client].requested += (event.requested || 0);
    acc[client].assigned += (event.assigned_staff?.length || 0);
    return acc;
  }, {});

  const topClients = Object.values(clientRevenue)
    .map(c => ({
      ...c,
      fillRate: c.requested > 0 ? (c.assigned / c.requested) * 100 : 0
    }))
    .sort((a, b) => b.revenue - a.revenue)
    .slice(0, 4);

  // Top performers with shift counts
  const topPerformers = staff
    .filter(s => s.rating > 0)
    .sort((a, b) => (b.rating || 0) - (a.rating || 0))
    .slice(0, 3)
    .map(s => ({
      ...s,
      shifts: s.total_shifts || Math.floor(Math.random() * 30) + 5
    }));

  // Staff assigned today
  const staffAssignedToday = todayOrders.reduce((sum, e) => sum + (e.requested || 0), 0);

  // Avg speed to fill (mock calculation)
  const avgSpeedToFill = "1h 12m";
  const speedChange = "-14m";

  const hour = new Date().getHours();
  const greeting = hour < 12 ? "Good morning" : hour < 18 ? "Good afternoon" : "Good evening";

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/20 to-slate-50">
      <div className="max-w-[1800px] mx-auto p-6 space-y-6">
        
        {/* Header */}
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold text-[#1C323E] mb-1">
              {greeting}, {user?.full_name?.split(' ')[0] || 'Partner'}
            </h1>
            <p className="text-slate-600">Here's your performance overview</p>
          </div>
          <div className="flex items-center gap-3">
            <Button variant="outline">
              <RefreshCw className="w-4 h-4 mr-2" />
              Refresh
            </Button>
            <Button className="bg-[#0A39DF] hover:bg-[#0A39DF]/90">
              <Download className="w-4 h-4 mr-2" />
              Export
            </Button>
          </div>
        </div>

        {/* Top KPI Metrics - NEW DESIGN */}
        <div className="grid grid-cols-4 gap-4">
          {/* Sales */}
          <Card className="bg-gradient-to-br from-white to-slate-50 border-slate-200 shadow-sm hover:shadow-md transition-all">
            <CardContent className="p-6">
              <div className="flex items-center gap-3 mb-3">
                <div className="w-10 h-10 bg-slate-100 rounded-lg flex items-center justify-center">
                  <TrendingUp className="w-5 h-5 text-slate-700" />
                </div>
                <div>
                  <p className="text-xs text-slate-500 font-medium">Sales (M1D)</p>
                </div>
              </div>
              <p className="text-4xl font-bold text-[#1C323E] mb-1">
                ${Math.round(thisMonthRevenue / 1000)},000
              </p>
              <p className="text-sm text-emerald-600 font-medium">+5% vs last month</p>
            </CardContent>
          </Card>

          {/* Payroll */}
          <Card className="bg-gradient-to-br from-white to-slate-50 border-slate-200 shadow-sm hover:shadow-md transition-all">
            <CardContent className="p-6">
              <div className="flex items-center gap-3 mb-3">
                <div className="w-10 h-10 bg-slate-100 rounded-lg flex items-center justify-center">
                  <DollarSign className="w-5 h-5 text-slate-700" />
                </div>
                <div>
                  <p className="text-xs text-slate-500 font-medium">Payroll (M1D)</p>
                </div>
              </div>
              <p className="text-4xl font-bold text-[#1C323E] mb-1">
                ${Math.round(thisMonthRevenue * 0.68 / 1000)},000
              </p>
              <p className="text-sm text-slate-600 font-medium">68% of sales</p>
            </CardContent>
          </Card>

          {/* Active Workforce */}
          <Card className="bg-gradient-to-br from-white to-slate-50 border-slate-200 shadow-sm hover:shadow-md transition-all">
            <CardContent className="p-6">
              <div className="flex items-center gap-3 mb-3">
                <div className="w-10 h-10 bg-slate-100 rounded-lg flex items-center justify-center">
                  <Users className="w-5 h-5 text-slate-700" />
                </div>
                <div>
                  <p className="text-xs text-slate-500 font-medium">Active Workforce</p>
                </div>
              </div>
              <p className="text-4xl font-bold text-[#1C323E] mb-1">
                {activeStaff}
              </p>
              <p className="text-sm text-slate-600 font-medium">+3 this week</p>
            </CardContent>
          </Card>

          {/* Avg Speed to Fill */}
          <Card className="bg-gradient-to-br from-white to-slate-50 border-slate-200 shadow-sm hover:shadow-md transition-all">
            <CardContent className="p-6">
              <div className="flex items-center gap-3 mb-3">
                <div className="w-10 h-10 bg-slate-100 rounded-lg flex items-center justify-center">
                  <Timer className="w-5 h-5 text-slate-700" />
                </div>
                <div>
                  <p className="text-xs text-slate-500 font-medium">Avg Speed-to-Fill</p>
                </div>
              </div>
              <p className="text-4xl font-bold text-[#1C323E] mb-1">
                {avgSpeedToFill}
              </p>
              <p className="text-sm text-emerald-600 font-medium">{speedChange} vs last week</p>
            </CardContent>
          </Card>
        </div>

        {/* AI Insights */}
        <div className="space-y-4">
          <AINudge 
            text="Assigned 6 top-fit workers. Consider adding 1 trainee for fairness and skill development."
            cta="Add Trainee"
            type="success"
            onCta={() => {}}
          />
          <AINudge 
            text="You're outperforming 82% of vendors in your region. Share your Gold badge to attract premium clients!"
            cta="Share Badge"
            type="achievement"
            onCta={() => {}}
          />
        </div>

        {/* Main Content Grid */}
        <div className="grid grid-cols-3 gap-6">
          
          {/* Left Column (2 cols) */}
          <div className="col-span-2 space-y-6">
            
            {/* RAPID ORDERS - NEW SECTION */}
            <Card className="bg-white border-slate-200 shadow-sm">
              <CardHeader className="border-b border-slate-100 pb-4">
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle className="text-base flex items-center gap-2">
                      <Zap className="w-5 h-5 text-amber-500" />
                      Rapid Orders
                    </CardTitle>
                    <p className="text-xs text-slate-600 mt-1">Urgent orders within 24 hours</p>
                  </div>
                  {rapidOrders.length > 0 && (
                    <Badge className="bg-red-100 text-red-700 border-red-200 font-bold">
                      {rapidOrders.length} Urgent
                    </Badge>
                  )}
                </div>
              </CardHeader>
              <CardContent className="p-5">
                {rapidOrders.length > 0 ? (
                  <div className="space-y-4">
                    {rapidOrders.map((order) => {
                      const eventDate = order.date ? parseISO(order.date) : new Date();
                      const hoursUntil = differenceInHours(eventDate, new Date());
                      const assignedCount = order.assigned_staff?.length || 0;
                      const requestedCount = order.requested || 0;
                      const fillPercentage = requestedCount > 0 ? Math.round((assignedCount / requestedCount) * 100) : 0;

                      return (
                        <div key={order.id} className="p-4 rounded-xl bg-gradient-to-r from-red-50 to-orange-50 border-2 border-red-200 hover:border-red-300 transition-all">
                          <div className="flex items-start justify-between mb-3">
                            <div>
                              <div className="flex items-center gap-2 mb-1">
                                <h3 className="font-bold text-[#1C323E]">{order.business_name || "Client"} – {order.event_name}</h3>
                                <Badge className="bg-red-500 text-white font-bold text-xs">
                                  {hoursUntil}h left
                                </Badge>
                              </div>
                              <div className="flex items-center gap-4 text-sm text-slate-600">
                                <div className="flex items-center gap-1">
                                  <Users className="w-4 h-4" />
                                  <span>{assignedCount}/{requestedCount} filled</span>
                                </div>
                                <div className="flex items-center gap-1">
                                  <Calendar className="w-4 h-4" />
                                  <span>{format(eventDate, "h:mm a")}</span>
                                </div>
                              </div>
                            </div>
                            <div className="flex gap-2">
                              <Link to={createPageUrl(`EventDetail?id=${order.id}`)}>
                                <Button size="sm" variant="outline" className="rounded-lg">
                                  View
                                </Button>
                              </Link>
                              <Button size="sm" className="bg-red-600 hover:bg-red-700 text-white rounded-lg font-semibold">
                                Quick Assign
                              </Button>
                            </div>
                          </div>
                          <div className="flex items-center gap-2">
                            <div className="flex-1 h-2 bg-white rounded-full overflow-hidden">
                              <div 
                                className={`h-full transition-all duration-500 ${
                                  fillPercentage < 60 ? 'bg-red-500' : 
                                  fillPercentage < 90 ? 'bg-amber-500' : 
                                  'bg-green-500'
                                }`}
                                style={{ width: `${fillPercentage}%` }}
                              />
                            </div>
                            <span className="text-sm font-bold text-slate-700">{fillPercentage}%</span>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                ) : (
                  <div className="text-center py-12">
                    <Zap className="w-12 h-12 mx-auto text-slate-300 mb-3" />
                    <p className="text-sm text-slate-500 font-medium">No urgent orders</p>
                    <p className="text-xs text-slate-400 mt-1">Orders within 24h will appear here</p>
                  </div>
                )}
              </CardContent>
            </Card>

            {/* Sales vs Payroll Chart */}
            <Card className="bg-white border-slate-200 shadow-sm">
              <CardHeader className="border-b border-slate-100 pb-4">
                <CardTitle className="text-base flex items-center gap-2">
                  <TrendingUp className="w-5 h-5 text-[#0A39DF]" />
                  Sales vs Payroll
                </CardTitle>
              </CardHeader>
              <CardContent className="p-6">
                <ResponsiveContainer width="100%" height={280}>
                  <BarChart data={salesPayrollTrend}>
                    <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" vertical={false} />
                    <XAxis 
                      dataKey="month" 
                      tick={{ fontSize: 12 }}
                      stroke="#94a3b8"
                      axisLine={false}
                      tickLine={false}
                    />
                    <YAxis 
                      tick={{ fontSize: 12 }}
                      stroke="#94a3b8"
                      axisLine={false}
                      tickLine={false}
                      tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`}
                    />
                    <Tooltip 
                      contentStyle={{ 
                        fontSize: '12px',
                        backgroundColor: 'white',
                        border: '1px solid #e2e8f0',
                        borderRadius: '12px',
                        padding: '8px 12px'
                      }}
                      formatter={(value) => [`$${Math.round(value).toLocaleString()}`, '']}
                    />
                    <Bar dataKey="payroll" fill="#1C323E" radius={[4, 4, 0, 0]} />
                    <Bar dataKey="sales" fill="#000000" radius={[4, 4, 0, 0]} />
                  </BarChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>

            {/* Client Analysis */}
            <Card className="bg-white border-slate-200 shadow-sm">
              <CardHeader className="border-b border-slate-100 pb-4">
                <CardTitle className="text-base flex items-center gap-2">
                  <BarChart3 className="w-5 h-5 text-[#0A39DF]" />
                  Client Analysis
                </CardTitle>
              </CardHeader>
              <CardContent className="p-6">
                {topClients.length > 0 ? (
                  <div className="space-y-5">
                    {topClients.map((client) => (
                      <div key={client.name} className="space-y-2">
                        <div className="flex items-center justify-between">
                          <div>
                            <h4 className="font-bold text-[#1C323E]">{client.name}</h4>
                            <p className="text-xs text-slate-500">Fill</p>
                          </div>
                          <div className="text-right">
                            <p className="font-bold text-[#1C323E]">${(client.revenue / 1000).toFixed(0)}k</p>
                            <p className="text-xs text-slate-500">{Math.round(client.fillRate)}%</p>
                          </div>
                        </div>
                        <div className="w-full h-2 bg-slate-100 rounded-full overflow-hidden">
                          <div 
                            className="h-full bg-[#1C323E] rounded-full transition-all duration-500"
                            style={{ width: `${client.fillRate}%` }}
                          />
                        </div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="text-center py-8">
                    <BarChart3 className="w-10 h-10 mx-auto text-slate-300 mb-2" />
                    <p className="text-sm text-slate-500">No client data</p>
                  </div>
                )}
              </CardContent>
            </Card>
          </div>

          {/* Right Column (1 col) */}
          <div className="space-y-6">
            
            {/* Total Revenue Card - NEW DESIGN */}
            <Card className="bg-gradient-to-br from-[#0A39DF] via-blue-700 to-[#1C323E] border-0 shadow-xl overflow-hidden">
              <CardContent className="p-8 relative">
                <div className="absolute top-4 right-4 flex gap-1.5">
                  <div className="w-2 h-2 bg-white/40 rounded-full"></div>
                  <div className="w-2 h-2 bg-white/40 rounded-full"></div>
                  <div className="w-2 h-2 bg-white rounded-full"></div>
                </div>
                <p className="text-white/80 text-sm mb-4 font-medium">Total Revenue</p>
                <p className="text-6xl font-bold text-white mb-2">
                  ${Math.round(totalRevenue / 1000)}k
                </p>
                <p className="text-white/70 text-sm">All time earnings</p>
              </CardContent>
            </Card>

            {/* Quick Actions - NEW DESIGN */}
            <div className="grid grid-cols-2 gap-3">
              <Link to={createPageUrl("VendorOrders")}>
                <Card className="bg-gradient-to-br from-[#0A39DF] to-blue-600 border-0 shadow-md hover:shadow-lg transition-all cursor-pointer group">
                  <CardContent className="p-6 text-center">
                    <div className="w-14 h-14 mx-auto mb-3 bg-white/20 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform">
                      <Package className="w-7 h-7 text-white" />
                    </div>
                    <p className="text-white font-bold text-base mb-1">All Orders</p>
                    <p className="text-white/70 text-xs">View & manage</p>
                  </CardContent>
                </Card>
              </Link>

              <Link to={createPageUrl("StaffDirectory")}>
                <Card className="bg-white border-slate-200 shadow-sm hover:shadow-md transition-all cursor-pointer group">
                  <CardContent className="p-6 text-center">
                    <div className="w-14 h-14 mx-auto mb-3 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform">
                      <Users className="w-7 h-7 text-blue-600" />
                    </div>
                    <p className="text-[#1C323E] font-bold text-base mb-1">My Orders</p>
                    <p className="text-slate-500 text-xs">Manage staff</p>
                  </CardContent>
                </Card>
              </Link>
            </div>

            {/* Today's Metrics */}
            <div className="grid grid-cols-2 gap-3">
              <Card className="bg-white border-slate-200 shadow-sm">
                <CardContent className="p-5">
                  <div className="flex items-center justify-between mb-3">
                    <div className="w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center">
                      <Calendar className="w-5 h-5 text-blue-600" />
                    </div>
                    <ArrowRight className="w-4 h-4 text-slate-300" />
                  </div>
                  <p className="text-3xl font-bold text-[#1C323E] mb-1">{todayOrders.length}</p>
                  <p className="text-sm text-slate-600">Orders Today</p>
                </CardContent>
              </Card>

              <Card className="bg-white border-slate-200 shadow-sm">
                <CardContent className="p-5">
                  <div className="flex items-center justify-between mb-3">
                    <div className="w-10 h-10 bg-purple-50 rounded-lg flex items-center justify-center">
                      <Package className="w-5 h-5 text-purple-600" />
                    </div>
                    <Badge className="bg-green-100 text-green-700 text-xs font-bold">Active</Badge>
                  </div>
                  <p className="text-3xl font-bold text-[#1C323E] mb-1">{activeOrders.length}</p>
                  <p className="text-sm text-slate-600">In Progress</p>
                </CardContent>
              </Card>
            </div>

            {/* Staff Assigned Today */}
            <Card className="bg-white border-slate-200 shadow-sm">
              <CardContent className="p-5">
                <div className="flex items-center justify-between mb-4">
                  <div className="w-10 h-10 bg-amber-50 rounded-lg flex items-center justify-center">
                    <Users className="w-5 h-5 text-amber-600" />
                  </div>
                  <Badge className="bg-amber-100 text-amber-700 text-xs font-bold">Today</Badge>
                </div>
                <p className="text-4xl font-bold text-[#1C323E] mb-1">{staffAssignedToday}</p>
                <p className="text-sm text-slate-600">Staff Assigned</p>
              </CardContent>
            </Card>

            {/* Top Clients - NEW DESIGN */}
            <Card className="bg-white border-slate-200 shadow-sm">
              <CardHeader className="pb-3">
                <CardTitle className="text-sm flex items-center gap-2">
                  <Star className="w-4 h-4 text-amber-500" />
                  Top Clients
                </CardTitle>
              </CardHeader>
              <CardContent className="p-4">
                {topClients.slice(0, 3).length > 0 ? (
                  <div className="space-y-3">
                    {topClients.slice(0, 3).map((client) => (
                      <div key={client.name} className="flex items-center justify-between p-3 rounded-lg bg-slate-50 border border-slate-200">
                        <div>
                          <p className="font-bold text-sm text-[#1C323E]">{client.name}</p>
                          <p className="text-xs text-slate-500">+{client.orders}%</p>
                        </div>
                        <p className="font-bold text-[#1C323E]">${(client.revenue / 1000).toFixed(0)}k</p>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="text-center py-6">
                    <Star className="w-8 h-8 mx-auto text-slate-300 mb-2" />
                    <p className="text-xs text-slate-500">No client data</p>
                  </div>
                )}
              </CardContent>
            </Card>

            {/* Top Performers - NEW DESIGN */}
            <Card className="bg-white border-slate-200 shadow-sm">
              <CardHeader className="pb-3">
                <CardTitle className="text-sm flex items-center gap-2">
                  <Award className="w-4 h-4 text-blue-500" />
                  Top Performers
                </CardTitle>
              </CardHeader>
              <CardContent className="p-4">
                {topPerformers.length > 0 ? (
                  <div className="space-y-3">
                    {topPerformers.map((member) => (
                      <div key={member.id} className="flex items-center justify-between p-3 rounded-lg bg-slate-50 border border-slate-200">
                        <div>
                          <p className="font-bold text-sm text-[#1C323E]">
                            {member.employee_name} - {member.position || "Staff"}
                          </p>
                          <p className="text-xs text-slate-500">{member.shifts} shifts</p>
                        </div>
                        <div className="flex items-center gap-1">
                          <span className="text-sm font-bold text-[#1C323E]">{(member.rating || 0).toFixed(1)}</span>
                          <Star className="w-3 h-3 text-amber-500 fill-amber-500" />
                        </div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="text-center py-6">
                    <Award className="w-8 h-8 mx-auto text-slate-300 mb-2" />
                    <p className="text-xs text-slate-500">No staff data</p>
                  </div>
                )}
              </CardContent>
            </Card>

            {/* Gold Vendors - NEW SECTION */}
            <Card className="bg-white border-slate-200 shadow-sm">
              <CardHeader className="pb-3">
                <CardTitle className="text-sm flex items-center gap-2">
                  <Award className="w-4 h-4 text-amber-500" />
                  Gold Vendors
                </CardTitle>
              </CardHeader>
              <CardContent className="p-4">
                <div className="space-y-3">
                  <div className="flex items-center justify-between p-3 rounded-lg bg-gradient-to-r from-amber-50 to-yellow-50 border border-amber-200">
                    <div>
                      <p className="font-bold text-sm text-[#1C323E]">Legendary Staffing</p>
                      <p className="text-xs text-slate-500">Score</p>
                    </div>
                    <p className="text-2xl font-bold text-amber-600">98</p>
                  </div>
                  <div className="flex items-center justify-between p-3 rounded-lg bg-gradient-to-r from-amber-50 to-yellow-50 border border-amber-200">
                    <div>
                      <p className="font-bold text-sm text-[#1C323E]">Epic Workforce</p>
                      <p className="text-xs text-slate-500">Score</p>
                    </div>
                    <p className="text-2xl font-bold text-amber-600">96</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  );
}