import React from "react";
import {
  FaTimes,
  FaBuilding,
  FaUser,
  FaDollarSign,
  FaUsers,
  FaCalendar,
  FaEdit,
} from "react-icons/fa";
import { HrDepartment } from "../../../types/hr";
import { mockEmployees } from "../../../mocks/mockEmployees";

interface DepartmentViewModalProps {
  isOpen: boolean;
  onClose: () => void;
  department: HrDepartment | null;
  onEdit?: (department: HrDepartment) => void;
}

const DepartmentViewModal: React.FC<DepartmentViewModalProps> = ({
  isOpen,
  onClose,
  department,
  onEdit,
}) => {
  const employeeCount = mockEmployees.filter(
    (emp) => emp.departmantId === department?.id
  ).length;
  const departmentEmployees = mockEmployees.filter(
    (emp) => emp.departmantId === department?.id
  );

  return (
    isOpen &&
    department && (
      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div className="bg-white rounded-lg p-4 w-full max-w-2xl max-h-[90vh] overflow-y-auto">
          <div className="flex items-center justify-between mb-3">
            <h2 className="text-base font-bold text-gray-900">
              Departman Detayları
            </h2>
            <div className="flex items-center gap-2">
              {onEdit && (
                <button
                  onClick={() => onEdit(department)}
                  className="flex items-center gap-1 px-2 py-1 text-xs text-blue-600 bg-blue-50 rounded-md hover:bg-blue-100 transition-colors"
                >
                  <FaEdit className="w-4 h-4" />
                  Düzenle
                </button>
              )}
              <button
                onClick={onClose}
                className="p-2 text-gray-400 hover:text-gray-600"
              >
                <FaTimes className="w-5 h-5" />
              </button>
            </div>
          </div>

          <div className="space-y-3">
            {/* Temel Bilgiler */}
            <div className="bg-gray-50 rounded-lg p-3">
              <h3 className="text-base font-semibold text-gray-900 mb-3 flex items-center gap-2">
                <FaBuilding className="w-5 h-5" />
                Temel Bilgiler
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div>
                  <label className="block text-xs font-medium text-gray-600">
                    Departman Kodu
                  </label>
                  <p className="text-sm font-semibold text-gray-900">
                    {department.code}
                  </p>
                </div>
                <div>
                  <label className="block text-xs font-medium text-gray-600">
                    Departman Adı
                  </label>
                  <p className="text-sm font-semibold text-gray-900">
                    {department.name}
                  </p>
                </div>
                {department.description && (
                  <div className="md:col-span-2">
                    <label className="block text-xs font-medium text-gray-600">
                      Açıklama
                    </label>
                    <p className="text-sm text-gray-900 mt-1">
                      {department.description}
                    </p>
                  </div>
                )}
                <div>
                  <label className="block text-xs font-medium text-gray-600">
                    Durum
                  </label>
                  <span
                    className={`inline-flex px-2 py-1 text-xs font-medium rounded-full ${
                      department.isActive
                        ? "bg-green-100 text-green-800"
                        : "bg-red-100 text-red-800"
                    }`}
                  >
                    {department.isActive ? "Aktif" : "Pasif"}
                  </span>
                </div>
              </div>
            </div>

            {/* Hiyerarşi ve İlişkiler */}
            <div className="bg-blue-50 rounded-lg p-3">
              <h3 className="text-base font-semibold text-gray-900 mb-3 flex items-center gap-2">
                <FaUser className="w-5 h-5" />
                Hiyerarşi ve İlişkiler
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
                <div>
                  <label className="block text-xs font-medium text-gray-600">
                    Üst Departman
                  </label>
                  <p className="text-gray-900 mt-1">
                    {department.parentDepartment?.name || "Ana Departman"}
                  </p>
                </div>
                <div>
                  <label className="block text-xs font-medium text-gray-600">
                    Departman Yöneticisi
                  </label>
                  <p className="text-gray-900 mt-1">
                    {department.manager?.fullName || "Atanmamış"}
                  </p>
                  {department.manager && (
                    <p className="text-sm text-gray-500">
                      {department.manager.code}
                    </p>
                  )}
                </div>
                <div>
                  <label className="block text-xs font-medium text-gray-600">
                    Maliyet Merkezi
                  </label>
                  <p className="text-gray-900 mt-1">
                    {department.costCenter?.name || "Atanmamış"}
                  </p>
                  {department.costCenter && (
                    <p className="text-sm text-gray-500">
                      {department.costCenter.code}
                    </p>
                  )}
                </div>
              </div>
            </div>

            {/* Finansal Bilgiler */}
            <div className="bg-green-50 rounded-lg p-3">
              <h3 className="text-base font-semibold text-gray-900 mb-3 flex items-center gap-2">
                <FaDollarSign className="w-5 h-5" />
                Finansal Bilgiler
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                <div>
                  <label className="block text-xs font-medium text-gray-600">
                    Departman Bütçesi
                  </label>
                  <p className="text-sm font-semibold text-gray-900">
                    {department.budget
                      ? `₺${department.budget.toLocaleString()}`
                      : "Belirtilmemiş"}
                  </p>
                </div>
              </div>
            </div>

            {/* Personel Bilgileri */}
            <div className="bg-purple-50 rounded-lg p-3">
              <h3 className="text-base font-semibold text-gray-900 mb-3 flex items-center gap-2">
                <FaUsers className="w-5 h-5" />
                Personel Bilgileri
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div>
                  <label className="block text-xs font-medium text-gray-600">
                    Toplam Personel Sayısı
                  </label>
                  <p className="text-lg font-bold text-gray-900">
                    {employeeCount}
                  </p>
                </div>
              </div>

              {departmentEmployees.length > 0 && (
                <div className="mt-3">
                  <label className="block text-sm font-medium text-gray-600 mb-2">
                    Departman Personeli
                  </label>
                  <div className="max-h-32 overflow-y-auto">
                    <div className="space-y-1">
                      {departmentEmployees.map((employee) => (
                        <div
                          key={employee.id}
                          className="flex items-center justify-between p-1.5 bg-white rounded border"
                        >
                          <div>
                            <p className="font-medium text-gray-900">
                              {employee.fullName}
                            </p>
                            <p className="text-sm text-gray-500">
                              {employee.code}
                            </p>
                          </div>
                          <div className="text-sm text-gray-600">
                            {employee.jobPosition?.name ||
                              "Pozisyon belirtilmemiş"}
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              )}
            </div>

            {/* Sistem Bilgileri */}
            <div className="bg-gray-50 rounded-lg p-3">
              <h3 className="text-base font-semibold text-gray-900 mb-3 flex items-center gap-2">
                <FaCalendar className="w-5 h-5" />
                Sistem Bilgileri
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
                <div>
                  <label className="block text-xs font-medium text-gray-600">
                    Oluşturulma Tarihi
                  </label>
                  <p className="text-gray-900">
                    {new Date(department.creationTime).toLocaleDateString(
                      "tr-TR"
                    )}
                  </p>
                </div>
                <div>
                  <label className="block text-xs font-medium text-gray-600">
                    Son Güncelleme
                  </label>
                  <p className="text-gray-900">
                    {new Date(
                      department.lastModificationTime
                    ).toLocaleDateString("tr-TR")}
                  </p>
                </div>
              </div>
            </div>
          </div>

          {/* Close Button */}
          <div className="flex justify-end pt-3 border-t mt-3">
            <button
              onClick={onClose}
              className="px-3 py-1 text-sm text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 transition-colors"
            >
              Kapat
            </button>
          </div>
        </div>
      </div>
    )
  );
};

export default DepartmentViewModal;