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

interface AlumnoBitacora {
  tiempo_entrada: string;
  tiempo_asignado: number;
  equipo: {
    ubicacion: string;
    nombre_equipo: string;
  };
}

interface BitacoraAlumnoProps {
  numAcount: string | null;
  date: string | null;
}

function BitacoraAlumno({ numAcount, date }: BitacoraAlumnoProps) {
  const [alumnos, setAlumnos] = useState<AlumnoBitacora[]>([]);

  useEffect(() => {
    if (!numAcount) return;
    if (!date) return;

    axios.post(`${envConfig.apiUrl}/bitacora/equipos-por-dia`, {
      numero_cuenta: numAcount,
      fecha: date,
    })
      .then(res => {
        setAlumnos(res.data);
      })
      .catch(err => {
        console.error(err);
      });
  }, [numAcount, date]);

  return (
    <table>
      <thead>
        <tr>
          <th>Tiempo Entrada</th>
          <th>Tiempo Asignado</th>
          <th>Ubicación del equipo</th>
        </tr>
      </thead>
      <tbody>
        {alumnos.length > 0 ? (
          alumnos.map((alumno, index) => (
            <tr key={index}>
              <td>{new Date(alumno.tiempo_entrada).toLocaleString()}</td>
              <td>{alumno.tiempo_asignado}</td>
              <td>{alumno.equipo.ubicacion}</td>
            </tr>
          ))
        ) : (
          <tr>
            <td colSpan={3} style={{ textAlign: "center" }}>
              No tuvo equipos asignados
            </td>
          </tr>
        )}
      </tbody>

    </table>
  );
}

export default BitacoraAlumno;