import React from 'react';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import { useSubscriptionCheckout } from '@/hooks/useSubscriptionCheckout';
import { CheckIcon } from '@/icons';
import { CHECKOUT_SOURCE } from '@/lib/checkoutSource';
import logWebUserEvent from '@/logging/logWebUserEvent';
import { PlanKey } from '@/state/sessionStore';

interface SimpleProPlanCardProps {
  clipId: string;
}

export const SimpleProPlanCard: React.FC<SimpleProPlanCardProps> = ({
  clipId,
}) => {
  const monthlyPrice = 10;
  const subscriptionCheckout = useSubscriptionCheckout();

  const handleSubscribe = () => {
    logWebUserEvent({
      actionName: 'SubscribeButtonClicked',
      context: {
        usagePlanId: PlanKey.Pro,
        period: 'month',
        currency: 'USD',
        isLoggedIn: true,
        checkoutSource: CHECKOUT_SOURCE.COMMERCIAL_RIGHTS_MODAL,
      },
      componentContext: '',
    });
    subscriptionCheckout.mutate({
      planKey: PlanKey.Pro,
      period: 'month',
      clipId,
    });
  };

  return (
    <div className='mb-6 rounded-2xl bg-gradient-to-b from-accent-pink to-background-primary p-px'>
      <div className='rounded-[calc(1rem-1px)] bg-background-tertiary p-6 text-left'>
        <h3 className='m-0 mb-2 font-serif text-3xl font-light text-foreground-primary'>
          Pro plan
        </h3>
        <p className='m-0 mb-6 text-sm text-foreground-tertiary'>
          Access to our best models and editing tools.
        </p>

        <div className='mb-6 text-3xl font-light text-foreground-primary'>
          ${monthlyPrice}{' '}
          <span className='text-base text-foreground-tertiary'>/month</span>
        </div>

        <Button
          shape={ButtonShape.Pill}
          size={ButtonSize.Medium}
          variant={ButtonVariant.Aura}
          onClick={handleSubscribe}
          disabled={subscriptionCheckout.isPending}
          className='mb-4 w-full text-lg font-medium'
        >
          {subscriptionCheckout.isPending
            ? 'Redirecting...'
            : 'Subscribe to Pro'}
        </Button>

        <div className='mb-6'>
          <div className='mb-3 flex items-center gap-3 text-sm text-foreground-primary'>
            <CheckIcon className='min-w-4 text-accent-success' />
            <span>4,000 credits monthly (up to 800 songs)</span>
          </div>
          <div className='mb-3 flex items-center gap-3 text-sm text-foreground-primary'>
            <CheckIcon className='min-w-4 text-accent-success' />
            <span>Access to our most advanced v4.5 model</span>
          </div>
          <div className='mb-3 flex items-center gap-3 text-sm text-foreground-primary'>
            <CheckIcon className='min-w-4 text-accent-success' />
            <span>
              Commercial rights for this song and all songs made while
              subscribed
            </span>
          </div>
        </div>
      </div>
    </div>
  );
};