import React, { useState } from 'react';
import { X } from 'lucide-react';
import { Employee, TrainingProgram } from '../../types';

interface AssignTrainingModalProps {
  employees: Employee[];
  programs: TrainingProgram[];
  onClose: () => void;
  onAssign: (employeeId: string, programId: string, startDate?: string) => void;
}

export const AssignTrainingModal: React.FC<AssignTrainingModalProps> = ({
  employees,
  programs,
  onClose,
  onAssign
}) => {
  const [selectedEmployee, setSelectedEmployee] = useState('');
  const [selectedProgram, setSelectedProgram] = useState('');
  const [startDate, setStartDate] = useState(new Date().toISOString().split('T')[0]);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!selectedEmployee || !selectedProgram) {
      alert('Выберите сотрудника и программу обучения');
      return;
    }

    onAssign(selectedEmployee, selectedProgram, startDate);
  };

  return (
    <div
      className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-fade-in"
      onClick={onClose}
    >
      <div
        className="bg-white rounded-2xl w-full max-w-lg shadow-2xl animate-slide-up"
        onClick={e => e.stopPropagation()}
      >
        <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">
            <h3 className="text-2xl font-bold text-slate-800">Назначить обучение</h3>
            <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>

        <form onSubmit={handleSubmit} className="p-6 space-y-6">
          <div>
            <label className="block text-sm font-bold text-slate-700 mb-2">
              Сотрудник *
            </label>
            <select
              value={selectedEmployee}
              onChange={(e) => setSelectedEmployee(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"
              required
            >
              <option value="">Выберите сотрудника</option>
              {employees.map(emp => (
                <option key={emp.id} value={emp.id}>
                  {emp.name} - {emp.position}
                </option>
              ))}
            </select>
          </div>

          <div>
            <label className="block text-sm font-bold text-slate-700 mb-2">
              Программа обучения *
            </label>
            <select
              value={selectedProgram}
              onChange={(e) => setSelectedProgram(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"
              required
            >
              <option value="">Выберите программу</option>
              {programs.map(prog => (
                <option key={prog.id} value={prog.id}>
                  {prog.title} ({prog.type === 'instruction' ? 'Инструктаж' : 
                                 prog.type === 'course' ? 'Курс' :
                                 prog.type === 'certification' ? 'Сертификация' :
                                 prog.type === 'exam' ? 'Экзамен' : 'Другое'})
                </option>
              ))}
            </select>
            {programs.length === 0 && (
              <p className="text-xs text-slate-400 mt-2">
                Нет доступных программ. Создайте программу обучения сначала.
              </p>
            )}
          </div>

          <div>
            <label className="block text-sm font-bold text-slate-700 mb-2">
              Дата начала
            </label>
            <input
              type="date"
              value={startDate}
              onChange={(e) => setStartDate(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="flex gap-3 pt-4">
            <button
              type="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
              type="submit"
              className="flex-1 px-6 py-3 bg-emerald-600 text-white rounded-xl font-bold hover:bg-emerald-700 transition-all"
              disabled={!selectedEmployee || !selectedProgram || programs.length === 0}
            >
              Назначить
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};