"use client";


import { useState, useEffect } from "react";
import Cookies from "js-cookie";
import axios from "axios";
import "./pregunta7.css";
import ToggleButton from "../Toggle/ToggleButton";
import dynamic from "next/dynamic";

const MapaCalor = dynamic(
  () => import("./MapaCalor"),
  { ssr: false }
);

type AntiguedadItem = {
  antiguedad: string | null;
  total: number | string;
};

type RespuestaAntiguedad = {
  impresion: AntiguedadItem[];
  digitalizacion: AntiguedadItem[];
};

export default function Pregunta7() {
  const [datos, setDatos] = useState([
    { nombre: "Impresión", valores: ["0.00", "0.00", "0.00", "0.00"] },
    {
      nombre: "Digitalización",
      valores: ["0.00", "0.00", "0.00", "0.00"],
    },
  ]);

  const [loading, setLoading] = useState(true);

  const api_url = process.env.NEXT_PUBLIC_API_URL;

  const transformarDatos = (items: AntiguedadItem[]): string[] => {
    let menor2 = 0;
    let entre2_3 = 0;
    let entre4_5 = 0;
    let mayor6 = 0;

    for (const item of items) {
      const total = Number(item.total) || 0;
      const antig = item.antiguedad?.toLowerCase().trim();

      switch (antig) {
        case "menor a 2 años":
          menor2 += total;
          break;

        case "entre 2 y 3 años":
          entre2_3 += total;
          break;

        case "entre 4 y 5 años":
          entre4_5 += total;
          break;

        case "mayor a 6 años":
          mayor6 += total;
          break;
      }
    }

    const suma = menor2 + entre2_3 + entre4_5 + mayor6;

    if (suma === 0) return ["0.00", "0.00", "0.00", "0.00"];

    const pct = (v: number) => ((v / suma) * 100).toFixed(2);

    return [
      pct(menor2), // Menor a 2
      pct(entre2_3), // Entre 2 y 3
      pct(entre4_5), // Entre 4 y 5
      pct(mayor6), // Mayor a 6
    ];
  };

  const cargarDatos = async (baja: boolean) => {
    const token = Cookies.get("token");

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

    axios
      .post<RespuestaAntiguedad>(
        `${api_url}/equipos/reporte/contar_perifericos_antiguedad`,
        body,
        {
          headers: { Authorization: `Bearer ${token}` },
        },
      )
      .then((res) => {
        const { impresion, digitalizacion } = res.data;

        setDatos([
          { nombre: "Impresión", valores: transformarDatos(impresion) },
          {
            nombre: "Digitalización",
            valores: transformarDatos(digitalizacion),
          },
        ]);
      })
      .catch((err) => console.error("Error cargando datos:", err))
      .finally(() => setLoading(false));
  };

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

  const calcularTotalFila = (valores: string[]) =>
    valores.reduce((t, v) => t + Number(v), 0);

  return (
    <div className="contenedor-pregunta">
      <div className="contenedor-censo">
        Censo de equipos periféricos - Equipo de digitalización
      </div>

      <div className="pregunta-cuadro">
        Antigüedad que tienen los equipos periféricos del área universitaria.
        <ToggleButton
          onChange={(estado) => {
            cargarDatos(estado);
          }}
        />
      </div>

      <div className="tabla-contenedor">
        <table className="tabla">
          <thead>
            <tr>
              <th className="azul-marino">% Antigüedad de los equipos</th>
              <th className="rosa-fuerte">Menor a 2 años</th>
              <th className="rosa-fuerte">Entre 2 y 3 años</th>
              <th className="rosa-fuerte">Entre 4 y 5 años</th>
              <th className="rosa-fuerte">Mayor a 6 años</th>

              <th className="azul-marino">Total</th>
            </tr>
          </thead>

          <tbody>
            {datos.map((fila, idx) => {
              const total = calcularTotalFila(fila.valores);

              return (
                <tr key={idx}>
                  <td>{fila.nombre}</td>

                  {fila.valores.map((v, c) => (
                    <td key={c}>
                      <div className="input-contenedor">
                        <input type="number" value={v} readOnly />
                        <span className="porcentaje">%</span>
                      </div>
                    </td>
                  ))}

                  <td
                    className={`total-celda ${
                      total > 100.1 ? "total-error" : ""
                    }`}
                  >
                    {total.toFixed(2)}%
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
      <MapaCalor />
    </div>

  
  );
}