front-AT/app/(private)/Inscritos/Inscripciones.tsx

"use client";
import { envConfig } from "@/app/lib/config";
import { useEffect, useState } from "react";
import axios from "axios";
import Cookies from "js-cookie";
import "./inscripciones.css";


interface Periodo {
  id_periodo: number;
  semestre: string;
}

interface ApiResponse {
  carrera: string;
  profesor: string;      
  femenino: string;
  masculino: string;
  total: string;
}


type TipoConteo = "WINDOWS" | "MACINTOSH" | "LINUX" | "PROFESORES";

interface TablaRow {
  carrera: string;
  WINDOWS: number;
  MACINTOSH: number;
  LINUX: number;
  PROFESORES: number;
  TOTAL: number;
  femenino: number;
  masculino: number;
}

export default function Inscripciones() {
  const [periodo, setPeriodo] = useState<Periodo[]>([]);
  const [selectedPeriodo, setSelectedPeriodo] = useState<number | null>(null);
  const [tablaData, setTablaData] = useState<TablaRow[]>([]);

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


  useEffect(() => {
    const getPeriodo = async () => {
      const response = await axios.get(`${envConfig.apiUrl}/periodo`, { headers });
      setPeriodo(response.data);
    };
    getPeriodo();
  }, []);

  
  const handleBuscar = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!selectedPeriodo) return;

    const response = await axios.get(
      `${envConfig.apiUrl}/alumno-inscrito/inscritos/${selectedPeriodo}`,
      { headers }
    );

    const data: ApiResponse[] = response.data;


    const agrupado: Record<string, TablaRow> = {};

    data.forEach((item) => {
      const carrera = item.carrera;

     
      if (!agrupado[carrera]) {
        agrupado[carrera] = {
          carrera: carrera,
          WINDOWS: 0,
          MACINTOSH: 0,
          LINUX: 0,
          PROFESORES: 0,
          TOTAL: 0,
          femenino: 0,
          masculino: 0,
        };
      }

      const fila = agrupado[carrera];
      const tipoProfesor = item.profesor as TipoConteo; 
      const totalPlataforma = Number(item.total);
      const fem = Number(item.femenino);
      const masc = Number(item.masculino);

    
      fila[tipoProfesor] += totalPlataforma;
      fila.TOTAL += totalPlataforma;
      fila.femenino += fem;
      fila.masculino += masc;
    });

    setTablaData(Object.values(agrupado));
  };

  return (
    <section className="containerSection">
      <h2 className="title">INSCRITOS</h2>

      <form className="containerForm" onSubmit={handleBuscar}>
        <label>Seleccione el periodo</label>
        <div className="groupInput">
          <select
            onChange={(e) => setSelectedPeriodo(Number(e.target.value))}
            defaultValue=""
          >
            <option value="" disabled>
              Seleccione
            </option>
            {periodo.map((p) => (
              <option key={p.id_periodo} value={p.id_periodo}>
                {p.semestre}
              </option>
            ))}
          </select>

          <button className="button buttonSearch" type="submit">
            Buscar
          </button>
        </div>
      </form>

      <div className="containerTable">
        <table>
          <thead>
            <tr>
              <th>Carrera</th>
              <th>Femenino</th>
              <th>Masculino</th>
              <th>WINDOWS</th>
              <th>MACINTOSH</th>
              <th>LINUX</th>
              <th>Profesores</th>
              <th>Total</th>
            </tr>
          </thead>

          <tbody>
            {tablaData.map((row, index) => (
              <tr key={index}>
                <td className="textLeft">{row.carrera}</td>
                <td>{row.femenino}</td>
                <td>{row.masculino}</td>
                <td>{row.WINDOWS}</td>
                <td>{row.MACINTOSH}</td>
                <td>{row.LINUX}</td>
                <td>{row.PROFESORES}</td>
                <td>{row.TOTAL}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}