"use client";
import React, { useMemo, useCallback } from "react";
import { CreditCard, Calendar, ExternalLink, Loader2, Building2, Users } from "lucide-react";
import { toast } from "sonner";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import formatDate from "@/lib/utils/format-date";
import { api } from "@/lib/trpc/client";
import type { AppRouterOutput } from "@/lib/trpc/router";
import { MemberRole } from "@/server/modules/organization/types/member-role.enum";
import { PlanType } from "@/server/modules/payment/types/plan-type.enum";
import { SubscriptionStatus } from "@/server/modules/payment/types/subscription-status.enum";
import { SubscriptionProvider } from "@/server/modules/payment/types/subscription-provider.enum";
import { PlanVariant } from "@/server/modules/payment/types/plan-variant.enum";
import { PricePeriodHelpers } from "@/server/modules/payment/types/price-period.enum";
import Link from "next/link";
import { Routes } from "@/config/routes";

type Props = {
    subscription: AppRouterOutput["payment"]["subscription"]["list"][number];
    organization?: AppRouterOutput["organization"]["list"][number] | null;
    member?: AppRouterOutput["organization"]["list"][number]["members"][number] | null;
};

export const SubscriptionCard: React.FC<Props> = (props) => {
    const { subscription, organization, member } = props;

    const utils = api.useUtils();

    const restoreMutation = api.payment.subscription.restore.useMutation({
        async onSuccess() {
            toast.success("Abonnement afmeldt. Du vil have adgang indtil periodens udløb.");

            await utils.payment.subscription.invalidate();
        },
        onError(error) {
            if (error.message) {
                toast.error("Fejl ved afmeldelse: " + error.message);
            } else {
                toast.error("Der opstod en fejl ved afmeldelse");
            }
        }
    });

    const completeMutation = api.payment.subscription.complete.useMutation({
        async onSuccess() {
            await utils.payment.subscription.invalidate();
        }
    });

    const cancelMutation = api.payment.subscription.cancel.useMutation({
        async onSuccess() {
            await utils.payment.subscription.invalidate();
        },
        onError(error) {
            if (error.message) {
                toast.error("Fejl ved afmeldelse: " + error.message);
            } else {
                toast.error("Der opstod en fejl ved afmeldelse");
            }
        }
    });

    const upgradeMutation = api.payment.subscription.upgrade.useMutation({
        async onSuccess() {
            await utils.payment.subscription.invalidate();
        }
    });

    const portalMutation = api.payment.subscription.portal.useMutation({
        onError(error) {
            if (error.message) {
                toast.error("Fejl ved åbning af faktureringsportal: " + error.message);
            } else {
                toast.error('Kundeportalen er ikke konfigureret endnu. Brug "Opgrader" knappen i stedet.');
            }
        }
    });

    const isManager = useMemo(() => {
        if (subscription.price?.plan?.type === PlanType.PERSONAL) {
            return true;
        }

        if (!member) {
            return false;
        }

        return [MemberRole.OWNER, MemberRole.ADMIN].includes(member.role);
    }, [subscription, member]);

    const isBusiness = useMemo(() => {
        return subscription.price?.plan?.type === PlanType.BUSINESS;
    }, [subscription]);

    const canUpgradeToPlus = useMemo(() => {
        return (
            subscription?.price?.plan?.type === PlanType.PERSONAL &&
            subscription?.price?.plan?.variant !== PlanVariant.BASIC
        );
    }, [subscription]);

    const displayPlanName = useMemo(() => {
        if (!subscription.price) {
            return "";
        }

        return `${subscription.price.plan?.name || ""} (${PricePeriodHelpers.getLabel(subscription.price.period)})`;
    }, [subscription]);

    const getStatusBadge = (status: string, cancelAtPeriodEnd?: boolean) => {
        // If active but set to cancel at period end, show different badge
        if (status === SubscriptionStatus.ACTIVE && cancelAtPeriodEnd) {
            return <Badge variant='secondary'>Afmeldt (aktiv til periodeafslutning)</Badge>;
        }

        const statusConfig = {
            active: { variant: "default" as const, label: "Aktiv" },
            trialing: { variant: "secondary" as const, label: "Prøveperiode" },
            canceled: { variant: "destructive" as const, label: "Afmeldt" },
            past_due: { variant: "destructive" as const, label: "Forfalden" },
            unpaid: { variant: "destructive" as const, label: "Ubetalt" }
        };

        const config = statusConfig[status as keyof typeof statusConfig] || {
            variant: "secondary" as const,
            label: status
        };

        return <Badge variant={config.variant}>{config.label}</Badge>;
    };

    const handlePortal = useCallback(async () => {
        const res = await portalMutation.mutateAsync({
            id: subscription.id
        });

        if (res.url) {
            window.open(res.url, "_self");
        }
    }, [portalMutation, subscription]);

    const handleUpgrade = useCallback(async () => {
        const res = await upgradeMutation.mutateAsync({
            id: subscription.id
        });

        if (res.url) {
            window.open(res.url, "_self");
        }

        // TODO: Move to subscrption service

        // try {
        //     // Determine the upgrade path based on current plan
        //     let targetPlan = "";
        //
        //     if(currentPlan === "basis") {
        //         targetPlan = "plus";
        //     }
        //     else if(currentPlan === "basis-annual") {
        //         targetPlan = "plus-annual";
        //     }
        //
        //     if(!targetPlan) {
        //         toast.error("Ingen opgradering tilgængelig for denne plan");
        //         return;
        //     }
        //
        //     console.log("📞 [UPGRADE] Calling API with target plan:", targetPlan);
        //
        //     // Use custom API endpoint to create upgrade checkout session
        //     // This bypasses the Customer Portal configuration requirements
        //     const response = await fetch("/api/subscriptions/upgrade", {
        //         method: "POST",
        //         headers: {
        //             "Content-Type": "application/json"
        //         },
        //         body: JSON.stringify({
        //             currentSubscriptionId,
        //             targetPlan,
        //             successUrl: `${window.location.origin}/payments/success?upgrade=true`,
        //             cancelUrl: window.location.href
        //         })
        //     });
        //
        //     const result = await response.json();
        //
        //     console.log("📥 [UPGRADE] API Response:", { ok: response.ok, result });
        //
        //     if(!response.ok || result.error) {
        //         console.error("❌ [UPGRADE] Error:", result.error);
        //         toast.error("Fejl ved opgradering: " + (result.error || "Ukendt fejl"));
        //         return;
        //     }
        //
        //     if(result.url) {
        //         console.log("✅ [UPGRADE] Redirecting to:", result.url);
        //         window.location.href = result.url;
        //     }
        //     else {
        //         console.error("❌ [UPGRADE] No URL in response");
        //     }
        // }
        // catch(error) {
        //     console.error("Upgrade error:", error);
        //
        //     toast.error("Der opstod en fejl ved opgradering");
        // }
    }, [upgradeMutation, subscription]);

    const handleCancel = useCallback(async () => {
        const res = await cancelMutation.mutateAsync({
            id: subscription.id
        });

        if (res.url) {
            window.open(res.url, "_self");
        }
    }, [cancelMutation, subscription]);

    const handleRestore = useCallback(async () => {
        const res = await restoreMutation.mutateAsync({
            id: subscription.id
        });

        if (res.url) {
            window.open(res.url, "_self");
        }
    }, [restoreMutation, subscription]);

    const handleComplete = useCallback(async () => {
        const res = await completeMutation.mutateAsync({
            id: subscription.id
        });

        if (res.url) {
            window.open(res.url, "_self");
        }
    }, [completeMutation, subscription]);

    return (
        <Card key={subscription.id} className='shadow-none'>
            <CardHeader>
                <div className='flex items-center justify-between'>
                    <CardTitle className='flex items-center gap-2'>
                        <CreditCard className='h-5 w-5' />

                        {displayPlanName}
                    </CardTitle>

                    <div className='flex items-center gap-2'>
                        {member && (
                            <Badge variant='secondary' className='capitalize'>
                                {member.role}
                            </Badge>
                        )}

                        {getStatusBadge(subscription.status, subscription.cancelAtPeriodEnd)}
                    </div>
                </div>
            </CardHeader>

            <CardContent className='space-y-4'>
                <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
                    <div className='flex items-center gap-2'>
                        <Calendar className='h-4 w-4 text-gray-500' />

                        <span className='text-sm'>
                            <strong>Næste fakturering:</strong> {formatDate(subscription.periodEnd)}
                        </span>
                    </div>

                    {organization && (
                        <div className='flex items-center gap-2'>
                            <Users className='h-4 w-4 text-gray-500' />

                            <span className='text-sm'>
                                <strong>Pladser:</strong> {subscription.seats}
                            </span>
                        </div>
                    )}

                    {organization && (
                        <div className='flex items-center gap-2'>
                            <Building2 className='h-4 w-4 text-gray-500' />

                            <span className='text-sm'>
                                <strong>Organisation:</strong> {organization.name}
                            </span>
                        </div>
                    )}

                    {subscription.metadata?.cvr && (
                        <div className='flex items-center gap-2'>
                            <span className='text-sm'>
                                <strong>CVR:</strong> {subscription.metadata.cvr}
                            </span>
                        </div>
                    )}
                </div>

                <div className='flex flex-wrap gap-2 pt-4'>
                    {isBusiness && (
                        <Button asChild variant='outline' size='sm' className='font-sans'>
                            <Link href={`${Routes.PROFILE_ORGANIZATION}/${organization?.id || ""}`}>
                                {isManager ? "Administrer organisation" : "Se organisation"}
                            </Link>
                        </Button>
                    )}

                    {subscription.provider === SubscriptionProvider.STRIPE && (
                        <Button
                            className={`font-sans ${!isManager ? "opacity-70" : undefined}`}
                            variant='outline'
                            size='sm'
                            disabled={portalMutation.isPending || !isManager}
                            onClick={handlePortal}
                        >
                            <ExternalLink className='mr-2 h-4 w-4' />
                            Administrer fakturering
                        </Button>
                    )}

                    {isManager &&
                        subscription.status === SubscriptionStatus.ACTIVE &&
                        !subscription.cancelAtPeriodEnd && (
                            <Button
                                className='font-sans'
                                variant='destructive'
                                size='sm'
                                disabled={cancelMutation.isPending}
                                onClick={handleCancel}
                            >
                                {cancelMutation.isPending && <Loader2 className='mr-2 h-4 w-4 animate-spin' />}
                                Afmeld abonnement
                            </Button>
                        )}

                    {(subscription.status === SubscriptionStatus.CANCELED ||
                        (subscription.status === SubscriptionStatus.ACTIVE && subscription.cancelAtPeriodEnd)) && (
                        <Button
                            className='font-sans'
                            variant='default'
                            size='sm'
                            disabled={restoreMutation.isPending || !isManager}
                            onClick={handleRestore}
                        >
                            {restoreMutation.isPending && <Loader2 className='mr-2 h-4 w-4 animate-spin' />}
                            Genopret abonnement
                        </Button>
                    )}

                    {!isBusiness &&
                        subscription.status === SubscriptionStatus.ACTIVE &&
                        canUpgradeToPlus &&
                        !subscription.cancelAtPeriodEnd && (
                            <Button
                                className='bg-client-red hover:bg-client-red/90 font-sans'
                                variant='default'
                                size='sm'
                                disabled={upgradeMutation.isPending}
                                onClick={handleUpgrade}
                            >
                                {upgradeMutation.isPending && <Loader2 className='mr-2 h-4 w-4 animate-spin' />}
                                Opgrader til Plus
                            </Button>
                        )}

                    {subscription.status === SubscriptionStatus.INCOMPLETE && (
                        <Button
                            className='font-sans'
                            variant='default'
                            size='sm'
                            disabled={completeMutation.isPending && !isManager}
                            onClick={handleComplete}
                        >
                            {completeMutation.isPending && <Loader2 className='mr-2 h-4 w-4 animate-spin' />}
                            Betal nu
                        </Button>
                    )}

                    {!isManager && (
                        <span className='text-muted-foreground mt-2.5 text-xs'>
                            Kontakt en administrator for at ændre betaling eller pladser.
                        </span>
                    )}
                </div>
            </CardContent>
        </Card>
    );
};