"use client";

import { useState, useEffect } 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 { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Search, Eraser, Calendar, X } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";

interface DeporteOption {
  id: string;
  nombre: string;
  categorias: string[];
}

interface ProvinciaOption {
  id: string;
  nombre: string;
  comunas: { id: string; nombre: string; }[];
}

interface SearchParams {
  searchType: string;
  selectedSport: string;
  selectedProvince: string;
  selectedComuna: string;
  ageGroup: string;
  startDate: string;
  endDate: string;
  startTime: string;
  endTime: string;
  selectedDays: string[];
}

interface SearchModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSearch: (params: SearchParams) => void;
}

export default function SearchModal({ isOpen, onClose, onSearch }: SearchModalProps) {
  const [deportes, setDeportes] = useState<DeporteOption[]>([]);
  const [provincias, setProvincias] = useState<ProvinciaOption[]>([]);

  // Form state
  const [searchType, setSearchType] = useState<string>("");
  const [selectedSport, setSelectedSport] = useState<string>("");
  const [selectedProvince, setSelectedProvince] = useState<string>("");
  const [selectedComuna, setSelectedComuna] = useState<string>("");
  const [ageGroup, setAgeGroup] = useState<string>("");
  const [startDate, setStartDate] = useState<string>("");
  const [endDate, setEndDate] = useState<string>("");
  const [startTime, setStartTime] = useState<string>("");
  const [endTime, setEndTime] = useState<string>("");
  const [selectedDays, setSelectedDays] = useState<string[]>([]);

  const days = [
    "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"
  ];

  const searchTypes = [
    { value: "all", label: "Instructores y Escuelas" },
    { value: "instructors", label: "Solo Instructores" },
    { value: "schools", label: "Solo Escuelas/Clubes" }
  ];

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

  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.provincias || []);
      }
    } catch (error) {
      console.error('Error fetching provincias:', error);
    }
  };

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

  const handleSearch = () => {
    const searchParams: SearchParams = {
      searchType,
      selectedSport,
      selectedProvince,
      selectedComuna,
      ageGroup,
      startDate,
      endDate,
      startTime,
      endTime,
      selectedDays
    };
    onSearch(searchParams);
    onClose();
  };

  const handleClear = () => {
    setSearchType("");
    setSelectedSport("");
    setSelectedProvince("");
    setSelectedComuna("");
    setAgeGroup("");
    setStartDate("");
    setEndDate("");
    setStartTime("");
    setEndTime("");
    setSelectedDays([]);
  };

  const selectedProvinciaData = provincias.find(p => p.id === selectedProvince);

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="text-2xl font-bold text-[#0A2240] text-center">
            Búsqueda de Instructores y Escuelas
          </DialogTitle>
        </DialogHeader>

        <div className="space-y-5 py-4">
          {/* Tipo de búsqueda */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              ¿Qué estás buscando?
            </label>
            <Select value={searchType} onValueChange={setSearchType}>
              <SelectTrigger>
                <SelectValue placeholder="Selecciona tipo de búsqueda" />
              </SelectTrigger>
              <SelectContent>
                {searchTypes.map((type) => (
                  <SelectItem key={type.value} value={type.value}>
                    {type.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {/* Tipo de Enseñanza */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Tipo de Enseñanza / Deporte
            </label>
            <Select value={selectedSport} onValueChange={setSelectedSport}>
              <SelectTrigger>
                <SelectValue placeholder="Selecciona un deporte" />
              </SelectTrigger>
              <SelectContent className="max-h-60">
                {deportes?.map((deporte) => (
                  <SelectItem key={deporte.id} value={deporte.id}>
                    {deporte.nombre}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {/* Días y Horarios */}
          <div className="grid md:grid-cols-2 gap-5">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Días de la semana
              </label>
              <div className="grid grid-cols-2 gap-2">
                {days.map((day) => (
                  <div key={day} className="flex items-center space-x-2">
                    <Checkbox
                      id={`modal-day-${day}`}
                      checked={selectedDays.includes(day)}
                      onCheckedChange={() => handleDayToggle(day)}
                    />
                    <label
                      htmlFor={`modal-day-${day}`}
                      className="text-sm font-medium leading-none cursor-pointer"
                    >
                      {day}
                    </label>
                  </div>
                ))}
              </div>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Rango de horario
              </label>
              <div className="grid grid-cols-2 gap-2">
                <Input
                  type="time"
                  placeholder="Desde"
                  value={startTime}
                  onChange={(e) => setStartTime(e.target.value)}
                />
                <Input
                  type="time"
                  placeholder="Hasta"
                  value={endTime}
                  onChange={(e) => setEndTime(e.target.value)}
                />
              </div>
            </div>
          </div>

          {/* Ubicación */}
          <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={selectedProvince} onValueChange={(value) => {
                setSelectedProvince(value);
                setSelectedComuna("");
              }}>
                <SelectTrigger>
                  <SelectValue placeholder="Todas las provincias" />
                </SelectTrigger>
                <SelectContent className="max-h-60">
                  {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={selectedComuna} 
                onValueChange={setSelectedComuna}
                disabled={!selectedProvince}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Selecciona comuna" />
                </SelectTrigger>
                <SelectContent className="max-h-60">
                  {selectedProvinciaData?.comunas?.map((comuna) => (
                    <SelectItem key={comuna.id} value={comuna.id}>
                      {comuna.nombre}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>

          {/* Grupo Etario */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Edad dirigida
            </label>
            <Input
              placeholder="Ej: 6-12 años, Adultos, Adolescentes"
              value={ageGroup}
              onChange={(e) => setAgeGroup(e.target.value)}
            />
          </div>

          {/* Período de Búsqueda */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Período de Búsqueda
            </label>
            <div className="grid md:grid-cols-2 gap-4">
              <div className="relative">
                <Input
                  type="date"
                  placeholder="Fecha desde"
                  value={startDate}
                  onChange={(e) => setStartDate(e.target.value)}
                />
              </div>
              <div className="relative">
                <Input
                  type="date"
                  placeholder="Fecha hasta"
                  value={endDate}
                  onChange={(e) => setEndDate(e.target.value)}
                />
              </div>
            </div>
          </div>

          {/* Botones */}
          <div className="flex flex-col sm:flex-row gap-3 pt-4">
            <Button
              onClick={handleSearch}
              variant="success"
              size="lg"
              className="flex-1 rounded-full font-semibold"
            >
              <Search className="h-5 w-5 mr-2" />
              Buscar
            </Button>
            
            <Button
              onClick={handleClear}
              variant="outline"
              size="lg"
              className="flex-1 rounded-full font-semibold text-gray-600 border-gray-300 hover:bg-gray-50"
            >
              <Eraser className="h-5 w-5 mr-2" />
              Limpiar
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}