front-AT/app/Components/CheckBoxMesa.tsx

"use client";

import { useEffect, useState } from "react";
import SearchUser from "./Global/SearchUser/searchUser";
import Information from "./Global/Information/information";
import SearchMesa from "./SearchMesa";
import { getTableByCount } from "../lib/getTableByCount";
import toast from "react-hot-toast";
import axios from "axios";
import { envConfig } from "../lib/config";
import { getMesaByCount } from "../lib/getMesaByCount";
import Swal from "sweetalert2";

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

export default function CheckBoxMesa({ numAcount, table }: props) {
  const [modo, setModo] = useState<"Mesa" | "Cuenta" | null>("Cuenta");
  const [bitacora, setBitacora] = useState<any>(null);
  const [tiempoRestante, setTiempoRestante] = useState<string>("");
  const [minutos, setMinutos] = useState<number>();

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

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

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

    if (result?.error) {
      toast.error(result.error);
      setBitacora(null);
    } else {
      setBitacora(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;

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

  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-mesa/cancelar/${bitacora.id_bitacora_mesa}`,
      { tiempo_asignado: minutos },
    );

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

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

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

  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} />}
      {modo === "Mesa" && <SearchMesa />}

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