import React, { useState, useEffect } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { HrEmployee } from "../../../types/hr";
import { mockEmployees } from "../../../mocks/mockEmployees";
import EmployeeViewModal from "./EmployeeViewModal";
import LoadingSpinner from "../../../components/common/LoadingSpinner";

const EmployeeView: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const [employee, setEmployee] = useState<HrEmployee | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const loadEmployee = async () => {
      setLoading(true);
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 300));

      const foundEmployee = mockEmployees.find((emp) => emp.id === id);
      setEmployee(foundEmployee || null);
      setLoading(false);
    };

    if (id) {
      loadEmployee();
    }
  }, [id]);

  const handleClose = () => {
    navigate("/admin/hr/employees");
  };

  const handleEdit = (employee: HrEmployee) => {
    navigate(`/admin/hr/employees/edit/${employee.id}`);
  };

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <LoadingSpinner />
      </div>
    );
  }

  if (!employee) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <h2 className="text-xl font-bold text-gray-900 mb-1">
            Personel Bulunamadı
          </h2>
          <p className="text-gray-600 mb-3">
            Aradığınız personel kaydı bulunamadı.
          </p>
          <button
            onClick={handleClose}
            className="px-3 py-1 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors text-sm"
          >
            Personel Listesine Dön
          </button>
        </div>
      </div>
    );
  }

  return (
    <EmployeeViewModal
      isOpen={true}
      onClose={handleClose}
      employee={employee}
      onEdit={handleEdit}
    />
  );
};

export default EmployeeView;