// File: src/components/UIX/InfoNotice/InfoNotice.jsx

import React, { memo, useMemo } from "react";
import {
  InformationCircleIcon,
  ExclamationTriangleIcon,
  CheckCircleIcon,
  XCircleIcon,
  LockClosedIcon,
  ShieldCheckIcon,
} from "@heroicons/react/24/outline";
import { useUIXTheme } from "../themes/useUIXTheme.jsx";

// Default icons for each variant
const VARIANT_ICONS = {
  info: InformationCircleIcon,
  warning: ExclamationTriangleIcon,
  success: CheckCircleIcon,
  error: XCircleIcon,
  security: LockClosedIcon,
  shield: ShieldCheckIcon,
};

/**
 * InfoNotice Component - Performance Optimized
 * Reusable notice/info box with icon and content
 *
 * Perfect for displaying important information, security notices,
 * help text, warnings, or success messages in a visually distinct way.
 *
 * Performance optimizations:
 * - Component memoization with React.memo
 * - Memoized theme classes to prevent multiple getThemeClasses calls
 * - Memoized variant styling computation
 * - Prevented unnecessary re-renders
 *
 * @param {string} variant - Notice variant: "info" | "warning" | "success" | "error" | "security" | "shield"
 * @param {string} title - Notice title (optional)
 * @param {string|React.Node} children - Notice content
 * @param {React.Component} icon - Custom icon component (overrides variant default)
 * @param {boolean} compact - Use compact styling (less padding)
 * @param {string} className - Additional CSS classes
 */
const InfoNotice = memo(function InfoNotice({
  variant = "info",
  title,
  children,
  icon: CustomIcon,
  compact = false,
  className = "",
}) {
  const { getThemeClasses } = useUIXTheme();

  // Memoize all theme classes
  const themeClasses = useMemo(
    () => ({
      bgInfo: getThemeClasses("bg-info-light"),
      bgWarning: getThemeClasses("bg-warning-light"),
      bgSuccess: getThemeClasses("bg-success-light"),
      bgError: getThemeClasses("bg-error-light"),
      borderInfo: getThemeClasses("border-info"),
      borderWarning: getThemeClasses("border-warning"),
      borderSuccess: getThemeClasses("border-success"),
      borderError: getThemeClasses("border-error"),
      textInfo: getThemeClasses("text-info"),
      textWarning: getThemeClasses("text-warning"),
      textSuccess: getThemeClasses("text-success"),
      textError: getThemeClasses("text-error"),
    }),
    [getThemeClasses],
  );

  // Determine icon to use
  const Icon = CustomIcon || VARIANT_ICONS[variant] || VARIANT_ICONS.info;

  // Memoize variant styling
  const variantClasses = useMemo(() => {
    switch (variant) {
      case "warning":
        return {
          container: `${themeClasses.bgWarning} border ${themeClasses.borderWarning}`,
          icon: themeClasses.textWarning,
          title: themeClasses.textWarning,
          text: themeClasses.textWarning,
        };
      case "success":
        return {
          container: `${themeClasses.bgSuccess} border ${themeClasses.borderSuccess}`,
          icon: themeClasses.textSuccess,
          title: themeClasses.textSuccess,
          text: themeClasses.textSuccess,
        };
      case "error":
        return {
          container: `${themeClasses.bgError} border ${themeClasses.borderError}`,
          icon: themeClasses.textError,
          title: themeClasses.textError,
          text: themeClasses.textError,
        };
      case "security":
      case "shield":
      case "info":
      default:
        return {
          container: `${themeClasses.bgInfo} border ${themeClasses.borderInfo}`,
          icon: themeClasses.textInfo,
          title: themeClasses.textInfo,
          text: themeClasses.textInfo,
        };
    }
  }, [variant, themeClasses]);

  // Padding classes based on compact mode
  const paddingClasses = compact ? "p-3" : "p-4";

  return (
    <div
      className={`${paddingClasses} ${variantClasses.container} rounded-lg ${className}`}
    >
      <div className="flex">
        <Icon className={`h-5 w-5 ${variantClasses.icon} flex-shrink-0`} />
        <div className="ml-3 flex-1">
          {title && (
            <h3 className={`text-sm font-medium ${variantClasses.title} mb-1`}>
              {title}
            </h3>
          )}
          <div className={`text-sm ${variantClasses.text}`}>
            {children}
          </div>
        </div>
      </div>
    </div>
  );
});

export default InfoNotice;
