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 OutOfDownloadsPanelProps {
  onBuyRightsForSong: () => void;
  isRemixTrack?: boolean; // Flag to hide individual purchase options for remix tracks
  clipId: string;
}

export const OutOfDownloadsPanel: React.FC<OutOfDownloadsPanelProps> = ({
  onBuyRightsForSong,
  isRemixTrack = false,
  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'>
        No free downloads remaining
      </h2>

      <p className='mb-6 text-base leading-snug text-foreground-secondary'>
        You have used your free downloads for the month. Upgrade to Pro or
        Premier for unlimited downloads.
      </p>

      {isRemixTrack && (
        <p className='mb-6 text-base leading-snug text-foreground-secondary'>
          <span className='font-bold'>Note:</span> You can download remixes from
          other users' songs, but{' '}
          <span className='font-bold'>you do not have commercial rights</span>{' '}
          to them.
        </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>

        {!isRemixTrack && (
          <Button
            shape={ButtonShape.Pill}
            size={ButtonSize.Medium}
            onClick={onBuyRightsForSong}
            className='w-full border border-border-primary bg-background-tertiary text-foreground-primary hover:enabled:bg-background-primary'
          >
            Buy rights for this song
          </Button>
        )}
      </div>
    </>
  );
};