import React from "react";
import {
  FaTimes,
  FaBriefcase,
  FaBuilding,
  FaUsers,
  FaDollarSign,
  FaClock,
} from "react-icons/fa";
import { JobPositionDto } from "../../../types/hr";
import { getJobLevelColor, getJobLevelText } from "../../../utils/erp";

interface JobPositionViewModalProps {
  isOpen: boolean;
  onClose: () => void;
  position: JobPositionDto | null | undefined;
}

const JobPositionViewModal: React.FC<JobPositionViewModalProps> = ({
  isOpen,
  onClose,
  position,
}) => {
  if (!isOpen || !position) return null;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
        <div className="flex items-center justify-between p-3 border-b">
          <div className="flex items-center gap-3">
            <FaBriefcase className="w-6 h-6 text-blue-600" />
            <div>
              <h2 className="text-2xl font-bold text-gray-900">
                {position.name}
              </h2>
              <p className="text-gray-600">{position.code}</p>
            </div>
          </div>
          <button
            onClick={onClose}
            className="p-1 hover:bg-gray-100 rounded-full"
          >
            <FaTimes className="w-5 h-5" />
          </button>
        </div>

        <div className="p-3 space-y-3">
          {/* Status and Level */}
          <div className="flex flex-wrap items-center gap-3">
            <span
              className={`px-2 py-1 text-xs font-medium rounded-full ${getJobLevelColor(
                position.level
              )}`}
            >
              {getJobLevelText(position.level)}
            </span>
            <span
              className={`px-2 py-1 text-xs font-medium rounded-full ${
                position.isActive
                  ? "bg-green-100 text-green-800"
                  : "bg-red-100 text-red-800"
              }`}
            >
              {position.isActive ? "Aktif" : "Pasif"}
            </span>
          </div>

          {/* Basic Information */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-4">
              <div>
                <h3 className="text-sm font-medium text-gray-900 mb-2">
                  Temel Bilgiler
                </h3>
                <div className="space-y-2 text-sm">
                  <div className="flex items-center gap-3">
                    <FaBuilding className="w-4 h-4 text-gray-500" />
                    <div>
                      <p className="text-sm font-medium text-gray-500">
                        Departman
                      </p>
                      <p className="text-gray-900">
                        {position.department?.name || "Belirtilmemiş"}
                      </p>
                    </div>
                  </div>

                  <div className="flex items-center gap-3">
                    <FaUsers className="w-4 h-4 text-gray-500" />
                    <div>
                      <p className="text-sm font-medium text-gray-500">
                        Mevcut Personel
                      </p>
                      <p className="text-gray-900">
                        {position.employees?.length || 0} kişi
                      </p>
                    </div>
                  </div>

                  <div className="flex items-center gap-3">
                    <FaDollarSign className="w-4 h-4 text-gray-500" />
                    <div>
                      <p className="text-sm font-medium text-gray-500">
                        Maaş Aralığı
                      </p>
                      <p className="text-gray-900">
                        {position.minSalary.toLocaleString()} -{" "}
                        {position.maxSalary.toLocaleString()}{" "}
                        {position.currency}
                      </p>
                    </div>
                  </div>

                  <div className="flex items-center gap-3">
                    <FaClock className="w-4 h-4 text-gray-500" />
                    <div>
                      <p className="text-sm font-medium text-gray-500">
                        Oluşturulma Tarihi
                      </p>
                      <p className="text-gray-900">
                        {position.creationTime.toLocaleDateString("tr-TR")}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div>
              <h3 className="text-sm font-medium text-gray-900 mb-2">
                Açıklama
              </h3>
              <p className="text-gray-700 leading-relaxed">
                {position.description || "Açıklama bulunmuyor."}
              </p>
            </div>
          </div>

          {/* Skills */}
          {position.requiredSkills && position.requiredSkills.length > 0 && (
            <div className="text-sm">
              <h3 className="text-base font-medium text-gray-900 mb-2">
                Gerekli Yetenekler
              </h3>
              <div className="flex flex-wrap gap-2">
                {position.requiredSkills.map((skill, index) => (
                  <span
                    key={index}
                    className="px-2 py-1 text-xs bg-blue-50 text-blue-700 rounded-full"
                  >
                    {skill}
                  </span>
                ))}
              </div>
            </div>
          )}

          {/* Responsibilities */}
          {position.responsibilities &&
            position.responsibilities.length > 0 && (
              <div className="text-sm">
                <h3 className="text-base font-medium text-gray-900 mb-2">
                  Sorumluluklar
                </h3>
                <div className="space-y-2">
                  {position.responsibilities.map((responsibility, index) => (
                    <div key={index} className="flex items-start gap-2">
                      <div className="w-2 h-2 bg-green-500 rounded-full mt-2 flex-shrink-0" />
                      <p className="text-gray-700">{responsibility}</p>
                    </div>
                  ))}
                </div>
              </div>
            )}

          {/* Qualifications */}
          {position.qualifications && position.qualifications.length > 0 && (
            <div className="text-sm">
              <h3 className="text-base font-medium text-gray-900 mb-2">
                Nitelikler
              </h3>
              <div className="space-y-2">
                {position.qualifications.map((qualification, index) => (
                  <div key={index} className="flex items-start gap-2">
                    <div className="w-2 h-2 bg-purple-500 rounded-full mt-2 flex-shrink-0" />
                    <p className="text-gray-700">{qualification}</p>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Employees in this position */}
          {position.employees && position.employees.length > 0 && (
            <div className="text-sm">
              <h3 className="text-base font-medium text-gray-900 mb-2">
                Bu Pozisyondaki Personeller
              </h3>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
                {position.employees.map((employee, index) => (
                  <div key={index} className="p-1.5 bg-gray-50 rounded-md">
                    <p className="font-medium text-gray-900">
                      {employee.fullName}
                    </p>
                    <p className="text-sm text-gray-500">{employee.email}</p>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>

        <div className="p-3 border-t bg-gray-50">
          <button
            onClick={onClose}
            className="w-full sm:w-auto px-3 py-1.5 text-xs bg-gray-600 text-white rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500"
          >
            Kapat
          </button>
        </div>
      </div>
    </div>
  );
};

export default JobPositionViewModal;