import React, { useState } from "react";
import { FaTimes, FaPlay, FaCalendar, FaUser } from "react-icons/fa";
import { PmMaintenanceWorkOrder, WorkOrderStatusEnum } from "../../../types/pm";
import { mockEmployees } from "../../../mocks/mockEmployees";
import { mockMaintenanceTeams } from "../../../mocks/mockMaintenanceTeams";

interface StartWorkOrderModalProps {
  isOpen: boolean;
  onClose: () => void;
  onStart: (
    workOrders: PmMaintenanceWorkOrder[],
    startData: StartWorkOrderData
  ) => void;
  workOrders: PmMaintenanceWorkOrder[];
}

interface StartWorkOrderData {
  actualStart: Date;
  assignedTo?: string;
  maintenanceTeamId?: string;
  notes?: string;
}

const StartWorkOrderModal: React.FC<StartWorkOrderModalProps> = ({
  isOpen,
  onClose,
  onStart,
  workOrders,
}) => {
  const [formData, setFormData] = useState({
    actualStart: new Date().toISOString().slice(0, 16),
    assignedTo: "",
    maintenanceTeamId: "",
    notes: "",
  });

  const [errors, setErrors] = useState<Record<string, string>>({});

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

    if (!formData.actualStart) {
      newErrors.actualStart = "Başlangıç tarihi zorunludur";
    }

    const startDate = new Date(formData.actualStart);
    const now = new Date();
    if (startDate > now) {
      newErrors.actualStart = "Başlangıç tarihi gelecekte olamaz";
    }

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

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

    const startData: StartWorkOrderData = {
      actualStart: new Date(formData.actualStart),
      assignedTo: formData.assignedTo || undefined,
      maintenanceTeamId: formData.maintenanceTeamId || undefined,
      notes: formData.notes || undefined,
    };

    onStart(workOrders, startData);
    onClose();
  };

  const canStartWorkOrders = workOrders.every(
    (wo) =>
      wo.status === WorkOrderStatusEnum.Created ||
      wo.status === WorkOrderStatusEnum.Planned ||
      wo.status === WorkOrderStatusEnum.Released
  );

  const inProgressWorkOrders = workOrders.filter(
    (wo) => wo.status === WorkOrderStatusEnum.InProgress
  );

  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-lg 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">
            <FaPlay className="w-5 h-5 mr-2 text-green-600" />
            İş Emirlerini Başlat
          </h3>
          <button
            onClick={onClose}
            className="text-gray-400 hover:text-gray-600"
          >
            <FaTimes className="w-5 h-5" />
          </button>
        </div>

        {/* Work Orders Summary */}
        <div className="mb-4">
          <h4 className="text-base font-medium text-gray-900 mb-2">
            Seçilen İş Emirleri ({workOrders.length})
          </h4>
          <div className="max-h-32 overflow-y-auto border border-gray-200 rounded-lg">
            {workOrders.map((workOrder) => (
              <div
                key={workOrder.id}
                className="p-3 border-b border-gray-100 last:border-b-0"
              >
                <div className="flex items-center justify-between">
                  <div>
                    <p className="font-medium text-sm text-gray-900">
                      {workOrder.workOrderNumber}
                    </p>
                    <p className="text-xs text-gray-600 truncate">
                      {workOrder.description}
                    </p>
                  </div>
                  <div className="text-right">
                    <span
                      className={`px-2 py-1 rounded-full text-xs font-medium ${
                        workOrder.status === WorkOrderStatusEnum.Created
                          ? "bg-gray-100 text-gray-800"
                          : workOrder.status === WorkOrderStatusEnum.Planned
                          ? "bg-blue-100 text-blue-800"
                          : workOrder.status === WorkOrderStatusEnum.Released
                          ? "bg-purple-100 text-purple-800"
                          : workOrder.status === WorkOrderStatusEnum.InProgress
                          ? "bg-orange-100 text-orange-800"
                          : "bg-gray-100 text-gray-800"
                      }`}
                    >
                      {workOrder.status === WorkOrderStatusEnum.Created &&
                        "Oluşturuldu"}
                      {workOrder.status === WorkOrderStatusEnum.Planned &&
                        "Planlandı"}
                      {workOrder.status === WorkOrderStatusEnum.Released &&
                        "Serbest Bırakıldı"}
                      {workOrder.status === WorkOrderStatusEnum.InProgress &&
                        "Devam Ediyor"}
                      {workOrder.status === WorkOrderStatusEnum.OnHold &&
                        "Beklemede"}
                      {workOrder.status === WorkOrderStatusEnum.Completed &&
                        "Tamamlandı"}
                      {workOrder.status === WorkOrderStatusEnum.Cancelled &&
                        "İptal Edildi"}
                    </span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Validation Messages */}
        {!canStartWorkOrders && (
          <div className="mb-4 p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
            <div className="flex items-start space-x-2">
              <FaTimes className="w-5 h-5 text-yellow-600 mt-0.5" />
              <div>
                <h5 className="font-medium text-yellow-800 mb-1">Uyarı</h5>
                <p className="text-yellow-700 text-sm">
                  Bazı iş emirleri başlatılamaz durumda. Sadece "Oluşturuldu",
                  "Planlandı" veya "Serbest Bırakıldı" durumundaki iş emirleri
                  başlatılabilir.
                </p>
              </div>
            </div>
          </div>
        )}

        {inProgressWorkOrders.length > 0 && (
          <div className="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
            <div className="flex items-start space-x-2">
              <FaPlay className="w-5 h-5 text-blue-600 mt-0.5" />
              <div>
                <h5 className="font-medium text-blue-800 mb-1">Bilgi</h5>
                <p className="text-blue-700 text-sm">
                  {inProgressWorkOrders.length} iş emri zaten devam ediyor
                  durumunda. Bu iş emirleri için sadece atama ve not
                  güncellemesi yapılacak.
                </p>
              </div>
            </div>
          </div>
        )}

        <form onSubmit={handleSubmit} className="space-y-4">
          {/* Start DateTime */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              <FaCalendar className="w-4 h-4 inline mr-2" />
              Başlangıç Tarihi ve Saati *
            </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 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
                errors.actualStart ? "border-red-500" : "border-gray-300"
              }`}
            />
            {errors.actualStart && (
              <p className="mt-1 text-xs text-red-600">{errors.actualStart}</p>
            )}
          </div>

          {/* Assignment */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                <FaUser className="w-4 h-4 inline mr-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>

          {/* Notes */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Başlangıç 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="İş emirlerinin başlatılması ile ilgili notlar..."
            />
          </div>

          {/* Summary */}
          <div className="bg-gray-50 rounded-lg p-3">
            <h5 className="font-medium text-gray-900 mb-2">Özet</h5>
            <div className="grid grid-cols-2 gap-4 text-sm">
              <div>
                <span className="text-gray-600">Toplam İş Emri:</span>
                <span className="ml-2 font-medium">{workOrders.length}</span>
              </div>
              <div>
                <span className="text-gray-600">Başlatılabilir:</span>
                <span className="ml-2 font-medium text-green-600">
                  {
                    workOrders.filter(
                      (wo) =>
                        wo.status === WorkOrderStatusEnum.Created ||
                        wo.status === WorkOrderStatusEnum.Planned ||
                        wo.status === WorkOrderStatusEnum.Released
                    ).length
                  }
                </span>
              </div>
              <div>
                <span className="text-gray-600">Zaten Başlamış:</span>
                <span className="ml-2 font-medium text-blue-600">
                  {inProgressWorkOrders.length}
                </span>
              </div>
              <div>
                <span className="text-gray-600">Başlangıç Tarihi:</span>
                <span className="ml-2 font-medium">
                  {new Date(formData.actualStart).toLocaleDateString("tr-TR")}{" "}
                  {new Date(formData.actualStart).toLocaleTimeString("tr-TR", {
                    hour: "2-digit",
                    minute: "2-digit",
                  })}
                </span>
              </div>
            </div>
          </div>

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

export default StartWorkOrderModal;