"use client";
import { envConfig } from "@/app/lib/config";
import { useEffect, useState } from "react";
import axios from "axios";

import "./inscripciones.css"

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

interface ApiResponse {
  carrera: string;
  genero: string | null;
  profesor: string;
  total: string;
}

interface TablaRow {
  carrera: string;
  genero: string | null;
  WINDOWS: number;
  MACINTOSH: number;
  LINUX: number;
  PROFESORES: number;
  TOTAL: number;
}

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

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

  useEffect(() => {
    const getPeriodo = async () => {
      const response = await axios.get(`${envConfig.apiUrl}/periodo`);
      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}`
    );

    const data: ApiResponse[] = response.data;

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

    data.forEach((item) => {
      const generoNormalizado =
        item.genero === "F" || item.genero === "Femenino"
          ? "Femenino"
          : item.genero === "M" || item.genero === "Masculino"
            ? "Masculino"
            : "-";

      const key = `${item.carrera}_${generoNormalizado}`;

      if (!agrupado[key]) {
        agrupado[key] = {
          carrera: item.carrera,
          genero: generoNormalizado,
          WINDOWS: 0,
          MACINTOSH: 0,
          LINUX: 0,
          PROFESORES: 0,
          TOTAL: 0,
        };
      }

      const tipo = item.profesor as TipoConteo;
      const cantidad = Number(item.total);

      agrupado[key][tipo] += cantidad;
      agrupado[key].TOTAL += cantidad;
    });

    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>Genero</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.genero ?? "-"}</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>
  );
}