"use client";

import { envConfig } from "@/app/lib/config";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";
import axios from "axios";
import Cookies from "js-cookie";

import "../../(private)/AsignacionEquipo/asignacion.css";

interface Equipos {
  id_equipo: number;
  id_plataforma: number;
  id_area_ubicacion: number;
  nombre_equipo: string;
  ubicacion: string;
  activo: boolean;
  ip: string;
  areaUbicacion: { area: string };
  plataforma: { nombre: string };
}

interface Props {
  onSearch: (ubicacion: string) => void;
}

export default function SelectorEquipo({ onSearch }: Props) {
  const [equipos, setEquipos] = useState<Equipos[]>([]);
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const router = useRouter();

  const paramEquipo = Number(searchParams.get("equipo")) || 0;
  const [selected, setSelected] = useState<Equipos | null>(null);
  const [loadingEquipos, setLoadingEquipos] = useState(false);
  const [open, setOpen] = useState(false);

  const [search, setSearch] = useState("");

  const token = Cookies.get("token");
  const headers = { Authorization: `Bearer ${token}` };

  useEffect(() => {
    const fetchData = async () => {
      setLoadingEquipos(true);
      const response = await axios.get(`${envConfig.apiUrl}/equipo`, { headers },
      );
      setEquipos(response.data);
      setLoadingEquipos(false);
    };

    fetchData();
  }, []);

  useEffect(() => {
    if (paramEquipo && equipos.length > 0) {
      const eq = equipos.find(e => e.id_equipo === paramEquipo);
      if (eq) {
        setSelected(eq);
        onSearch(eq.ubicacion);
      }
    }
  }, [paramEquipo, equipos]);

  const equiposFiltrados = equipos.filter((eq) => {
    const texto = search.toLowerCase();

    return (
      eq.ubicacion?.toString().toLowerCase().includes(texto) ||
      eq.plataforma?.nombre?.toLowerCase().includes(texto) ||
      eq.nombre_equipo?.toLowerCase().includes(texto)
    );
  });

  return (
    <form className="form-container">
      <label>Ubicacion de equipo</label>

      <div
        className={`customSelect ${open ? "open" : ""} ${loadingEquipos ? "disabled" : ""}`}
      >
        <div
          className={`selectHeader ${selected && selected.plataforma?.nombre?.toUpperCase()}`}
          onClick={() => !loadingEquipos && setOpen(!open)}          >
          {open ? (
            <input
              autoFocus
              type="text"
              placeholder="Buscar equipo..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              onClick={(e) => e.stopPropagation()}
              className="inputSelect"
            />
          ) : selected ? (
            <span>
              {selected.ubicacion} {selected.nombre_equipo}
            </span>
          ) : (
            <span className="placeholder">
              {loadingEquipos
                ? "Cargando equipos..."
                : "Seleccione un equipo"}
            </span>
          )}

          <span className="arrow">{open ? "▲" : "▼"}</span>
        </div>

        {open && (
          <div className="options" style={{ bottom: "auto" }}>
            {equiposFiltrados.length === 0 && (
              <div className="option disabled">
                No hay equipos disponibles
              </div>
            )}

            {equiposFiltrados.map((eq) => (
              <div
                key={eq.id_equipo}
                className={`option ${eq.plataforma?.nombre?.toUpperCase()}`}
                onClick={() => {
                  setSelected(eq);
                  setOpen(false);
                  const params = new URLSearchParams(searchParams.toString());

                  if (eq.id_equipo === 0) {
                    params.delete("equipo");
                  } else {
                    params.set("equipo", String(eq.id_equipo));
                  }

                  router.push(`${pathname}?${params.toString()}`);
                  setSearch("");

                }}
              >
                {eq.ubicacion} {eq.nombre_equipo} {eq.areaUbicacion.area}
              </div>
            ))}
          </div>
        )}
      </div>
    </form>
  );
}
//IO
