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

import React, { memo, useMemo, useCallback } from "react";
import { Link } from "react-router";
import { ChevronRightIcon } from "@heroicons/react/24/outline";

// Move static values outside component to prevent recreation
const GRADIENT_DISABLED = 'linear-gradient(135deg, #6b7280 0%, #9ca3af 100%)';
const GRADIENT_ENABLED = 'linear-gradient(135deg, #8a1622 0%, #dc2626 100%)';
const BUTTON_TEXT = 'Manage Settings';

/**
 * SettingsCard Component - Performance Optimized
 * Modern card design for settings dashboard pages
 * Features gradient headers, hover animations, and consistent theming
 *
 * Performance optimizations:
 * - Component memoization with React.memo
 * - Static gradient strings moved outside component
 * - Memoized className strings to prevent re-concatenation
 * - Optimized event handler with useCallback
 * - Memoized sections (icon header, icon, title, description, footer)
 * - Memoized style objects
 * - Prevented unnecessary re-renders
 *
 * @param {string} title - Card title
 * @param {string} description - Card description
 * @param {React.Component} icon - Icon component to display in header
 * @param {string} path - Navigation path (for Link components)
 * @param {function} action - Click handler (for button components)
 * @param {boolean} disabled - Whether the card is disabled
 * @param {string} className - Additional CSS classes
 */
const SettingsCard = memo(function SettingsCard({
  title,
  description,
  icon: Icon,
  path,
  action,
  disabled = false,
  className = "",
}) {
  // Memoize event handler to prevent unnecessary re-renders
  const handleClick = useCallback(
    (e) => {
      if (disabled) {
        e.preventDefault();
        return;
      }
      if (action) {
        action();
      }
    },
    [disabled, action],
  );

  // Memoize className strings
  const cardClassName = useMemo(() => {
    const baseClasses = 'group bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden hover:shadow-xl hover:-translate-y-1 transition-all duration-300 flex flex-col';
    const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : '';
    return `${baseClasses} ${disabledClasses} ${className}`.trim();
  }, [disabled, className]);

  const iconHeaderClassName = useMemo(() => {
    const baseClasses = 'p-6 text-white flex justify-center relative overflow-hidden';
    const disabledClasses = disabled ? 'grayscale' : '';
    return `${baseClasses} ${disabledClasses}`.trim();
  }, [disabled]);

  const iconClassName = useMemo(() => {
    const baseClasses = 'w-12 h-12 relative z-10 transition-transform duration-300';
    const hoverClasses = disabled ? '' : 'group-hover:scale-110';
    return `${baseClasses} ${hoverClasses}`.trim();
  }, [disabled]);

  const titleClassName = useMemo(() => {
    const baseClasses = 'text-lg font-bold text-gray-900 mb-2 transition-colors duration-200';
    const hoverClasses = disabled ? '' : 'group-hover:text-red-600';
    return `${baseClasses} ${hoverClasses}`.trim();
  }, [disabled]);

  const footerLinkClassName = useMemo(() => {
    const baseClasses = 'w-full p-4 bg-gradient-to-r from-gray-50 to-red-50 flex items-center justify-between text-gray-700 transition-all duration-200 font-medium';
    const stateClasses = disabled
      ? 'cursor-not-allowed'
      : 'hover:from-red-50 hover:to-red-100 hover:text-red-600';
    return `${baseClasses} ${stateClasses}`.trim();
  }, [disabled]);

  const chevronClassName = useMemo(() => {
    const baseClasses = 'w-5 h-5 transition-transform duration-200';
    const hoverClasses = disabled ? '' : 'group-hover:translate-x-1';
    return `${baseClasses} ${hoverClasses}`.trim();
  }, [disabled]);

  // Memoize style object
  const headerStyle = useMemo(() => {
    return {
      background: disabled ? GRADIENT_DISABLED : GRADIENT_ENABLED,
    };
  }, [disabled]);

  // Memoize icon section
  const iconSection = useMemo(() => {
    if (!Icon) return null;
    return <Icon className={iconClassName} />;
  }, [Icon, iconClassName]);

  // Memoize description section
  const descriptionSection = useMemo(() => {
    if (!description) return null;
    return (
      <p className="text-sm text-gray-600 line-clamp-3 mb-4 flex-grow">
        {description}
      </p>
    );
  }, [description]);

  // Memoize footer section
  const footerSection = useMemo(() => {
    const linkContent = (
      <>
        <span>{BUTTON_TEXT}</span>
        <ChevronRightIcon className={chevronClassName} />
      </>
    );

    if (path) {
      return (
        <Link
          to={disabled ? '#' : path}
          className={footerLinkClassName}
          onClick={handleClick}
        >
          {linkContent}
        </Link>
      );
    }

    return (
      <button
        onClick={handleClick}
        disabled={disabled}
        className={footerLinkClassName}
      >
        {linkContent}
      </button>
    );
  }, [path, disabled, footerLinkClassName, chevronClassName, handleClick]);

  return (
    <div className={cardClassName}>
      {/* Icon Header with red gradient theme */}
      <div className={iconHeaderClassName} style={headerStyle}>
        <div className="absolute inset-0 bg-white opacity-10 transform -skew-y-6 translate-y-12"></div>
        {iconSection}
      </div>

      {/* Content */}
      <div className="p-5 flex-grow flex flex-col">
        <h3 className={titleClassName}>
          {title}
        </h3>
        {descriptionSection}
      </div>

      {/* Footer Button */}
      <div className="border-t border-gray-100">
        {footerSection}
      </div>
    </div>
  );
});

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

export default SettingsCard;