"use client";
import axios from 'axios';
import { useEffect, useState } from 'react';

interface Mesa {
  id_mesa: number;
  nombre?: string;
}

interface Props {
  id_cuenta: number;
}

function Mesas({ id_cuenta }: Props) {
  const [mesas, setMesas] = useState<Mesa[]>([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!id_cuenta) return;

    setLoading(true);

    axios.get(`/cuenta/${id_cuenta}`)
      .then(res => {
        setMesas(res.data);
      })
      .catch(err => console.error(err))
      .finally(() => setLoading(false));
  }, [id_cuenta]);

  if (loading) return <p>Cargando mesas...</p>;

  return (
    <div>
      <h3>Mesas asignadas</h3>

      {mesas.length === 0 ? (
        <p>No hay mesas</p>
      ) : (
        <ul>
          {mesas.map(mesa => (
            <li key={mesa.id_mesa}>
              Mesa {mesa.id_mesa} {mesa.nombre && `- ${mesa.nombre}`}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default function SearchMesa() {
  const [inputValue, setInputValue] = useState('');
  const [idCuenta, setIdCuenta] = useState<number | null>(null);

  const buscar = (e: React.FormEvent) => {
    e.preventDefault();
    setIdCuenta(Number(inputValue));
  };

  return (
    <>
      <form className="containerForm" onSubmit={buscar}>
        <label>Numero de mesa</label>

        <div className="groupInput">
          <input
            type="number"
            placeholder="Coloca el numero de mesa"
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
          />

          <button type="submit" className="button buttonSearch">
            Buscar
          </button>
        </div>
      </form>

      {idCuenta && <Mesas id_cuenta={idCuenta} />}
    </>
  );
}