import React, { useEffect, useState } from 'react';
import { cn } from '@/lib/utils';

/**
 * FormSuccess Component
 * Display success messages with different variants and auto-dismiss
 */

export interface FormSuccessProps {
  message?: string;
  variant?: 'inline' | 'block' | 'toast';
  className?: string;
  showIcon?: boolean;
  animate?: boolean;
  autoDismiss?: boolean;
  autoDismissTimeout?: number;
  onClose?: () => void;
  id?: string;
}

export const FormSuccess: React.FC<FormSuccessProps> = ({
  message,
  variant = 'inline',
  className,
  showIcon = true,
  animate = true,
  autoDismiss = false,
  autoDismissTimeout = 5000,
  onClose,
  id,
}) => {
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    if (!message) {
      setIsVisible(false);
      return;
    }

    setIsVisible(true);

    if (autoDismiss && autoDismissTimeout > 0) {
      const timer = setTimeout(() => {
        setIsVisible(false);
        if (onClose) {
          onClose();
        }
      }, autoDismissTimeout);

      return () => clearTimeout(timer);
    }
  }, [message, autoDismiss, autoDismissTimeout, onClose]);

  if (!message || !isVisible) {
    return null;
  }

  const baseClasses = {
    inline: 'text-sm text-success mt-1',
    block: 'p-3 bg-success/10 border border-success/20 rounded-md text-success text-sm',
    toast: 'fixed bottom-4 right-4 p-4 bg-success text-white rounded-lg shadow-lg max-w-md z-tooltip animate-slide-up',
  };

  const animationClasses = animate ? 'animate-fade-in' : '';

  const Icon = () => (
    <svg
      className="w-4 h-4 mr-1 inline-block"
      fill="currentColor"
      viewBox="0 0 20 20"
      aria-hidden="true"
    >
      <path
        fillRule="evenodd"
        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
        clipRule="evenodd"
      />
    </svg>
  );

  const handleClose = () => {
    setIsVisible(false);
    if (onClose) {
      onClose();
    }
  };

  return (
    <div
      role="status"
      aria-live="polite"
      id={id}
      className={cn(
        baseClasses[variant],
        animationClasses,
        'transition-all duration-200',
        'flex items-start justify-between gap-2',
        className
      )}
    >
      <div className="flex items-start flex-1">
        {showIcon && <Icon />}
        <span>{message}</span>
      </div>
      
      {autoDismiss && (
        <button
          type="button"
          onClick={handleClose}
          className="text-current opacity-70 hover:opacity-100 transition-opacity"
          aria-label="Close notification"
        >
          <svg
            className="w-4 h-4"
            fill="currentColor"
            viewBox="0 0 20 20"
          >
            <path
              fillRule="evenodd"
              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
              clipRule="evenodd"
            />
          </svg>
        </button>
      )}
    </div>
  );
};

FormSuccess.displayName = 'FormSuccess';

export default FormSuccess;