"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 SedeData {
  id: string;
  nombre: string;
  direccion: string;
  provinciaId: string;
  comunaId: string;
  telefono?: string;
  esPrincipal: boolean;
  infraestructura?: string;
}

interface SedeFormProps {
  sedes: SedeData[];
  onChange: (sedes: SedeData[]) => void;
  provincias?: any[];
  comunas?: any[];
}

export default function SedeForm({ sedes, onChange, provincias = [], comunas = [] }: SedeFormProps) {
  const agregarSede = () => {
    const nuevaSede: SedeData = {
      id: `temp-${Date.now()}`,
      nombre: "",
      direccion: "",
      provinciaId: "",
      comunaId: "",
      telefono: "",
      esPrincipal: sedes.length === 0, // Primera sede es principal por defecto
      infraestructura: "",
    };
    onChange([...sedes, nuevaSede]);
  };

  const eliminarSede = (index: number) => {
    const nuevasSedes = sedes.filter((_, i) => i !== index);
    // Si se elimina la sede principal, marcar la primera como principal
    if (sedes[index].esPrincipal && nuevasSedes.length > 0) {
      nuevasSedes[0].esPrincipal = true;
    }
    onChange(nuevasSedes);
  };

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

  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">
        <h3 className="heading-secondary text-xl text-[#0A2240]">
          Sedes / Locales
        </h3>
        <Button
          type="button"
          onClick={agregarSede}
          variant="outline"
          size="sm"
          className="text-[#00B8D4] border-[#00B8D4] hover:bg-[#00B8D4] hover:text-white"
        >
          <Plus className="h-4 w-4 mr-2" />
          Agregar Sede
        </Button>
      </div>

      {sedes.length === 0 && (
        <div className="text-center py-8 text-gray-500">
          <MapPin className="h-12 w-12 mx-auto mb-3 text-gray-400" />
          <p>No hay sedes registradas. Agrega al menos una sede.</p>
        </div>
      )}

      {sedes.map((sede, index) => (
        <Card key={sede.id} className="relative">
          <CardContent className="pt-6">
            {sedes.length > 1 && (
              <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={() => eliminarSede(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 Sede *
                  </label>
                  <Input
                    type="text"
                    required
                    value={sede.nombre}
                    onChange={(e) => actualizarSede(index, 'nombre', e.target.value)}
                    placeholder="Ej: Sede Central, Sucursal Providencia"
                  />
                </div>
                <div className="flex items-end pb-2">
                  <div className="flex items-center space-x-2">
                    <Checkbox
                      id={`sede-${index}-principal`}
                      checked={sede.esPrincipal}
                      onCheckedChange={(checked) => actualizarSede(index, 'esPrincipal', checked)}
                    />
                    <label
                      htmlFor={`sede-${index}-principal`}
                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                    >
                      Sede 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"
                  required
                  value={sede.direccion}
                  onChange={(e) => actualizarSede(index, 'direccion', e.target.value)}
                  placeholder="Dirección completa"
                />
              </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={sede.provinciaId}
                    onValueChange={(value) => {
                      actualizarSede(index, 'provinciaId', value);
                      actualizarSede(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={sede.comunaId}
                    onValueChange={(value) => actualizarSede(index, 'comunaId', value)}
                    disabled={!sede.provinciaId}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Selecciona comuna" />
                    </SelectTrigger>
                    <SelectContent>
                      {getComunasPorProvincia(sede.provinciaId).map((comuna: any) => (
                        <SelectItem key={comuna.id} value={comuna.id}>
                          {comuna.nombre}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>

              {/* Teléfono */}
              <div className="grid md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Teléfono
                  </label>
                  <Input
                    type="tel"
                    value={sede.telefono}
                    onChange={(e) => actualizarSede(index, 'telefono', e.target.value)}
                    placeholder="+56 2 2345 6789"
                  />
                </div>
              </div>

              {/* Infraestructura específica de esta sede */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Infraestructura de esta sede
                </label>
                <textarea
                  rows={2}
                  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={sede.infraestructura}
                  onChange={(e) => actualizarSede(index, 'infraestructura', e.target.value)}
                  placeholder="Describe las instalaciones específicas de esta sede..."
                />
              </div>
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}