"use client";

import { envConfig } from "@/app/lib/config";
import { useEffect, useState } from "react";
import axios from "axios";
import Cookies from "js-cookie";

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

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

        const response = await axios.get(`${envConfig.apiUrl}/equipo`,
          { headers },
        );
        setEquipos(response.data);
      } catch (error: any) {
        setMensaje(
          error.response?.data?.message || "Error al cargar equipos"
        );
      }
    };

    fetchEquipos();
  }, []);

  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>
  );
}
//IO