"use client";

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

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

export default function AsignacionMesas({
  idCuenta,
  inscripcion,
}: Props) {
  const [puedeContinuar, setPuedeContinuar] = useState(false);
  const [mesas, setMesas] = useState<any[]>([]);
  const [loadingMesas, setLoadingMesas] = useState(false);

  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]);

  if (!puedeContinuar) return null;

  return (
    <div className="containerForm">
      <label style={{ marginTop: "1rem" }}>
        Seleccionar tiempo
      </label>

      <select>
        <option>15 minutos</option>
        <option>30 minutos</option>
        <option>40 minutos</option>
        <option>60 minutos</option>
      </select>

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

      <div className="groupInput">
        <select disabled={loadingMesas || mesas.length === 0}>
          {loadingMesas && <option>Cargando mesas...</option>}

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

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

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