"use client";
import { useEffect, useState } from "react";

import "@/app/globals.css";
import axios from "axios";
import { envConfig } from "@/app/lib/config";
import toast from "react-hot-toast";

export default function Areas() {
  const [areas, setAreas] = useState([]);
  const [selectedArea, setSelectedArea] = useState("");

  const [modo, setModo] = useState<"Activo" | "Mantenimiento" | null>(
    "Mantenimiento",
  );

  useEffect(() => {
    axios
      .get(`${envConfig.apiUrl}/area-ubicacion`)
      .then((data) => {
        setAreas(data.data);
      })
      .catch((error) => {
        console.error("Error al traer las áreas:", error);
      });
  }, []);

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

    if (!selectedArea) {
      toast.error("Selecciona un área antes de actualizar");
      return;
    }

    if (!modo) {
      toast.error("Selecciona un modo");
      return;
    }

    try {
      await axios.patch(
        `${envConfig.apiUrl}/equipo/actualizar-area`,
        {
          id_area_ubicacion: Number(selectedArea),
          activo: modo === "Activo",
        }
      );

      toast.success("Equipos actualizados correctamente");
    } catch (error) {
      console.error(error);
      toast.error("Error al actualizar los equipos");
    }
  };

  return (
    <form className="containerForm" onSubmit={handleActualizar}>
      <label className="label">Áreas</label>

      <div className="groupInput">
        <select
          id="areaSelect"
          value={selectedArea}
          onChange={(e) => setSelectedArea(e.target.value)}
        >
          <option value="">-- Selecciona una opción --</option>
          {areas.map((area: any) => (
            <option
              key={area.id_area_ubicacion}
              value={area.id_area_ubicacion}
            >
              {area.area}
            </option>
          ))}

        </select>

        <div className="radio-grid">
          <label className="radio-card">
            <input
              type="radio"
              name="modo"
              checked={modo === "Activo"}
              onChange={() => setModo("Activo")}
            />
            <span className="radio-ui"></span>
            <span className="radio-text">Activo</span>
          </label>

          <label className="radio-card">
            <input
              type="radio"
              name="modo"
              checked={modo === "Mantenimiento"}
              onChange={() => setModo("Mantenimiento")}
            />
            <span className="radio-ui"></span>
            <span className="radio-text">Mantenimiento</span>
          </label>
        </div>

        <button
          className="button buttonSearch"
          type="submit"
          style={{ marginTop: "15px" }}
        >
          Actualizar
        </button>
      </div>
    </form>
  );
}
//IO