import { 
  useListShifts, 
  useListApplications, 
  useListInvoices, 
  useListStaff,
  useListStaffDocumentsByStatus
} from '@/dataconnect-generated/react';
import { useNavigate } from 'react-router-dom';
import { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/common/components/ui/card';
import { Button } from '@/common/components/ui/button';
import { Alert, AlertDescription, AlertTitle } from '@/common/components/ui/alert';
import { 
  Clock, 
  FileText, 
  TrendingUp, 
  Users, 
  AlertTriangle, 
  PlusCircle, 
  UserPlus 
} from 'lucide-react';
import { format } from 'date-fns';
import { DocumentStatus } from '@/dataconnect-generated';
import CreateOrderDialog from '@/features/operations/orders/components/CreateOrderDialog';
import { motion, type Variants } from 'framer-motion';

// Animation variants
const containerVariants: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
      delayChildren: 0.2
    }
  }
};

const itemVariants: Variants = {
  hidden: { y: 20, opacity: 0 },
  visible: {
    y: 0,
    opacity: 1,
    transition: {
      type: "spring",
      stiffness: 100,
      damping: 12
    }
  }
};

const headerVariants: Variants = {
  hidden: { y: -20, opacity: 0 },
  visible: {
    y: 0,
    opacity: 1,
    transition: {
      type: "spring",
      stiffness: 120,
      damping: 14
    }
  }
};

const alertVariants: Variants = {
  hidden: { scale: 0.95, opacity: 0 },
  visible: {
    scale: 1,
    opacity: 1,
    transition: {
      type: "spring",
      stiffness: 100,
      damping: 15
    }
  }
};

const AdminDashboard = () => {
  const navigate = useNavigate();
  const [isOrderDialogOpen, setIsOrderDialogOpen] = useState(false);

  // Data fetching
  const { data: shiftsData } = useListShifts();
  const { data: applicationsData } = useListApplications();
  const { data: invoicesData } = useListInvoices();
  const { data: staffData } = useListStaff();
  const { data: complianceData } = useListStaffDocumentsByStatus({ status: DocumentStatus.EXPIRING });

  // Metrics calculation
  const today = new Date();
  const todayStart = new Date(today.setHours(0, 0, 0, 0));
  const todayEnd = new Date(today.setHours(23, 59, 59, 999));

  const activeShiftsToday = shiftsData?.shifts.filter(shift => {
    if (!shift.startTime) return false;
    const shiftDate = new Date(shift.startTime);
    return shiftDate >= todayStart && shiftDate <= todayEnd;
  }).length || 0;

  const pendingApplications = applicationsData?.applications.filter(app => app.status === 'PENDING').length || 0;
  // Assuming timesheets are also pending approvals if they exist in a similar way
  const pendingApprovals = pendingApplications; // Extend if timesheet hook found
  
  const monthlyRevenue = invoicesData?.invoices
    .filter(inv => {
      if (!inv.issueDate) return false;
      const invDate = new Date(inv.issueDate);
      return invDate.getMonth() === new Date().getMonth() && 
             invDate.getFullYear() === new Date().getFullYear();
    })
    .reduce((sum, inv) => sum + (inv.amount || 0), 0) || 0;

  const totalStaff = staffData?.staffs.length || 0;
  const staffUtilization = totalStaff > 0 ? 
    Math.round((activeShiftsToday / totalStaff) * 100) : 0;

  const unfilledPositions = shiftsData?.shifts.filter(shift => 
    shift.status === 'OPEN' || (shift.workersNeeded || 0) > (shift.filled || 0)
  ).length || 0;
  const complianceIssues = complianceData?.staffDocuments.length || 0;

  const metrics = [
    {
      title: "Today's Active Shifts",
      value: activeShiftsToday,
      description: "Running shifts for today",
      icon: Clock,
      color: "text-blue-500"
    },
    {
      title: "Pending Approvals",
      value: pendingApprovals,
      description: "Applications & Timesheets",
      icon: FileText,
      color: "text-amber-500"
    },
    {
      title: "Monthly Revenue",
      value: `$${monthlyRevenue.toLocaleString()}`,
      description: `For ${format(today, 'MMMM yyyy')}`,
      icon: TrendingUp,
      color: "text-green-500"
    },
    {
      title: "Staff Utilization",
      value: `${staffUtilization}%`,
      description: null,
      icon: Users,
      color: "text-purple-500",
      showProgress: true,
      progress: staffUtilization
    }
  ];

  return (
    <div className="p-6 space-y-6">
      <motion.div 
        className="flex justify-between items-center"
        variants={headerVariants}
        initial="hidden"
        animate="visible"
      >
        <h1 className="text-3xl font-bold">Admin Dashboard</h1>
        <div className="flex gap-3">
          <motion.div
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
          >
            <Button 
              className="flex items-center gap-2"
              onClick={() => setIsOrderDialogOpen(true)}
            >
              <PlusCircle size={18} />
              Create Order
            </Button>
          </motion.div>
          <motion.div
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
          >
            <Button 
              variant="outline" 
              className="flex items-center gap-2"
              onClick={() => navigate('/staff/add')}
            >
              <UserPlus size={18} />
              Add Staff
            </Button>
          </motion.div>
        </div>
      </motion.div>

      <CreateOrderDialog 
        open={isOrderDialogOpen} 
        onOpenChange={setIsOrderDialogOpen} 
      />

      {/* Metrics Widgets */}
      <motion.div 
        className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"
        variants={containerVariants}
        initial="hidden"
        animate="visible"
      >
        {metrics.map((metric, index) => {
          const Icon = metric.icon;
          return (
            <motion.div
              key={metric.title}
              variants={itemVariants}
              whileHover={{ 
                y: -5,
                transition: { type: "spring", stiffness: 300, damping: 20 }
              }}
            >
              <Card className="overflow-hidden relative group">
                <motion.div
                  className="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"
                  initial={false}
                />
                <CardHeader className="flex flex-row items-center justify-between pb-2 relative z-10">
                  <CardTitle className="text-sm font-medium">{metric.title}</CardTitle>
                  <motion.div
                    whileHover={{ rotate: 360 }}
                    transition={{ duration: 0.6, ease: "easeInOut" }}
                  >
                    <Icon className={`h-4 w-4 ${metric.color}`} />
                  </motion.div>
                </CardHeader>
                <CardContent className="relative z-10">
                  <motion.div 
                    className="text-2xl font-bold"
                    initial={{ scale: 0.8, opacity: 0 }}
                    animate={{ scale: 1, opacity: 1 }}
                    transition={{ delay: 0.3 + index * 0.1, type: "spring" }}
                  >
                    {metric.value}
                  </motion.div>
                  {metric.description && (
                    <p className="text-xs text-muted-foreground mt-1">
                      {metric.description}
                    </p>
                  )}
                  {metric.showProgress && (
                    <div className="w-full bg-secondary h-2 mt-2 rounded-full overflow-hidden">
                      <motion.div 
                        className="bg-primary h-full"
                        initial={{ width: 0 }}
                        animate={{ width: `${metric.progress}%` }}
                        transition={{ 
                          delay: 0.5 + index * 0.1,
                          duration: 1,
                          ease: "easeOut"
                        }}
                      />
                    </div>
                  )}
                </CardContent>
              </Card>
            </motion.div>
          );
        })}
      </motion.div>

      {/* Alerts Section */}
      {(unfilledPositions > 0 || complianceIssues > 0) && (
        <motion.div 
          className="space-y-4"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.6, duration: 0.5 }}
        >
          <motion.h2 
            className="text-xl font-semibold flex items-center gap-2"
            initial={{ x: -20, opacity: 0 }}
            animate={{ x: 0, opacity: 1 }}
            transition={{ delay: 0.7 }}
          >
            <motion.div
              animate={{ 
                rotate: [0, -10, 10, -10, 0],
              }}
              transition={{
                duration: 0.5,
                delay: 0.8,
                repeat: Infinity,
                repeatDelay: 3
              }}
            >
              <AlertTriangle className="text-destructive" />
            </motion.div>
            Critical Alerts
          </motion.h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {unfilledPositions > 0 && (
              <motion.div
                variants={alertVariants}
                initial="hidden"
                animate="visible"
                whileHover={{ scale: 1.02 }}
                transition={{ delay: 0.8 }}
              >
                <Alert variant="destructive">
                  <AlertTriangle className="h-4 w-4" />
                  <AlertTitle>Unfilled Positions</AlertTitle>
                  <AlertDescription>
                    There are {unfilledPositions} shifts that currently have no staff assigned.
                  </AlertDescription>
                </Alert>
              </motion.div>
            )}
            {complianceIssues > 0 && (
              <motion.div
                variants={alertVariants}
                initial="hidden"
                animate="visible"
                whileHover={{ scale: 1.02 }}
                transition={{ delay: 0.9 }}
              >
                <Alert variant="destructive">
                  <AlertTriangle className="h-4 w-4" />
                  <AlertTitle>Compliance Issues</AlertTitle>
                  <AlertDescription>
                    {complianceIssues} staff members have expired or missing documentation.
                  </AlertDescription>
                </Alert>
              </motion.div>
            )}
          </div>
        </motion.div>
      )}
    </div>
  );
};

export default AdminDashboard;