"use client";
import { useEffect, useState } from "react";
import { envConfig } from "@/app/lib/config";

import SearchDate from "../SearchDate/SearchDate";
import axios from "axios";
import Cookies from "js-cookie";

import "../../(private)/AsignacionEquipo/asignacion.css"
interface equipos {
  hora_entrada: string;
  min_utilizados: number;
  hora_salida: string;
  cuenta_asociada: number;
}

export default function BitacoraEquipo({ date }: { date: string | null }) {
  const [equipo, setEquipo] = useState<equipos[]>([]);
  const [open, setOpen] = useState(false);
  const [loadingEquipos, setLoadingEquipos] = useState(false);
  const [equipoSeleccionado, setEquipoSeleccionado] = useState<any>(null);
  const [equipos, setEquipos] = useState<any[]>([]);

  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 (!equipoSeleccionado?.id_equipo) return;
    if (!date) return;

    axios.post(`${envConfig.apiUrl}/bitacora/equipos-por-equipo`, {
      id_equipo: equipoSeleccionado.id_equipo,
      fecha: date,
    }, { headers })
      .then(res => {
        setEquipo(res.data);
      })
      .catch(err => {
        console.error(err);
      });
  }, [equipoSeleccionado, date]);

  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 (
    <>
      <label>Seleccione un equipo</label>
      <div className="containerForm">

        <div className="groupInput">
          <div
            className={`customSelect ${open ? "open" : ""} ${loadingEquipos ? "disabled" : ""}`}
          >
            <div
              className={`selectHeader ${equipoSeleccionado && equipoSeleccionado.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"
                />
              ) : equipoSeleccionado ? (
                <span>
                  {equipoSeleccionado.ubicacion} {equipoSeleccionado.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 resultados
                  </div>
                )}

                {equiposFiltrados.map((eq) => (
                  <div
                    key={eq.id_equipo}
                    className={`option ${eq.plataforma?.nombre?.toUpperCase()}`}
                    onClick={() => {
                      setEquipoSeleccionado(eq);
                      setOpen(false);
                      setSearch("");
                    }}
                  >
                    {eq.ubicacion} {eq.nombre_equipo}
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
        <SearchDate />
      </div>
      <div>
        <table>
          <thead>
            <tr>
              <th>Hora Entrada</th>
              <th>Minutos utilizados</th>
              <th>Hora salida</th>
              <th>Cuenta asociada</th>
            </tr>
          </thead>
          <tbody>
            {equipo.length > 0 ? (
              equipo.map((registro, index) => (
                <tr key={index}>
                  <td>{new Date(registro.hora_entrada).toLocaleString()}</td>
                  <td>{registro.min_utilizados}</td>
                  <td>
                    {registro.hora_salida
                      ? new Date(registro.hora_salida).toLocaleString()
                      : "—"}
                  </td>
                  <td>{registro.cuenta_asociada}</td>
                </tr>
              ))
            ) : (
              <tr>
                <td colSpan={4} style={{ textAlign: "center" }}>
                  Este equipo no tuvo asignaciones en esa fecha
                </td>
              </tr>
            )}
          </tbody>

        </table>
      </div>
    </>
  );
}
//IO