"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 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]);


  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)}
        >
          {selected ? (
            <span
            >
              {selected.ubicacion}{" "}
              {selected.nombre_equipo}{" "}
              {selected.areaUbicacion.area}
            </span>
          ) : (
            <span className="placeholder">
              {loadingEquipos
                ? "Cargando equipos..."
                : "Seleccione un equipo"}
            </span>
          )}

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

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

            {equipos.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()}`);
                }}
              >
                {eq.ubicacion} {eq.nombre_equipo} {eq.areaUbicacion.area}
              </div>
            ))}
          </div>
        )}
      </div>
    </form>
  );
}
//IO