"use client";

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


interface ServicioReporte {
  id_servicio: number;
  servicio: string;
  total: string;
}

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

function PorServicio({ desde, hasta }: Props) {
  const [servicios, setServicios] = useState<ServicioReporte[]>([]);
  const [loading, setLoading] = useState(false);

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

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

        setServicios(res.data);
      } catch (error) {
        console.error("Error al obtener reporte por servicio", error);
      } finally {
        setLoading(false);
      }
    };

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

  return (
    <div style={{ position: "relative" }}>

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

        <table>
          <thead>
            <tr>
              <th>Servicio</th>
              <th>Monto total</th>
            </tr>
          </thead>

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

            {servicios.map((servicio) => (
              <tr key={servicio.id_servicio}>
                <td>{servicio.servicio}</td>
                <td>${Number(servicio.total).toFixed(2)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

export default PorServicio;