"use client";
import React from "react";
import Link from "next/link";
import { CheckCircle, Users, Calendar, FileText, Building2 } from "lucide-react";
import { Routes } from "@/config/routes";
import { Button } from "@/components/ui/button";
import { api } from "@/lib/trpc/client";
import formatDate from "@/lib/utils/format-date";
import { PlanType } from "@/server/modules/payment/types/plan-type.enum";
import { PricePeriodHelpers } from "@/server/modules/payment/types/price-period.enum";

export function SuccessPageContent() {
    const {
        isLoading,
        data: subscription
    } = api.payment.subscription.get.useQuery({
        with: ["price", "organization"],
        orderBy: "createdAt",
        orderDir: "desc"
    });

    const getPlanDisplayName = () => {
        return (subscription?.price?.plan?.name || "") + (subscription?.price?.period ? ` (${PricePeriodHelpers.getLabel(subscription.price.period)})` : "");
    };

    const isBusiness = subscription?.price?.plan?.type === PlanType.BUSINESS;
    const successMessage = isBusiness
        ? "Din virksomhed har nu adgang til Magasinet KBH og KBH Plus."
        : "Du er nu medlem af Magasinet KBH og har adgang til vores indhold.";

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

    return (
        <div className="space-y-6">
            <div className="flex items-center gap-3 text-green-600">
                <CheckCircle className="h-6 w-6" />
                <p className="font-semibold">{successMessage}</p>
            </div>

            {subscription && (
                <div className="bg-gray-50 p-4 rounded-lg space-y-3">
                    <h3 className="font-semibold text-lg mb-3">Dit abonnement</h3>

                    <div className="flex items-center gap-2">
                        <CheckCircle className="h-4 w-4 text-green-600" />
                        <span className="font-medium">Plan: {getPlanDisplayName()}</span>
                    </div>

                    {isBusiness && subscription.organization && (
                        <div className="flex items-center gap-2">
                            <Building2 className="h-4 w-4 text-blue-600" />
                            <span>Organisation: {subscription.organization.name}</span>
                        </div>
                    )}

                    {/* TODO: show members count */}
                    {isBusiness && (
                        <div className="flex items-center gap-2">
                            <Users className="h-4 w-4 text-blue-600" />
                            <span>Medarbejdere: {subscription.seats}</span>
                        </div>
                    )}

                    {subscription.periodEnd && !subscription.cancelAtPeriodEnd && (
                        <div className="flex items-center gap-2">
                            <Calendar className="h-4 w-4 text-blue-600" />
                            <span>Næste fakturering: {formatDate(subscription.periodEnd)}</span>
                        </div>
                    )}

                    {isBusiness && (
                        <div className="flex items-center gap-2">
                            <FileText className="h-4 w-4 text-blue-600" />
                            <span>Faktura vil blive sendt til din email</span>
                        </div>
                    )}
                </div>
            )}

            {isBusiness && (
                <div className="rounded-lg border border-client-rose/60 bg-client-rose/10 p-4 space-y-3">
                    <h3 className="font-semibold text-client-red">Kom godt i gang</h3>
                    <p className="text-sm text-neutral-700">
                        Invitér kollegaer og administrer virksomhedens abonnement ét sted.
                    </p>

                    <ul className="list-disc space-y-1 pl-5 text-sm text-neutral-700">
                        <li>Invitér teamet og tildel roller på organisationssiden.</li>
                        <li>Følg forbruget af pladser og opgrader efter behov.</li>
                        <li>Opdater virksomhedsoplysninger og faktureringsdetaljer.</li>
                    </ul>

                    <Button className="bg-client-red hover:bg-client-red/90 text-white" asChild>
                        <Link href={Routes.PROFILE_ORGANIZATION}>
                            Administrer organisation
                        </Link>
                    </Button>
                </div>
            )}

            <div className="space-y-3">
                <p>
                    Vi arbejder hårdt på at skabe en sund debat om udformningen af, og livet i, Danmarks hovedstad.
                </p>

                <p>Og vi er glade for at have dig som medlem.</p>

                <p>
                    Hvis du en dag ikke vil være medlem længere, logger du blot ind og afmelder dig på din{' '}
                    <Link
                      className="text-client-red hover:underline"
                      href={Routes.PROFILE}>
                        profilside
                    </Link>
                    .
                </p>

                <p>
                    Men vi håber, du bliver hos os. Jo flere medlemmer vi er, jo flere ressourcer har vi til at sætte fokus på kvaliteten af byen.
                </p>

                <p>
                    København hilser dig,
                    <br />
                    Redaktionen
                </p>
            </div>
        </div>
    );
}