"use client";

import { useState } from "react";
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 { Card, CardContent } from "@/components/ui/card";
import { X, Plus, MapPin } from "lucide-react";

export interface UbicacionInstructorData {
  id: string;
  nombre: string;
  direccion?: string;
  provinciaId: string;
  comunaId: string;
  esPrincipal: boolean;
}

interface UbicacionInstructorFormProps {
  ubicaciones: UbicacionInstructorData[];
  onChange: (ubicaciones: UbicacionInstructorData[]) => void;
  provincias?: any[];
  comunas?: any[];
}

export default function UbicacionInstructorForm({ 
  ubicaciones, 
  onChange, 
  provincias = [], 
  comunas = [] 
}: UbicacionInstructorFormProps) {
  
  const agregarUbicacion = () => {
    const nuevaUbicacion: UbicacionInstructorData = {
      id: `temp-${Date.now()}`,
      nombre: "",
      direccion: "",
      provinciaId: "",
      comunaId: "",
      esPrincipal: ubicaciones.length === 0, // Primera ubicación es principal por defecto
    };
    onChange([...ubicaciones, nuevaUbicacion]);
  };

  const eliminarUbicacion = (index: number) => {
    const nuevasUbicaciones = ubicaciones.filter((_, i) => i !== index);
    // Si se elimina la ubicación principal, marcar la primera como principal
    if (ubicaciones[index].esPrincipal && nuevasUbicaciones.length > 0) {
      nuevasUbicaciones[0].esPrincipal = true;
    }
    onChange(nuevasUbicaciones);
  };

  const actualizarUbicacion = (index: number, campo: keyof UbicacionInstructorData, valor: any) => {
    const nuevasUbicaciones = [...ubicaciones];
    
    // Si se marca como principal, desmarcar las demás
    if (campo === 'esPrincipal' && valor === true) {
      nuevasUbicaciones.forEach((ubi, i) => {
        ubi.esPrincipal = i === index;
      });
    } else {
      (nuevasUbicaciones[index] as any)[campo] = valor;
    }
    
    onChange(nuevasUbicaciones);
  };

  const getComunasPorProvincia = (provinciaId: string) => {
    return comunas.filter((comuna: any) => comuna.provinciaId === provinciaId);
  };

  return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <div>
          <h3 className="heading-secondary text-xl text-[#0A2240]">
            Ubicaciones de Trabajo
          </h3>
          <p className="text-sm text-gray-500 mt-1">
            Agrega las ubicaciones donde realizas tus actividades (opcional)
          </p>
        </div>
        <Button
          type="button"
          onClick={agregarUbicacion}
          variant="outline"
          size="sm"
          className="text-[#00B8D4] border-[#00B8D4] hover:bg-[#00B8D4] hover:text-white"
        >
          <Plus className="h-4 w-4 mr-2" />
          Agregar Ubicación
        </Button>
      </div>

      {ubicaciones.length === 0 && (
        <div className="text-center py-8 text-gray-400 border-2 border-dashed border-gray-300 rounded-lg">
          <MapPin className="h-12 w-12 mx-auto mb-3 text-gray-300" />
          <p className="text-sm">No hay ubicaciones adicionales registradas.</p>
          <p className="text-xs mt-1">Puedes agregar ubicaciones si trabajas en múltiples lugares.</p>
        </div>
      )}

      {ubicaciones.map((ubicacion, index) => (
        <Card key={ubicacion.id} className="relative">
          <CardContent className="pt-6">
            <Button
              type="button"
              variant="ghost"
              size="sm"
              className="absolute top-2 right-2 text-red-500 hover:text-red-700 hover:bg-red-50"
              onClick={() => eliminarUbicacion(index)}
            >
              <X className="h-4 w-4" />
            </Button>

            <div className="space-y-4">
              {/* Nombre y Checkbox Principal */}
              <div className="grid md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Nombre de la Ubicación *
                  </label>
                  <Input
                    type="text"
                    required
                    value={ubicacion.nombre}
                    onChange={(e) => actualizarUbicacion(index, 'nombre', e.target.value)}
                    placeholder="Ej: Sede Providencia, Club Las Condes"
                  />
                </div>
                <div className="flex items-end pb-2">
                  <div className="flex items-center space-x-2">
                    <Checkbox
                      id={`ubicacion-${index}-principal`}
                      checked={ubicacion.esPrincipal}
                      onCheckedChange={(checked) => actualizarUbicacion(index, 'esPrincipal', checked)}
                    />
                    <label
                      htmlFor={`ubicacion-${index}-principal`}
                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                    >
                      Ubicación Principal
                    </label>
                  </div>
                </div>
              </div>

              {/* Dirección */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Dirección
                </label>
                <Input
                  type="text"
                  value={ubicacion.direccion}
                  onChange={(e) => actualizarUbicacion(index, 'direccion', e.target.value)}
                  placeholder="Dirección completa (opcional)"
                />
              </div>

              {/* Provincia y Comuna */}
              <div className="grid md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Provincia *
                  </label>
                  <Select
                    value={ubicacion.provinciaId}
                    onValueChange={(value) => {
                      actualizarUbicacion(index, 'provinciaId', value);
                      actualizarUbicacion(index, 'comunaId', ''); // Reset comuna
                    }}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Selecciona provincia" />
                    </SelectTrigger>
                    <SelectContent>
                      {provincias.map((provincia) => (
                        <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={ubicacion.comunaId}
                    onValueChange={(value) => actualizarUbicacion(index, 'comunaId', value)}
                    disabled={!ubicacion.provinciaId}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Selecciona comuna" />
                    </SelectTrigger>
                    <SelectContent>
                      {getComunasPorProvincia(ubicacion.provinciaId).map((comuna: any) => (
                        <SelectItem key={comuna.id} value={comuna.id}>
                          {comuna.nombre}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}