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

interface Data {
  nombre_equipo: string;
  id_equipo: number;
  id_plataforma: number;
  id_area_ubicacion: number;
  ubicacion: string;
  ip: 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 [isEditing, setIsEditing] = useState(false);
  const [isCreating, setIsCreating] = useState(false);

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

  const handleSave = async () => {
    if (!data) return;

    try {
      await axios.patch(`${envConfig.apiUrl}/equipo`, {
        id_equipo: data.id_equipo,
        nombre_equipo: nombre,
        ubicacion: ubicacion,
        id_plataforma: idPlataforma,
        id_area_ubicacion: idArea,
        ip: data.ip,
      });

      // Actualiza el estado local
      setData({
        ...data,
        nombre_equipo: nombre,
        ubicacion,
        id_plataforma: idPlataforma as number,
        id_area_ubicacion: idArea as number,
      });

      setIsEditing(false);
      toast.success("Equipo actualizado correctamente");
    } catch (error) {
      console.error(error);
      toast.error("Error al guardar el equipo");
    }
  };

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

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

      setData({
        id_equipo: 0,
        nombre_equipo: "",
        ubicacion: "",
        id_plataforma: 0,
        id_area_ubicacion: 0,
        ip: "",
      });

      setNombre("");
      setUbicacion("");
      setIdPlataforma("");
      setIdArea("");

      setIsCreating(true);
      setIsEditing(true);
    } catch (error) {
      toast.error("Error al preparar formulario");
    }
  };

  const handleCreate = async () => {
    try {
      await axios.post(`${envConfig.apiUrl}/equipo`, {
        nombre_equipo: nombre,
        ubicacion,
        id_plataforma: idPlataforma,
        id_area_ubicacion: idArea,
        ip: "0.0.0.0",
      });

      toast.success("Equipo creado correctamente");

      setIsCreating(false);
      setIsEditing(false);
      setData(null);
    } catch (error: any) {
      const message =
        error?.response?.data?.message || "Error al crear el equipo";
      toast.error(message);
    }
  };

  return (
    <form className="containerForm" onSubmit={handleSubmit}>
      {!isCreating && (
        <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}
            disabled={!isEditing}
            onChange={(e) => setUbicacion(e.target.value)}
          />

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

          <label className="label">Plataforma</label>
          <select
            value={idPlataforma}
            disabled={!isEditing}
            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}
            disabled={!isEditing}
            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" }}>
            {isEditing ? (
              <>
                <button
                  type="button"
                  className="button buttonSearch"
                  onClick={isCreating ? handleCreate : handleSave}
                >
                  Guardar
                </button>

                <button
                  type="button"
                  className="button buttonCancel"
                  onClick={() => {
                    setIsEditing(false);
                    setIsCreating(false);
                    setData(null);
                  }}
                >
                  Cancelar
                </button>
              </>
            ) : (
              <>
                <button
                  type="button"
                  className="button buttonCharge"
                  onClick={handleNuevo}
                >
                  Nuevo
                </button>
                <button
                  type="button"
                  className="button buttonSearch"
                  onClick={() => setIsEditing(true)}
                >
                  Editar
                </button>
              </>
            )}
          </div>
        </div>
      )}
    </form>
  );
}