import React, { useState } from 'react';
import { Course, Institution } from '../types';
import { Input, Select } from './Input';
import { Button } from './Button';
import { GraduationCap, X, Check, AlertCircle } from 'lucide-react';

interface CourseFormProps {
  onCancel: () => void;
  onSubmit: (data: Partial<Course>) => void;
  initialData?: Course;
  userId: string;
  institutions: Institution[];
}

const GRADUATION_TYPES = [
  'Bacharelado',
  'Licenciatura',
  'Tecnológico',
  'Especialização',
  'Mestrado',
  'Doutorado'
];

export const CourseForm: React.FC<CourseFormProps> = ({ 
  onCancel, 
  onSubmit, 
  initialData,
  userId,
  institutions
}) => {
  const currentYear = new Date().getFullYear();
  const [formData, setFormData] = useState<Partial<Course>>(initialData || {
    name: '',
    institutionId: '',
    year: currentYear,
    semester: 1,
    graduationType: '',
    createdAt: new Date().toISOString(),
    createdBy: userId,
    isActive: true,
  });

  const [showToast, setShowToast] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    // Validações
    if (!formData.name || formData.name.trim().length < 3) {
      setError('Nome do curso deve ter pelo menos 3 caracteres');
      return;
    }
    
    if (!formData.institutionId) {
      setError('Selecione uma universidade');
      return;
    }
    
    if (!formData.graduationType) {
      setError('Selecione o tipo de graduação');
      return;
    }

    setShowToast(true);
    setTimeout(() => {
      onSubmit(formData);
    }, 1000);
  };

  const handleChange = (field: keyof Course, value: any) => {
    setFormData(prev => ({ ...prev, [field]: value }));
    setError(''); // Limpa erro ao editar
  };

  return (
    <div className="bg-white rounded-lg shadow-xl overflow-hidden max-w-2xl mx-auto border border-gray-100 slide-up relative">
      
      {/* Success Toast */}
      {showToast && (
        <div className="absolute top-4 right-4 z-50 bg-brand-black text-white px-6 py-4 rounded shadow-2xl flex items-center space-x-3 fade-in">
          <Check className="text-brand-gold h-6 w-6" />
          <div>
            <h4 className="font-bold text-sm">Sucesso!</h4>
            <p className="text-xs text-gray-300">Curso cadastrado com sucesso.</p>
          </div>
        </div>
      )}

      {/* Form Header */}
      <div className="bg-gray-50 border-b px-8 py-6 flex justify-between items-center">
        <div className="flex items-center space-x-3">
          <GraduationCap className="text-brand-gold h-8 w-8" />
          <div>
            <h2 className="text-2xl font-serif text-brand-black">
              {initialData ? 'Editar Curso/Turma' : 'Cadastrar Curso/Turma'}
            </h2>
            <p className="text-sm text-gray-500 mt-1">
              Registre as turmas disponíveis para eventos fotográficos
            </p>
          </div>
        </div>
        <button
          onClick={onCancel}
          className="p-2 hover:bg-gray-200 rounded-full transition-colors"
        >
          <X size={20} className="text-gray-600" />
        </button>
      </div>

      <form onSubmit={handleSubmit} className="p-8 space-y-6">
        
        {/* Erro global */}
        {error && (
          <div className="bg-red-50 border border-red-200 rounded-lg p-3 flex items-start">
            <AlertCircle size={18} className="text-red-500 mr-2 flex-shrink-0 mt-0.5" />
            <p className="text-sm text-red-700">{error}</p>
          </div>
        )}

        {/* Informações do Curso */}
        <div className="space-y-4">
          <h3 className="text-sm font-semibold text-gray-700 tracking-wide uppercase">
            Informações do Curso
          </h3>
          
          <Select
            label="Universidade*"
            options={institutions.map(inst => ({ 
              value: inst.id, 
              label: `${inst.name} - ${inst.type}` 
            }))}
            value={formData.institutionId || ''}
            onChange={(e) => handleChange('institutionId', e.target.value)}
            required
          />

          <Input
            label="Nome do Curso/Turma*"
            placeholder="Ex: Engenharia Civil 2025, Medicina - Turma A"
            value={formData.name || ''}
            onChange={(e) => handleChange('name', e.target.value)}
            required
          />

          <div className="grid grid-cols-3 gap-4">
            <Input
              label="Ano*"
              type="number"
              placeholder={currentYear.toString()}
              value={formData.year || currentYear}
              onChange={(e) => handleChange('year', parseInt(e.target.value))}
              min={currentYear - 1}
              max={currentYear + 5}
              required
            />
            
            <Select
              label="Semestre"
              options={[
                { value: '1', label: '1º Semestre' },
                { value: '2', label: '2º Semestre' }
              ]}
              value={formData.semester?.toString() || '1'}
              onChange={(e) => handleChange('semester', parseInt(e.target.value))}
            />

            <Select
              label="Tipo*"
              options={GRADUATION_TYPES.map(t => ({ value: t, label: t }))}
              value={formData.graduationType || ''}
              onChange={(e) => handleChange('graduationType', e.target.value)}
              required
            />
          </div>

          {/* Status Ativo/Inativo */}
          <div className="flex items-center space-x-3 pt-2">
            <input
              type="checkbox"
              id="isActive"
              checked={formData.isActive !== false}
              onChange={(e) => handleChange('isActive', e.target.checked)}
              className="w-4 h-4 text-brand-gold border-gray-300 rounded focus:ring-brand-gold"
            />
            <label htmlFor="isActive" className="text-sm text-gray-700">
              Curso ativo (disponível para seleção em eventos)
            </label>
          </div>
        </div>


        {/* Actions */}
        <div className="flex justify-end space-x-3 pt-6 border-t">
          <Button variant="outline" onClick={onCancel} type="button">
            Cancelar
          </Button>
          <Button type="submit" variant="secondary">
            {initialData ? 'Salvar Alterações' : 'Cadastrar Curso'}
          </Button>
        </div>
      </form>
    </div>
  );
};