"use client";

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

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

import Swal from "sweetalert2";
import axios from "axios";
import Cookies from "js-cookie";

import "./asignacion.css";

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>("Equipo");

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

  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");
        return;
      }

      if (!resultMesa?.error) {
        setError("Mesa");
        return;
      }
    }
  };

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

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

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

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

    if (!todasAsistieron) {
      Swal.fire({
        title: "El alumno no asistió a todas las pláticas!",
        icon: "error",
        draggable: true,
      });
      setPuedeContinuar(false);
      return;
    }

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

  useEffect(() => {
    if (!puedeContinuar || !numAcount || !(error === "Equipo" || error === "Mesa")) return;

    const fetchEquipos = async () => {
      try {

        setLoadingEquipos(true);

        const res = await axios.get(
          `${envConfig.apiUrl}/equipo/student/${numAcount}`,
          { headers },
        );

        setEquipos(res.data);
      } catch (err) {
        Swal.fire({
          title: "Error al cargar equipos disponibles!",
          icon: "error",
          draggable: true,
        });
      } finally {
        setLoadingEquipos(false);
      }
    };

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

  if (!puedeContinuar) return null;

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

    if (!equipoSeleccionado) {
      Swal.fire({
        title: "Selecciona un equipo!",
        icon: "error",
        draggable: true,
      });
      return;
    }

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

      await axios.post(`${envConfig.apiUrl}/bitacora`, body, { headers }
      );

      setBitacora([]);

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

  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>
        <option value={120}>120 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