import React, { memo, useMemo } from 'react';
import { useUIXTheme } from "../themes/useUIXTheme.jsx";

/**
 * PageHeader Component - Performance Optimized
 * Header section for pages with icon, title, subtitle, and action buttons
 *
 * Performance optimizations:
 * - Component memoization with React.memo
 * - Memoized theme classes to prevent multiple getThemeClasses calls
 * - Memoized className strings to prevent re-concatenation
 * - Memoized sections (icon, subtitle, unsaved changes, actions)
 * - Prevented unnecessary re-renders
 *
 * @param {React.Component} icon - Icon component
 * @param {string} title - Page title
 * @param {string} subtitle - Page subtitle
 * @param {Array} actions - Array of action button components
 * @param {boolean} hasChanges - Show unsaved changes indicator
 * @param {string} className - Additional CSS classes
 */
const PageHeader = memo(function PageHeader({
  icon: Icon,
  title,
  subtitle,
  actions = [],
  hasChanges = false,
  className = '',
}) {
  const { getThemeClasses } = useUIXTheme();

  // Memoize all theme classes to prevent multiple calls on each render
  const themeClasses = useMemo(
    () => ({
      bgGradientSecondary: getThemeClasses('bg-gradient-secondary'),
      alertInfoText: getThemeClasses('alert-info-text'),
    }),
    [getThemeClasses],
  );

  // Memoize container className
  const containerClassName = useMemo(() => {
    return className
      ? `mb-8 sm:mb-10 max-w-4xl mx-auto ${className}`
      : 'mb-8 sm:mb-10 max-w-4xl mx-auto';
  }, [className]);

  // Memoize icon section
  const iconSection = useMemo(() => {
    if (!Icon) return null;

    return (
      <div className={`p-3 rounded-2xl shadow-lg mr-4 flex-shrink-0 ${themeClasses.bgGradientSecondary}`}>
        <Icon className="h-8 w-8 sm:h-10 sm:w-10 text-white" />
      </div>
    );
  }, [Icon, themeClasses.bgGradientSecondary]);

  // Memoize subtitle section
  const subtitleSection = useMemo(() => {
    if (!subtitle) return null;

    return (
      <p className="mt-2 text-base sm:text-lg lg:text-xl text-gray-600 font-medium">
        {subtitle}
      </p>
    );
  }, [subtitle]);

  // Memoize unsaved changes indicator
  const unsavedChangesIndicator = useMemo(() => {
    if (!hasChanges) return null;

    return (
      <div className={`mt-2 flex items-center justify-center lg:justify-start text-sm font-medium ${themeClasses.alertInfoText}`}>
        <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 14.5c-.77.833.192 2.5 1.732 2.5z" />
        </svg>
        Unsaved changes
      </div>
    );
  }, [hasChanges, themeClasses.alertInfoText]);

  // Memoize actions section
  const actionsSection = useMemo(() => {
    if (actions.length === 0) return null;

    return (
      <div className="flex-shrink-0 flex items-center gap-3">
        {actions.map((action, index) => (
          <div key={index}>
            {action}
          </div>
        ))}
      </div>
    );
  }, [actions]);

  return (
    <div className={containerClassName}>
      <div className="flex flex-col space-y-4 lg:flex-row lg:items-start lg:justify-between lg:space-y-0">
        <div className="flex-1 min-w-0">
          <div className="flex items-start">
            {iconSection}
            <div className="text-center lg:text-left">
              <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-800 leading-tight">
                {title}
              </h1>
              {subtitleSection}
              {unsavedChangesIndicator}
            </div>
          </div>
        </div>
        {actionsSection}
      </div>
    </div>
  );
});

// Set display name for React DevTools
PageHeader.displayName = 'PageHeader';

export default PageHeader;