import React, { useEffect } from "react";
import { useQuery } from "@tanstack/react-query";
import { base44 } from "@/api/base44Client";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Loader2, DollarSign, TrendingUp, Users } from "lucide-react";

export default function CommissionsReport({ companyId, dateRange, onDataReady }) {
    const { data: commissions = [], isLoading } = useQuery({
        queryKey: ['commissions-report', companyId, dateRange],
        queryFn: async () => {
            const data = await base44.entities.Commission.filter({ company_id: companyId });
            return data.filter(c => {
                const commDate = new Date(c.commission_date);
                return commDate >= new Date(dateRange.startDate) && commDate <= new Date(dateRange.endDate);
            });
        },
        enabled: !!companyId
    });

    const { data: members = [] } = useQuery({
        queryKey: ['network-members', companyId],
        queryFn: () => base44.entities.NetworkMember.filter({ company_id: companyId }),
        enabled: !!companyId
    });

    // Group commissions by member
    const commissionsByMember = commissions.reduce((acc, comm) => {
        if (!acc[comm.member_id]) {
            acc[comm.member_id] = {
                member_id: comm.member_id,
                member_name: comm.member_name,
                total_commission: 0,
                total_sales: 0,
                commission_count: 0,
                by_type: {}
            };
        }
        acc[comm.member_id].total_commission += comm.commission_amount || 0;
        acc[comm.member_id].total_sales += comm.sale_amount || 0;
        acc[comm.member_id].commission_count += 1;
        
        const type = comm.commission_type || 'other';
        if (!acc[comm.member_id].by_type[type]) {
            acc[comm.member_id].by_type[type] = 0;
        }
        acc[comm.member_id].by_type[type] += comm.commission_amount || 0;
        
        return acc;
    }, {});

    const reportData = Object.values(commissionsByMember);
    const totalCommissions = reportData.reduce((sum, r) => sum + r.total_commission, 0);
    const totalSales = reportData.reduce((sum, r) => sum + r.total_sales, 0);

    useEffect(() => {
        if (reportData.length > 0) {
            onDataReady({
                title: "Reporte de Comisiones por Miembro",
                fileName: "comisiones",
                sheetName: "Comisiones",
                data: reportData.map(r => ({
                    "Miembro": r.member_name,
                    "Ventas Generadas": r.total_sales,
                    "Comisiones Totales": r.total_commission,
                    "Cantidad": r.commission_count,
                    "Promedio por Venta": r.commission_count > 0 ? (r.total_commission / r.commission_count) : 0
                })),
                columns: ["Miembro", "Ventas Generadas", "Comisiones", "Cant.", "Promedio"],
                rows: reportData.map(r => [
                    r.member_name,
                    `$${r.total_sales.toLocaleString()}`,
                    `$${r.total_commission.toLocaleString()}`,
                    r.commission_count,
                    `$${(r.commission_count > 0 ? (r.total_commission / r.commission_count) : 0).toLocaleString()}`
                ])
            });
        }
    }, [reportData, onDataReady]);

    if (isLoading) {
        return (
            <div className="p-8 text-center">
                <Loader2 className="w-8 h-8 animate-spin mx-auto text-blue-600" />
            </div>
        );
    }

    if (reportData.length === 0) {
        return (
            <div className="p-8 text-center text-gray-500">
                <DollarSign className="w-12 h-12 mx-auto mb-3 text-gray-400" />
                <p>No hay comisiones en este período</p>
            </div>
        );
    }

    return (
        <div className="p-6 space-y-6">
            {/* Summary Stats */}
            <div className="grid md:grid-cols-3 gap-4">
                <Card className="bg-blue-50 border-blue-200">
                    <CardContent className="pt-6">
                        <div className="flex items-center justify-between">
                            <div>
                                <p className="text-sm text-blue-700">Comisiones Totales</p>
                                <p className="text-2xl font-bold text-blue-900">
                                    ${totalCommissions.toLocaleString()}
                                </p>
                            </div>
                            <DollarSign className="w-8 h-8 text-blue-600" />
                        </div>
                    </CardContent>
                </Card>
                <Card className="bg-indigo-50 border-indigo-200">
                    <CardContent className="pt-6">
                        <div className="flex items-center justify-between">
                            <div>
                                <p className="text-sm text-indigo-700">Ventas Generadas</p>
                                <p className="text-2xl font-bold text-indigo-900">
                                    ${totalSales.toLocaleString()}
                                </p>
                            </div>
                            <TrendingUp className="w-8 h-8 text-indigo-600" />
                        </div>
                    </CardContent>
                </Card>
                <Card className="bg-purple-50 border-purple-200">
                    <CardContent className="pt-6">
                        <div className="flex items-center justify-between">
                            <div>
                                <p className="text-sm text-purple-700">Miembros Activos</p>
                                <p className="text-2xl font-bold text-purple-900">
                                    {reportData.length}
                                </p>
                            </div>
                            <Users className="w-8 h-8 text-purple-600" />
                        </div>
                    </CardContent>
                </Card>
            </div>

            {/* Table */}
            <Card>
                <CardHeader>
                    <CardTitle>Detalle por Miembro</CardTitle>
                </CardHeader>
                <CardContent>
                    <div className="overflow-x-auto">
                        <table className="w-full">
                            <thead className="bg-gray-50 border-b">
                                <tr>
                                    <th className="text-left p-3 text-sm font-semibold">Miembro</th>
                                    <th className="text-right p-3 text-sm font-semibold">Ventas</th>
                                    <th className="text-right p-3 text-sm font-semibold">Comisiones</th>
                                    <th className="text-right p-3 text-sm font-semibold">Cantidad</th>
                                    <th className="text-right p-3 text-sm font-semibold">Promedio</th>
                                </tr>
                            </thead>
                            <tbody>
                                {reportData.map((row, index) => (
                                    <tr key={index} className="border-b hover:bg-gray-50">
                                        <td className="p-3 font-medium">{row.member_name}</td>
                                        <td className="p-3 text-right">${row.total_sales.toLocaleString()}</td>
                                        <td className="p-3 text-right font-semibold text-blue-600">
                                            ${row.total_commission.toLocaleString()}
                                        </td>
                                        <td className="p-3 text-right">{row.commission_count}</td>
                                        <td className="p-3 text-right">
                                            ${(row.commission_count > 0 ? (row.total_commission / row.commission_count) : 0).toLocaleString()}
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                            <tfoot className="bg-gray-50 font-bold">
                                <tr>
                                    <td className="p-3">TOTAL</td>
                                    <td className="p-3 text-right">${totalSales.toLocaleString()}</td>
                                    <td className="p-3 text-right text-blue-600">${totalCommissions.toLocaleString()}</td>
                                    <td className="p-3 text-right">{commissions.length}</td>
                                    <td className="p-3"></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </CardContent>
            </Card>
        </div>
    );
}