"use client";
import React, { useState } from "react";
import "./pregunta7.css";

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

  const [garantia, setGarantia] = useState({
    escritorio: "",
    portatil: "",
    altoRendimiento: "",
  });

  // Función para actualizar datos de Pregunta 7
  const handleChange = (filaIndex: number, colIndex: number, value: string) => {
    const nuevosDatos = [...datos];
    nuevosDatos[filaIndex].valores[colIndex] = value;
    setDatos(nuevosDatos);
  };

  // Función para calcular total de cada fila en Pregunta 7
  const calcularTotal = (valores: string[]) =>
    valores.reduce((acc, val) => acc + (Number(val) || 0), 0);

  return (
    <div className="contenedor-pregunta">
      {/* Pregunta 7 */}
      <div className="contenedor-censo">
        Censo de equipos periféricos - Estado del equipo periférico (impresión y
        digitalización.)
      </div>

      <div className="pregunta-cuadro">
        7. Calcule porcentualmente (%) la antiguedad que tienen los equipos
        periféricos del área universitaria. * (Requerido en el caso de contar
        con Equipo de impresión o digitalización.)
      </div>

      <div className="tabla-contenedor">
        <table className="tabla">
          <thead>
            <tr>
              <th className="azul-marino">% Antiguedad 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, filaIndex) => {
              const total = calcularTotal(fila.valores);
              return (
                <tr key={filaIndex}>
                  <td>{fila.nombre}</td>
                  {fila.valores.map((valor, colIndex) => (
                    <td key={colIndex}>
                      <div className="input-contenedor">
                        <input
                          type="number"
                          value={valor}
                          onChange={(e) =>
                            handleChange(filaIndex, colIndex, e.target.value)
                          }
                        />
                        <span className="porcentaje">%</span>
                      </div>
                    </td>
                  ))}
                  <td
                    className={`total-celda ${
                      total > 100 ? "total-error" : ""
                    }`}
                  >
                    {total.toFixed(2)}%
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}
