"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 { Building, ArrowLeft } from "lucide-react";
import Link from "next/link";
import SedeForm, { SedeData } from "@/components/forms/sede-form";
import FotoUpload from "@/components/forms/foto-upload";

export default function RegistroInstitucionPage() {
  const [isLoading, setIsLoading] = useState(false);
  const [provincias, setProvincias] = useState<any[]>([]);
  const [comunas, setComunas] = useState<any[]>([]);
  const [formData, setFormData] = useState({
    nombre: "",
    descripcion: "",
    telefono: "",
    email: "",
    sitioWeb: "",
    tipoInstitucion: "",
    infraestructura: "",
    certificaciones: "",
  });
  const [sedes, setSedes] = useState<SedeData[]>([]);
  
  // Estado para el logo
  const [logoFile, setLogoFile] = useState<File | null>(null);
  const [logoPreview, setLogoPreview] = useState<string | null>(null);

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

  const tiposInstitucion = [
    "Escuela Deportiva",
    "Club Deportivo", 
    "Academia",
    "Centro Deportivo",
    "Institución Educacional",
    "Municipalidad",
    "Otro"
  ];

  // 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 que tenga al menos una sede
    if (sedes.length === 0) {
      toast({
        title: "Sedes requeridas",
        description: "Debes agregar al menos una sede para tu institución.",
        variant: "destructive",
      });
      return;
    }

    // Validar que todas las sedes tengan datos completos
    const sedesIncompletas = sedes.some(sede => 
      !sede.nombre || !sede.direccion || !sede.provinciaId || !sede.comunaId
    );

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

    setIsLoading(true);

    try {
      // Primero subir el logo si existe
      let logoCloudPath = null;
      if (logoFile) {
        const logoFormData = new FormData();
        logoFormData.append('file', logoFile);
        logoFormData.append('tipo', 'logo-institucion');
        
        const uploadResponse = await fetch('/api/upload', {
          method: 'POST',
          body: logoFormData,
        });
        
        if (uploadResponse.ok) {
          const uploadData = await uploadResponse.json();
          logoCloudPath = uploadData.cloudStoragePath;
        } else {
          throw new Error('Error al subir el logo');
        }
      }

      const dataToSend = {
        ...formData,
        logoCloudPath,
        sedes: sedes.map(({ id, ...sede }) => sede), // Remove temp id
      };

      const response = await fetch('/api/escuelas/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 para la verificación.",
        });
        
        // Reset form
        setFormData({
          nombre: "",
          descripcion: "",
          telefono: "",
          email: "",
          sitioWeb: "",
          tipoInstitucion: "",
          infraestructura: "",
          certificaciones: "",
        });
        setSedes([]);
        setLogoFile(null);
        setLogoPreview(null);
        
        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">
              <Building className="h-8 w-8 text-[#00B8D4] mr-3" />
              <h1 className="heading-primary text-4xl text-[#0A2240]">
                Registro de Institución
              </h1>
            </div>
            <p className="text-gray-600 text-lg">
              Registra tu escuela deportiva o institución en nuestra plataforma
            </p>
          </div>

          {/* Form */}
          <div className="bg-white rounded-lg shadow-lg p-8">
            <form onSubmit={handleSubmit} className="space-y-6">
              {/* Información Básica */}
              <div>
                <h3 className="heading-secondary text-xl mb-4 text-[#0A2240]">
                  Información de la Institució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">
                      Nombre de la Institución *
                    </label>
                    <Input
                      type="text"
                      required
                      value={formData.nombre}
                      onChange={(e) => setFormData({...formData, nombre: e.target.value})}
                      placeholder="Nombre de tu escuela o institución"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Tipo de Institución *
                    </label>
                    <Select value={formData.tipoInstitucion} onValueChange={(value) => setFormData({...formData, tipoInstitucion: value})}>
                      <SelectTrigger>
                        <SelectValue placeholder="Selecciona el tipo" />
                      </SelectTrigger>
                      <SelectContent>
                        {tiposInstitucion.map((tipo) => (
                          <SelectItem key={tipo} value={tipo}>
                            {tipo}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </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="contacto@institucion.cl"
                    />
                  </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 2 2345 6789"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Sitio Web
                    </label>
                    <Input
                      type="url"
                      value={formData.sitioWeb}
                      onChange={(e) => setFormData({...formData, sitioWeb: e.target.value})}
                      placeholder="https://www.institucion.cl"
                    />
                  </div>
                </div>
              </div>

              {/* Descripción */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Descripción de la Institució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.descripcion}
                  onChange={(e) => setFormData({...formData, descripcion: e.target.value})}
                  placeholder="Describe los servicios, metodología y características principales de tu institución..."
                />
              </div>

              {/* Logo de la Institución */}
              <div>
                <h3 className="heading-secondary text-xl mb-4 text-[#0A2240]">
                  Logo de la Institución
                </h3>
                <FotoUpload
                  tipo="logo"
                  titulo="Logo de la Institución"
                  descripcion="Sube el logo o imagen representativa de tu institución. Se recomienda una imagen cuadrada."
                  value={logoFile}
                  preview={logoPreview}
                  onChange={(file, preview) => {
                    setLogoFile(file);
                    setLogoPreview(preview);
                  }}
                  maxSizeMB={5}
                />
              </div>

              {/* Sedes */}
              <div>
                <SedeForm
                  sedes={sedes}
                  onChange={setSedes}
                  provincias={provincias}
                  comunas={comunas}
                />
              </div>

              {/* Infraestructura General */}
              <div>
                <h3 className="heading-secondary text-xl mb-4 text-[#0A2240]">
                  Infraestructura General y Certificaciones
                </h3>
                <div className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Infraestructura General
                    </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.infraestructura}
                      onChange={(e) => setFormData({...formData, infraestructura: e.target.value})}
                      placeholder="Describe las instalaciones generales: tipo de canchas, gimnasios, piscina, equipamiento disponible..."
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Certificaciones y Reconocimientos
                    </label>
                    <Input
                      type="text"
                      value={formData.certificaciones}
                      onChange={(e) => setFormData({...formData, certificaciones: e.target.value})}
                      placeholder="Ej: Certificación FIFA, Reconocimiento Municipal, Acreditación IND"
                    />
                  </div>
                </div>
              </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..." : "Registrar Institución"}
                </Button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
}