"use client";

import React from "react";
import { motion } from "framer-motion";
import { Building2 } from "lucide-react";
import { cn } from "@/lib/utils";

interface DepartmentStatsProps {
  departments: { name: string; count: number }[];
  totalEmployees: number;
}

const deptColors = [
  "bg-gray-800",
  "bg-gray-700",
  "bg-gray-600",
  "bg-gray-500",
  "bg-gray-400",
  "bg-gray-300",
];

export function DepartmentStats({ departments, totalEmployees }: DepartmentStatsProps) {
  const topDepartments = departments.slice(0, 6);

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5, delay: 0.3 }}
      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">Department Overview</h2>
          <p className="text-sm text-gray-500">Employee distribution by department</p>
        </div>
        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gray-100 text-gray-700">
          <Building2 className="h-5 w-5" />
        </div>
      </div>

      {/* Donut Chart Representation */}
      <div className="flex items-center gap-6 mb-6">
        <div className="relative w-32 h-32">
          <svg viewBox="0 0 100 100" className="transform -rotate-90 w-full h-full">
            {topDepartments.reduce(
              (acc, dept, idx) => {
                const percentage = (dept.count / totalEmployees) * 100;
                const circumference = 2 * Math.PI * 40;
                const strokeDasharray = `${(percentage / 100) * circumference} ${circumference}`;
                const offset = acc.offset;

                acc.elements.push(
                  <circle
                    key={dept.name}
                    cx="50"
                    cy="50"
                    r="40"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="12"
                    className={deptColors[idx % deptColors.length]}
                    strokeDasharray={strokeDasharray}
                    strokeDashoffset={-offset}
                    style={{ transition: "all 0.5s ease" }}
                  />
                );
                acc.offset += (percentage / 100) * circumference;
                return acc;
              },
              { elements: [] as React.ReactElement[], offset: 0 }
            ).elements}
          </svg>
          <div className="absolute inset-0 flex flex-col items-center justify-center">
            <span className="text-2xl font-bold text-gray-900">{totalEmployees}</span>
            <span className="text-xs text-gray-500">Total</span>
          </div>
        </div>

        {/* Legend */}
        <div className="flex-1 space-y-2">
          {topDepartments.map((dept, idx) => (
            <div key={dept.name} className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <div className={cn("w-3 h-3 rounded-full", deptColors[idx % deptColors.length])} />
                <span className="text-sm text-gray-700 truncate max-w-[120px]">{dept.name}</span>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-sm font-semibold text-gray-900">{dept.count}</span>
                <span className="text-xs text-gray-500">
                  {Math.round((dept.count / totalEmployees) * 100)}%
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Department Cards */}
      <div className="grid grid-cols-2 gap-3">
        {topDepartments.slice(0, 4).map((dept, idx) => (
          <div
            key={dept.name}
            className="p-3 rounded-xl bg-gray-50 hover:bg-gray-100 transition-colors cursor-pointer"
          >
            <div className="flex items-center gap-2 mb-1">
              <div className={cn("w-2 h-2 rounded-full", deptColors[idx % deptColors.length])} />
              <span className="text-xs text-gray-500 truncate">{dept.name}</span>
            </div>
            <div className="flex items-baseline gap-1">
              <span className="text-lg font-bold text-gray-900">{dept.count}</span>
              <span className="text-xs text-gray-500">employees</span>
            </div>
          </div>
        ))}
      </div>
    </motion.div>
  );
}