import React from 'react';

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

interface RemixDownloadAvailablePanelProps {
  downloadsRemaining: number;
  onDownload: () => void;
  clipId: string;
}

export const RemixDownloadAvailablePanel: React.FC<
  RemixDownloadAvailablePanelProps
> = ({ downloadsRemaining, onDownload, clipId }) => {
  const subscriptionCheckout = useSubscriptionCheckout();

  const handleSubscribeToPro = () => {
    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 flex justify-center'>
        <div className='flex h-16 w-16 items-center justify-center rounded-full bg-foreground-primary/10'>
          <DownloadIcon className='h-8 w-8 text-foreground-primary' />
        </div>
      </div>

      <h2 className='mb-8 font-serif text-4xl font-light whitespace-pre text-foreground-primary'>
        Download Remix
      </h2>

      <p className='mb-6 text-base leading-snug text-foreground-secondary'>
        This is a remix of another user's song. You can download it for free,
        but <span className='font-bold'>you do not have commercial rights</span>{' '}
        for remixes you create from other users' songs.
      </p>

      <p className='mb-6 text-base leading-snug text-foreground-secondary'>
        Upgrade to Pro or Premier to get commercial rights and unlimited
        downloads on new original songs you create.
      </p>

      <div className='mt-8 flex flex-col gap-3'>
        <Button
          shape={ButtonShape.Pill}
          size={ButtonSize.Medium}
          variant={ButtonVariant.Aura}
          onClick={handleSubscribeToPro}
          disabled={subscriptionCheckout.isPending}
          className='w-full text-lg font-medium'
        >
          {subscriptionCheckout.isPending ? 'Redirecting...' : 'Upgrade to Pro'}
        </Button>

        <Button
          shape={ButtonShape.Pill}
          size={ButtonSize.Medium}
          onClick={onDownload}
          className='w-full border border-border-primary bg-background-tertiary text-foreground-primary hover:enabled:bg-background-primary'
        >
          Download this song
        </Button>
      </div>

      <p className='mt-8 text-sm text-foreground-tertiary'>
        {`${downloadsRemaining} free download${downloadsRemaining !== 1 ? 's' : ''} remaining this month`}
      </p>
    </>
  );
};