import React from 'react';
import ReactMarkdown from 'react-markdown';
import rehypeRaw from 'rehype-raw';
import { twMerge } from 'tailwind-merge';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import { redirectToRemixFromClipId } from '@/components/contest/util';
import { RemixIcon } from '@/icons/generated';
import logWebUserEvent from '@/logging/logWebUserEvent';

export type RemixCTAProps = {
  deadlineText: string;
  headlineTop: string;

  subheader: string;
  remixLabel: string;
  className?: string;
  backgroundImageUrl?: string;
  clipId?: string;
  contestId?: string;
  contestSlug?: string | null;
  primaryCTA?: React.ReactNode;
  subheaderClassName?: string;
};

const RemixCTA: React.FC<RemixCTAProps> = ({
  deadlineText,
  headlineTop,

  subheader,
  remixLabel,
  className,
  backgroundImageUrl,
  clipId,
  contestId,
  contestSlug,
  primaryCTA,
  subheaderClassName,
}) => {
  return (
    <section
      className={`relative w-full overflow-hidden px-6 py-24 md:py-[100px] ${className ?? ''}`}
    >
      {backgroundImageUrl ? (
        <>
          <div
            aria-hidden
            className='pointer-events-none absolute inset-0 z-0'
            style={{
              backgroundImage: `url(${backgroundImageUrl})`,
              backgroundColor: 'lightgray',
              backgroundPosition: '50% 50%',
              backgroundSize: 'cover',
              backgroundRepeat: 'no-repeat',
              filter: 'blur(105px)',
              opacity: 0.4,
              transform: 'scale(1.1)',
            }}
          />

          <div
            className='pointer-events-none absolute inset-0 z-[1] from-background-primary'
            style={{
              backgroundImage:
                'radial-gradient(farthest-side at 50% 50%, transparent 5%, var(--tw-gradient-from) 100%)',
            }}
          />
          <div className='pointer-events-none absolute inset-x-0 top-0 z-[1] h-24 bg-gradient-to-b from-background-primary to-transparent md:h-32' />
          <div className='pointer-events-none absolute inset-x-0 bottom-0 z-[1] h-24 bg-gradient-to-t from-background-primary to-transparent md:h-32' />
        </>
      ) : null}
      <div className='relative z-10 mx-auto max-w-[920px] text-center'>
        <div className='inline-block rounded-full px-2 py-[8px] text-[12px] leading-[16px] font-medium uppercase not-italic'>
          {deadlineText}
        </div>

        <div className='mx-auto mt-[12px] max-w-[920px] whitespace-pre-line text-white'>
          <h1 className='text-[30px] leading-[30px] font-medium tracking-[-0.6px] not-italic md:text-[60px] md:leading-[60px] md:font-normal md:tracking-[-0.84px]'>
            {headlineTop}
          </h1>
        </div>

        <div
          className={twMerge(
            'mx-auto mt-4 max-w-[500px] text-[14px] leading-[20px] text-foreground-secondary-glass md:text-[16px] md:leading-[24px]',
            subheaderClassName
          )}
        >
          <ReactMarkdown
            rehypePlugins={[rehypeRaw]}
            components={{
              p: ({ node, ...props }) => <p {...props} />,
              a: ({ node, ...props }) => (
                <a
                  className='text-foreground-primary underline'
                  target='_blank'
                  rel='noopener noreferrer'
                  {...props}
                >
                  {props.children}
                </a>
              ),
            }}
          >
            {subheader}
          </ReactMarkdown>
        </div>

        <div className='mt-8 flex items-center justify-center'>
          {primaryCTA ? (
            primaryCTA
          ) : clipId ? (
            <Button
              variant={ButtonVariant.Aura}
              size={ButtonSize.Large}
              icon={RemixIcon}
              shape={ButtonShape.Pill}
              style={{ padding: '10px 12px' }}
              onClick={() => {
                if (contestId) {
                  logWebUserEvent({
                    actionName: 'ContestLandingRemixCtaClicked',
                    context: {
                      contestId,
                      contestSlug: contestSlug ?? undefined,
                      source: 'remix_cta',
                      clipId,
                    },
                  });
                }
                // Use imperative redirect to aid iOS deep-linking
                redirectToRemixFromClipId(clipId);
              }}
            >
              {remixLabel}
            </Button>
          ) : null}
        </div>
      </div>
    </section>
  );
};

export default RemixCTA;