"use client";
import axios from "axios";
import { envConfig } from "@/app/lib/config";
import { useState } from "react";

interface Data {
  nombre_equipo: string;
  id_equipo: number;
  id_plataforma: number;
  id_area_ubicacion: number;
  ubicacion: string;
}

interface Plataforma {
  id_plataforma: number;
  nombre: string;
}

interface Area {
  id_area_ubicacion: number;
  area: string;
  extra: string;
}

export default function Equipos() {
  const [id, setId] = useState("");
  const [data, setData] = useState<Data | null>(null);

  const [plataforma, setPlataforma] = useState<Plataforma[]>([]);
  const [area, setArea] = useState<Area[]>([]);

  const [ubicacion, setUbicacion] = useState("");
  const [nombre, setNombre] = useState("");

  const [idPlataforma, setIdPlataforma] = useState<number | "">("");
  const [idArea, setIdArea] = useState<number | "">("");

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();


    const [equipoRes, plataformaRes, areaRes] = await Promise.all([
      axios.get(`${envConfig.apiUrl}/equipo/${id}`),
      axios.get(`${envConfig.apiUrl}/alumno-inscrito/plataforma`),
      axios.get(`${envConfig.apiUrl}/area-ubicacion`)
    ]);

    const equipo = equipoRes.data as Data;

    setData(equipo);
    setNombre(equipo.nombre_equipo);
    setUbicacion(equipo.ubicacion);
    setIdPlataforma(equipo.id_plataforma);
    setIdArea(equipo.id_area_ubicacion);

    setPlataforma(plataformaRes.data);
    setArea(areaRes.data);
  };

  return (
    <form className="containerForm" onSubmit={handleSubmit}>
      <div className="groupInput">
        <input
          placeholder="Número de Equipo a buscar..."
          value={id}
          onChange={(e) => setId(e.target.value)}
        />

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

      {data && (
        <div>
          <label className="label">Ubicación</label>
          <input
            type="text"
            value={ubicacion}
            onChange={(e) => setUbicacion(e.target.value)}
          />

          <label className="label">Nombre</label>
          <input
            type="text"
            value={nombre}
            onChange={(e) => setNombre(e.target.value)}
          />

          <label className="label">Plataforma</label>
          <select
            value={idPlataforma}
            onChange={(e) => setIdPlataforma(Number(e.target.value))}
          >
            <option value="">Elige</option>
            {plataforma.map((plat) => (
              <option key={plat.id_plataforma} value={plat.id_plataforma}>
                {plat.nombre}
              </option>
            ))}
          </select>

          <label className="label">Área Ubicación</label>
          <select
            value={idArea}
            onChange={(e) => setIdArea(Number(e.target.value))}
          >
            <option value="">Elige</option>
            {area.map((a) => (
              <option key={a.id_area_ubicacion} value={a.id_area_ubicacion}>
                {a.area}
              </option>
            ))}
          </select>

          <div className="containerButton" style={{ marginTop: "1rem" }}>
            <button type="button" className="button buttonSearch">
              Nuevo
            </button>
            <button type="button" className="button buttonSearch">
              Editar
            </button>
          </div>
        </div>
      )}
    </form>
  );
}