"use client";
import { envConfig } from "@/app/lib/config";
import { useState } from "react";
import Swal from "sweetalert2";
import axios from "axios";
import Cookies from "js-cookie";

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 token = Cookies.get("token");
  const headers = { Authorization: `Bearer ${token}` };

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

    try {

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

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

    } catch (error) {
      Swal.fire({
        title: "Equipo no encontrado",
        icon: "error",
        draggable: true
      });
    }


  };

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

    try {
      console.log({
  id_equipo: data.id_equipo,
  id_plataforma: idPlataforma,
  nombre
});
      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,
      },
        { headers }
      );

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

      setIsEditing(false);

      Swal.fire({
        title: "Equipo actualizado correctamente!",
        icon: "success",
        draggable: true
      });
    } catch (error) {
      console.error(error);

      Swal.fire({
        title: "Error al guardar el equipo!",
        icon: "error",
        draggable: true
      });
    }
  };

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

      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) {
      Swal.fire({
        title: "Error al preparar formulario!",
        icon: "error",
        draggable: true
      });
    }
  };

  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",
      }, { headers });


      Swal.fire({
        title: "Equipo creado correctamente!",
        icon: "success",
        draggable: true
      });

      setIsCreating(false);
      setIsEditing(false);
      setData(null);
    } catch (error: any) {
      const message =
        error?.response?.data?.message || "Error al crear el equipo";
      Swal.fire({
        title: message,
        icon: "error",
        draggable: true,
      });
    }
  };

  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 buttonSearch"
                  onClick={() => setIsEditing(true)}
                >
                  Editar
                </button>
              </>
            )}
          </div>
        </div>
      )}
      <button
        type="button"
        className="button buttonCharge"
        onClick={handleNuevo}
      >
        Nuevo
      </button>
    </form>
  );
}
//IO