Alert

'use client';

import { motion, AnimatePresence } from 'framer-motion';
import { useState, type ReactNode } from 'react';
import { HugeiconsIcon } from '@hugeicons/react';
import { InformationCircleIcon, CheckmarkCircle02Icon, Alert01Icon, Cancel01Icon, MultiplicationSignIcon } from '@hugeicons/core-free-icons';

export type AlertType = 'info' | 'success' | 'warning' | 'error';
export type AlertVariant = 'filled' | 'outline' | 'subtle';

export interface AlertProps {
  type?: AlertType;
  variant?: AlertVariant;
  title?: string;
  children?: ReactNode;
  dismissible?: boolean;
  onDismiss?: () => void;
  icon?: ReactNode;
  showIcon?: boolean;
  action?: ReactNode;
  className?: string;
}

const typeStyles: Record<AlertType, Record<AlertVariant, string>> = {
  info: {
    filled: 'bg-brand-500 text-white',
    outline: 'bg-(--surface-elevated) border-2 border-brand-500/30 text-(--text)',
    subtle: 'bg-brand-500/5 border border-brand-500/15 text-(--text)',
  },
  success: {
    filled: 'bg-success-600 text-white dark:bg-success-500',
    outline: 'bg-(--surface-elevated) border-2 border-success-500/30 text-(--text)',
    subtle: 'bg-success-500/5 border border-success-500/15 text-(--text)',
  },
  warning: {
    filled: 'bg-warn-500 text-white',
    outline: 'bg-(--surface-elevated) border-2 border-warn-500/30 text-(--text)',
    subtle: 'bg-warn-500/5 border border-warn-500/15 text-(--text)',
  },
  error: {
    filled: 'bg-danger-600 text-white dark:bg-danger-500',
    outline: 'bg-(--surface-elevated) border-2 border-danger-500/30 text-(--text)',
    subtle: 'bg-danger-500/5 border border-danger-500/15 text-(--text)',
  },
};

const iconColors: Record<AlertType, Record<AlertVariant, string>> = {
  info: { filled: 'text-white/90', outline: 'text-brand-500', subtle: 'text-brand-500' },
  success: { filled: 'text-white/90', outline: 'text-success-500', subtle: 'text-success-500' },
  warning: { filled: 'text-white/90', outline: 'text-warn-500', subtle: 'text-warn-500' },
  error: { filled: 'text-white/90', outline: 'text-danger-500', subtle: 'text-danger-500' },
};

const defaultIcons: Record<AlertType, typeof InformationCircleIcon> = {
  info: InformationCircleIcon,
  success: CheckmarkCircle02Icon,
  warning: Alert01Icon,
  error: Cancel01Icon,
};

function DefaultIcon({ type }: { type: AlertType }) {
  return (
    <HugeiconsIcon icon={defaultIcons[type]} size={18} className="shrink-0 mt-0.5" />
  );
}

export function Alert({
  type = 'info',
  variant = 'subtle',
  title,
  children,
  dismissible = false,
  onDismiss,
  icon,
  showIcon = true,
  action,
  className = '',
}: AlertProps) {
  const [visible, setVisible] = useState(true);

  const handleDismiss = () => {
    setVisible(false);
    onDismiss?.();
  };

  return (
    <AnimatePresence>
      {visible && (
        <motion.div
          initial={{ opacity: 0, y: -8, scale: 0.98 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          exit={{ opacity: 0, y: -8, scale: 0.98 }}
          transition={{ duration: 0.3, ease: [0.2, 0, 0, 1] }}
          role={type === 'error' || type === 'warning' ? 'alert' : 'status'}
          aria-live={type === 'error' || type === 'warning' ? 'assertive' : 'polite'}
          className={`rounded-lg px-3 py-2.5 ${typeStyles[type][variant]} ${className}`}
        >
          <div className="flex gap-2.5">
            {showIcon && (
              <span className={iconColors[type][variant]} aria-hidden="true">
                {icon || <DefaultIcon type={type} />}
              </span>
            )}
            <div className="flex-1 min-w-0">
              {title && (
                <p className={`font-medium text-sm ${children ? 'mb-0.5' : ''}`}>
                  {title}
                </p>
              )}
              {children && (
                <div className={`text-xs ${variant === 'filled' ? 'text-white/80' : 'text-(--text-muted)'} leading-relaxed`}>
                  {children}
                </div>
              )}
              {action && <div className="mt-2.5">{action}</div>}
            </div>
            {dismissible && (
              <button
                type="button"
                onClick={handleDismiss}
                className={`shrink-0 self-start p-1 rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-current ${
                  variant === 'filled'
                    ? 'hover:bg-white/15 text-white/70 hover:text-white'
                    : 'hover:bg-black/5 text-(--text-muted) hover:text-(--text)'
                }`}
                aria-label="Dismiss alert"
              >
                <HugeiconsIcon icon={MultiplicationSignIcon} size={14} aria-hidden="true" />
              </button>
            )}
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}