'use client'

import { useEffect, useState } from 'react'
import styles from './TableAntiguedad.module.css'
import axios from 'axios'
import DownloadTable from '@/components/Dowload/tabla'

interface Props {
  filtros: any
  count: boolean
}

const api_url = process.env.NEXT_PUBLIC_API_URL;

export default function TableAntiguedad({ filtros, count }: Props) {

  const [data, setData] = useState<any[]>([])

  useEffect(() => {
    const getUso = async () => {
      const endpoint = count
        ? `${api_url}/equipos/tabla/count`
        : `${api_url}/equipos/tabla`

      const response = await axios.post(endpoint, filtros)
      setData(response.data)
    }

    getUso()
  }, [filtros, count])

  const columnas = data.length > 0 ? Object.keys(data[0]) : []

  return (
    <div className={styles.container}>
      {count ? <DownloadTable filtros={filtros} count={true} /> : <DownloadTable filtros={filtros} count={false} />}
      <table className={styles.table}>

        <thead>
          <tr>
            {columnas.map((col) => (
              <th key={col}>{formatearTitulo(col)}</th>
            ))}
          </tr>
        </thead>

        <tbody>
          {data.length === 0 ? (
            <tr>
              <td colSpan={columnas.length} className={styles.empty}>
                No hay datos
              </td>
            </tr>
          ) : (
            data.map((item, index) => (
              <tr key={index}>
                {columnas.map((col) => (
                  <td key={col}>
                    {item[col] ?? '-'}
                  </td>
                ))}
              </tr>
            ))
          )}
        </tbody>

      </table>
    </div>
  )
}

function formatearTitulo(col: string) {
  const nombres: any = {
    inventario: 'No. Inventario',
    adscripcion: 'Adscripción',
    antiguedad: 'Antigüedad',
    procesador: 'Procesador',
    sistema_operativo: 'Sistema Operativo',
    uso: 'Uso'
  }

  return nombres[col] || col
}