import React, { useState, useEffect } from "react";
import {
  FaTimes,
  FaPlus,
  FaTrash,
  FaCalendar,
  FaClock,
  FaSave,
} from "react-icons/fa";
import {
  PmMaintenanceWorkOrder,
  WorkOrderTypeEnum,
  WorkOrderStatusEnum,
  PmWorkOrderMaterial,
  PmWorkOrderActivity,
} from "../../../types/pm";
import { mockWorkCenters } from "../../../mocks/mockWorkCenters";
import { mockMaintenanceTeams } from "../../../mocks/mockMaintenanceTeams";
import { mockEmployees } from "../../../mocks/mockEmployees";
import { mockMaterials } from "../../../mocks/mockMaterials";
import { PriorityEnum } from "../../../types/common";

interface EditWorkOrderModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSave: (workOrder: PmMaintenanceWorkOrder) => void;
  workOrder: PmMaintenanceWorkOrder;
}

const EditWorkOrderModal: React.FC<EditWorkOrderModalProps> = ({
  isOpen,
  onClose,
  onSave,
  workOrder,
}) => {
  const [formData, setFormData] = useState({
    workOrderNumber: "",
    workCenterId: "",
    orderType: WorkOrderTypeEnum.Corrective,
    priority: PriorityEnum.Normal,
    status: WorkOrderStatusEnum.Created,
    description: "",
    reportedBy: "",
    assignedTo: "",
    maintenanceTeamId: "",
    scheduledStart: "",
    scheduledEnd: "",
    actualStart: "",
    actualEnd: "",
    estimatedCost: 0,
    actualCost: 0,
    notes: "",
    completionNotes: "",
  });

  const [materials, setMaterials] = useState<PmWorkOrderMaterial[]>([]);
  const [activities, setActivities] = useState<PmWorkOrderActivity[]>([]);
  const [errors, setErrors] = useState<Record<string, string>>({});

  useEffect(() => {
    if (workOrder && isOpen) {
      setFormData({
        workOrderNumber: workOrder.workOrderNumber,
        workCenterId: workOrder.workCenterId,
        orderType: workOrder.orderType,
        priority: workOrder.priority,
        status: workOrder.status,
        description: workOrder.description,
        reportedBy: workOrder.reportedBy,
        assignedTo: workOrder.assignedTo || "",
        maintenanceTeamId: workOrder.maintenanceTeamId || "",
        scheduledStart: workOrder.scheduledStart
          ? workOrder.scheduledStart.toISOString().slice(0, 16)
          : "",
        scheduledEnd: workOrder.scheduledEnd
          ? workOrder.scheduledEnd.toISOString().slice(0, 16)
          : "",
        actualStart: workOrder.actualStart
          ? workOrder.actualStart.toISOString().slice(0, 16)
          : "",
        actualEnd: workOrder.actualEnd
          ? workOrder.actualEnd.toISOString().slice(0, 16)
          : "",
        estimatedCost: workOrder.estimatedCost,
        actualCost: workOrder.actualCost,
        notes: workOrder.notes || "",
        completionNotes: workOrder.completionNotes || "",
      });
      setMaterials(workOrder.materials);
      setActivities(workOrder.activities);
    }
  }, [workOrder, isOpen]);

  const validateForm = () => {
    const newErrors: Record<string, string> = {};

    if (!formData.description.trim()) {
      newErrors.description = "Açıklama alanı zorunludur";
    }
    if (!formData.workCenterId) {
      newErrors.workCenterId = "İş merkezi seçimi zorunludur";
    }
    if (!formData.reportedBy.trim()) {
      newErrors.reportedBy = "Bildiren kişi zorunludur";
    }
    if (formData.estimatedCost < 0) {
      newErrors.estimatedCost = "Tahmini maliyet negatif olamaz";
    }
    if (formData.actualCost < 0) {
      newErrors.actualCost = "Gerçek maliyet negatif olamaz";
    }

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

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!validateForm()) return;

    const updatedWorkOrder: PmMaintenanceWorkOrder = {
      ...workOrder,
      workOrderNumber: formData.workOrderNumber,
      workCenterId: formData.workCenterId,
      orderType: formData.orderType,
      priority: formData.priority,
      status: formData.status,
      description: formData.description,
      reportedBy: formData.reportedBy,
      assignedTo: formData.assignedTo || undefined,
      maintenanceTeamId: formData.maintenanceTeamId || undefined,
      scheduledStart: formData.scheduledStart
        ? new Date(formData.scheduledStart)
        : undefined,
      scheduledEnd: formData.scheduledEnd
        ? new Date(formData.scheduledEnd)
        : undefined,
      actualStart: formData.actualStart
        ? new Date(formData.actualStart)
        : undefined,
      actualEnd: formData.actualEnd ? new Date(formData.actualEnd) : undefined,
      estimatedCost: formData.estimatedCost,
      actualCost: formData.actualCost,
      materials,
      activities,
      notes: formData.notes || undefined,
      completionNotes: formData.completionNotes || undefined,
      lastModificationTime: new Date(),
    };

    onSave(updatedWorkOrder);
    onClose();
  };

  const addMaterial = () => {
    const newMaterial: PmWorkOrderMaterial = {
      id: `mat-${Date.now()}`,
      workOrderId: workOrder.id,
      materialId: "",
      materialCode: "",
      materialName: "",
      plannedQuantity: 1,
      actualQuantity: 0,
      unitCost: 0,
      totalCost: 0,
    };
    setMaterials([...materials, newMaterial]);
  };

  const removeMaterial = (index: number) => {
    setMaterials(materials.filter((_, i) => i !== index));
  };

  const updateMaterial = (
    index: number,
    field: string,
    value: string | number
  ) => {
    const updated = [...materials];
    if (field === "materialId") {
      const selectedMaterial = mockMaterials.find((m) => m.id === value);
      if (selectedMaterial) {
        updated[index] = {
          ...updated[index],
          materialId: value as string,
          materialCode: selectedMaterial.code,
          materialName: selectedMaterial.name,
          unitCost: selectedMaterial.costPrice,
          totalCost:
            updated[index].plannedQuantity * selectedMaterial.costPrice,
        };
      }
    } else {
      const material = updated[index];
      if (field === "plannedQuantity") {
        material.plannedQuantity = value as number;
        material.totalCost = material.plannedQuantity * material.unitCost;
      } else if (field === "actualQuantity") {
        material.actualQuantity = value as number;
      } else if (field === "unitCost") {
        material.unitCost = value as number;
        material.totalCost = material.plannedQuantity * material.unitCost;
      }
    }
    setMaterials(updated);
  };

  const addActivity = () => {
    const newActivity: PmWorkOrderActivity = {
      id: `act-${Date.now()}`,
      workOrderId: workOrder.id,
      activityDescription: "",
      plannedDuration: 60,
      actualDuration: 0,
      performedBy: "",
      notes: "",
    };
    setActivities([...activities, newActivity]);
  };

  const removeActivity = (index: number) => {
    setActivities(activities.filter((_, i) => i !== index));
  };

  const updateActivity = (
    index: number,
    field: string,
    value: string | number
  ) => {
    const updated = [...activities];
    const activity = updated[index];
    if (field === "activityDescription") {
      activity.activityDescription = value as string;
    } else if (field === "plannedDuration") {
      activity.plannedDuration = value as number;
    } else if (field === "actualDuration") {
      activity.actualDuration = value as number;
    } else if (field === "performedBy") {
      activity.performedBy = value as string;
    } else if (field === "notes") {
      activity.notes = value as string;
    }
    setActivities(updated);
  };

  const toggleActivityCompletion = (index: number) => {
    const updated = [...activities];
    const activity = updated[index];
    if (activity.completedAt) {
      activity.completedAt = undefined;
    } else {
      activity.completedAt = new Date();
    }
    setActivities(updated);
  };

  if (!isOpen) return null;

  return (
    <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-5xl mx-4 max-h-[90vh] overflow-y-auto">
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-lg font-semibold text-gray-900 flex items-center">
            <FaSave className="w-5 h-5 mr-2 text-blue-600" />
            İş Emrini Düzenle
          </h3>
          <button
            onClick={onClose}
            className="text-gray-400 hover:text-gray-600"
          >
            <FaTimes className="w-5 h-5" />
          </button>
        </div>

        <form onSubmit={handleSubmit} className="space-y-4">
          {/* Basic Information */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                İş Emri No
              </label>
              <input
                type="text"
                value={formData.workOrderNumber}
                onChange={(e) =>
                  setFormData({ ...formData, workOrderNumber: e.target.value })
                }
                className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                readOnly
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Durum
              </label>
              <select
                value={formData.status}
                onChange={(e) =>
                  setFormData({
                    ...formData,
                    status: e.target.value as WorkOrderStatusEnum,
                  })
                }
                className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              >
                <option value={WorkOrderStatusEnum.Created}>Oluşturuldu</option>
                <option value={WorkOrderStatusEnum.Planned}>Planlandı</option>
                <option value={WorkOrderStatusEnum.Released}>
                  Serbest Bırakıldı
                </option>
                <option value={WorkOrderStatusEnum.InProgress}>
                  Devam Ediyor
                </option>
                <option value={WorkOrderStatusEnum.OnHold}>Beklemede</option>
                <option value={WorkOrderStatusEnum.Completed}>
                  Tamamlandı
                </option>
                <option value={WorkOrderStatusEnum.Cancelled}>
                  İptal Edildi
                </option>
              </select>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                İş Merkezi *
              </label>
              <select
                value={formData.workCenterId}
                onChange={(e) =>
                  setFormData({ ...formData, workCenterId: e.target.value })
                }
                className={`w-full px-3 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
                  errors.workCenterId ? "border-red-500" : "border-gray-300"
                }`}
              >
                <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-2">
                İş Emri Tipi
              </label>
              <select
                value={formData.orderType}
                onChange={(e) =>
                  setFormData({
                    ...formData,
                    orderType: e.target.value as WorkOrderTypeEnum,
                  })
                }
                className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              >
                <option value={WorkOrderTypeEnum.Preventive}>Önleyici</option>
                <option value={WorkOrderTypeEnum.Corrective}>Düzeltici</option>
                <option value={WorkOrderTypeEnum.Emergency}>Acil</option>
                <option value={WorkOrderTypeEnum.Inspection}>İnceleme</option>
                <option value={WorkOrderTypeEnum.Calibration}>
                  Kalibrasyon
                </option>
              </select>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Öncelik
              </label>
              <select
                value={formData.priority}
                onChange={(e) =>
                  setFormData({
                    ...formData,
                    priority: e.target.value as PriorityEnum,
                  })
                }
                className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              >
                <option value={PriorityEnum.Low}>Düşük</option>
                <option value={PriorityEnum.Normal}>Normal</option>
                <option value={PriorityEnum.High}>Yüksek</option>
                <option value={PriorityEnum.Urgent}>Acil</option>
              </select>
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Açıklama *
            </label>
            <textarea
              value={formData.description}
              onChange={(e) =>
                setFormData({ ...formData, description: e.target.value })
              }
              rows={2}
              className={`w-full px-3 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
                errors.description ? "border-red-500" : "border-gray-300"
              }`}
              placeholder="İş emri açıklaması..."
            />
            {errors.description && (
              <p className="mt-1 text-sm text-red-600">{errors.description}</p>
            )}
          </div>

          {/* Assignment */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Bildiren *
              </label>
              <input
                type="text"
                value={formData.reportedBy}
                onChange={(e) =>
                  setFormData({ ...formData, reportedBy: e.target.value })
                }
                className={`w-full px-3 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
                  errors.reportedBy ? "border-red-500" : "border-gray-300"
                }`}
                placeholder="Bildiren kişi adı"
              />
              {errors.reportedBy && (
                <p className="mt-1 text-sm text-red-600">{errors.reportedBy}</p>
              )}
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Atanan Kişi
              </label>
              <select
                value={formData.assignedTo}
                onChange={(e) =>
                  setFormData({ ...formData, assignedTo: e.target.value })
                }
                className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              >
                <option value="">Kişi Seçin</option>
                {mockEmployees.map((employee) => (
                  <option key={employee.id} value={employee.fullName}>
                    {employee.fullName} - {employee.jobPosition?.name}
                  </option>
                ))}
              </select>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Bakım Ekibi
              </label>
              <select
                value={formData.maintenanceTeamId}
                onChange={(e) =>
                  setFormData({
                    ...formData,
                    maintenanceTeamId: e.target.value,
                  })
                }
                className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              >
                <option value="">Ekip Seçin</option>
                {mockMaintenanceTeams.map((team) => (
                  <option key={team.id} value={team.id}>
                    {team.name}
                  </option>
                ))}
              </select>
            </div>
          </div>

          {/* Schedule */}
          <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                <FaCalendar className="w-4 h-4 inline mr-2" />
                Planlanan Başlangıç
              </label>
              <input
                type="datetime-local"
                value={formData.scheduledStart}
                onChange={(e) =>
                  setFormData({ ...formData, scheduledStart: e.target.value })
                }
                className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                <FaCalendar className="w-4 h-4 inline mr-2" />
                Planlanan Bitiş
              </label>
              <input
                type="datetime-local"
                value={formData.scheduledEnd}
                onChange={(e) =>
                  setFormData({ ...formData, scheduledEnd: e.target.value })
                }
                className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                <FaCalendar className="w-4 h-4 inline mr-2" />
                Gerçek Başlangıç
              </label>
              <input
                type="datetime-local"
                value={formData.actualStart}
                onChange={(e) =>
                  setFormData({ ...formData, actualStart: e.target.value })
                }
                className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                <FaCalendar className="w-4 h-4 inline mr-2" />
                Gerçek Bitiş
              </label>
              <input
                type="datetime-local"
                value={formData.actualEnd}
                onChange={(e) =>
                  setFormData({ ...formData, actualEnd: e.target.value })
                }
                className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              />
            </div>
          </div>

          {/* Costs */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Tahmini Maliyet
              </label>
              <input
                type="number"
                min="0"
                step="0.01"
                value={formData.estimatedCost}
                onChange={(e) =>
                  setFormData({
                    ...formData,
                    estimatedCost: parseFloat(e.target.value) || 0,
                  })
                }
                className={`w-full px-3 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
                  errors.estimatedCost ? "border-red-500" : "border-gray-300"
                }`}
                placeholder="0.00"
              />
              {errors.estimatedCost && (
                <p className="mt-1 text-sm text-red-600">
                  {errors.estimatedCost}
                </p>
              )}
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Gerçek Maliyet
              </label>
              <input
                type="number"
                min="0"
                step="0.01"
                value={formData.actualCost}
                onChange={(e) =>
                  setFormData({
                    ...formData,
                    actualCost: parseFloat(e.target.value) || 0,
                  })
                }
                className={`w-full px-3 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
                  errors.actualCost ? "border-red-500" : "border-gray-300"
                }`}
                placeholder="0.00"
              />
              {errors.actualCost && (
                <p className="mt-1 text-sm text-red-600">{errors.actualCost}</p>
              )}
            </div>
          </div>

          {/* Materials */}
          <div>
            <div className="flex items-center justify-between mb-4">
              <h4 className="text-lg font-medium text-gray-900">Malzemeler</h4>
              <button
                type="button"
                onClick={addMaterial}
                className="bg-blue-600 text-white px-3 py-1.5 text-sm rounded-lg hover:bg-blue-700 flex items-center space-x-2"
              >
                <FaPlus className="w-4 h-4" />
                <span>Malzeme Ekle</span>
              </button>
            </div>

            {materials.map((material, index) => (
              <div
                key={material.id || index}
                className="bg-gray-50 p-3 rounded-lg mb-2"
              >
                <div className="grid grid-cols-1 md:grid-cols-6 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Malzeme
                    </label>
                    <select
                      value={material.materialId}
                      onChange={(e) =>
                        updateMaterial(index, "materialId", e.target.value)
                      }
                      className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    >
                      <option value="">Malzeme Seçin</option>
                      {mockMaterials.map((mat) => (
                        <option key={mat.id} value={mat.id}>
                          {mat.code} - {mat.name}
                        </option>
                      ))}
                    </select>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Planlanan
                    </label>
                    <input
                      type="number"
                      min="0"
                      value={material.plannedQuantity}
                      onChange={(e) =>
                        updateMaterial(
                          index,
                          "plannedQuantity",
                          parseInt(e.target.value) || 0
                        )
                      }
                      className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Kullanılan
                    </label>
                    <input
                      type="number"
                      min="0"
                      value={material.actualQuantity}
                      onChange={(e) =>
                        updateMaterial(
                          index,
                          "actualQuantity",
                          parseInt(e.target.value) || 0
                        )
                      }
                      className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Birim Fiyat
                    </label>
                    <input
                      type="number"
                      min="0"
                      step="0.01"
                      value={material.unitCost}
                      onChange={(e) =>
                        updateMaterial(
                          index,
                          "unitCost",
                          parseFloat(e.target.value) || 0
                        )
                      }
                      className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Toplam
                    </label>
                    <input
                      type="text"
                      value={`₺${material.totalCost.toFixed(2)}`}
                      readOnly
                      className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg bg-gray-100"
                    />
                  </div>
                  <div className="flex items-end">
                    <button
                      type="button"
                      onClick={() => removeMaterial(index)}
                      className="text-red-600 hover:text-red-800 p-2"
                    >
                      <FaTrash className="w-4 h-4" />
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>

          {/* Activities */}
          <div>
            <div className="flex items-center justify-between mb-4">
              <h4 className="text-lg font-medium text-gray-900">Aktiviteler</h4>
              <button
                type="button"
                onClick={addActivity}
                className="bg-green-600 text-white px-3 py-1.5 text-sm rounded-lg hover:bg-green-700 flex items-center space-x-2"
              >
                <FaPlus className="w-4 h-4" />
                <span>Aktivite Ekle</span>
              </button>
            </div>

            {activities.map((activity, index) => (
              <div
                key={activity.id || index}
                className="bg-gray-50 p-3 rounded-lg mb-2"
              >
                <div className="grid grid-cols-1 md:grid-cols-6 gap-4">
                  <div className="md:col-span-2">
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Aktivite Açıklaması
                    </label>
                    <input
                      type="text"
                      value={activity.activityDescription}
                      onChange={(e) =>
                        updateActivity(
                          index,
                          "activityDescription",
                          e.target.value
                        )
                      }
                      className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                      placeholder="Aktivite açıklaması"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      <FaClock className="w-4 h-4 inline mr-1" />
                      Planlanan (dk)
                    </label>
                    <input
                      type="number"
                      min="0"
                      value={activity.plannedDuration}
                      onChange={(e) =>
                        updateActivity(
                          index,
                          "plannedDuration",
                          parseInt(e.target.value) || 0
                        )
                      }
                      className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      <FaClock className="w-4 h-4 inline mr-1" />
                      Gerçek (dk)
                    </label>
                    <input
                      type="number"
                      min="0"
                      value={activity.actualDuration}
                      onChange={(e) =>
                        updateActivity(
                          index,
                          "actualDuration",
                          parseInt(e.target.value) || 0
                        )
                      }
                      className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Yapan
                    </label>
                    <input
                      type="text"
                      value={activity.performedBy}
                      onChange={(e) =>
                        updateActivity(index, "performedBy", e.target.value)
                      }
                      className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                      placeholder="Yapan kişi"
                    />
                  </div>
                  <div className="flex items-end space-x-2">
                    <button
                      type="button"
                      onClick={() => toggleActivityCompletion(index)}
                      className={`px-3 py-2 rounded text-xs ${
                        activity.completedAt
                          ? "bg-green-600 text-white"
                          : "bg-gray-300 text-gray-700"
                      }`}
                    >
                      {activity.completedAt ? "Tamamlandı" : "Bekliyor"}
                    </button>
                    <button
                      type="button"
                      onClick={() => removeActivity(index)}
                      className="text-red-600 hover:text-red-800 p-2"
                    >
                      <FaTrash className="w-4 h-4" />
                    </button>
                  </div>
                </div>
                {activity.notes !== undefined && (
                  <div className="mt-3">
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Aktivite Notları
                    </label>
                    <textarea
                      value={activity.notes}
                      onChange={(e) =>
                        updateActivity(index, "notes", e.target.value)
                      }
                      rows={1}
                      className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                      placeholder="Aktivite hakkında notlar..."
                    />
                  </div>
                )}
              </div>
            ))}
          </div>

          {/* Notes */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                İş Emri Notları
              </label>
              <textarea
                value={formData.notes}
                onChange={(e) =>
                  setFormData({ ...formData, notes: e.target.value })
                }
                rows={2}
                className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                placeholder="Genel notlar..."
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Tamamlanma Notları
              </label>
              <textarea
                value={formData.completionNotes}
                onChange={(e) =>
                  setFormData({ ...formData, completionNotes: e.target.value })
                }
                rows={2}
                className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                placeholder="Tamamlanma ile ilgili notlar..."
              />
            </div>
          </div>

          {/* Form Actions */}
          <div className="flex justify-end space-x-3 pt-4 border-t border-gray-200">
            <button
              type="button"
              onClick={onClose}
              className="px-4 py-2 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50"
            >
              İptal
            </button>
            <button
              type="submit"
              className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center space-x-2"
            >
              <FaSave className="w-4 h-4" />
              <span>Kaydet</span>
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default EditWorkOrderModal;