import React, { useState } from 'react';
import { Upload, CheckCircle, AlertCircle } from 'lucide-react';

export default function FormularioCongreso() {
  const [formData, setFormData] = useState({
    nombreCompleto: '',
    correo: '',
    dni: '',
    institucion: '',
    cicloSemestre: '',
    certificado: '',
    metodoPago: '',
    comprobante: null
  });

  const [errors, setErrors] = useState({});
  const [submitted, setSubmitted] = useState(false);
  const [showPayment, setShowPayment] = useState(false);

  const metodoPagoInfo = {
    yape: { numero: '987 654 321', nombre: 'Yape' },
    plin: { numero: '987 654 321', nombre: 'Plin' },
    bcp: { cuenta: '191-2345678-0-99', cci: '00219100234567809912', nombre: 'BCP' },
    nacion: { cuenta: '00-123-456789', nombre: 'Banco de la Nación' },
    bbva: { cuenta: '0011-0123-4567890123', cci: '011-123-001234567890123-45', nombre: 'BBVA' }
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
    
    if (name === 'certificado') {
      setShowPayment(value === 'si');
      if (value === 'no') {
        setFormData(prev => ({ ...prev, metodoPago: '', comprobante: null }));
      }
    }
    
    if (errors[name]) {
      setErrors(prev => ({ ...prev, [name]: '' }));
    }
  };

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      if (file.size > 5000000) {
        setErrors(prev => ({ ...prev, comprobante: 'El archivo no debe superar 5MB' }));
        return;
      }
      setFormData(prev => ({ ...prev, comprobante: file }));
      setErrors(prev => ({ ...prev, comprobante: '' }));
    }
  };

  const validate = () => {
    const newErrors = {};
    
    if (!formData.nombreCompleto.trim()) newErrors.nombreCompleto = 'Campo requerido';
    if (!formData.correo.trim()) {
      newErrors.correo = 'Campo requerido';
    } else if (!/\S+@\S+\.\S+/.test(formData.correo)) {
      newErrors.correo = 'Correo inválido';
    }
    if (!formData.dni.trim()) {
      newErrors.dni = 'Campo requerido';
    } else if (!/^\d{8}$/.test(formData.dni)) {
      newErrors.dni = 'DNI debe tener 8 dígitos';
    }
    if (!formData.institucion.trim()) newErrors.institucion = 'Campo requerido';
    if (!formData.cicloSemestre.trim()) newErrors.cicloSemestre = 'Campo requerido';
    if (!formData.certificado) newErrors.certificado = 'Seleccione una opción';
    
    if (formData.certificado === 'si') {
      if (!formData.metodoPago) newErrors.metodoPago = 'Seleccione un método de pago';
      if (!formData.comprobante) newErrors.comprobante = 'Debe subir el comprobante de pago';
    }
    
    return newErrors;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const newErrors = validate();
    
    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }
    
    // Aquí se enviarían los datos a un servidor
    console.log('Datos del formulario:', formData);
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4">
        <div className="bg-white rounded-lg shadow-xl p-8 max-w-md w-full text-center">
          <CheckCircle className="w-16 h-16 text-green-500 mx-auto mb-4" />
          <h2 className="text-2xl font-bold text-gray-800 mb-2">¡Inscripción Exitosa!</h2>
          <p className="text-gray-600 mb-4">
            Hemos recibido tu inscripción al congreso.
          </p>
          {formData.certificado === 'si' && (
            <p className="text-sm text-gray-500">
              Tu comprobante de pago será verificado y recibirás una confirmación por correo electrónico en las próximas 24-48 horas.
            </p>
          )}
          <button
            onClick={() => {
              setSubmitted(false);
              setFormData({
                nombreCompleto: '', correo: '', dni: '', institucion: '',
                cicloSemestre: '', certificado: '', metodoPago: '', comprobante: null
              });
              setShowPayment(false);
            }}
            className="mt-6 bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700"
          >
            Nueva Inscripción
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 py-8 px-4">
      <div className="max-w-2xl mx-auto bg-white rounded-lg shadow-xl p-8">
        <h1 className="text-3xl font-bold text-center text-gray-800 mb-2">
          Inscripción al Congreso
        </h1>
        <p className="text-center text-gray-600 mb-8">
          Complete el formulario para registrar su participación
        </p>

        <form onSubmit={handleSubmit} className="space-y-6">
          {/* Nombre Completo */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Nombre Completo *
            </label>
            <input
              type="text"
              name="nombreCompleto"
              value={formData.nombreCompleto}
              onChange={handleChange}
              className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
                errors.nombreCompleto ? 'border-red-500' : 'border-gray-300'
              }`}
              placeholder="Ejm: Juan Pérez García"
            />
            {errors.nombreCompleto && (
              <p className="text-red-500 text-sm mt-1">{errors.nombreCompleto}</p>
            )}
          </div>

          {/* Correo */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Correo Electrónico *
            </label>
            <input
              type="email"
              name="correo"
              value={formData.correo}
              onChange={handleChange}
              className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
                errors.correo ? 'border-red-500' : 'border-gray-300'
              }`}
              placeholder="ejemplo@correo.com"
            />
            {errors.correo && (
              <p className="text-red-500 text-sm mt-1">{errors.correo}</p>
            )}
          </div>

          {/* DNI */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              DNI *
            </label>
            <input
              type="text"
              name="dni"
              value={formData.dni}
              onChange={handleChange}
              maxLength="8"
              className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
                errors.dni ? 'border-red-500' : 'border-gray-300'
              }`}
              placeholder="12345678"
            />
            {errors.dni && (
              <p className="text-red-500 text-sm mt-1">{errors.dni}</p>
            )}
          </div>

          {/* Instituto o Universidad */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Instituto o Universidad *
            </label>
            <input
              type="text"
              name="institucion"
              value={formData.institucion}
              onChange={handleChange}
              className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
                errors.institucion ? 'border-red-500' : 'border-gray-300'
              }`}
              placeholder="Nombre de tu institución"
            />
            {errors.institucion && (
              <p className="text-red-500 text-sm mt-1">{errors.institucion}</p>
            )}
          </div>

          {/* Ciclo/Semestre */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Ciclo o Semestre *
            </label>
            <input
              type="text"
              name="cicloSemestre"
              value={formData.cicloSemestre}
              onChange={handleChange}
              className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
                errors.cicloSemestre ? 'border-red-500' : 'border-gray-300'
              }`}
              placeholder="Ejm: 5to Ciclo, 3er Semestre"
            />
            {errors.cicloSemestre && (
              <p className="text-red-500 text-sm mt-1">{errors.cicloSemestre}</p>
            )}
          </div>

          {/* Certificado */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              ¿Desea certificado? *
            </label>
            <div className="flex gap-4">
              <label className="flex items-center">
                <input
                  type="radio"
                  name="certificado"
                  value="si"
                  checked={formData.certificado === 'si'}
                  onChange={handleChange}
                  className="mr-2"
                />
                Sí (S/ 20.00)
              </label>
              <label className="flex items-center">
                <input
                  type="radio"
                  name="certificado"
                  value="no"
                  checked={formData.certificado === 'no'}
                  onChange={handleChange}
                  className="mr-2"
                />
                No (Gratis)
              </label>
            </div>
            {errors.certificado && (
              <p className="text-red-500 text-sm mt-1">{errors.certificado}</p>
            )}
          </div>

          {/* Opciones de Pago */}
          {showPayment && (
            <div className="border-t pt-6">
              <h3 className="text-lg font-semibold text-gray-800 mb-4">
                Información de Pago
              </h3>
              
              <div className="mb-4">
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Seleccione método de pago *
                </label>
                <select
                  name="metodoPago"
                  value={formData.metodoPago}
                  onChange={handleChange}
                  className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
                    errors.metodoPago ? 'border-red-500' : 'border-gray-300'
                  }`}
                >
                  <option value="">-- Seleccione --</option>
                  <option value="yape">Yape</option>
                  <option value="plin">Plin</option>
                  <option value="bcp">BCP</option>
                  <option value="nacion">Banco de la Nación</option>
                  <option value="bbva">BBVA</option>
                </select>
                {errors.metodoPago && (
                  <p className="text-red-500 text-sm mt-1">{errors.metodoPago}</p>
                )}
              </div>

              {formData.metodoPago && (
                <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
                  <h4 className="font-semibold text-gray-800 mb-2">
                    Datos para {metodoPagoInfo[formData.metodoPago].nombre}
                  </h4>
                  <div className="text-sm text-gray-700 space-y-1">
                    {(formData.metodoPago === 'yape' || formData.metodoPago === 'plin') && (
                      <p><strong>Número:</strong> {metodoPagoInfo[formData.metodoPago].numero}</p>
                    )}
                    {(formData.metodoPago === 'bcp' || formData.metodoPago === 'nacion' || formData.metodoPago === 'bbva') && (
                      <>
                        <p><strong>N° Cuenta:</strong> {metodoPagoInfo[formData.metodoPago].cuenta}</p>
                        {metodoPagoInfo[formData.metodoPago].cci && (
                          <p><strong>CCI:</strong> {metodoPagoInfo[formData.metodoPago].cci}</p>
                        )}
                      </>
                    )}
                    <p><strong>Monto:</strong> S/ 20.00</p>
                    <p className="text-xs text-gray-600 mt-2">
                      Realice el pago y suba su comprobante a continuación
                    </p>
                  </div>
                </div>
              )}

              {/* Subir Comprobante */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Subir Comprobante de Pago *
                </label>
                <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
                  <Upload className="w-8 h-8 text-gray-400 mx-auto mb-2" />
                  <input
                    type="file"
                    accept="image/*,.pdf"
                    onChange={handleFileChange}
                    className="hidden"
                    id="comprobante"
                  />
                  <label
                    htmlFor="comprobante"
                    className="cursor-pointer text-blue-600 hover:text-blue-700"
                  >
                    Haga clic para subir archivo
                  </label>
                  <p className="text-xs text-gray-500 mt-1">
                    JPG, PNG o PDF (máx. 5MB)
                  </p>
                  {formData.comprobante && (
                    <p className="text-sm text-green-600 mt-2">
                      ✓ {formData.comprobante.name}
                    </p>
                  )}
                </div>
                {errors.comprobante && (
                  <p className="text-red-500 text-sm mt-1">{errors.comprobante}</p>
                )}
              </div>
            </div>
          )}

          {/* Botón Submit */}
          <button
            type="submit"
            className="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors"
          >
            Completar Inscripción
          </button>
        </form>
      </div>
    </div>
  );
}