'use client';

import * as Button from '@/components/ui/button';
import { cn } from '@/utils/cn';
import { Check, Copy, LoaderCircle } from 'lucide-react';
import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
import { type ReactNode, useCallback, useState } from 'react';
import * as AlertToast from '@/components/ui/toast-alert';
import { toast } from '@/components/ui/toast';

export interface CopyButtonProps {
  className?: string;
  disabled?: boolean;
  duration?: number;
  idleIcon?: ReactNode;
  loadingDuration?: number;
  loadingIcon?: ReactNode;
  onCopy?: () => Promise<void> | void;
  successIcon?: ReactNode;
}

const defaultIcons = {
  idle: <Copy size={16} className='text-text-soft-400' />,
  loading: <LoaderCircle className='animate-spin' size={16} />,
  success: <Check size={16} className='text-success-base' />,
};

export default function CopyButton({
  onCopy,
  idleIcon = defaultIcons.idle,
  loadingIcon = defaultIcons.loading,
  successIcon = defaultIcons.success,
  className = '',
  duration = 2000,
  loadingDuration = 1000,
  disabled = false,
}: CopyButtonProps) {
  const [buttonState, setButtonState] = useState<
    'idle' | 'loading' | 'success'
  >('idle');
  const shouldReduceMotion = useReducedMotion();

  const handleClick = useCallback(async () => {
    setButtonState('loading');
    if (onCopy) {
      await onCopy();
    }
    setTimeout(() => {
      setButtonState('success');
      toast.custom((t) => (
        <AlertToast.Root
          t={t}
          status='success'
          message='Success! your operation was completed successfully'
        />
      ));
    }, loadingDuration);
    setTimeout(() => {
      setButtonState('idle');
    }, loadingDuration + duration);
  }, [onCopy, loadingDuration, duration]);

  const icons = {
    idle: idleIcon,
    loading: loadingIcon,
    success: successIcon,
  };

  const ariaLabels = {
    idle: 'Copy',
    loading: 'Copying...',
    success: 'Copied',
  };

  return (
    <div className='flex justify-center'>
      <Button.Root
        aria-label={ariaLabels[buttonState]}
        aria-live='polite'
        className={cn(className)}
        disabled={buttonState !== 'idle' || disabled}
        mode='stroke'
        onClick={handleClick}
        size='medium'
        type='button'
        variant='neutral'
      >
        <Button.Icon>
          <AnimatePresence initial={false} mode='popLayout'>
            <motion.span
              animate={
                shouldReduceMotion
                  ? { opacity: 1 }
                  : { opacity: 1, y: 0, filter: 'blur(0px)' }
              }
              className='flex w-full items-center justify-center'
              exit={
                shouldReduceMotion
                  ? { opacity: 0, transition: { duration: 0 } }
                  : { opacity: 0, y: 25, filter: 'blur(10px)' }
              }
              initial={
                shouldReduceMotion
                  ? { opacity: 1 }
                  : { opacity: 0, y: -25, filter: 'blur(10px)' }
              }
              key={buttonState}
              transition={
                shouldReduceMotion
                  ? { duration: 0 }
                  : { type: 'spring' as const, duration: 0.25, bounce: 0 }
              }
            >
              {icons[buttonState]}
            </motion.span>
          </AnimatePresence>
        </Button.Icon>
      </Button.Root>
    </div>
  );
}