"use client";

import { useEffect, useState } from "react";
import { envConfig } from "@/app/lib/config";
import { getEquipoByCount } from "../lib/getEquipoByCount";
import { getMesaByCount } from "../lib/getMesaByCount";
import Swal from "sweetalert2";
import axios from "axios";
import Cookies from "js-cookie";
import { useRouter } from "next/navigation";

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 router = useRouter();

  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 (!idCuenta || isNaN(idCuenta)) return;
    fetchByCuenta(idCuenta);
  }, [idCuenta]);

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

      setPuedeContinuar(false);
      return;
    }

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

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

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

        setLoadingMesas(true);

        const response = await axios.get(
          `${envConfig.apiUrl}/mesa/activo`,
          { headers },
        );

        setMesas(response.data);
      } catch (error: any) {
        Swal.fire({
          title: "Error al cargar mesas disponibles!",
          text: error.response?.data?.message || error.message,
          icon: "error",
        });
      } finally {
        setLoadingMesas(false);
      }
    };

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

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

    if (!mesaSeleccionada || Number(mesaSeleccionada) === 0) {
      Swal.fire({
        title: "Seleccione una mesa!",
        icon: "error",
      });
      return;
    }

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

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

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

      setBitacora([]);
      router.refresh();
      Swal.fire({
        title: "Mesa asignada correctamente!",
        icon: "success",
      });
    } catch (error: any) {
      Swal.fire({
        title: "No se pudo asignar la mesa!",
        text: error.response?.data?.message || error.message,
        icon: "error",
      });
    }
  };

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