'use client';
import { CheckCheck } from 'lucide-react';
import { skipToken } from '@tanstack/react-query';
import { useSession } from '@/lib/auth/auth-client';
import { usePurchaseStore } from '@/lib/utils/stores';
import { api } from '@/lib/trpc/client';
import { Separator } from '@/components/ui/separator';
import { PlanType } from '@/server/modules/payment/types/plan-type.enum';
import { formatPrice } from '@/lib/utils/format-price';
import { StepItem } from '../step-item';
import { PricePeriodHelpers } from '@/server/modules/payment/types/price-period.enum';

type Plan = {
  plan?: string | string[] | undefined;
};

export default function Step_2({ plan }: Plan) {
  const { data, isPending } = useSession();
  const { state, setPlanId, setPriceId } = usePurchaseStore();

  const { isSuccess, data: plans = [] } = api.payment.plan.list.useQuery({
    type: PlanType.PERSONAL
  });

  const { data: prices = [] } = api.payment.planPrice.list.useQuery(
    state.planId
      ? {
          planId: state.planId
        }
      : skipToken
  );

  if (isPending || !data?.user) {
    return null;
  }

  return (
    <StepItem step='2/3' title='Vælg Type'>
      <div>
        {!plan && (
          <div className='flex flex-col items-center gap-2'>
            {plans.map((plan) => {
              return (
                <button
                  key={plan.id}
                  className='bg-client-red hover:bg-client-red/80 flex h-11 w-fit justify-center gap-x-2 px-4 py-2 text-lg font-bold text-white transition'
                  onClick={() => setPlanId(plan.id)}
                >
                  {plan.name}
                  {plan.id === state.planId && (
                    <CheckCheck className='size-6' />
                  )}
                </button>
              );
            })}
            <p className='mt-2'>
              Adgang til alt indhold — også til baggrundssektionen KBH Plus hvor
              vi graver dybere politisk og arkitektonisk.
            </p>
            <Separator className='my-4' />
          </div>
        )}

        <div>
          {prices.map((price) => {
            return (
              <article
                key={price.id}
                className='flex flex-col items-center gap-2 not-last:mb-8 not-last:border-b not-last:pb-8'
              >
                <p>{price.period}</p>

                <p className='text-2xl'>
                  {formatPrice(price.price, {
                    withCurrency: false,
                    withCents: false
                  })}
                  , - / {PricePeriodHelpers.getShortLabel(price.period)}
                </p>

                {price.description && (
                  <p className='max-w-60 text-sm text-neutral-500'>
                    {price.description}
                  </p>
                )}

                <button
                  className='bg-client-red hover:bg-client-red/80 relative mt-2 flex h-11 w-full max-w-60 justify-center px-6 py-2 text-lg font-bold text-white transition'
                  onClick={() => setPriceId(price.id)}
                >
                  Ja tak
                  {price.id === state.priceId && (
                    <CheckCheck className='absolute right-3 size-6' />
                  )}
                </button>
              </article>
            );
          })}
        </div>
      </div>
    </StepItem>
  );
}