"use client";

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

function Equipos() {
  const [cuenta, setCuenta] = useState("");
  const [equipoId, setEquipoId] = useState("");
  const [equipos, setEquipos] = useState<any[]>([]);
  const [mensaje, setMensaje] = useState("");

  useEffect(() => {
    fetch(`${envConfig.apiUrl}/equipo`)
      .then((res) => res.json())
      .then((data) => setEquipos(data))
      .catch(() => setMensaje("Error al cargar equipos"));
  }, []);

  const handleBuscar = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!cuenta) {
      setMensaje("Ingresa un número de cuenta");
      return;
    }
    setMensaje(`Buscando cuenta: ${cuenta}`);
  };

  const handleAsignar = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!equipoId) {
      setMensaje("Selecciona un equipo");
      return;
    }
    setMensaje(`Equipo ${equipoId} asignado`);
  };

  return (
    <div className="containerForm">
      <form onSubmit={handleBuscar} className="groupInput">
        <label>No. de cuenta:</label>
        <input
          type="text"
          value={cuenta}
          onChange={(e) => setCuenta(e.target.value)}
        />
        <button type="submit">Buscar</button>
      </form>

      <form onSubmit={handleAsignar} className="groupInput">
        <label>Equipos disponibles:</label>
        <select value={equipoId} onChange={(e) => setEquipoId(e.target.value)}>
          <option value="">-- Selecciona un equipo --</option>
          {equipos.map((eq) => (
            <option key={eq.id_equipo} value={eq.id_equipo}>
              {eq.nombre_equipo} - {eq.ubicacion}
            </option>
          ))}
        </select>
        <button type="submit">Asignar</button>
      </form>

      {mensaje && <p>{mensaje}</p>}
    </div>
  );
}

export default Equipos;