import { useState, useEffect } from "react";
import { createClient } from "@supabase/supabase-js";
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import "react-tabs/style/react-tabs.css";
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";
import html2canvas from "html2canvas";
import jsPDF from "jspdf";

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
);
   
export default function Reporte() {
  const [ventas, setVentas] = useState([]);
  const [filtro, setFiltro] = useState("diario"); // Estado para el filtro de fecha (diario, semanal, mensual)

  // Función para obtener los datos de ventas de Supabase
  useEffect(() => {
    const fetchVentas = async () => {
      const { data, error } = await supabase.from("ventas").select("*");
      if (error) {
        console.error("Error al obtener las ventas:", error.message);
      } else {
        console.log("Datos obtenidos:", data);
        setVentas(data);
      }
    };

    fetchVentas();
  }, []);

  // Función para filtrar las ventas según el rango de fechas
  const filtrarVentas = () => {
    const hoy = new Date();
    let fechaInicio;

    switch (filtro) {
      case "diario":
        fechaInicio = new Date(hoy.setHours(0, 0, 0, 0)); // Inicio del día
        return ventas.filter((venta) => {
          const fechaVenta = new Date(venta.fecha_venta);
          return fechaVenta >= fechaInicio;
        });
      case "semanal":
        const inicioSemana = hoy.getDate() - hoy.getDay(); // Día lunes de esta semana
        fechaInicio = new Date(hoy.setDate(inicioSemana));
        return ventas.filter((venta) => {
          const fechaVenta = new Date(venta.fecha_venta);
          return fechaVenta >= fechaInicio;
        });
      case "mensual":
        fechaInicio = new Date(hoy.getFullYear(), hoy.getMonth(), 1); // Primer día del mes
        return ventas.filter((venta) => {
          const fechaVenta = new Date(venta.fecha_venta);
          return fechaVenta >= fechaInicio;
        });
      default:
        return ventas;
    }
  };

  // Función para generar el PDF
  const generarPDF = async () => {
    const input = document.getElementById("reporte");
    const canvas = await html2canvas(input);
    const imgData = canvas.toDataURL("image/png");
    const pdf = new jsPDF("p", "mm", "a4");
    pdf.addImage(imgData, "PNG", 10, 10, 190, 0);
    pdf.save("Reporte_Ventas.pdf");
  };

  // Datos filtrados según el filtro seleccionado
  const ventasFiltradas = filtrarVentas();

  return (
    <div>
      <h1>Reporte de Ventas</h1>

      {/* Botón para generar PDF */}
      <button onClick={generarPDF}>Descargar PDF</button>

      {/* Filtros de fechas */}
      <div>
        <button onClick={() => setFiltro("diario")}>Diario</button>
        <button onClick={() => setFiltro("semanal")}>Semanal</button>
        <button onClick={() => setFiltro("mensual")}>Mensual</button>
      </div>

      <Tabs>
        <TabList>
          <Tab>Tabla</Tab>
          <Tab>Gráfico de Ventas</Tab>
        </TabList>

        {/* Sección de Tabla */}
        <TabPanel>
          <div id="reporte">
            <table border="1">
              <thead>
                <tr>
                  <th>ID Venta</th>
                  <th>ID Boleto</th>
                  <th>ID Vendedor</th>
                  <th>Fecha Venta</th>
                  <th>Monto</th>
                </tr>
              </thead>
              <tbody>
                {ventasFiltradas.map((venta) => (
                  <tr key={venta.venta_id}>
                    <td>{venta.venta_id}</td>
                    <td>{venta.boleto_id}</td>
                    <td>{venta.vendedor_id}</td>
                    <td>{new Date(venta.fecha_venta).toLocaleString()}</td>
                    <td>${venta.monto}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </TabPanel>

        {/* Sección de Gráfico */}
        <TabPanel>
          <ResponsiveContainer width="100%" height={300}>
            <BarChart data={ventasFiltradas} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
              <XAxis dataKey="venta_id" />
              <YAxis />
              <Tooltip />
              <Bar dataKey="monto" fill="#8884d8" />
            </BarChart>
          </ResponsiveContainer>
        </TabPanel>
      </Tabs>
    </div>
  );
}
