"use client";

import { useEffect, useState } from "react";
import axios from "axios";
import DownloadReporteXLSX from "../Dowload/Reporte";

interface Recibo {
  id_recibo: number;
  folio_recibo: string;
  fecha_recibo: string;
  fecha_registro: string;
  monto: string;
  user: {
    usuario: string;
  };
}

interface Props {
  desde: string | null;
  hasta: string | null;
}

function PorRecibos({ desde, hasta }: Props) {
  const [recibos, setRecibos] = useState<Recibo[]>([]);
  const [loading, setLoading] = useState(false);

  const columns = [
    { header: "Folio", key: "folio", width: 15 },
    { header: "Monto", key: "monto", width: 15 },
    { header: "Fecha Recibo", key: "fechaRecibo", width: 18 },
    { header: "Fecha Registro", key: "fechaRegistro", width: 22 },
    { header: "Usuario", key: "usuario", width: 20 },
  ];

  useEffect(() => {
    if (!desde || !hasta) return;

    const fetchRecibos = async () => {
      setLoading(true);
      try {
        const res = await axios.post(
          `${process.env.NEXT_PUBLIC_API_URL}/recibo/rango`,
          { desde, hasta }
        );

        setRecibos(res.data);
      } catch (error) {
        console.error("Error al obtener recibos", error);
      } finally {
        setLoading(false);
      }
    };

    fetchRecibos();
  }, [desde, hasta]);

  const formatearFechaMX = (fechaISO: string) => {
    return new Date(fechaISO).toLocaleString("es-MX", {
      timeZone: "America/Mexico_City",
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
      hour: "2-digit",
      minute: "2-digit",
      second: "2-digit",
    });
  };


  return (
    <div style={{ position: "relative" }}>
      {recibos.length > 0 && <DownloadReporteXLSX data={recibos} columns={columns} />}

      <div
        style={{
          overflow: "auto",
          height: "270px",
          scrollbarColor: "#2563eb white",
        }}
      >
        {loading && <p>Cargando...</p>}

        <table>
          <thead>
            <tr>
              <th>Folio</th>
              <th>Monto</th>
              <th>fecha recibo</th>
              <th>fecha registro</th>
              <th>Usuario</th>
            </tr>
          </thead>

          <tbody>
            {!loading && recibos.length === 0 && (
              <tr>
                <td colSpan={5}>No hay recibos en este rango</td>
              </tr>
            )}

            {recibos.map((recibo) => (
              <tr key={recibo.id_recibo}>
                <td>{recibo.folio_recibo}</td>
                <td>${Number(recibo.monto).toFixed(2)}</td>
                <td>{recibo.fecha_recibo}</td>
                <td>{formatearFechaMX(recibo.fecha_registro)}</td>

                <td>{recibo.user.usuario}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

export default PorRecibos;