"use client";

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

type RawEntry = {
  tipo_equipo: string;
  tipo_uso: string;
  sistema_operativo: string;
  total: string;
};

const USO_INDEX: Record<string, number> = {
  ALUMNO: 0,
  PROFESOR: 1,
  "TÉCNICO ACADEMICO": 2,
  INVESTIGADOR: 3,
  ADMINISTRATIVO: 4,
};

const CATEGORIA_MAP: Record<string, { tabla: number }> = {
  "ESCRITORIO PC": { tabla: 0 },
  "ESCRITORIO MAC OS": { tabla: 0 },
  "ESCRITORIO MAC OS ": { tabla: 0 },
  "ESCRITORIO LINUX": { tabla: 0 },

  "PORTÁTILES WINDOWS": { tabla: 2 },
  "PORTÁTILES CHROMEBOOK": { tabla: 2 },
  "PORTÁTILES MAC OS": { tabla: 2 },

  "TABLETA IPAD OS": { tabla: 1 },
  "TABLETA ANDROID": { tabla: 1 },

  SERVIDOR: { tabla: 3 },
};

const TITULOS_TABLAS = [
  "Computadoras de escritorio",
  "Tabletas",
  "Computadoras portátiles",
  "Alto rendimiento",
];

const SISTEMAS_POR_TABLA: Record<number, readonly string[]> = {
  0: ["Windows", "Linux", "Mac OS"],
  1: ["Android", "iPad OS"],
  2: ["Windows", "Chrome OS", "Mac OS"],
  3: ["Servidor"],
};

function normalizarSO(soRaw: string): string {
  const so = soRaw.trim().toUpperCase();

  if (so.includes("WINDOWS")) return "Windows";
  if (so.includes("LINUX")) return "Linux";
  if (so.includes("MAC")) return "Mac OS";
  if (so.includes("CHROME OS")) return "Chrome OS";
  if (so.includes("ANDROID")) return "Android";

  if (so.includes("IOS") || so.includes("IPAD")) return "iPad OS";

  if (so.includes("SERVER") || so.includes("UNIX")) return "Servidor";

  return "Otro";
}

export default function Pregunta1() {
  const crearTablas = () =>
    Array.from({ length: 4 }, (_, tablaIndex) =>
      Array.from({ length: SISTEMAS_POR_TABLA[tablaIndex].length }, () =>
        Array(5).fill(0)
      )
    );

  const [tablas, setTablas] = useState<number[][][]>(crearTablas());

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

  const cargarDatos = async (baja: boolean) => {
    setLoading(true);
    const token = Cookies.get("token");
    if (!token) {
      console.error("Token no encontrado");
      setLoading(false);
      return;
    }

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

    axios
      .post<RawEntry[]>(
        `${process.env.NEXT_PUBLIC_API_URL}/equipos/reporte/tipoEquipos_tipoUso`,
        body,
        { headers: { Authorization: `Bearer ${token}` } }
      )
      .then((res) => {
        const nuevaTablas = Array.from({ length: 4 }, () =>
          Array.from({ length: 3 }, () => Array(5).fill(0))
        );

        for (const item of res.data) {
          const categoria = item.tipo_equipo.trim().toUpperCase();
          const mapping = CATEGORIA_MAP[categoria];
          if (!mapping) continue;

          const { tabla } = mapping;

          let soIndex = -1;

          if (tabla === 3) {
            soIndex = 0;
          } else {
            const soNormalizado = normalizarSO(item.sistema_operativo);
            soIndex = SISTEMAS_POR_TABLA[tabla].indexOf(soNormalizado);
            if (soIndex === -1) continue;
          }

          const usoIndex = USO_INDEX[item.tipo_uso.toUpperCase()];
          if (usoIndex === undefined) continue;

          const total = parseInt(item.total) || 0;

          nuevaTablas[tabla][soIndex][usoIndex] += total;
        }

        setTablas(nuevaTablas);
      })
      .catch((err) => console.error("Error al cargar datos", err))
      .finally(() => setLoading(false));
  };

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

  const renderTabla = (tablaIndex: number) => {
    const datosSO = tablas[tablaIndex];

    const totalesColumnas = Array(5).fill(0);
    for (let soIndex = 0; soIndex < datosSO.length; soIndex++) {
      for (let col = 0; col < 5; col++) {
        totalesColumnas[col] += datosSO[soIndex][col];
      }
    }

    const totalGeneral = totalesColumnas.reduce((a, b) => a + b, 0);

    return (
      <div className={style["tabla-contenedor"]} key={tablaIndex}>
        <table className={style.tabla}>
          <thead>
            <tr>
              <th className={style["azul-marino"]}>
                {TITULOS_TABLAS[tablaIndex]}
              </th>
              <th className={style["rosa-fuerte"]}>Alumnos</th>
              <th className={style["rosa-fuerte"]}>Profesores</th>
              <th className={style["rosa-fuerte"]}>Técnicos Académicos</th>
              <th className={style["rosa-fuerte"]}>Investigadores</th>
              <th className={style["rosa-fuerte"]}>Administrativos</th>
              <th className={style["azul-marino"]}>Total</th>
            </tr>
          </thead>

          <tbody>
            {SISTEMAS_POR_TABLA[tablaIndex].map((so, soIndex) => {
              const valores = datosSO[soIndex];
              const totalFila = valores.reduce((a, b) => a + b, 0);

              return (
                <tr key={so}>
                  <td>{so}</td>
                  {valores.map((valor, colIndex) => (
                    <td key={colIndex}>
                      <div
                        className={`${style["input-contenedor"]} ${loading ? "skeleton" : ""
                          }`}
                      >
                        {!loading ? (
                          <input type="number" value={valor} readOnly />
                        ) : (
                          " "
                        )}
                      </div>
                    </td>
                  ))}
                  <td className={style["total-celda"]}>
                    <div className={loading ? "skeleton" : ""}>
                      {!loading && totalFila}
                    </div>
                  </td>
                </tr>
              );
            })}

            <tr className={style["fila-total"]}>
              <td>Total</td>
              {totalesColumnas.map((t, i) => (
                <td key={i}>
                  <div
                    className={`${style["input-contenedor"]} ${loading ? "skeleton" : ""
                      }`}
                  >
                    {!loading && t}
                  </div>
                </td>
              ))}
              <td className={style["total-celda"]}>
                <div className={loading ? "skeleton" : ""}>
                  {!loading && totalGeneral}
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    );
  };

  return (
    <div className={style["contenedor-pregunta"]}>
      <div className={style["contenedor-censo"]}>
        Censo de equipos de cómputo
      </div>

      <div className={style["pregunta-cuadro"]}>
        Número de equipos de cómputo por cada categoría y perfil de usuario.
        <ToggleButton
          onChange={(estado) => {
            cargarDatos(estado);
          }}
        />
      </div>

      <div className={style["contenedor-tablas"]}>
        {renderTabla(0)}
        {renderTabla(2)}
        {renderTabla(1)}
        {renderTabla(3)}
      </div>
    </div>
  );
}