front-AT/app/Components/CheckBoxMesa.tsx

"use client";

import { useEffect, useState } from "react";
import { getTableByCount } from "../lib/getTableByCount";
import { envConfig } from "../lib/config";
import { getMesaByCount } from "../lib/getMesaByCount";
import { useRouter } from "next/navigation";

import SearchUser from "./Global/SearchUser/searchUser";
import Information from "./Global/Information/information";
import SearchMesa from "./SearchMesa";
import axios from "axios";
import Swal from "sweetalert2";
import Cookies from "js-cookie";

interface props {
  numAcount: string | null;
  table: number | null;
}

export default function CheckBoxMesa({ numAcount, table }: props) {
  const [modo, setModo] = useState<"Mesa" | "Cuenta" | null>("Cuenta");
  const [bitacoraMesa, setBitacoraMesa] = useState<any>(null);
  const [bitacoraCuenta, setBitacoraCuenta] = useState<any>(null);
  const [tiempoRestante, setTiempoRestante] = useState<string>("");
  const [minutos, setMinutos] = useState<number>();
  const [errorMesa, setErrorMesa] = useState()
  const [errorCount, setErrorCount] = useState()
  const [loading, setLoading] = useState<boolean>(false)

  const bitacora = modo === "Cuenta" ? bitacoraCuenta : bitacoraMesa;

  const router = useRouter();

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

    if (result?.error) {
      setErrorCount(result.error);
      setBitacoraCuenta(null);
    } else {
      setBitacoraCuenta(result);
    }
  };

  const fetchByMesa = async (idEquipo: number) => {
    const result = await getTableByCount(idEquipo);

    if (result?.error) {
      setErrorMesa(result.error);
      setBitacoraMesa(null);
    } else {
      setBitacoraMesa(result);
    }
  };

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

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

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

    fetchByMesa(idEquipo);
  }, [table]);

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

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

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

      if (restante <= 0) {
        setTiempoRestante("agotado");
        setMinutos(0);
        return false;
      }

      const minutosRestantes = Math.floor(restante / 60000);
      const segundos = Math.floor((restante % 60000) / 1000);

      setMinutos(minutosRestantes + 1);
      setTiempoRestante(
        `${minutosRestantes} minuto(s) con ${segundos} segundo(s)`
      );

      return true;
    };

    updateTimer();

    const interval = setInterval(() => {
      const sigue = updateTimer();
      if (!sigue) clearInterval(interval);
    }, 1000);

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

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

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

    try {
      if (!bitacora) return;

      await axios.patch(
        `${envConfig.apiUrl}/bitacora-mesa/cancelar/${bitacora.id_bitacora_mesa}`,
        { tiempo_asignado: minutos?? 0 },
        { headers }
      );

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

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

      if (modo === "Mesa" && table) {
        fetchByMesa(table);
      }

      router.refresh();
    } catch (error) {
      Swal.fire({
        title: "Error al cancelar tiempo",
        icon: "error",
      });
    } finally {
      setLoading(false);
    }
  };
  return (
    <>
      <div className="radio-grid">
        <label className="radio-card">
          <input
            type="radio"
            name="modo"
            checked={modo === "Mesa"}
            onChange={() => setModo("Mesa")}
          />
          <span className="radio-ui"></span>
          <span className="radio-text">Mesa</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} />
          <h2 style={{ marginTop: "10px" }}>{errorCount}</h2>

          {bitacoraCuenta && tiempoRestante !== "agotado" && (
            <>
              <Information
                NoCuenta={bitacoraCuenta.alumno_inscrito.alumno.id_cuenta}
                Nombre={bitacoraCuenta.alumno_inscrito.alumno.nombre}
                Tiempo={tiempoRestante}
                Mesa={bitacoraCuenta.mesa.id_mesa}
              />

              <button
                className="button buttonSearch"
                style={{ marginTop: "1rem" }}
                onClick={handleButton}
                disabled={loading || !minutos}
              >
                Cancelar tiempo
              </button>
            </>
          )}
        </>
      }
      {modo === "Mesa" &&
        <>
          <SearchMesa />
          <h2 style={{ marginTop: "10px" }}>{errorMesa}</h2>

          {bitacoraMesa && tiempoRestante !== "agotado" && (
            <>
              <Information
                NoCuenta={bitacoraMesa.alumno_inscrito.alumno.id_cuenta}
                Nombre={bitacoraMesa.alumno_inscrito.alumno.nombre}
                Tiempo={tiempoRestante}
                Mesa={bitacoraMesa.mesa.id_mesa}
              />

              <button
                className="button buttonSearch"
                style={{ marginTop: "1rem" }}
                onClick={handleButton}
                disabled={loading || !minutos}
              >
                Cancelar tiempo
              </button>
            </>
          )}
        </>
      }
    </>
  );
}
//IO