"use client";

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

import "../../(private)/AsignacionEquipo/asignacion.css";

interface Equipo {
  id_equipo: number;
  id_plataforma: number;
  id_area_ubicacion: number;
  nombre_equipo: string;
  ubicacion: string;
  activo: boolean;
  ip: string;
  areaUbicacion: { area: string };
  plataforma: { nombre: string };
}

interface EnviarMensajeProps {
  titulo: string;
}

interface Mensaje {
  id_mensaje: number;
  mensaje: string;
}


const EnviarMensaje = ({ titulo }: EnviarMensajeProps) => {
  const [equipos, setEquipos] = useState<Equipo[]>([]);
  const [equipoSeleccionado, setEquipoSeleccionado] = useState<any>(null);
  const [loadingEquipos, setLoadingEquipos] = useState(false);
  const [open, setOpen] = useState(false);
  const [mensaje, setMensaje] = useState("");
  const [mensajes, setMensajes] = useState<Mensaje[]>([]);
  const [loadingMensajes, setLoadingMensajes] = useState(false);

  const [customMsg, setCustomMsg] = useState("");

  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoadingMensajes(true);

        const [equiposRes, mensajesRes] = await Promise.all([
          axios.get(`${envConfig.apiUrl}/equipo/busy`),
          axios.get(`${envConfig.apiUrl}/mensaje`)
        ]);

        setEquipos(equiposRes.data);
        setMensajes(mensajesRes.data);

      } catch (error) {
        console.error("Error cargando datos:", error);
      } finally {
        setLoadingMensajes(false);
      }
    };

    fetchData();
  }, []);

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

    const payload = {
      equipo: equipoSeleccionado,
      mensaje: customMsg || mensaje,
    };

  };

  return (
    <form className="containerForm" onSubmit={handleSubmit}>
      <label className="label">{titulo}</label>

      <div
        className={`customSelect ${open ? "open" : ""} ${loadingEquipos ? "disabled" : ""}`}
      >
        <div
          className={`selectHeader ${equipoSeleccionado && equipoSeleccionado.plataforma?.nombre?.toUpperCase()}`}
          onClick={() => !loadingEquipos && setOpen(!open)}
        >
          {equipoSeleccionado ? (
            <span
            >
              {equipoSeleccionado.ubicacion}{" "}
              {equipoSeleccionado.nombre_equipo}{" "}
              {equipoSeleccionado.areaUbicacion.area}
            </span>
          ) : (
            <span className="placeholder">
              {loadingEquipos
                ? "Cargando equipos..."
                : "Seleccione un equipo"}
            </span>
          )}

          <span className="arrow">{open ? "▲" : "▼"}</span>
        </div>

        {open && (
          <div className="options">
            {equipos.length === 0 && (
              <div className="option disabled">
                No hay equipos disponibles
              </div>
            )}

            {equipos.map((eq) => (
              <div
                key={eq.id_equipo}
                className={`option ${eq.plataforma?.nombre?.toUpperCase()}`}
                onClick={() => {
                  setEquipoSeleccionado(eq);
                  setOpen(false);
                }}
              >
                {eq.ubicacion} {eq.nombre_equipo} {eq.areaUbicacion.area}
              </div>
            ))}
          </div>
        )}
      </div>

      <label className="label">Seleccione el mensaje</label>

      <div className="groupInput">
        <select
          value={mensaje}
          onChange={(e) => setMensaje(e.target.value)}
        >
          <option value="">
            {loadingMensajes
              ? "Cargando mensajes..."
              : "Seleccione un mensaje"}
          </option>

          {mensajes.map((msg) => (
            <option key={msg.id_mensaje} value={msg.mensaje}>
              {msg.mensaje}
            </option>
          ))}
        </select>

      </div>

      <label className="label">Mensaje personalizado</label>

      <div className="groupInput">
        <input
          type="text"
          value={customMsg}
          onChange={(e) => setCustomMsg(e.target.value)}
          placeholder="Escribe tu mensaje..."
        />
      </div>


      <button
        className="button buttonSearch"
        type="submit"
        style={{ marginTop: "1rem" }}
      >
        Mandar mensaje
      </button>
    </form>
  );
};

export default EnviarMensaje;