front-AT/app/(private)/AsignacionEquipo/PlaticaGate.tsx

"use client";

import { useEffect, useState } from "react";
import { envConfig } from "@/app/lib/config";
import toast from "react-hot-toast";

import { getEquipoByCount } from "@/app/lib/getEquipoByCount";
import { getMesaByCount } from "@/app/lib/getMesaByCount";

import "./asignacion.css";
import Swal from "sweetalert2";

type Props = {
  inscripcion: any[];
  numAcount: number;
};

export default function PlaticaGate({ inscripcion, numAcount }: Props) {
  const [puedeContinuar, setPuedeContinuar] = useState(false);
  const [equipos, setEquipos] = useState<any[]>([]);
  const [loadingEquipos, setLoadingEquipos] = useState(false);
  const [equipoSeleccionado, setEquipoSeleccionado] = useState<any>(null);
  const [open, setOpen] = useState(false);
  const [tiempo, setTiempo] = useState<number>(15);
  const [bitacora, setBitacora] = useState<[] | null>([]);
  const [error, setError] = useState<string>();

  const fetchByCuenta = async (idCuenta: number) => {
    const [result, resultMesa] = await Promise.all([
      getEquipoByCount(idCuenta),
      getMesaByCount(idCuenta),
    ]);

    if (result?.error && resultMesa?.error) {
      setBitacora(null);
    } else {
      setBitacora([]);
      if (!result?.error) setError("Equipo");
      if (!resultMesa?.error) setError("Mesa");
    }
  };

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

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

  useEffect(() => {
    if (!Array.isArray(inscripcion) || inscripcion.length === 0) return;

    const todasAsistieron = inscripcion.every(
      (ins) => ins.platica?.data?.[0] === 1,
    );

    if (!todasAsistieron) {
      toast.error("El alumno no asistió a todas las pláticas");
      setPuedeContinuar(false);
      return;
    }

    setPuedeContinuar(true);
  }, [inscripcion]);

  useEffect(() => {
    if (!puedeContinuar || !numAcount) return;

    const fetchEquipos = async () => {
      try {
        setLoadingEquipos(true);

        const res = await fetch(
          `${envConfig.apiUrl}/equipo/student/${numAcount}`,
          {
            cache: "no-store",
          },
        );

        if (!res.ok) {
          throw new Error("No se pudieron cargar los equipos");
        }

        const data = await res.json();
        setEquipos(data);
      } catch (error) {
        toast.error("Error al cargar equipos disponibles");
      } finally {
        setLoadingEquipos(false);
      }
    };

    fetchEquipos();
  }, [puedeContinuar, numAcount]);

  if (!puedeContinuar) return null;

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

    if (!equipoSeleccionado) {
      toast.error("Selecciona un equipo");
      return;
    }

    try {
      const body = {
        tiempo_asignado: tiempo,
        ubicacion: equipoSeleccionado.ubicacion ?? null,
        id_equipo: equipoSeleccionado.id_equipo,
        id_alumno_inscrito: inscripcion[0].id_alumno_inscrito,
      };

      const res = await fetch(`${envConfig.apiUrl}/bitacora`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(body),
      });

      if (!res.ok) {
        throw new Error("Error al asignar equipo");
      }

      setBitacora([])
      toast.success("Equipo asignado correctamente");
       Swal.fire({
            title: "Equipo asignado correctamente!",
            icon: "success",
            draggable: true,
          });
    } catch (error) {
      toast.error("No se pudo asignar el equipo");
    }
  };

  if (bitacora) {
    return error === "Mesa"
      ? <p style={{ margin: "1rem", color: "red" }}>Ya cuentas con una mesa asignada</p>
      : error === "Equipo"
        ? <p style={{ margin: "1rem", color: "red" }}>Ya cuentas con un equipo asignado</p>
        : null;
  }

  return (
    <div className="containerForm">
      <label>Seleccionar tiempo</label>

      <select
        value={tiempo}
        onChange={(e) => setTiempo(Number(e.target.value))}
      >
        <option value={15}>15 minutos</option>
        <option value={30}>30 minutos</option>
        <option value={40}>40 minutos</option>
        <option value={60}>60 minutos</option>
        <option value={90}>90 minutos</option>
      </select>

      <label>Seleccione un equipo</label>

      <div className="groupInput">
        <div
          className={`customSelect ${open ? "open" : ""} ${loadingEquipos ? "disabled" : ""}`}
        >
          <div
            className={`selectHeader ${equipoSeleccionado && equipoSeleccionado.plataforma?.nombre?.toUpperCase()}`}
            onClick={() => !loadingEquipos && setOpen(!open)}
          >
            {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">
              {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={() => {
                    setEquipoSeleccionado(eq);
                    setOpen(false);
                  }}
                >
                  {eq.ubicacion} {eq.nombre_equipo}
                </div>
              ))}
            </div>
          )}
        </div>

        <button
          className="button buttonSearch"
          disabled={!equipoSeleccionado || loadingEquipos}
          onClick={submit}
        >
          Asignar Equipo
        </button>
      </div>
    </div>
  );
}
//IO