
"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 { Checkbox } from "@/components/ui/checkbox";
import { useToast } from "@/hooks/use-toast";
import { Users, ArrowLeft } from "lucide-react";
import Link from "next/link";

export default function RegistroJugadorPage() {
  const [isLoading, setIsLoading] = useState(false);
  const [deportes, setDeportes] = useState([]);
  const [provincias, setProvincias] = useState([]);
  const [formData, setFormData] = useState({
    // Datos del estudiante
    nombreEstudiante: "",
    apellidoEstudiante: "",
    fechaNacimiento: "",
    genero: "",
    
    // Datos del contacto
    nombreContacto: "",
    apellidoContacto: "",
    telefonoContacto: "",
    emailContacto: "",
    parentesco: "",
    
    // Ubicación
    direccion: "",
    provinciaId: "",
    comunaId: "",
    
    // Preferencias deportivas
    deporteId: "",
    escuelaId: "",
    instructorId: "",
    
    // Información adicional
    experienciaPrevia: "",
    condicionesMedicas: "",
    objetivos: "",
    comentarios: "",
    
    // Horarios preferidos
    fechaInicioPreferida: "",
    diasPreferidos: [] as string[],
    horarioPreferido: ""
  });

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

  const days = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
  const parentescos = ["Padre", "Madre", "Tutor/a", "Abuelo/a", "Familiar", "Propio"];
  const generos = ["Masculino", "Femenino", "Prefiero no decir"];
  const horariosPreferidos = ["Mañana (08:00 - 12:00)", "Tarde (12:00 - 18:00)", "Noche (18:00 - 21:00)"];

  useEffect(() => {
    fetchDeportes();
    fetchProvincias();
  }, []);

  const fetchDeportes = async () => {
    try {
      const response = await fetch('/api/deportes');
      if (response.ok) {
        const data = await response.json();
        setDeportes(data);
      }
    } catch (error) {
      console.error('Error fetching deportes:', error);
    }
  };

  const fetchProvincias = async () => {
    try {
      const response = await fetch('/api/ubicaciones');
      if (response.ok) {
        const data = await response.json();
        setProvincias(data);
      }
    } catch (error) {
      console.error('Error fetching provincias:', error);
    }
  };

  const handleDayToggle = (day: string) => {
    setFormData(prev => ({
      ...prev,
      diasPreferidos: prev.diasPreferidos.includes(day)
        ? prev.diasPreferidos.filter(d => d !== day)
        : [...prev.diasPreferidos, day]
    }));
  };

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

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

      if (response.ok) {
        toast({
          title: "¡Inscripción exitosa!",
          description: "Tu solicitud de inscripción ha sido enviada. Te contactaremos pronto para coordinar los próximos pasos.",
        });
        
        // Reset form
        setFormData({
          nombreEstudiante: "",
          apellidoEstudiante: "",
          fechaNacimiento: "",
          genero: "",
          nombreContacto: "",
          apellidoContacto: "",
          telefonoContacto: "",
          emailContacto: "",
          parentesco: "",
          direccion: "",
          provinciaId: "",
          comunaId: "",
          deporteId: "",
          escuelaId: "",
          instructorId: "",
          experienciaPrevia: "",
          condicionesMedicas: "",
          objetivos: "",
          comentarios: "",
          fechaInicioPreferida: "",
          diasPreferidos: [],
          horarioPreferido: ""
        });
        
        setTimeout(() => {
          router.push('/');
        }, 2000);
      } else {
        throw new Error('Error en la inscripción');
      }
    } catch (error) {
      toast({
        title: "Error en la inscripción",
        description: "Hubo un problema al procesar tu solicitud. Inténtalo nuevamente.",
        variant: "destructive",
      });
    } finally {
      setIsLoading(false);
    }
  };

  const selectedProvincia = provincias.find((p: any) => p.id === formData.provinciaId) as any;

  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">
              <Users className="h-8 w-8 text-[#00B8D4] mr-3" />
              <h1 className="heading-primary text-4xl text-[#0A2240]">
                Inscripción de Estudiante
              </h1>
            </div>
            <p className="text-gray-600 text-lg">
              Inscribe a tu hijo/a o a ti mismo en nuestras escuelas deportivas
            </p>
          </div>

          {/* Form */}
          <div className="bg-white rounded-lg shadow-lg p-8">
            <form onSubmit={handleSubmit} className="space-y-6">
              {/* Datos del Estudiante */}
              <div>
                <h3 className="heading-secondary text-xl mb-4 text-[#0A2240]">
                  Datos del Estudiante
                </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.nombreEstudiante}
                      onChange={(e) => setFormData({...formData, nombreEstudiante: e.target.value})}
                      placeholder="Nombre del estudiante"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Apellido *
                    </label>
                    <Input
                      type="text"
                      required
                      value={formData.apellidoEstudiante}
                      onChange={(e) => setFormData({...formData, apellidoEstudiante: e.target.value})}
                      placeholder="Apellido del estudiante"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Fecha de Nacimiento *
                    </label>
                    <Input
                      type="date"
                      required
                      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">
                      Género
                    </label>
                    <Select value={formData.genero} onValueChange={(value) => setFormData({...formData, genero: value})}>
                      <SelectTrigger>
                        <SelectValue placeholder="Selecciona género" />
                      </SelectTrigger>
                      <SelectContent>
                        {generos.map((genero) => (
                          <SelectItem key={genero} value={genero.toLowerCase()}>
                            {genero}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              </div>

              {/* Datos del Contacto */}
              <div>
                <h3 className="heading-secondary text-xl mb-4 text-[#0A2240]">
                  Datos del Responsable/Contacto
                </h3>
                <div className="grid md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Nombre del Responsable *
                    </label>
                    <Input
                      type="text"
                      required
                      value={formData.nombreContacto}
                      onChange={(e) => setFormData({...formData, nombreContacto: e.target.value})}
                      placeholder="Nombre del responsable"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Apellido del Responsable *
                    </label>
                    <Input
                      type="text"
                      required
                      value={formData.apellidoContacto}
                      onChange={(e) => setFormData({...formData, apellidoContacto: e.target.value})}
                      placeholder="Apellido del responsable"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Teléfono de Contacto *
                    </label>
                    <Input
                      type="tel"
                      required
                      value={formData.telefonoContacto}
                      onChange={(e) => setFormData({...formData, telefonoContacto: e.target.value})}
                      placeholder="+56 9 1234 5678"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Email de Contacto *
                    </label>
                    <Input
                      type="email"
                      required
                      value={formData.emailContacto}
                      onChange={(e) => setFormData({...formData, emailContacto: e.target.value})}
                      placeholder="contacto@email.com"
                    />
                  </div>
                  <div className="md:col-span-2">
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Parentesco *
                    </label>
                    <Select value={formData.parentesco} onValueChange={(value) => setFormData({...formData, parentesco: value})}>
                      <SelectTrigger>
                        <SelectValue placeholder="Selecciona parentesco" />
                      </SelectTrigger>
                      <SelectContent>
                        {parentescos.map((parentesco) => (
                          <SelectItem key={parentesco} value={parentesco.toLowerCase()}>
                            {parentesco}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              </div>

              {/* Ubicación */}
              <div>
                <h3 className="heading-secondary text-xl mb-4 text-[#0A2240]">
                  Ubicación
                </h3>
                <div className="grid md:grid-cols-2 gap-4">
                  <div className="md:col-span-2">
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Dirección
                    </label>
                    <Input
                      type="text"
                      value={formData.direccion}
                      onChange={(e) => setFormData({...formData, direccion: e.target.value})}
                      placeholder="Dirección completa"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Provincia *
                    </label>
                    <Select value={formData.provinciaId} onValueChange={(value) => {
                      setFormData({...formData, provinciaId: value, comunaId: ""});
                    }}>
                      <SelectTrigger>
                        <SelectValue placeholder="Selecciona provincia" />
                      </SelectTrigger>
                      <SelectContent className="max-h-60">
                        {provincias.map((provincia: any) => (
                          <SelectItem key={provincia.id} value={provincia.id}>
                            {provincia.nombre}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Comuna *
                    </label>
                    <Select 
                      value={formData.comunaId} 
                      onValueChange={(value) => setFormData({...formData, comunaId: value})}
                      disabled={!formData.provinciaId}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Selecciona comuna" />
                      </SelectTrigger>
                      <SelectContent className="max-h-60">
                        {selectedProvincia?.comunas?.map((comuna: any) => (
                          <SelectItem key={comuna.id} value={comuna.id}>
                            {comuna.nombre}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              </div>

              {/* Preferencias Deportivas */}
              <div>
                <h3 className="heading-secondary text-xl mb-4 text-[#0A2240]">
                  Preferencias Deportivas
                </h3>
                <div className="grid md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Deporte de Interés
                    </label>
                    <Select value={formData.deporteId} onValueChange={(value) => setFormData({...formData, deporteId: value})}>
                      <SelectTrigger>
                        <SelectValue placeholder="Selecciona un deporte" />
                      </SelectTrigger>
                      <SelectContent className="max-h-60">
                        {deportes.map((deporte: any) => (
                          <SelectItem key={deporte.id} value={deporte.id}>
                            {deporte.nombre}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Horario Preferido
                    </label>
                    <Select value={formData.horarioPreferido} onValueChange={(value) => setFormData({...formData, horarioPreferido: value})}>
                      <SelectTrigger>
                        <SelectValue placeholder="Selecciona horario" />
                      </SelectTrigger>
                      <SelectContent>
                        {horariosPreferidos.map((horario) => (
                          <SelectItem key={horario} value={horario}>
                            {horario}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </div>
                <div className="mt-4">
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Días preferidos para entrenar
                  </label>
                  <div className="grid grid-cols-3 md:grid-cols-4 gap-2">
                    {days.map((day) => (
                      <div key={day} className="flex items-center space-x-2">
                        <Checkbox
                          id={`player-day-${day}`}
                          checked={formData.diasPreferidos.includes(day)}
                          onCheckedChange={() => handleDayToggle(day)}
                        />
                        <label
                          htmlFor={`player-day-${day}`}
                          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                        >
                          {day}
                        </label>
                      </div>
                    ))}
                  </div>
                </div>
              </div>

              {/* Información Adicional */}
              <div>
                <h3 className="heading-secondary text-xl mb-4 text-[#0A2240]">
                  Información Adicional
                </h3>
                <div className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Experiencia Previa en Deportes
                    </label>
                    <textarea
                      rows={3}
                      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.experienciaPrevia}
                      onChange={(e) => setFormData({...formData, experienciaPrevia: e.target.value})}
                      placeholder="Describe cualquier experiencia previa en deportes..."
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Condiciones Médicas o Consideraciones Especiales
                    </label>
                    <textarea
                      rows={3}
                      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.condicionesMedicas}
                      onChange={(e) => setFormData({...formData, condicionesMedicas: e.target.value})}
                      placeholder="Menciona cualquier condición médica, alergia o consideración especial..."
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Objetivos y Expectativas
                    </label>
                    <textarea
                      rows={3}
                      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.objetivos}
                      onChange={(e) => setFormData({...formData, objetivos: e.target.value})}
                      placeholder="¿Qué esperas lograr con la práctica deportiva?"
                    />
                  </div>
                </div>
              </div>

              {/* Submit Button */}
              <div className="flex justify-center pt-6">
                <Button
                  type="submit"
                  disabled={isLoading}
                  size="lg"
                  variant="success"
                  className="px-8 py-3 text-lg font-semibold rounded-full"
                >
                  {isLoading ? "Enviando inscripción..." : "Enviar Inscripción"}
                </Button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
}
