import React, { useState, useEffect, useCallback } from "react";
import { useNavigate, useParams } from "react-router-dom";
import {
  FaSave,
  FaTimes,
  FaCog,
  FaCalendar,
  FaExclamationTriangle,
  FaMapMarkerAlt,
  FaWrench,
} from "react-icons/fa";
import LoadingSpinner from "../../../components/common/LoadingSpinner";
import {
  CriticalityLevelEnum,
  PmWorkCenter,
  PmWorkCenterSpecification,
  WorkCenterStatusEnum,
} from "../../../types/pm";
import { mockWorkCenters } from "../../../mocks/mockWorkCenters";
import { mockDepartments } from "../../../mocks/mockDepartments";
import { HrDepartment } from "../../../types/hr";

interface ValidationErrors {
  [key: string]: string;
}

const WorkCenterForm: React.FC = () => {
  const navigate = useNavigate();
  const { id } = useParams<{ id: string }>();
  const isEdit = Boolean(id);

  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [errors, setErrors] = useState<ValidationErrors>({});
  const [departments, setDepartments] = useState<HrDepartment[]>([]);

  const [formData, setFormData] = useState<PmWorkCenter>({
    id: "",
    code: "",
    name: "",
    description: "",
    workCenterId: "",
    workCenterType: {
      id: "",
      code: "",
      name: "",
      category: "",
      isActive: true,
    },
    manufacturer: "",
    model: "",
    serialNumber: "",
    installationDate: new Date("2022-03-15"),
    warrantyExpiry: new Date("2022-03-15"),
    location: "",
    departmentId: "",
    status: WorkCenterStatusEnum.Operational,
    criticality: CriticalityLevelEnum.Medium,
    specifications: [],
    maintenancePlans: [],
    workOrders: [],
    downTimeHistory: [],
    capacity: 0,
    costPerHour: 0,
    setupTime: 0,
    machineType: "",
    isActive: true,
    creationTime: new Date("2022-03-15"),
    lastModificationTime: new Date("2024-01-15"),
  });

  const loadDepartments = useCallback(async () => {
    try {
      setDepartments(mockDepartments);
    } catch (error) {
      console.error("Error loading departments:", error);
    }
  }, []);

  const loadFormData = useCallback(async () => {
    setLoading(true);
    try {
      if (isEdit && id) {
        // Simulate API call
        await new Promise((resolve) => setTimeout(resolve, 1000));
        const mockWorkCenter: PmWorkCenter = mockWorkCenters.find(
          (eq) => eq.id === id
        )!;

        setFormData(mockWorkCenter);
      }
    } catch (error) {
      console.error("Error loading form data:", error);
    } finally {
      setLoading(false);
    }
  }, [isEdit, id]);

  useEffect(() => {
    loadDepartments();
    loadFormData();
  }, [loadDepartments, loadFormData]);

  const validateForm = (): boolean => {
    const newErrors: ValidationErrors = {};

    if (!formData.code.trim()) {
      newErrors.workCenterCode = "İş Merkezi kodu zorunludur";
    }
    if (!formData.name.trim()) {
      newErrors.name = "İş Merkezi adı zorunludur";
    }
    if (!formData.workCenterType) {
      newErrors.workCenterType = "İş Merkezi tipi seçilmelidir";
    }
    if (!formData.location.trim()) {
      newErrors.location = "Lokasyon zorunludur";
    }
    if (!formData.departmentId) {
      newErrors.departmentId = "Departman seçilmelidir";
    }
    if (!formData.installationDate) {
      newErrors.installationDate = "Kurulum tarihi zorunludur";
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleInputChange = (
    field: keyof PmWorkCenter,
    value: string | boolean | PmWorkCenterSpecification[]
  ) => {
    setFormData((prev) => ({
      ...prev,
      [field]: value,
    }));

    // Clear error when user starts typing
    if (errors[field]) {
      setErrors((prev) => ({
        ...prev,
        [field]: "",
      }));
    }
  };

  const addSpecification = () => {
    const newSpec: PmWorkCenterSpecification = {
      id: "",
      workCenterId: "",
      specificationName: "",
      specificationValue: "",
      unit: "",
      isRequired: false,
    };

    setFormData((prev) => ({
      ...prev,
      specifications: [...prev.specifications, newSpec],
    }));
  };

  const updateSpecification = (
    index: number,
    field: keyof PmWorkCenterSpecification,
    value: string | boolean
  ) => {
    const updatedSpecs = [...formData.specifications];
    updatedSpecs[index] = { ...updatedSpecs[index], [field]: value };
    setFormData((prev) => ({
      ...prev,
      specifications: updatedSpecs,
    }));
  };

  const removeSpecification = (index: number) => {
    setFormData((prev) => ({
      ...prev,
      specifications: prev.specifications.filter((_, i) => i !== index),
    }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!validateForm()) {
      return;
    }

    setSaving(true);
    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 2000));

      console.log("WorkCenter data:", {
        ...formData,
        id: isEdit ? id : undefined,
      });

      // Show success message
      alert(
        isEdit
          ? "İş Merkezi başarıyla güncellendi!"
          : "İş Merkezi başarıyla oluşturuldu!"
      );

      // Navigate back to list
      navigate("/admin/maintenance");
    } catch (error) {
      console.error("Error saving Workcenter:", error);
      alert("Bir hata oluştu. Lütfen tekrar deneyin.");
    } finally {
      setSaving(false);
    }
  };

  const handleCancel = () => {
    navigate("/admin/maintenance");
  };

  if (loading) {
    return <LoadingSpinner />;
  }

  return (
    <div className="space-y-3 pt-2">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-lg font-semibold text-gray-900">
            {isEdit ? "İş Merkezi Düzenle" : "Yeni İş Merkezi"}
          </h2>
          <p className="text-sm text-gray-600 mt-1">
            {isEdit
              ? "Mevcut iş merkezi bilgilerini güncelleyin"
              : "Yeni iş merkezi bilgilerini girin"}
          </p>
        </div>
      </div>

      {/* Form */}
      <form onSubmit={handleSubmit} className="space-y-3">
        {/* Basic Information */}
        <div className="bg-white shadow rounded-lg">
          <div className="px-4 py-3 border-b border-gray-200">
            <h3 className="text-base font-medium text-gray-900 flex items-center">
              <FaCog className="w-5 h-5 mr-2" />
              Genel Bilgiler
            </h3>
          </div>

          <div className="px-4 py-3 space-y-3">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  İş Merkezi Kodu *
                </label>
                <select
                  value={formData.workCenterId}
                  onChange={(e) =>
                    handleInputChange("workCenterId", e.target.value)
                  }
                  className={`block w-full px-2.5 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
                    errors.workCenterId
                      ? "border-red-300 focus:border-red-500 focus:ring-red-500"
                      : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
                  }`}
                >
                  <option value="">İş Merkezi Seçin</option>
                  {mockWorkCenters.map((workCenter) => (
                    <option key={workCenter.id} value={workCenter.id}>
                      {workCenter.code} - {workCenter.name}
                    </option>
                  ))}
                </select>
                {errors.workCenterId && (
                  <p className="mt-1 text-sm text-red-600">
                    {errors.workCenterId}
                  </p>
                )}
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  İş Merkezi Tipi *
                </label>
                <select
                  value={formData.workCenterType?.id}
                  onChange={(e) =>
                    handleInputChange("workCenterType", e.target.value)
                  }
                  className={`block w-full px-2.5 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
                    errors.workCenterType
                      ? "border-red-300 focus:border-red-500 focus:ring-red-500"
                      : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
                  }`}
                >
                  <option value="">Tip seçin</option>
                  <option value="MACHINE">Makine</option>
                  <option value="VEHICLE">Araç</option>
                  <option value="TOOL">Alet</option>
                  <option value="FACILITY">Tesis</option>
                  <option value="SYSTEM">Sistem</option>
                  <option value="OTHER">Diğer</option>
                </select>
                {errors.workCenterType && (
                  <p className="mt-1 text-sm text-red-600">
                    {errors.workCenterType}
                  </p>
                )}
              </div>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                İş Merkezi Adı *
              </label>
              <input
                type="text"
                value={formData.name}
                onChange={(e) => handleInputChange("name", e.target.value)}
                className={`block w-full px-2.5 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
                  errors.name
                    ? "border-red-300 focus:border-red-500 focus:ring-red-500"
                    : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
                }`}
                placeholder="İş Merkezi adı"
              />
              {errors.name && (
                <p className="mt-1 text-sm text-red-600">{errors.name}</p>
              )}
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Açıklama
              </label>
              <textarea
                value={formData.description}
                onChange={(e) =>
                  handleInputChange("description", e.target.value)
                }
                rows={2}
                className="block w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                placeholder="İş Merkezi açıklaması"
              />
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Üretici
                </label>
                <input
                  type="text"
                  value={formData.manufacturer}
                  onChange={(e) =>
                    handleInputChange("manufacturer", e.target.value)
                  }
                  className="block w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                  placeholder="Üretici firma"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Model
                </label>
                <input
                  type="text"
                  value={formData.model}
                  onChange={(e) => handleInputChange("model", e.target.value)}
                  className="block w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                  placeholder="Model numarası"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Seri Numarası
                </label>
                <input
                  type="text"
                  value={formData.serialNumber}
                  onChange={(e) =>
                    handleInputChange("serialNumber", e.target.value)
                  }
                  className="block w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                  placeholder="Seri numarası"
                />
              </div>
            </div>
          </div>
        </div>

        {/* Location and Status */}
        <div className="bg-white shadow rounded-lg">
          <div className="px-4 py-3 border-b border-gray-200">
            <h3 className="text-base font-medium text-gray-900 flex items-center">
              <FaMapMarkerAlt className="w-5 h-5 mr-2" />
              Lokasyon ve Durum
            </h3>
          </div>

          <div className="px-4 py-3 space-y-3">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Lokasyon *
              </label>
              <input
                type="text"
                value={formData.location}
                onChange={(e) => handleInputChange("location", e.target.value)}
                className={`block w-full px-2.5 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
                  errors.location
                    ? "border-red-300 focus:border-red-500 focus:ring-red-500"
                    : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
                }`}
                placeholder="İş Merkezinin bulunduğu lokasyon"
              />
              {errors.location && (
                <p className="mt-1 text-sm text-red-600">{errors.location}</p>
              )}
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Departman *
                </label>
                <select
                  value={formData.departmentId}
                  onChange={(e) =>
                    handleInputChange("departmentId", e.target.value)
                  }
                  className={`block w-full px-2.5 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
                    errors.departmentId
                      ? "border-red-300 focus:border-red-500 focus:ring-red-500"
                      : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
                  }`}
                >
                  <option value="">Departman seçin</option>
                  {departments.map((dept) => (
                    <option key={dept.id} value={dept.id}>
                      {dept.name}
                    </option>
                  ))}
                </select>
                {errors.departmentId && (
                  <p className="mt-1 text-sm text-red-600">
                    {errors.departmentId}
                  </p>
                )}
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Durum
                </label>
                <select
                  value={formData.status}
                  onChange={(e) => handleInputChange("status", e.target.value)}
                  className="block w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                >
                  <option value="OPERATIONAL">Çalışır Durumda</option>
                  <option value="DOWN">Arızalı</option>
                  <option value="MAINTENANCE">Bakımda</option>
                  <option value="RETIRED">Kullanım Dışı</option>
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Kritiklik Seviyesi
                </label>
                <select
                  value={formData.criticality}
                  onChange={(e) =>
                    handleInputChange("criticality", e.target.value)
                  }
                  className="block w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                >
                  <option value="LOW">Düşük</option>
                  <option value="MEDIUM">Orta</option>
                  <option value="HIGH">Yüksek</option>
                  <option value="CRITICAL">Kritik</option>
                </select>
              </div>
            </div>
          </div>
        </div>

        {/* Date Information */}
        <div className="bg-white shadow rounded-lg">
          <div className="px-4 py-3 border-b border-gray-200">
            <h3 className="text-base font-medium text-gray-900 flex items-center">
              <FaCalendar className="w-5 h-5 mr-2" />
              Tarih Bilgileri
            </h3>
          </div>

          <div className="px-4 py-3 space-y-3">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Kurulum Tarihi *
                </label>
                <input
                  type="date"
                  value={formData.installationDate.toISOString()}
                  onChange={(e) =>
                    handleInputChange("installationDate", e.target.value)
                  }
                  className={`block w-full px-2.5 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
                    errors.installationDate
                      ? "border-red-300 focus:border-red-500 focus:ring-red-500"
                      : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
                  }`}
                />
                {errors.installationDate && (
                  <p className="mt-1 text-sm text-red-600">
                    {errors.installationDate}
                  </p>
                )}
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Garanti Bitiş Tarihi
                </label>
                <input
                  type="date"
                  value={formData.warrantyExpiry?.toISOString()}
                  onChange={(e) =>
                    handleInputChange("warrantyExpiry", e.target.value)
                  }
                  className="block w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                />
              </div>
            </div>
          </div>
        </div>

        {/* Specifications */}
        <div className="bg-white shadow rounded-lg">
          <div className="px-4 py-3 border-b border-gray-200">
            <div className="flex items-center justify-between">
              <h3 className="text-base font-medium text-gray-900 flex items-center">
                <FaWrench className="w-5 h-5 mr-2" />
                Teknik Özellikler
              </h3>
              <button
                type="button"
                onClick={addSpecification}
                className="inline-flex items-center px-2.5 py-1.5 border border-transparent text-sm leading-4 font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
              >
                <FaCog className="w-4 h-4 mr-1" />
                Özellik Ekle
              </button>
            </div>
          </div>

          <div className="px-4 py-3">
            {formData.specifications.length === 0 ? (
              <p className="text-gray-500 text-sm">
                Henüz teknik özellik eklenmemiş.
              </p>
            ) : (
              <div className="space-y-3">
                {formData.specifications.map((spec, index) => (
                  <div
                    key={index}
                    className="grid grid-cols-1 md:grid-cols-4 gap-3 items-end"
                  >
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">
                        Özellik Adı
                      </label>
                      <input
                        type="text"
                        value={spec.specificationName}
                        onChange={(e) =>
                          updateSpecification(
                            index,
                            "specificationName",
                            e.target.value
                          )
                        }
                        className="block w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                        placeholder="Özellik adı"
                      />
                    </div>

                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">
                        Değer
                      </label>
                      <input
                        type="text"
                        value={spec.specificationValue}
                        onChange={(e) =>
                          updateSpecification(
                            index,
                            "specificationValue",
                            e.target.value
                          )
                        }
                        className="block w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                        placeholder="Değer"
                      />
                    </div>

                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">
                        Birim
                      </label>
                      <input
                        type="text"
                        value={spec.unit}
                        onChange={(e) =>
                          updateSpecification(index, "unit", e.target.value)
                        }
                        className="block w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                        placeholder="Birim"
                      />
                    </div>

                    <div className="flex items-center space-x-2">
                      <label className="flex items-center">
                        <input
                          type="checkbox"
                          checked={spec.isRequired}
                          onChange={(e) =>
                            updateSpecification(
                              index,
                              "isRequired",
                              e.target.checked
                            )
                          }
                          className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                        />
                        <span className="ml-2 text-sm text-gray-700">
                          Zorunlu
                        </span>
                      </label>
                      <button
                        type="button"
                        onClick={() => removeSpecification(index)}
                        className="inline-flex items-center p-1.5 border border-transparent text-sm font-medium rounded text-red-700 bg-red-100 hover:bg-red-200"
                      >
                        <FaExclamationTriangle className="w-3 h-3" />
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>

        {/* Status */}
        <div className="bg-white shadow rounded-lg">
          <div className="px-4 py-3">
            <div className="flex items-center">
              <input
                type="checkbox"
                id="isActive"
                checked={formData.isActive}
                onChange={(e) =>
                  handleInputChange("isActive", e.target.checked)
                }
                className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
              />
              <label
                htmlFor="isActive"
                className="ml-2 block text-sm text-gray-900"
              >
                Aktif
              </label>
            </div>
          </div>
        </div>

        {/* Form Actions */}
        <div className="flex items-center justify-end space-x-2 bg-white px-4 py-3 rounded-lg shadow">
          <button
            type="button"
            onClick={handleCancel}
            className="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
          >
            <FaTimes className="w-4 h-4 mr-2" />
            İptal
          </button>
          <button
            type="submit"
            disabled={saving}
            className="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {saving ? (
              <>
                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
                Kaydediliyor...
              </>
            ) : (
              <>
                <FaSave className="w-4 h-4 mr-2" />
                {isEdit ? "Güncelle" : "Kaydet"}
              </>
            )}
          </button>
        </div>
      </form>
    </div>
  );
};

export default WorkCenterForm;