front-AT/app/Components/CheckBoxEquipo.tsx

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

import { getEquipoByCount } from "../lib/getEquipoByCount";
import SearchUser from "./Global/SearchUser/searchUser";
import SearchEquipo from "./SearchEquipo";
import axios from "axios";
import Information from "./Global/Information/information";
import toast from "react-hot-toast";
import Swal from "sweetalert2";

async function getEquipoId(idEquipo: number) {
  try {
    const res = await axios.get(
      `${envConfig.apiUrl}/bitacora/equipo/${idEquipo}`,
    );
    return res.data;
  } catch (error: any) {
    if (axios.isAxiosError(error)) {
      return {
        error: error.response?.data?.message || "Error al consultar equipo",
      };
    }

    return { error: "Error desconocido" };
  }
}

interface Props {
  numAcount?: string | null;
  machine?: string | null;
}

export default function CheckBoxEquipo({ numAcount, machine }: Props) {
  const [modo, setModo] = useState<"Equipo" | "Cuenta" | null>("Cuenta");
  const [bitacora, setBitacora] = useState<any>(null);
  const [tiempoRestante, setTiempoRestante] = useState<string>("");
  const [minutos, setMinutos] = useState<number>();
  const [error, setError] = useState()

  const fetchByCuenta = async (idCuenta: number) => {
    const result = await getEquipoByCount(idCuenta);

    if (result?.error) {
      setError(result.error);
      setBitacora(null);
    } else {
      setBitacora(result);
    }
  };

  const fetchByEquipo = async (idEquipo: number) => {
    const result = await getEquipoId(idEquipo);

    if (result?.error) {
      setError(result.error);
      setBitacora(null);
    } else {
      setBitacora(result);
    }
  };

  useEffect(() => {
    if (!numAcount) return;
    const idCuenta = parseInt(numAcount);
    if (isNaN(idCuenta)) return;

    fetchByCuenta(idCuenta);
  }, [numAcount]);

  useEffect(() => {
    if (!machine) return;
    const idEquipo = parseInt(machine);
    if (isNaN(idEquipo)) return;

    fetchByEquipo(idEquipo);
  }, [machine]);

  useEffect(() => {
    if (!bitacora) return;

    const entrada = new Date(bitacora.tiempo_entrada).getTime();
    const asignadoMs = bitacora.tiempo_asignado * 60 * 1000;

    const interval = setInterval(() => {
      const ahora = Date.now();
      const restante = entrada + asignadoMs - ahora;

      if (restante <= 0) {
        setTiempoRestante("agotado");
        clearInterval(interval);
      } else {
        const minutos = Math.floor(restante / 60000);
        setMinutos(minutos + 1);
        const segundos = Math.floor((restante % 60000) / 1000);
        setTiempoRestante(`${minutos} minutos con ${segundos} segundos`);
      }
    }, 1000);

    return () => clearInterval(interval);
  }, [bitacora]);

  const handleButton = async (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();

    await axios.patch(
      `${envConfig.apiUrl}/bitacora/cancelar/${bitacora.id_bitacora}`,
      { tiempo_asignado: minutos },
    );

    
    Swal.fire({
      title: "Tiempo cancelado Correctamente!",
      icon: "success",
      draggable: true,
    });

    if (modo === "Cuenta" && numAcount) {
      fetchByCuenta(parseInt(numAcount));
    }

    if (modo === "Equipo" && machine) {
      fetchByEquipo(parseInt(machine));
    }
  };

  return (
    <>
      <div className="radio-grid">
        <label className="radio-card">
          <input
            type="radio"
            name="modo"
            checked={modo === "Equipo"}
            onChange={() => setModo("Equipo")}
          />
          <span className="radio-ui"></span>
          <span className="radio-text">Equipo</span>
        </label>

        <label className="radio-card">
          <input
            type="radio"
            name="modo"
            checked={modo === "Cuenta"}
            onChange={() => setModo("Cuenta")}
          />
          <span className="radio-ui"></span>
          <span className="radio-text">Cuenta</span>
        </label>
      </div>

      {modo === "Cuenta" && <SearchUser value={numAcount ?? null} />}
      {modo === "Equipo" && <SearchEquipo value={machine ?? null} />}

      <h2 style={{marginTop:"10px"}}>{error}</h2>

      {bitacora && (
        <>
          <Information
            NoCuenta={bitacora.alumno_inscrito.alumno.id_cuenta}
            Nombre={bitacora.alumno_inscrito.alumno.nombre}
            Tiempo={tiempoRestante}
            Equipo={bitacora.equipo.ubicacion}
          />
          <button
            className="button buttonSearch"
            style={{ marginTop: "1rem" }}
            onClick={handleButton}
          >
            Cancelar tiempo
          </button>
        </>
      )}
    </>
  );
}