import React, { useState } from "react";
import { FaTimes, FaSave, FaExclamationTriangle } from "react-icons/fa";
import {
  PmWorkCenter,
  WorkCenterStatusEnum,
  CriticalityLevelEnum,
} from "../../../types/pm";
import {
  getCriticalityLevelText,
  getWorkCenterStatusText,
} from "../../../utils/erp";

interface StatusUpdateModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSave: (updatedWorkCenters: PmWorkCenter[]) => void;
  selectedWorkCenters: PmWorkCenter[];
}

const StatusUpdateModal: React.FC<StatusUpdateModalProps> = ({
  isOpen,
  onClose,
  onSave,
  selectedWorkCenters,
}) => {
  const [newStatus, setNewStatus] = useState<WorkCenterStatusEnum>(
    WorkCenterStatusEnum.Operational
  );
  const [newCriticality, setNewCriticality] = useState<CriticalityLevelEnum>(
    CriticalityLevelEnum.Medium
  );
  const [updateStatus, setUpdateStatus] = useState(true);
  const [updateCriticality, setUpdateCriticality] = useState(false);
  const [reason, setReason] = useState("");

  if (!isOpen) return null;

  const handleSave = () => {
    const updatedWorkCenters = selectedWorkCenters.map((workCenter) => ({
      ...workCenter,
      status: updateStatus ? newStatus : workCenter.status,
      criticality: updateCriticality ? newCriticality : workCenter.criticality,
      lastModificationTime: new Date(),
    }));

    onSave(updatedWorkCenters);
    onClose();
  };

  const isStatusCritical =
    newStatus === WorkCenterStatusEnum.OutOfOrder ||
    newStatus === WorkCenterStatusEnum.UnderMaintenance;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-white rounded-lg w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto">
        {/* Header */}
        <div className="flex items-center justify-between p-4 border-b border-gray-200">
          <h2 className="text-lg font-semibold text-gray-900">
            Durum Güncelle ({selectedWorkCenters.length} iş merkezi)
          </h2>
          <button
            onClick={onClose}
            className="p-1 hover:bg-gray-100 rounded-lg transition-colors"
          >
            <FaTimes className="w-4 h-4 text-gray-500" />
          </button>
        </div>

        {/* Content */}
        <div className="p-4 space-y-4">
          {/* Selected WorkCenter List */}
          <div>
            <h3 className="text-base font-medium text-gray-900 mb-2">
              Seçili İş Merkezleri
            </h3>
            <div className="max-h-28 overflow-y-auto bg-gray-50 rounded-lg p-2">
              {selectedWorkCenters.map((workCenter) => (
                <div
                  key={workCenter.id}
                  className="flex items-center justify-between py-0.5"
                >
                  <span className="text-sm text-gray-700">
                    {workCenter.code} - {workCenter.name}
                  </span>
                  <div className="flex items-center space-x-2">
                    <span className="text-xs text-gray-500">
                      Mevcut: {getWorkCenterStatusText(workCenter.status)}
                    </span>
                    <span className="text-xs text-gray-500">
                      {getCriticalityLevelText(workCenter.criticality)}
                    </span>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Status Update Options */}
          <div className="space-y-3">
            <div className="flex items-center space-x-3">
              <input
                type="checkbox"
                id="updateStatus"
                checked={updateStatus}
                onChange={(e) => setUpdateStatus(e.target.checked)}
                className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
              />
              <label
                htmlFor="updateStatus"
                className="text-sm font-medium text-gray-700"
              >
                Operasyonel durumu güncelle
              </label>
            </div>

            {updateStatus && (
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Yeni Durum
                </label>
                <select
                  value={newStatus}
                  onChange={(e) =>
                    setNewStatus(e.target.value as WorkCenterStatusEnum)
                  }
                  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={WorkCenterStatusEnum.Operational}>
                    Operasyonel
                  </option>
                  <option value={WorkCenterStatusEnum.UnderMaintenance}>
                    Bakımda
                  </option>
                  <option value={WorkCenterStatusEnum.OutOfOrder}>
                    Arızalı
                  </option>
                  <option value={WorkCenterStatusEnum.Retired}>Emekli</option>
                </select>

                {isStatusCritical && (
                  <div className="mt-2 p-2 bg-yellow-50 border border-yellow-200 rounded-lg">
                    <div className="flex items-center space-x-2">
                      <FaExclamationTriangle className="w-4 h-4 text-yellow-600" />
                      <span className="text-sm text-yellow-800 font-medium">
                        Dikkat!
                      </span>
                    </div>
                    <p className="text-sm text-yellow-700 mt-1">
                      Bu durum değişikliği iş merkezinin üretim kapasitesini
                      etkileyebilir.
                    </p>
                  </div>
                )}
              </div>
            )}

            <div className="flex items-center space-x-3">
              <input
                type="checkbox"
                id="updateCriticality"
                checked={updateCriticality}
                onChange={(e) => setUpdateCriticality(e.target.checked)}
                className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
              />
              <label
                htmlFor="updateCriticality"
                className="text-sm font-medium text-gray-700"
              >
                Kritiklik seviyesini güncelle
              </label>
            </div>

            {updateCriticality && (
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Yeni Kritiklik Seviyesi
                </label>
                <select
                  value={newCriticality}
                  onChange={(e) =>
                    setNewCriticality(e.target.value as CriticalityLevelEnum)
                  }
                  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={CriticalityLevelEnum.Low}>Düşük</option>
                  <option value={CriticalityLevelEnum.Medium}>Orta</option>
                  <option value={CriticalityLevelEnum.High}>Yüksek</option>
                  <option value={CriticalityLevelEnum.Critical}>Kritik</option>
                </select>
              </div>
            )}
          </div>

          {/* Reason */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Değişiklik Nedeni
            </label>
            <textarea
              value={reason}
              onChange={(e) => setReason(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="Durum değişikliğinin nedenini açıklayın..."
            />
          </div>

          {/* Summary */}
          <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
            <h4 className="font-medium text-blue-900 mb-2">Değişiklik Özeti</h4>
            <div className="text-sm text-blue-800 space-y-1">
              <p>• {selectedWorkCenters.length} iş merkezi güncellenecek</p>
              {updateStatus && (
                <p>
                  • Durum "{getWorkCenterStatusText(newStatus)}" olarak
                  değiştirilecek
                </p>
              )}
              {updateCriticality && (
                <p>
                  • Kritiklik seviyesi "
                  {getCriticalityLevelText(newCriticality)}" olarak
                  değiştirilecek
                </p>
              )}
            </div>
          </div>
        </div>

        {/* Footer */}
        <div className="flex items-center justify-end space-x-2 p-4 border-t border-gray-200">
          <button
            type="button"
            onClick={onClose}
            className="px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
          >
            İptal
          </button>
          <button
            type="button"
            onClick={handleSave}
            disabled={!updateStatus && !updateCriticality}
            className="flex items-center space-x-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
          >
            <FaSave className="w-4 h-4" />
            <span>Durumu Güncelle</span>
          </button>
        </div>
      </div>
    </div>
  );
};

export default StatusUpdateModal;