"use client";
import { useState, useEffect } from "react";
import style from "./pregunta1EP.module.scss";
import axios from "axios";
import Cookies from "js-cookie";
import ToggleButton from "../Toggle/ToggleButton";

interface EquiposImpresion {
  inyeccionTinta: string;
  laserPequenaBN: string;
  matrizPuntos: string;
  laserAltoVolumenBN: string;
  laserPequenaColor: string;
  multifuncionales: string;
  laserAltoVolumenColor: string;
  impresora3D: string;
  plotter: string;
  credencial: string;
  termica: string;
}

export default function Pregunta1EP() {
  const [equipos, setEquipos] = useState<EquiposImpresion>({
    inyeccionTinta: "0",
    laserPequenaBN: "0",
    matrizPuntos: "0",
    laserAltoVolumenBN: "0",
    laserPequenaColor: "0",
    multifuncionales: "0",
    laserAltoVolumenColor: "0",
    impresora3D: "0",
    plotter: "0",
    credencial: "0",
    termica: "0",
  });

  const api_url = process.env.NEXT_PUBLIC_API_URL;

  const cargarDatos = async (baja: boolean) => {
    const token = Cookies.get("token");
    const headers = { Authorization: `Bearer ${token}` };

    const body = baja ? ["BAJA"] : ["EN DESUSO", "EN USO"];

    try {
      const res = await axios.post(
        `${api_url}/equipos/reporte/equipos_impesion_group/impresoras`,
        body,
        { headers }
      );

      const data = res.data;

      const valores = {
        inyeccionTinta: "0",
        laserPequenaBN: "0",
        matrizPuntos: "0",
        laserAltoVolumenBN: "0",
        laserPequenaColor: "0",
        multifuncionales: "0",
        laserAltoVolumenColor: "0",
        impresora3D: "0",
        plotter: "0",
        credencial: "0",
        termica: "0",
      };

      data.forEach((item: any) => {
        const uso = item.periferico.toUpperCase().trim();
        const total = item.total ?? "0";

        switch (uso) {
          case "INYECCIÓN TINTA":
            valores.inyeccionTinta = total;
            break;
          case "LÁSER PEQUEÑA B/N":
            valores.laserPequenaBN = total;
            break;
          case "MATRIZ DE PUNTOS":
            valores.matrizPuntos = total;
            break;
          case "LÁSER DE ALTO VOLUMEN B/N":
            valores.laserAltoVolumenBN = total;
            break;
          case "LÁSER PEQUEÑA COLOR":
            valores.laserPequenaColor = total;
            break;
          case "MULTIFUNCIONALES":
            valores.multifuncionales = total;
            break;
          case "LÁSER DE ALTO VOLUMEN COLOR":
            valores.laserAltoVolumenColor = total;
            break;
          case "3D":
            valores.impresora3D = total;
            break;
          case "IMPRESORA CREDENCIALES":
            valores.credencial = total;
            break;
          case "IMPRESORA TÉRMICA":
            valores.termica = total;
            break;
          case "PLOTTER":
            valores.plotter = total;
            break;
        }
      });

      setEquipos(valores);
    } catch (error) {
      console.error("Error:", error);
    }
  };

  useEffect(() => {
    cargarDatos(false);
  }, []);

  return (
    <div className="container">
      <div className="contenedor-censo">
        Censo de equipos periféricos - Equipo de Impresion
      </div>

      <div className="pregunta-cuadro">
        Equipos de impresión.
        <ToggleButton
          onChange={(estado) => {
            cargarDatos(estado);
          }}
        />
      </div>

      <div className={style.grid}>
        {/* Columna 1 */}
        <div className="item">
          <label htmlFor="inyeccionTinta">Inyección de tinta</label>
          <input
            type="text"
            id="inyeccionTinta"
            name="inyeccionTinta"
            value={equipos.inyeccionTinta}
            disabled
          />
        </div>

        {/* Columna 2 */}
        <div className="item">
          <label htmlFor="laserAltoVolumenBN">Láser de alto volumen B/N</label>
          <input
            type="text"
            id="laserAltoVolumenBN"
            name="laserAltoVolumenBN"
            value={equipos.laserAltoVolumenBN}
            disabled
          />
        </div>

        <div className="item">
          <label htmlFor="laserAltoVolumenColor">
            Láser de alto volumen Color
          </label>
          <input
            type="text"
            id="laserAltoVolumenColor"
            name="laserAltoVolumenColor"
            value={equipos.laserAltoVolumenColor}
            disabled
          />
        </div>

        <div className="item">
          <label htmlFor="laserAltoVolumenColor">Impresora credenciales</label>
          <input
            type="text"
            id="laserAltoVolumenColor"
            name="laserAltoVolumenColor"
            value={equipos.credencial}
            disabled
          />
        </div>

        <div className="item">
          <label htmlFor="laserPequenaBN">Láser pequeña B/N</label>
          <input
            type="text"
            id="laserPequenaBN"
            name="laserPequenaBN"
            value={equipos.laserPequenaBN}
            disabled
          />
        </div>

        <div className="item">
          <label htmlFor="laserPequenaColor">Láser pequeña Color</label>
          <input
            type="text"
            id="laserPequenaColor"
            name="laserPequenaColor"
            value={equipos.laserPequenaColor}
            disabled
          />
        </div>

        <div className="item">
          <label htmlFor="impresora3D">3D</label>
          <input
            type="text"
            id="impresora3D"
            name="impresora3D"
            value={equipos.impresora3D}
            disabled
          />
        </div>

        <div className="item">
          <label htmlFor="matrizPuntos">Impresora termica</label>
          <input
            type="text"
            id="matrizPuntos"
            name="matrizPuntos"
            value={equipos.termica}
            disabled
          />
        </div>

        <div className="item">
          <label htmlFor="matrizPuntos">Matriz de puntos</label>
          <input
            type="text"
            id="matrizPuntos"
            name="matrizPuntos"
            value={equipos.matrizPuntos}
            disabled
          />
        </div>

        <div className="item">
          <label htmlFor="multifuncionales">Multifuncionales</label>
          <input
            type="text"
            id="multifuncionales"
            name="multifuncionales"
            value={equipos.multifuncionales}
            disabled
          />
        </div>

        <div className="item">
          <label htmlFor="plotter">Plotter</label>
          <input
            type="text"
            id="plotter"
            name="plotter"
            value={equipos.plotter}
            disabled
          />
        </div>
      </div>
    </div>
  );
}