'use client';

import { AnimatePresence, motion } from 'framer-motion';
import { useEffect, useState } from 'react';

import Button from '@/components/button/Button';
import logWebUserEvent from '@/logging/logWebUserEvent';
import { REDIRECT_DISMISSED_KEY } from '@/utils/constants';
import { hasTimedStorageKeyExpired, setTimedStorageKey } from '@/utils/storage';

interface MobileWebRedirectProps {
  oneLinkUrl: string;
}

const REDIRECT_DISMISSED_TTL = 7 * 24 * 60 * 60 * 1000; // 7 days

export default function MobileWebRedirect({
  oneLinkUrl,
}: MobileWebRedirectProps) {
  const [show, setShow] = useState<boolean>(false);

  useEffect(() => {
    // Show the redirect if it's not been dismissed recently
    if (hasTimedStorageKeyExpired(REDIRECT_DISMISSED_KEY)) {
      // Small delay to allow for animation
      setTimeout(() => setShow(true), 100);
    }
  }, []);

  const handleRedirect = () => {
    // Log the redirect event
    logWebUserEvent({
      actionName: 'MobileWebRedirectClicked',
    });

    // For app deep links and external URLs, we need to use window.location
    // as Next.js Router only handles internal application routes
    window.location.href = oneLinkUrl;
  };

  const handleClose = () => {
    setShow(false);
    setTimedStorageKey(REDIRECT_DISMISSED_KEY, REDIRECT_DISMISSED_TTL);
    logWebUserEvent({
      actionName: 'MobileWebRedirectClose',
    });
  };

  return (
    <AnimatePresence>
      {show && (
        <motion.div
          initial={{ y: '100%' }}
          animate={{ y: 0 }}
          exit={{ y: '100%' }}
          transition={{
            type: 'tween',
            ease: 'easeOut',
            duration: 0.3,
          }}
          className='fixed right-0 bottom-0 left-0 z-999 rounded-t-3xl bg-foreground-primary p-6 shadow-lg'
        >
          <div className='flex flex-col items-center gap-4'>
            <h3 className='rounded-lg text-center text-lg font-medium text-background-primary'>
              Suno is better on the app
            </h3>
            <div className='flex w-full flex-col gap-2'>
              <MobileWebRedirectOption
                optionLabel='Suno App'
                buttonLabel='Open'
                buttonCustomClassName="text-white bg-[url('https://cdn1.suno.ai/mwr-button-aura.jpg')] bg-cover bg-center"
                onClick={handleRedirect}
              />
              <MobileWebRedirectOption
                optionLabel='Web Browser'
                buttonLabel='Continue'
                buttonCustomClassName='text-dumbo-50 bg-transparent border border-secondary'
                onClick={handleClose}
              />
            </div>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

function MobileWebRedirectOption({
  optionLabel,
  buttonLabel,
  buttonCustomClassName,
  onClick,
}: {
  optionLabel: string;
  buttonLabel: string;
  buttonCustomClassName: string;
  onClick: () => void;
}) {
  return (
    <div className='flex flex-row items-center justify-between'>
      <div className='flex items-center font-medium text-dumbo-50'>
        {optionLabel}
      </div>
      <Button
        onClick={onClick}
        className={`w-[165px] ${buttonCustomClassName} rounded-full px-6 font-medium transition-colors`}
      >
        {buttonLabel}
      </Button>
    </div>
  );
}