import React from 'react';
import { Building2, Users, TrendingUp } from 'lucide-react';
import type { Department, Employee } from '../../types/index.js';

interface DepartmentGridProps {
  departments?: Department[];
  employees?: Employee[];
}

export const DepartmentGrid: React.FC<DepartmentGridProps> = ({
  departments = [],
  employees = [],
}) => {
  const getDepartmentEmployees = (deptId: string) => {
    return employees.filter(e => e.department === deptId);
  };

  const totalEmployees = employees.length;

  return (
    <div className="p-6 bg-white rounded-lg shadow">
      <h2 className="text-2xl font-bold mb-6">Department Overview</h2>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
        <div className="bg-blue-50 p-4 rounded-lg">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-600">Total Departments</p>
              <p className="text-3xl font-bold text-blue-600">{departments.length}</p>
            </div>
            <Building2 className="w-10 h-10 text-blue-400" />
          </div>
        </div>

        <div className="bg-green-50 p-4 rounded-lg">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-600">Total Employees</p>
              <p className="text-3xl font-bold text-green-600">{totalEmployees}</p>
            </div>
            <Users className="w-10 h-10 text-green-400" />
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {departments.map((dept) => {
          const deptEmployees = getDepartmentEmployees(dept.id);
          const headEmployee = dept.headId 
            ? employees.find(e => e.id === dept.headId)
            : null;
          const percentage = totalEmployees > 0 
            ? ((deptEmployees.length / totalEmployees) * 100).toFixed(1)
            : 0;

          return (
            <div
              key={dept.id}
              className="border-2 border-gray-200 rounded-lg p-4 hover:shadow-lg transition hover:border-blue-400"
            >
              <div className="flex items-start justify-between mb-3">
                <div className="flex items-center gap-2">
                  <div className="bg-blue-100 p-2 rounded-lg">
                    <Building2 className="w-6 h-6 text-blue-600" />
                  </div>
                  <div>
                    <h3 className="font-bold text-lg">{dept.name}</h3>
                  </div>
                </div>
              </div>

              {headEmployee && (
                <div className="bg-gray-50 rounded p-2 mb-3">
                  <p className="text-xs text-gray-500 mb-1">Department Head</p>
                  <p className="text-sm font-medium">
                    {headEmployee.firstName} {headEmployee.lastName}
                  </p>
                  {headEmployee.title && (
                    <p className="text-xs text-gray-600">{headEmployee.title}</p>
                  )}
                </div>
              )}

              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <Users className="w-4 h-4 text-gray-500" />
                    <span className="text-sm text-gray-600">Employees</span>
                  </div>
                  <span className="font-bold text-lg">{deptEmployees.length}</span>
                </div>

                <div className="w-full bg-gray-200 rounded-full h-2">
                  <div
                    className="bg-blue-600 h-2 rounded-full transition-all"
                    style={{ width: `${percentage}%` }}
                  />
                </div>

                <div className="flex items-center justify-between text-xs">
                  <span className="text-gray-500">{percentage}% of company</span>
                  <div className="flex items-center gap-1 text-green-600">
                    <TrendingUp className="w-3 h-3" />
                    <span>Active</span>
                  </div>
                </div>
              </div>

              {dept.createdAt && (
                <div className="mt-3 pt-3 border-t text-xs text-gray-500">
                  Created: {new Date(dept.createdAt).toLocaleDateString()}
                </div>
              )}
            </div>
          );
        })}
      </div>

      {departments.length === 0 && (
        <p className="text-center text-gray-500 py-12">No departments found</p>
      )}
    </div>
  );
};
