/**
 * Alert Component - ProRank SEO
 *
 * Shared alert primitive with explicit inline styling so it does not depend on
 * missing utility bundles.
 */

import React from 'react';
import clsx from 'clsx';
import {
  CheckCircleIcon,
  ExclamationTriangleIcon,
  XCircleIcon,
  InformationCircleIcon,
  XMarkIcon,
} from '@heroicons/react/24/outline';

const palettes = {
  success: {
    background: '#ecfdf5',
    border: '#a7f3d0',
    icon: '#059669',
    title: '#065f46',
    text: '#047857',
  },
  warning: {
    background: '#fff7ed',
    border: '#fdba74',
    icon: '#ea580c',
    title: '#9a3412',
    text: '#c2410c',
  },
  error: {
    background: '#fef2f2',
    border: '#fca5a5',
    icon: '#dc2626',
    title: '#991b1b',
    text: '#b91c1c',
  },
  info: {
    background: '#eff6ff',
    border: '#93c5fd',
    icon: '#2563eb',
    title: '#1d4ed8',
    text: '#1e40af',
  },
};

const defaultIcons = {
  success: CheckCircleIcon,
  warning: ExclamationTriangleIcon,
  error: XCircleIcon,
  info: InformationCircleIcon,
};

const Alert = ({
  children,
  title,
  variant = 'info',
  icon: CustomIcon,
  dismissible = false,
  onDismiss,
  className = '',
  ...props
}) => {
  const validVariant = palettes[variant] ? variant : 'info';
  const palette = palettes[validVariant];
  const Icon = CustomIcon || defaultIcons[validVariant];

  return (
    <div
      className={clsx('prorank-alert', className)}
      role="alert"
      style={{
        display: 'flex',
        alignItems: 'flex-start',
        gap: '12px',
        padding: '14px 16px',
        borderRadius: '8px',
        border: `1px solid ${palette.border}`,
        background: palette.background,
      }}
      {...props}
    >
      {Icon && (
        <Icon
          aria-hidden="true"
          style={{
            width: 20,
            height: 20,
            flexShrink: 0,
            marginTop: 1,
            color: palette.icon,
          }}
        />
      )}

      <div style={{ flex: 1, minWidth: 0 }}>
        {title && (
          <h4
            style={{
              margin: '0 0 4px',
              fontSize: '14px',
              fontWeight: 600,
              color: palette.title,
            }}
          >
            {title}
          </h4>
        )}
        <div style={{ fontSize: '14px', lineHeight: 1.6, color: palette.text }}>
          {children}
        </div>
      </div>

      {dismissible && (
        <button
          type="button"
          onClick={onDismiss}
          aria-label="Dismiss alert"
          style={{
            display: 'inline-flex',
            alignItems: 'center',
            justifyContent: 'center',
            width: 28,
            height: 28,
            padding: 0,
            border: 'none',
            borderRadius: 6,
            background: 'transparent',
            color: palette.icon,
            cursor: 'pointer',
            flexShrink: 0,
          }}
        >
          <XMarkIcon style={{ width: 18, height: 18 }} />
        </button>
      )}
    </div>
  );
};

Alert.displayName = 'Alert';

export default Alert;