"use client";

import { useEffect, useState } from "react";
import { envConfig } from "@/app/lib/config";
import toast from "react-hot-toast";
import { getEquipoByCount } from "../lib/getEquipoByCount";
import { getMesaByCount } from "../lib/getMesaByCount";
import Swal from "sweetalert2";

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

export default function AsignacionMesas({ idCuenta, inscripcion }: Props) {
  const [puedeContinuar, setPuedeContinuar] = useState(false);
  const [mesas, setMesas] = useState<any[]>([]);
  const [loadingMesas, setLoadingMesas] = useState(false);
  const [mesaSeleccionada, setMesaSeleccionada] = useState<any>(null);
  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) toast.error("Ya cuentas con un equipo asignado");
      Swal.fire({
        title: "Ya cuentas con un equipo asignado!",
        icon: "error",
        draggable: true,
      });
      if (!resultMesa?.error) toast.error("Ya cuentas con una mesa asignada");
      Swal.fire({
        title: "Ya cuentas con mesa asignada!",
        icon: "error",
        draggable: true,
      });
    }
  };

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

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

  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 || !idCuenta) return;

    const fetchMesas = async () => {
      try {
        setLoadingMesas(true);
        const res = await fetch(`${envConfig.apiUrl}/mesa/activo`, {
          cache: "no-store",
        });

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

        const data = await res.json();
        setMesas(data);
      } catch (error) {
        toast.error("Error al cargar mesas disponibles");
      } finally {
        setLoadingMesas(false);
      }
    };

    fetchMesas();
  }, [puedeContinuar, idCuenta]);

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

    if (!mesaSeleccionada) {
      toast.error("Selecciona un mesa");
      return;
    }

    try {
      const body = {
        tiempo_asignado: tiempo,
        id_mesa: Number(mesaSeleccionada),
        id_alumno_inscrito: inscripcion[0].id_alumno_inscrito,
      };

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

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

      setBitacora([]);
      toast.success("Mesa asignada correctamente");
      Swal.fire({
        title: "Mesa asignada correctamente!",
        icon: "success",
        draggable: true,
      });
    } catch (error) {
      toast.error("No se pudo asignar la mesa");
    }
  };

  if (!puedeContinuar) return null;

  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 style={{ marginTop: "1rem" }}>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>
      </select>

      <label style={{ marginTop: "1rem" }}>Seleccione una mesa</label>

      <div className="groupInput">
        <select
          disabled={loadingMesas || mesas.length === 0}
          onChange={(e) => setMesaSeleccionada(e.target.value)}
        >
          {loadingMesas && <option>Cargando mesas...</option>}

          {!loadingMesas && mesas.length === 0 && (
            <option>No hay mesas disponibles</option>
          )}

          <option value={0}>Selecciona una mesa</option>
          {!loadingMesas &&
            mesas.map((mesa) => (
              <option key={mesa.id_mesa} value={mesa.id_mesa}>
                Mesa {mesa.id_mesa}
              </option>
            ))}
        </select>

        <button
          className="button buttonSearch"
          disabled={loadingMesas || mesas.length === 0}
          onClick={submit}
        >
          Asignar Mesa
        </button>
      </div>
    </div>
  );
}
//IO