"use client";
import React, { useMemo } from "react";
import { Loader2 } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { SubscriptionCard } from "@/components/payment/blocks/subscription-card";
import { api } from "@/lib/trpc/client";
import { PlanType } from "@/server/modules/payment/types/plan-type.enum";

export const SubscriptionList: React.FC = () => {
    const { isLoading: isUserLoading, data: user } = api.auth.user.useQuery();

    const { isLoading: isOrganizationsLoading, data: organizations = [] } = api.organization.list.useQuery(
        {
            with: ["members"]
        },
        {
            placeholderData: (prevData = []) => prevData
        }
    );

    const { isLoading: isPersonalSubscriptionsLoading, data: personalSubscriptions = [] } =
        api.payment.subscription.list.useQuery(
            {
                with: ["price"],
                planType: PlanType.PERSONAL
            },
            {
                placeholderData: (prevData = []) => prevData,
                refetchOnWindowFocus: true
            }
        );

    const { isLoading: isBusinessSubscriptionsLoading, data: businessSubscriptions = [] } =
        api.payment.subscription.list.useQuery(
            {
                with: ["price"],
                planType: PlanType.BUSINESS
            },
            {
                placeholderData: (prevData = []) => prevData,
                refetchOnWindowFocus: true
            }
        );

    const isLoading = useMemo(() => {
        return (
            isUserLoading || isOrganizationsLoading || isPersonalSubscriptionsLoading || isBusinessSubscriptionsLoading
        );
    }, [isUserLoading, isOrganizationsLoading, isPersonalSubscriptionsLoading, isBusinessSubscriptionsLoading]);

    if (isLoading) {
        return (
            <div className="flex items-center justify-center p-8">
                <Loader2 className="text-client-red h-8 w-8 animate-spin" />
            </div>
        );
    }

    if (personalSubscriptions.length === 0 && businessSubscriptions.length === 0) {
        return null;
    }

    return (
        <div className="space-y-8">
            {personalSubscriptions.length > 0 && (
                <section className="space-y-4">
                    <h2 className="text-lg font-semibold">Personlige abonnementer</h2>

                    <div className="space-y-4">
                        {personalSubscriptions.map((subscription) => {
                            return (
                                <div key={subscription.id}>
                                    <SubscriptionCard key={subscription.id} subscription={subscription} />
                                </div>
                            );
                        })}
                    </div>
                </section>
            )}

            {businessSubscriptions.length > 0 && (
                <section className="space-y-4">
                    <h2 className="text-lg font-semibold">Virksomhedsabonnementer</h2>

                    <div className="space-y-4">
                        {businessSubscriptions.map((subscription) => {
                            const organization = organizations.find((o) => o.id === subscription.referenceId);
                            const member =
                                user && organization
                                    ? organization.members.find((m) => m.userId === user.id)
                                    : undefined;

                            return (
                                <div key={subscription.id}>
                                    <SubscriptionCard
                                        subscription={subscription}
                                        organization={organization}
                                        member={member}
                                    />
                                </div>
                            );
                        })}
                    </div>
                </section>
            )}
        </div>
    );
};