"use client";

import React from "react";
import { motion } from "framer-motion";
import { 
  UserPlus, 
  Calendar, 
  Wallet, 
  FileText, 
  Clock, 
  AlertCircle,
  ArrowUpRight,
  Landmark
} from "lucide-react";
import Link from "next/link";

interface QuickActionsProps {
  pendingLeaves: number;
  pendingPayrolls: number;
}

const actions = [
  {
    label: "Add Employee",
    href: "/dashboard/employees",
    icon: UserPlus,
    description: "Onboard new staff",
    color: "bg-gray-800",
  },
  {
    label: "Mark Attendance",
    href: "/dashboard/attendance",
    icon: Clock,
    description: "Daily check-ins",
    color: "bg-gray-700",
  },
  {
    label: "Process Payroll",
    href: "/dashboard/payroll",
    icon: Wallet,
    description: "Monthly salaries",
    color: "bg-gray-600",
  },
  {
    label: "Manage Leaves",
    href: "/dashboard/leave",
    icon: Calendar,
    description: "Approve requests",
    color: "bg-gray-500",
  },
  {
    label: "View Reports",
    href: "/dashboard/reports",
    icon: FileText,
    description: "Analytics & insights",
    color: "bg-gray-700",
  },
  {
    label: "Manage Loans",
    href: "/dashboard/loans",
    icon: Landmark,
    description: "Track advances",
    color: "bg-gray-600",
  },
];

export function QuickActions({ pendingLeaves, pendingPayrolls }: QuickActionsProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5, delay: 0.1 }}
      className="rounded-2xl bg-white p-6 shadow-sm border border-[#E2E8F0]"
    >
      <div className="mb-6 flex items-center justify-between">
        <div>
          <h2 className="text-lg font-semibold text-gray-900">Quick Actions</h2>
          <p className="text-sm text-gray-500">Frequently used shortcuts</p>
        </div>
        {(pendingLeaves > 0 || pendingPayrolls > 0) && (
          <div className="flex items-center gap-2">
            <span className="relative flex h-3 w-3">
              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
              <span className="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
            </span>
            <span className="text-sm font-medium text-red-600">
              {pendingLeaves + pendingPayrolls} pending
            </span>
          </div>
        )}
      </div>

      <div className="grid grid-cols-2 gap-3">
        {actions.map((action) => (
          <Link
            key={action.label}
            href={action.href}
            className="group relative overflow-hidden rounded-lg border border-gray-200 bg-white p-3 hover:shadow-md hover:border-gray-400 hover:bg-gray-50 transition-all duration-200"
          >
            {/* Left accent bar - dark gray */}
            <div className="absolute top-0 left-0 w-1 h-full bg-gray-800" />
            
            <div className="flex items-start justify-between">
              <div className="bg-gray-100 p-2 rounded-md group-hover:bg-gray-200 transition-colors">
                <action.icon className="h-4 w-4 text-gray-700" />
              </div>
              <ArrowUpRight className="h-4 w-4 text-gray-400 group-hover:text-gray-600 transition-colors" />
            </div>
            
            <div className="mt-3">
              <p className="text-sm font-semibold text-gray-900">{action.label}</p>
              <p className="text-xs text-gray-500">{action.description}</p>
            </div>
            
            {/* Badges for pending items */}
            {action.label === "Manage Leaves" && pendingLeaves > 0 && (
              <span className="absolute top-2 right-2 bg-gray-800 text-white text-[10px] font-bold px-1.5 py-0.5 rounded">
                {pendingLeaves}
              </span>
            )}
            {action.label === "Process Payroll" && pendingPayrolls > 0 && (
              <span className="absolute top-2 right-2 bg-gray-800 text-white text-[10px] font-bold px-1.5 py-0.5 rounded">
                {pendingPayrolls}
              </span>
            )}
          </Link>
        ))}
      </div>

      {/* Alert Banner */}
      {(pendingLeaves > 0 || pendingPayrolls > 0) && (
        <div className="mt-4 p-3 bg-gray-100 border border-gray-200 rounded-lg flex items-center gap-3">
          <AlertCircle className="h-5 w-5 text-gray-700 flex-shrink-0" />
          <p className="text-sm text-gray-700">
            {pendingLeaves > 0 ? `${pendingLeaves} leave request${pendingLeaves > 1 ? "s" : ""}` : ""}
            {pendingLeaves > 0 && pendingPayrolls > 0 ? " and " : ""}
            {pendingPayrolls > 0 ? `${pendingPayrolls} payroll record${pendingPayrolls > 1 ? "s" : ""} pending` : ""} 
          </p>
        </div>
      )}
    </motion.div>
  );
}