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"
                >
                  {Object.values(WorkCenterStatusEnum).map((status) => (
                    <option key={status} value={status}>
                      {getWorkCenterStatusText(status)}
                    </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"
                >
                  {Object.values(CriticalityLevelEnum).map((level) => (
                    <option key={level} value={level}>
                      {getCriticalityLevelText(level)}
                    </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