import React, { useState, useRef } from "react";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";
import jsPDF from "jspdf";
import html2canvas from "html2canvas";

const Reporte = () => {
  const chartRef = useRef(null); // Referencia para capturar la gráfica

  // Datos simulados de ventas
  const ventasDiarias = [
    { fecha: "2025-03-01", boletos: 20 },
    { fecha: "2025-03-02", boletos: 35 },
    { fecha: "2025-03-03", boletos: 50 },
  ];

  const ventasSemanales = [
    { semana: "Semana 1", boletos: 120 },
    { semana: "Semana 2", boletos: 150 },
    { semana: "Semana 3", boletos: 170 },
  ];

  const ventasMensuales = [
    { mes: "Enero", boletos: 500 },
    { mes: "Febrero", boletos: 650 },
    { mes: "Marzo", boletos: 700 },
  ];

  const [selectedTab, setSelectedTab] = useState("diario");

  // Obtener datos según la pestaña activa
  const getData = () => {
    switch (selectedTab) {
      case "diario":
        return ventasDiarias;
      case "semanal":
        return ventasSemanales;
      case "mensual":
        return ventasMensuales;
      default:
        return [];
    }
  };

  // Calcular el total de boletos vendidos
  const totalBoletos = getData().reduce((acc, item) => acc + item.boletos, 0);

  // Función para generar y descargar el PDF
  const generarPDF = async () => {
    const pdf = new jsPDF();
    pdf.setFontSize(18);
    pdf.text("Reporte de Ventas", 10, 10);
    pdf.setFontSize(14);
    pdf.text(`Tipo de Reporte: ${selectedTab.toUpperCase()}`, 10, 20);
    pdf.text(`Total de Boletos Vendidos: ${totalBoletos}`, 10, 30);

    // Capturar la gráfica como imagen
    if (chartRef.current) {
      const canvas = await html2canvas(chartRef.current);
      const imgData = canvas.toDataURL("image/png");
      pdf.addImage(imgData, "PNG", 10, 40, 180, 90);
    }

    pdf.save(`reporte_${selectedTab}.pdf`);
  };

  return (
    <div className="w-full max-w-3xl mx-auto p-4">
      <h2 className="text-2xl font-bold mb-4">Reporte de Ventas</h2>
      <Tabs defaultValue="diario" onValueChange={setSelectedTab} className="w-full">
        <TabsList className="flex space-x-2 mb-4">
          <TabsTrigger value="diario">Diario</TabsTrigger>
          <TabsTrigger value="semanal">Semanal</TabsTrigger>
          <TabsTrigger value="mensual">Mensual</TabsTrigger>
          <img
            src="/pdf.svg"
            alt="pdf"
            className="h-7 w-7 cursor-pointer"
            onClick={generarPDF}
          />
        </TabsList>

        <Card>
          <CardHeader>
            <CardTitle>
              Total de Boletos Vendidos: <span className="text-blue-600">{totalBoletos}</span>
            </CardTitle>
          </CardHeader>
          <CardContent ref={chartRef}>
            <ResponsiveContainer width="100%" height={300}>
              <BarChart data={getData()}>
                <XAxis dataKey={selectedTab === "diario" ? "fecha" : selectedTab === "semanal" ? "semana" : "mes"} />
                <YAxis />
                <Tooltip />
                <Bar dataKey="boletos" fill="#3b82f6" />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>
      </Tabs>
    </div>
  );
};

export default Reporte;
