"use client";

import { motion } from "framer-motion";
import { Users, Clock, UserCheck, UserX, Briefcase } from "lucide-react";
import { cn } from "@/lib/utils";

interface LiveAttendanceProps {
  data: {
    todayPresent: number;
    todayLate: number;
    todayAbsent: number;
    todayOnLeave: number;
    todayEarlyOut: number;
    todayWorking: number;
    rate: number;
  };
  recentCheckins: {
    name: string;
    department: string;
    status: string;
    checkIn: string;
  }[];
  totalEmployees: number;
}

const statusConfig: Record<string, { icon: typeof Users; bg: string; text: string; label: string }> = {
  PRESENT: { icon: UserCheck, bg: "bg-gray-100", text: "text-gray-700", label: "Present" },
  LATE: { icon: Clock, bg: "bg-gray-100", text: "text-gray-700", label: "Late" },
  ABSENT: { icon: UserX, bg: "bg-gray-100", text: "text-gray-700", label: "Absent" },
  ON_LEAVE: { icon: Briefcase, bg: "bg-gray-100", text: "text-gray-700", label: "On Leave" },
  EARLY_OUT: { icon: Clock, bg: "bg-gray-100", text: "text-gray-700", label: "Early Out" },
};

export function LiveAttendance({ data, recentCheckins, totalEmployees }: LiveAttendanceProps) {
  const stats = [
    { label: "Present", value: data.todayPresent, color: "bg-gray-800", icon: UserCheck },
    { label: "Late", value: data.todayLate, color: "bg-gray-600", icon: Clock },
    { label: "Absent", value: data.todayAbsent, color: "bg-gray-400", icon: UserX },
    { label: "On Leave", value: data.todayOnLeave, color: "bg-gray-500", icon: Briefcase },
  ];

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5, delay: 0.2 }}
      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">Today's Attendance</h2>
          <p className="text-sm text-gray-500">Live check-in activity</p>
        </div>
        <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-gray-400 opacity-75"></span>
            <span className="relative inline-flex rounded-full h-3 w-3 bg-gray-800"></span>
          </span>
          <span className="text-sm font-medium text-gray-800">{data.rate}% Rate</span>
        </div>
      </div>

      {/* Stats Grid */}
      <div className="grid grid-cols-4 gap-3 mb-6">
        {stats.map((stat) => (
          <div key={stat.label} className="text-center">
            <div className="w-12 h-12 mx-auto rounded-xl flex items-center justify-center mb-2 bg-gray-100">
              <stat.icon className="h-6 w-6 text-gray-700" />
            </div>
            <p className="text-2xl font-bold text-gray-900">{stat.value}</p>
            <p className="text-xs text-gray-500">{stat.label}</p>
          </div>
        ))}
      </div>

      {/* Progress Bar */}
      <div className="mb-6">
        <div className="flex justify-between text-sm text-gray-600 mb-2">
          <span>Checked In</span>
          <span>{data.todayWorking} of {totalEmployees}</span>
        </div>
        <div className="h-2 bg-gray-100 rounded-full overflow-hidden">
          <div
            className="h-full bg-gray-800 rounded-full transition-all duration-500"
            style={{ width: `${(data.todayWorking / totalEmployees) * 100}%` }}
          />
        </div>
      </div>

      {/* Recent Check-ins */}
      <div>
        <h3 className="text-sm font-medium text-gray-900 mb-3">Recent Check-ins ({recentCheckins.length})</h3>
        <div className="space-y-2 max-h-[200px] overflow-y-auto">
          {recentCheckins.length === 0 && (
            <p className="text-sm text-gray-500 text-center py-4">No recent check-ins</p>
          )}
          {recentCheckins.slice(0, 5).map((checkin, idx) => {
            const config = statusConfig[checkin.status] || statusConfig.PRESENT;
            const Icon = config.icon;
            const time = new Date(checkin.checkIn).toLocaleTimeString("en-US", {
              hour: "2-digit",
              minute: "2-digit",
            });

            return (
              <div
                key={idx}
                className="flex items-center justify-between p-3 rounded-xl bg-gray-50 hover:bg-gray-100 transition-colors"
              >
                <div className="flex items-center gap-3">
                  <div className={cn("w-8 h-8 rounded-lg flex items-center justify-center", config.bg)}>
                    <Icon className={cn("h-4 w-4", config.text)} />
                  </div>
                  <div>
                    <p className="text-sm font-medium text-gray-900">{checkin.name}</p>
                    <p className="text-xs text-gray-500">{checkin.department}</p>
                  </div>
                </div>
                <div className="text-right">
                  <span className={cn("text-xs font-medium px-2 py-1 rounded-full", config.bg, config.text)}>
                    {config.label}
                  </span>
                  <p className="text-xs text-gray-400 mt-1">{time}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </motion.div>
  );
}