import { useRouter } from 'next/navigation';
import React, { useState } from 'react';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import { useCommercialRightsPurchase } from '@/hooks/useCommercialRightsPurchase';
import { ArrowLeftIcon, CheckIcon } from '@/icons';
import logWebUserEvent from '@/logging/logWebUserEvent';

import { SimpleProPlanCard } from './SimpleProPlanCard';

export enum SubscriptionTab {
  JustThisSong = 'justThisSong',
  Subscription = 'subscription',
}

interface SubscriptionOptionsPanelProps {
  onBack: () => void;
  songTitle?: string;
  defaultTab?: SubscriptionTab;
  clipId: string;
}

export const SubscriptionOptionsPanel: React.FC<
  SubscriptionOptionsPanelProps
> = ({
  onBack,
  songTitle = '[Song Name]',
  defaultTab = SubscriptionTab.Subscription,
  clipId,
}) => {
  const router = useRouter();
  const [activeTab, setActiveTab] = useState<SubscriptionTab>(defaultTab);
  const commercialRightsPurchase = useCommercialRightsPurchase();

  const handlePurchaseSong = () => {
    logWebUserEvent({
      actionName: 'PurchaseCommercialRightsButtonClicked',
      context: {
        clipId,
      },
    });
    commercialRightsPurchase.mutate({ clipId });
  };

  return (
    <>
      <div className='absolute top-4 left-4'>
        <Button
          variant={ButtonVariant.Tertiary}
          size={ButtonSize.Medium}
          shape={ButtonShape.Pill}
          onClick={onBack}
          icon={ArrowLeftIcon}
          aria-label='Go back'
        />
      </div>

      <h2 className='mb-4 text-center font-serif text-4xl font-light text-foreground-primary'>
        {activeTab === SubscriptionTab.JustThisSong
          ? 'Commercial rights'
          : 'Subscribe'}
      </h2>

      <p className='mb-6 text-center text-base text-foreground-secondary'>
        Choose the option that fits your needs
      </p>

      <div className='mx-auto mb-6 inline-flex gap-2 self-center rounded-[30px] bg-background-tertiary'>
        <button
          onClick={() => setActiveTab(SubscriptionTab.JustThisSong)}
          className={`relative cursor-pointer rounded-[30px] border-none px-3 py-3 text-base font-medium ${
            activeTab === SubscriptionTab.JustThisSong
              ? 'bg-foreground-primary/90 text-background-primary'
              : 'bg-background-tertiary text-foreground-primary'
          }`}
        >
          Just this song
        </button>

        <button
          onClick={() => setActiveTab(SubscriptionTab.Subscription)}
          className={`relative cursor-pointer rounded-[30px] border-none px-3 py-3 text-base font-medium ${
            activeTab === SubscriptionTab.Subscription
              ? 'bg-foreground-primary/90 text-background-primary'
              : 'bg-background-tertiary text-foreground-primary'
          }`}
        >
          Subscription
          <div className='absolute rounded-2xl bg-accent-yellow px-2 py-1 text-xs font-normal text-background-primary'>
            Recommended
          </div>
        </button>
      </div>

      {activeTab === SubscriptionTab.Subscription && (
        <SimpleProPlanCard clipId={clipId} />
      )}

      {activeTab === SubscriptionTab.JustThisSong && (
        <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'>
              Individual song rights
            </h3>
            <p className='m-0 mb-6 text-sm text-foreground-tertiary'>
              Buy commercial rights for your song &ldquo;{songTitle}&rdquo;
            </p>

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

            <Button
              shape={ButtonShape.Pill}
              size={ButtonSize.Medium}
              variant={ButtonVariant.Aura}
              onClick={handlePurchaseSong}
              disabled={commercialRightsPurchase.isPending}
              className='mb-4 w-full text-lg font-medium'
            >
              {commercialRightsPurchase.isPending
                ? 'Redirecting...'
                : 'Buy rights to song'}
            </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>One-time payment</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>Unlimited downloads of this song</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 usage of this song, forever</span>
              </div>
            </div>
          </div>
        </div>
      )}

      <div className='mt-6 flex flex-col items-center gap-3'>
        <button
          onClick={() => router.push('/account')}
          className='cursor-pointer border-none bg-transparent text-sm text-foreground-secondary no-underline hover:text-foreground-primary'
        >
          View all plans →
        </button>
        <button
          onClick={() =>
            window.open(
              'https://help.suno.com/en/categories/550145-rights-ownership',
              '_blank'
            )
          }
          className='cursor-pointer border-none bg-transparent text-sm text-foreground-secondary no-underline hover:text-foreground-primary'
        >
          Rights and Ownership FAQs
        </button>
      </div>
    </>
  );
};