// react
import React, { useState } from "react";
// application
import AdminLayout from "~/admin/components/AdminLayout";
import ProtectedRoute from "~/admin/components/ProtectedRoute";
import ReportFilters from "~/admin/components/reports/ReportFilters";
import { toast } from "react-toastify";
import * as XLSX from "xlsx";
import { productsApi } from "~/admin/services/productsApi";
import { vehiclesApi } from "~/admin/services/vehiclesApi";
import { IReportFilters } from "~/admin/interfaces/reports";

function ReportesPage() {
  //states
  const [filters, setFilters] = useState<IReportFilters>({
    startDate: "",
    endDate: "",
    type: "productos",
    limit: "",
  });

  const [loading, setLoading] = useState<boolean>(false);

  const handleFilterChange = (name: string, value: string) => {
    setFilters((prev) => ({
      ...prev,
      [name]:
        name === "limit"
          ? value === ""
            ? ""
            : Math.max(1, Number(value) || 1)
          : value,
    }));
  };

  const getReportProducts = async () => {
    const hasDateFilter =
      filters.startDate.length > 0 && filters.endDate.length > 0;
    const maxItems = filters.limit === "" ? undefined : filters.limit;

    return productsApi.getAllPaginated({
      maxItems,
      startDate: hasDateFilter ? filters.startDate : undefined,
      endDate: hasDateFilter ? filters.endDate : undefined,
    });
  };

  const handleExport = async () => {
    try {
      setLoading(true);

      let data: any[] = [];
      let fileName = "";

      switch (filters.type) {
        case "productos":
          const products = await getReportProducts();

          data = products.map((p) => ({
            ID: p.id,
            Nombre: p.name,
            // Descripción: p.description || "",
            Código: p.code,
            Referencia: p.reference || "",
            // "Precio $": p.price || `$ ${p.price}`,
            "Precio Máximo $": p.maximumPrice || "",
            "Precio Oferta $": p.offerPrice || "",
            "Precio en Bs": p.bsPrice || "",
            "Descuento %": p.discount ? `${p.discount}%` : "0%",
            Modelo: p.model || "",
            "Número de Piezas": p.numberPieces || "",
            // Motor: p.motor || "",
            // Marca: p.brand || "",
            Vehículo: p.vehicleId || "",
          }));
          fileName = `reporte_productos_${
            new Date().toISOString().split("T")[0]
          }.xlsx`;
          break;

        case "vehiculos":
          const vehicles = await vehiclesApi.getAllModels(true);
          data = vehicles.map((v) => ({
            ID: v.id,
            Marca: v.brand_name,
            Modelo: v.name,
          }));
          fileName = `reporte_vehiculos_${
            new Date().toISOString().split("T")[0]
          }.xlsx`;
          break;

        case "ofertas":
          const allProductsForOffers = await getReportProducts();
          const offers = allProductsForOffers.filter(
            (p) => (p.discount || 0) > 0
          );

          data = offers.map((p) => ({
            ID: p.id,
            Nombre: p.name,
            Código: p.code,
            "Precio Oferta": `$ ${p.offerPrice}`,
            "Precio Máximo": p.maximumPrice || "",
            Descuento: `${p.discount}%`,
            "Número de Piezas": p.numberPieces || "",
          }));
          fileName = `reporte_ofertas_${
            new Date().toISOString().split("T")[0]
          }.xlsx`;
          break;
      }

      const ws = XLSX.utils.json_to_sheet(data);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, "Reporte");
      XLSX.writeFile(wb, fileName);

      toast.success("Reporte exportado correctamente");
    } catch (error: any) {
      toast.error(error.message || "Error al exportar reporte");
    } finally {
      setLoading(false);
    }
  };

  return (
    <ProtectedRoute>
      <AdminLayout>
        <div className="page-header">
          <h1>Reportes</h1>
        </div>

        <div className="reportes-container">
          <div className="card">
            <div className="card-header">
              <h3>Filtros de Reporte</h3>
            </div>
            <div className="card-body">
              <ReportFilters filters={filters} onChange={handleFilterChange} />
              <div className="mt-4">
                <button
                  className="btn btn-primary"
                  onClick={handleExport}
                  disabled={loading}
                >
                  {loading ? (
                    <>
                      <span className="spinner-border spinner-border-sm mr-2" />
                      Exportando...
                    </>
                  ) : (
                    <>
                      <i className="fas fa-file-excel" /> Exportar a Excel
                    </>
                  )}
                </button>
              </div>
            </div>
          </div>

          <div className="card mt-4">
            <div className="card-header">
              <h3>Información</h3>
            </div>
            <div className="card-body">
              <p className="text-muted">
                Selecciona el tipo de reporte y filtra los datos según tus
                necesidades. El reporte se exportará en formato Excel.
              </p>
              <ul>
                <li>
                  <strong>Productos:</strong> Lista completa de productos
                </li>
                <li>
                  <strong>Vehículos:</strong> Lista completa de vehículos
                </li>
                <li>
                  <strong>Ofertas:</strong> Productos con descuentos activos
                </li>
              </ul>
            </div>
          </div>
        </div>
      </AdminLayout>
    </ProtectedRoute>
  );
}

export default ReportesPage;