"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { useToast } from "@/hooks/use-toast";
import { UserPlus, ArrowLeft } from "lucide-react";
import Link from "next/link";
import UbicacionInstructorForm, { UbicacionInstructorData } from "@/components/forms/ubicacion-instructor-form";
import FotoUpload from "@/components/forms/foto-upload";

export default function RegistroInstructorPage() {
  const [isLoading, setIsLoading] = useState(false);
  const [provincias, setProvincias] = useState<any[]>([]);
  const [comunas, setComunas] = useState<any[]>([]);
  const [formData, setFormData] = useState({
    nombre: "",
    apellido: "",
    email: "",
    telefono: "",
    fechaNacimiento: "",
    provinciaId: "",
    comunaId: "",
    experienciaAnios: "",
    certificaciones: "",
    especialidades: "",
    biografia: ""
  });
  const [ubicaciones, setUbicaciones] = useState<UbicacionInstructorData[]>([]);
  
  // Estado para fotos
  const [logoFile, setLogoFile] = useState<File | null>(null);
  const [logoPreview, setLogoPreview] = useState<string | null>(null);
  const [fotoFile, setFotoFile] = useState<File | null>(null);
  const [fotoPreview, setFotoPreview] = useState<string | null>(null);

  const router = useRouter();
  const { toast } = useToast();

  // Cargar provincias y comunas
  useEffect(() => {
    const cargarUbicaciones = async () => {
      try {
        const response = await fetch('/api/ubicaciones');
        if (response.ok) {
          const data = await response.json();
          setProvincias(data.provincias || []);
          setComunas(data.comunas || []);
        }
      } catch (error) {
        console.error('Error al cargar ubicaciones:', error);
      }
    };
    cargarUbicaciones();
  }, []);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    // Validar ubicaciones si las hay
    if (ubicaciones.length > 0) {
      const ubicacionesIncompletas = ubicaciones.some(ubi => 
        !ubi.nombre || !ubi.provinciaId || !ubi.comunaId
      );

      if (ubicacionesIncompletas) {
        toast({
          title: "Datos incompletos",
          description: "Por favor completa todos los campos requeridos de las ubicaciones.",
          variant: "destructive",
        });
        return;
      }
    }

    setIsLoading(true);

    try {
      // Subir fotos si existen
      let logoCloudPath = null;
      let fotoCloudPath = null;

      if (logoFile) {
        const logoFormData = new FormData();
        logoFormData.append('file', logoFile);
        logoFormData.append('tipo', 'logo-instructor');
        
        const uploadResponse = await fetch('/api/upload', {
          method: 'POST',
          body: logoFormData,
        });
        
        if (uploadResponse.ok) {
          const uploadData = await uploadResponse.json();
          logoCloudPath = uploadData.cloudStoragePath;
        }
      }

      if (fotoFile) {
        const fotoFormData = new FormData();
        fotoFormData.append('file', fotoFile);
        fotoFormData.append('tipo', 'foto-instructor');
        
        const uploadResponse = await fetch('/api/upload', {
          method: 'POST',
          body: fotoFormData,
        });
        
        if (uploadResponse.ok) {
          const uploadData = await uploadResponse.json();
          fotoCloudPath = uploadData.cloudStoragePath;
        }
      }

      const dataToSend = {
        ...formData,
        logoCloudPath,
        fotoCloudPath,
        ubicaciones: ubicaciones.length > 0 ? ubicaciones.map(({ id, ...ubi }) => ubi) : undefined,
      };

      const response = await fetch('/api/instructores/registro', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(dataToSend),
      });

      if (response.ok) {
        toast({
          title: "¡Registro exitoso!",
          description: "Tu solicitud de registro ha sido enviada. Te contactaremos pronto.",
        });
        
        // Reset form
        setFormData({
          nombre: "",
          apellido: "",
          email: "",
          telefono: "",
          fechaNacimiento: "",
          provinciaId: "",
          comunaId: "",
          experienciaAnios: "",
          certificaciones: "",
          especialidades: "",
          biografia: ""
        });
        setUbicaciones([]);
        setLogoFile(null);
        setLogoPreview(null);
        setFotoFile(null);
        setFotoPreview(null);
        
        // Redirect after success
        setTimeout(() => {
          router.push('/');
        }, 2000);
      } else {
        const errorData = await response.json();
        throw new Error(errorData.error || 'Error en el registro');
      }
    } catch (error: any) {
      toast({
        title: "Error en el registro",
        description: error.message || "Hubo un problema al procesar tu solicitud. Inténtalo nuevamente.",
        variant: "destructive",
      });
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="min-h-screen bg-gray-50 py-12">
      <div className="container-custom">
        <div className="max-w-4xl mx-auto">
          {/* Header */}
          <div className="text-center mb-8">
            <Link 
              href="/"
              className="inline-flex items-center text-[#00B8D4] hover:text-[#0097A7] mb-4"
            >
              <ArrowLeft className="h-4 w-4 mr-2" />
              Volver al inicio
            </Link>
            <div className="flex items-center justify-center mb-4">
              <UserPlus className="h-8 w-8 text-[#00B8D4] mr-3" />
              <h1 className="heading-primary text-4xl text-[#0A2240]">
                Registro de Instructor
              </h1>
            </div>
            <p className="text-gray-600 text-lg">
              Únete a nuestra red de instructores deportivos profesionales
            </p>
          </div>

          {/* Form */}
          <div className="bg-white rounded-lg shadow-lg p-8">
            <form onSubmit={handleSubmit} className="space-y-6">
              {/* Información Personal */}
              <div>
                <h3 className="heading-secondary text-xl mb-4 text-[#0A2240]">
                  Información Personal
                </h3>
                <div className="grid md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Nombre *
                    </label>
                    <Input
                      type="text"
                      required
                      value={formData.nombre}
                      onChange={(e) => setFormData({...formData, nombre: e.target.value})}
                      placeholder="Tu nombre"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Apellido *
                    </label>
                    <Input
                      type="text"
                      required
                      value={formData.apellido}
                      onChange={(e) => setFormData({...formData, apellido: e.target.value})}
                      placeholder="Tu apellido"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Email *
                    </label>
                    <Input
                      type="email"
                      required
                      value={formData.email}
                      onChange={(e) => setFormData({...formData, email: e.target.value})}
                      placeholder="tu@email.com"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Teléfono
                    </label>
                    <Input
                      type="tel"
                      value={formData.telefono}
                      onChange={(e) => setFormData({...formData, telefono: e.target.value})}
                      placeholder="+56 9 1234 5678"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Fecha de Nacimiento
                    </label>
                    <Input
                      type="date"
                      value={formData.fechaNacimiento}
                      onChange={(e) => setFormData({...formData, fechaNacimiento: e.target.value})}
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Años de Experiencia
                    </label>
                    <Input
                      type="number"
                      min="0"
                      value={formData.experienciaAnios}
                      onChange={(e) => setFormData({...formData, experienciaAnios: e.target.value})}
                      placeholder="Ej: 5"
                    />
                  </div>
                </div>
              </div>

              {/* Información Profesional */}
              <div>
                <h3 className="heading-secondary text-xl mb-4 text-[#0A2240]">
                  Información Profesional
                </h3>
                <div className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Certificaciones
                    </label>
                    <Input
                      type="text"
                      value={formData.certificaciones}
                      onChange={(e) => setFormData({...formData, certificaciones: e.target.value})}
                      placeholder="Ej: Entrenador Nivel 1 FIFA, Curso Primeros Auxilios"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Especialidades
                    </label>
                    <Input
                      type="text"
                      value={formData.especialidades}
                      onChange={(e) => setFormData({...formData, especialidades: e.target.value})}
                      placeholder="Ej: Entrenamiento juvenil, Técnica individual"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Biografía / Descripción
                    </label>
                    <textarea
                      rows={4}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#00B8D4] focus:border-transparent"
                      value={formData.biografia}
                      onChange={(e) => setFormData({...formData, biografia: e.target.value})}
                      placeholder="Cuéntanos sobre tu experiencia y enfoque como instructor..."
                    />
                  </div>
                </div>
              </div>

              {/* Fotos del Instructor */}
              <div>
                <h3 className="heading-secondary text-xl mb-4 text-[#0A2240]">
                  Fotos e Imagen
                </h3>
                <div className="grid md:grid-cols-2 gap-6">
                  <FotoUpload
                    tipo="logo"
                    titulo="Logo / Marca Personal"
                    descripcion="Sube tu logo o marca personal si tienes una. Se recomienda una imagen cuadrada."
                    value={logoFile}
                    preview={logoPreview}
                    onChange={(file, preview) => {
                      setLogoFile(file);
                      setLogoPreview(preview);
                    }}
                    maxSizeMB={5}
                  />
                  <FotoUpload
                    tipo="foto-personal"
                    titulo="Foto Personal"
                    descripcion="Sube una foto tuya de la cintura hacia arriba. Esta foto se mostrará en tu perfil."
                    value={fotoFile}
                    preview={fotoPreview}
                    onChange={(file, preview) => {
                      setFotoFile(file);
                      setFotoPreview(preview);
                    }}
                    maxSizeMB={5}
                  />
                </div>
              </div>

              {/* Ubicaciones de Trabajo */}
              <div>
                <UbicacionInstructorForm
                  ubicaciones={ubicaciones}
                  onChange={setUbicaciones}
                  provincias={provincias}
                  comunas={comunas}
                />
              </div>

              {/* Submit Button */}
              <div className="flex justify-center pt-6">
                <Button
                  type="submit"
                  disabled={isLoading}
                  size="lg"
                  variant="primary"
                  className="px-8 py-3 text-lg font-semibold rounded-full"
                >
                  {isLoading ? "Registrando..." : "Registrarse como Instructor"}
                </Button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
}