"use client";

import { useEffect, useState } from "react";
import styles from "./Page.module.css";

type Equipo = {
  id_equipo: number;
  nombre_equipo: string;
  ubicacion: string;
  activo: {
    data: number[];
  };
  plataforma: {
    nombre: string;
  };
  areaUbicacion: {
    area: string;
  };
};

export default function MachineTableActive() {
  const [machines, setMachines] = useState<Equipo[]>([]);
  const [loading, setLoading] = useState(true);

  const fetchMachines = async () => {
    try {
      const res = await fetch(
        `${process.env.NEXT_PUBLIC_API_URL}/equipo/active`,
        { cache: "no-store" },
      );
      const data = await res.json();
      setMachines(data);
    } catch (error) {
      console.error("Error al cargar equipos", error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchMachines();
  }, []);

  if (loading) {
    return <p>Cargando equipos...</p>;
  }

  return (
    <div className={styles.tableContainer}>
      <table className={styles.machineTable}>
        <thead>
          <tr style={{ fontSize: "15px" }}>
            <th>Ubicación</th>
            <th>Nombre Equipo</th>
            <th>Plataforma</th>
            <th>Área</th>
            <th>Disponible</th>
          </tr>
        </thead>

        <tbody>
          {machines.map((machine) => {
            const disponible = machine.activo.data[0] === 1;

            return (
              <tr key={machine.id_equipo}>
                <td>{machine.ubicacion}</td>
                <td>{machine.nombre_equipo}</td>
                <td className={styles[machine.plataforma.nombre]}>
                  {machine.plataforma.nombre}
                </td>
                <td>{machine.areaUbicacion.area}</td>
                <td>{disponible ? "Sí" : "No"}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}