"use client";

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

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

interface EnviarMensajeSalaProps {
  titulo: string;
}

const EnviarMensajeSala = ({ titulo }: EnviarMensajeSalaProps) => {
  const [salas, setSalas] = useState<Area[]>([]);
  const [salaSeleccionada, setSalaSeleccionada] = useState<number>(0);
  const [mensaje, setMensaje] = useState("");
  const [customMsg, setCustomMsg] = useState("");

  useEffect(() => {
    const fetchSalas = async () => {
      try {
        const response = await axios.get(`${envConfig.apiUrl}/area-ubicacion`);
        setSalas(response.data);
      } catch (error) {
        console.error("Error cargando salas:", error);
      }
    };

    fetchSalas();
  }, []);

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

    const payload = {
      sala: salaSeleccionada,
      mensaje: customMsg || mensaje,
    };

  };

  return (
    <form className="containerForm" onSubmit={handleSubmit}>
  
      <label className="label">{titulo}</label>
      <div className="groupInput">
        <select
          value={salaSeleccionada}
          onChange={(e) => setSalaSeleccionada(Number(e.target.value))}
        >
          <option value={0}>-- Selecciona una sala --</option>

          {salas.map((s) => (
            <option key={s.id_area_ubicacion} value={s.id_area_ubicacion}>
              {s.area}
            </option>
          ))}
        </select>
      </div>

 
      <label className="label">Seleccione el mensaje</label>
      <div className="groupInput">
        <select value={mensaje} onChange={(e) => setMensaje(e.target.value)}>
          <option value="">-- Seleccione el mensaje --</option>

          <option value="cerrar">No olvides cerrar sesión</option>
          <option value="alerta1">⚠️ Atención</option>
          <option value="alerta2">🔔 Aviso importante</option>
          <option value="alerta3">✅ Confirmación</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 EnviarMensajeSala;