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

import axios from "axios";
import Swal from "sweetalert2";
import Cookies from "js-cookie";

import "@/app/globals.css";

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

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

  const token = Cookies.get("token");
  const headers = { Authorization: `Bearer ${token}` };


  useEffect(() => {
    axios
      .get(`${envConfig.apiUrl}/area-ubicacion`,
      { headers }
      )
      .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) {

      Swal.fire({
        title: "Selecciona un área antes de actualizar!",
        icon: "error",
        draggable: true,
      });
      return;
    }

    if (!modo) {

      Swal.fire({
        title: "Selecciona un modo!",
        icon: "error",
        draggable: true,
      });
      return;
    }

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


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

      Swal.fire({
        title: "Error al actualizar los equipos!",
        icon: "error",
        draggable: true,
      });
    }
  };

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