'use client';

import { useAuth, useClerk } from '@clerk/nextjs';
import { usePathname, useSearchParams } from 'next/navigation';
import React, { useEffect } from 'react';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import Modal from '@/components/modal/Modal';
import logWebUserEvent from '@/logging/logWebUserEvent';
import { REFERRER_PARAM } from '@/utils/constants';
import {
  getClerkSignInRedirectProps,
  getClerkSignUpRedirectProps,
} from '@/utils/utils';

interface LivingRadioModalProps {
  isOpen: boolean;
  onClose: () => void;
  trigger?: 'vote' | 'chat';
  stationId: string;
}

const LivingRadioModal: React.FC<LivingRadioModalProps> = ({
  isOpen,
  onClose,
  trigger = 'vote',
  stationId,
}) => {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const { isSignedIn } = useAuth();
  const clerk = useClerk();

  // Log modal open event
  useEffect(() => {
    if (isOpen && !isSignedIn) {
      logWebUserEvent({
        actionName: 'LivingRadioSignInModalOpened',
        principalObjectType: 'livingRadioAuth',
        principalObjectValue: stationId,
        context: {
          stationId,
          trigger,
        },
      });
    }
  }, [isOpen, isSignedIn, trigger, stationId]);

  // Don't show modal if user is already signed in
  if (isSignedIn) {
    return null;
  }

  if (!isOpen) {
    return null;
  }

  const handleSignIn = () => {
    logWebUserEvent({
      actionName: 'LivingRadioSignInClicked',
      principalObjectType: 'livingRadioAuth',
      principalObjectValue: stationId,
      context: {
        stationId,
      },
    });
    onClose();
    clerk.openSignIn({
      ...getClerkSignInRedirectProps(`${pathname}?${searchParams.toString()}`, {
        [REFERRER_PARAM]: pathname,
      }),
    });
  };

  const handleSignUp = () => {
    logWebUserEvent({
      actionName: 'LivingRadioSignUpClicked',
      principalObjectType: 'livingRadioAuth',
      principalObjectValue: stationId,
      context: {
        stationId,
      },
    });
    onClose();
    clerk.openSignUp({
      ...getClerkSignUpRedirectProps(`${pathname}?${searchParams.toString()}`, {
        [REFERRER_PARAM]: pathname,
      }),
    });
  };

  const handleClose = () => {
    logWebUserEvent({
      actionName: 'LivingRadioSignInModalClosed',
      principalObjectType: 'livingRadioAuth',
      principalObjectValue: stationId,
      context: {
        stationId,
      },
    });
    onClose();
  };

  return (
    <Modal
      title=''
      titleClassName='hidden'
      closeButtonClasses='z-10'
      onClose={handleClose}
      className='overflow-hidden p-0'
      wrapperClasses='p-0 overflow-hidden'
      titleWrapperClasses='p-0 pb-0 hidden'
      contentWrapperClasses='bg-background-primary overflow-hidden relative'
      disablePadding={true}
      width={400}
    >
      <div className='relative h-[200px] items-center justify-center bg-linear-to-br'>
        <img
          src='https://cdn-o.suno.com/suno-living-radio-poster.webp'
          alt='Living Radio Poster'
          className='h-full w-full object-cover'
        />
      </div>

      <div className='flex flex-col bg-background-primary p-8 pt-6'>
        <div className='mb-8 text-center'>
          <h2 className='mb-4 font-serif text-[32px] leading-[1.2] font-light text-foreground-primary'>
            Sign Up to Vote For Radio
          </h2>
          <p className='font-sans text-[16px] leading-tight font-normal text-foreground-tertiary max-lg:text-center'>
            Help decide what comes next in this communal radio station!
          </p>
        </div>

        {/* Sign Up Button */}
        <Button
          onClick={handleSignUp}
          shape={ButtonShape.Pill}
          size={ButtonSize.Large}
          variant={ButtonVariant.Primary}
          className='mb-4 w-full'
        >
          Sign up
        </Button>

        {/* Sign In Button */}
        <Button
          onClick={handleSignIn}
          shape={ButtonShape.Pill}
          size={ButtonSize.Large}
          variant={ButtonVariant.Secondary}
          className='w-full'
        >
          Sign In
        </Button>
      </div>
    </Modal>
  );
};

export default LivingRadioModal;