import React, { useState } from 'react';
import { X, CheckCircle2, XCircle, Play, Clock, UserCheck, Award, FileText } from 'lucide-react';
import { EmployeeTraining, TrainingStatus } from '../../types';

interface TrainingManagementModalProps {
  training: EmployeeTraining;
  onClose: () => void;
  onUpdate: (trainingId: number, updates: Partial<EmployeeTraining>) => Promise<void>;
}

export const TrainingManagementModal: React.FC<TrainingManagementModalProps> = ({ 
  training, 
  onClose, 
  onUpdate 
}) => {
  const [status, setStatus] = useState<TrainingStatus>(training.status || 'in_progress');
  const [completionDate, setCompletionDate] = useState(training.completionDate || '');
  const [score, setScore] = useState(training.score?.toString() || '');
  const [passed, setPassed] = useState(training.passed ?? null);
  const [certificateNumber, setCertificateNumber] = useState(training.certificateNumber || '');
  const [notes, setNotes] = useState(training.notes || '');
  const [saving, setSaving] = useState(false);

  const handleStatusChange = (newStatus: TrainingStatus) => {
    setStatus(newStatus);
    
    // Автоматически устанавливаем дату завершения при статусе "completed"
    if (newStatus === 'completed' && !completionDate) {
      setCompletionDate(new Date().toISOString().split('T')[0]);
      setPassed(true);
    } else if (newStatus === 'failed') {
      setPassed(false);
    } else if (newStatus === 'cancelled') {
      setPassed(null);
    }
  };

  const handleSave = async () => {
    try {
      setSaving(true);
      
      const updates: Partial<EmployeeTraining> = {
        status,
        completionDate: completionDate || undefined,
        score: score ? parseFloat(score) : undefined,
        passed,
        certificateNumber: certificateNumber || undefined,
        notes: notes || undefined
      };

      await onUpdate(training.id, updates);
      onClose();
    } catch (error) {
      console.error('Error updating training:', error);
      alert('Ошибка при обновлении обучения');
    } finally {
      setSaving(false);
    }
  };

  const getStatusIcon = (status: TrainingStatus) => {
    switch (status) {
      case 'completed': return <CheckCircle2 className="w-4 h-4 text-emerald-600"/>;
      case 'failed': return <XCircle className="w-4 h-4 text-red-600"/>;
      case 'cancelled': return <X className="w-4 h-4 text-slate-400"/>;
      case 'in_progress': return <Play className="w-4 h-4 text-amber-600"/>;
      case 'not_started': return <Clock className="w-4 h-4 text-slate-400"/>;
      default: return <Clock className="w-4 h-4"/>;
    }
  };

  const getStatusLabel = (status: TrainingStatus) => {
    const labels: Record<TrainingStatus, string> = {
      'not_started': 'Не начато',
      'in_progress': 'В процессе',
      'completed': 'Завершено',
      'failed': 'Не пройдено',
      'expired': 'Просрочено',
      'cancelled': 'Отменено'
    };
    return labels[status] || status;
  };

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
        {/* Header */}
        <div className="sticky top-0 bg-white border-b border-slate-200 p-6 rounded-t-2xl z-10">
          <div className="flex justify-between items-center">
            <div>
              <h3 className="text-2xl font-bold text-slate-800">Управление обучением</h3>
              <p className="text-sm text-slate-400 mt-1">
                {training.programTitle} • {training.employeeName}
              </p>
            </div>
            <button
              onClick={onClose}
              className="p-2 hover:bg-slate-100 rounded-full transition-colors"
            >
              <X className="w-5 h-5 text-slate-500"/>
            </button>
          </div>
        </div>

        <div className="p-6 space-y-6">
          {/* Статус обучения */}
          <div>
            <label className="block text-sm font-bold text-slate-700 mb-3">
              Статус обучения
            </label>
            <div className="grid grid-cols-3 gap-2">
              {(['in_progress', 'completed', 'failed', 'cancelled'] as TrainingStatus[]).map((s) => (
                <button
                  key={s}
                  onClick={() => handleStatusChange(s)}
                  className={`flex items-center justify-center gap-2 p-3 rounded-xl border-2 transition-all ${
                    status === s
                      ? 'border-primary-500 bg-primary-50 text-primary-700'
                      : 'border-slate-200 hover:border-slate-300 text-slate-600'
                  }`}
                >
                  {getStatusIcon(s)}
                  <span className="text-xs font-bold">{getStatusLabel(s)}</span>
                </button>
              ))}
            </div>
          </div>

          {/* Посещаемость (можно отметить в примечаниях) */}
          <div className="bg-blue-50 p-4 rounded-xl border border-blue-100">
            <p className="text-xs text-blue-700 font-bold mb-2 flex items-center gap-2">
              <UserCheck className="w-4 h-4"/> Посещаемость
            </p>
            <p className="text-xs text-blue-600">
              Отметьте посещаемость в примечаниях ниже (например: "Посетил все занятия" или "Не посетил 2 из 5 занятий")
            </p>
          </div>

          {/* Детали завершения (показываются только для завершенных/не пройденных) */}
          {(status === 'completed' || status === 'failed') && (
            <>
              <div>
                <label className="block text-sm font-bold text-slate-700 mb-2">
                  Дата завершения
                </label>
                <input
                  type="date"
                  value={completionDate}
                  onChange={(e) => setCompletionDate(e.target.value)}
                  className="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500"
                />
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-bold text-slate-700 mb-2">
                    Оценка (баллы)
                  </label>
                  <input
                    type="number"
                    min="0"
                    max="100"
                    value={score}
                    onChange={(e) => setScore(e.target.value)}
                    className="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500"
                    placeholder="0-100"
                  />
                </div>

                <div>
                  <label className="block text-sm font-bold text-slate-700 mb-2">
                    Результат
                  </label>
                  <div className="flex gap-2">
                    <button
                      onClick={() => setPassed(true)}
                      className={`flex-1 flex items-center justify-center gap-2 p-3 rounded-xl border-2 transition-all ${
                        passed === true
                          ? 'border-emerald-500 bg-emerald-50 text-emerald-700'
                          : 'border-slate-200 hover:border-slate-300 text-slate-600'
                      }`}
                    >
                      <CheckCircle2 className="w-4 h-4"/> Сдал
                    </button>
                    <button
                      onClick={() => setPassed(false)}
                      className={`flex-1 flex items-center justify-center gap-2 p-3 rounded-xl border-2 transition-all ${
                        passed === false
                          ? 'border-red-500 bg-red-50 text-red-700'
                          : 'border-slate-200 hover:border-slate-300 text-slate-600'
                      }`}
                    >
                      <XCircle className="w-4 h-4"/> Не сдал
                    </button>
                  </div>
                </div>
              </div>

              {status === 'completed' && (
                <div>
                  <label className="block text-sm font-bold text-slate-700 mb-2 flex items-center gap-2">
                    <Award className="w-4 h-4"/> Номер сертификата
                  </label>
                  <input
                    type="text"
                    value={certificateNumber}
                    onChange={(e) => setCertificateNumber(e.target.value)}
                    className="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500"
                    placeholder="СЕРТ-2024-001"
                  />
                </div>
              )}
            </>
          )}

          {/* Примечания */}
          <div>
            <label className="block text-sm font-bold text-slate-700 mb-2 flex items-center gap-2">
              <FileText className="w-4 h-4"/> Примечания
            </label>
            <textarea
              value={notes}
              onChange={(e) => setNotes(e.target.value)}
              rows={3}
              className="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500"
              placeholder="Дополнительная информация об обучении..."
            />
          </div>

          {/* Информация о программе */}
          <div className="bg-slate-50 p-4 rounded-xl">
            <p className="text-xs text-slate-400 font-bold uppercase mb-2">Информация о программе</p>
            <div className="space-y-1 text-sm">
              <p><span className="font-bold">Начало:</span> {training.startDate ? new Date(training.startDate).toLocaleDateString('ru-RU') : 'Не указано'}</p>
              {training.expiryDate && (
                <p><span className="font-bold">Срок действия до:</span> {new Date(training.expiryDate).toLocaleDateString('ru-RU')}</p>
              )}
              {training.programDurationHours && (
                <p><span className="font-bold">Длительность:</span> {training.programDurationHours} ч.</p>
              )}
            </div>
          </div>

          {/* Кнопки действий */}
          <div className="flex gap-3 pt-4 border-t border-slate-200">
            <button
              onClick={onClose}
              className="flex-1 px-6 py-3 border border-slate-200 text-slate-700 rounded-xl font-bold hover:bg-slate-50 transition-all"
            >
              Отмена
            </button>
            <button
              onClick={handleSave}
              disabled={saving}
              className="flex-1 px-6 py-3 bg-primary-600 text-white rounded-xl font-bold hover:bg-primary-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {saving ? 'Сохранение...' : 'Сохранить изменения'}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};