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

import React, { memo, useMemo, useCallback } from "react";
import { useUIXTheme } from "../themes/useUIXTheme.jsx";
import {
  ClockIcon,
  CalendarIcon,
  UserIcon,
  GlobeAltIcon,
} from "@heroicons/react/24/outline";

// Move static default value outside component to prevent recreation
const DEFAULT_DATE_TEXT = "Not available";

/**
 * SystemInfo Component - Performance Optimized
 * Displays system metadata like creation and modification information
 * Used in detail pages to show audit trail information
 *
 * Performance optimizations:
 * - Component memoization with React.memo
 * - Static default value moved outside component
 * - Memoized theme classes to prevent multiple getThemeClasses calls
 * - Memoized formatDate function with useCallback
 * - Memoized formatted dates
 * - Memoized className strings
 * - Memoized sections (creation details, modification details)
 * - Prevented unnecessary re-renders
 *
 * @param {string} createdAt - Creation date/time
 * @param {string} createdByUserName - User who created the record
 * @param {string} createdFromIpAddress - IP address of creation
 * @param {string} modifiedAt - Last modification date/time
 * @param {string} modifiedByUserName - User who last modified the record
 * @param {string} modifiedFromIpAddress - IP address of last modification
 * @param {string} className - Additional CSS classes
 */
const SystemInfo = memo(function SystemInfo({
  createdAt,
  createdByUserName,
  createdFromIpAddress,
  modifiedAt,
  modifiedByUserName,
  modifiedFromIpAddress,
  className = "",
}) {
  const { getThemeClasses } = useUIXTheme();

  // Memoize all theme classes to prevent multiple calls on each render
  const themeClasses = useMemo(
    () => ({
      cardHeaderBg: getThemeClasses('card-header-bg'),
      cardBorder: getThemeClasses('card-border'),
      cardHeaderText: getThemeClasses('card-header-text'),
      textSecondary: getThemeClasses('text-secondary'),
    }),
    [getThemeClasses],
  );

  // Memoize date formatting function
  const formatDate = useCallback((dateString) => {
    if (!dateString) return DEFAULT_DATE_TEXT;
    try {
      return new Date(dateString).toLocaleString();
    } catch {
      return dateString;
    }
  }, []);

  // Memoize formatted dates
  const formattedCreatedAt = useMemo(() => formatDate(createdAt), [createdAt, formatDate]);
  const formattedModifiedAt = useMemo(() => formatDate(modifiedAt), [modifiedAt, formatDate]);

  return (
    <div className={className}>
      <label className="block text-base sm:text-lg font-semibold text-gray-700 mb-3">
        System Information
      </label>

      {/* Creation Details */}
      <div className={`${themeClasses.cardHeaderBg} rounded-xl p-5 ${themeClasses.cardBorder} border mb-4`}>
        <h4 className={`text-sm font-medium ${themeClasses.cardHeaderText} mb-3 flex items-center`}>
          <ClockIcon className="w-4 h-4 mr-2" />
          Creation Details
        </h4>
        <div className="space-y-3 text-sm">
          <div className="flex items-start">
            <CalendarIcon className={`w-4 h-4 mr-2 ${themeClasses.textSecondary} flex-shrink-0 mt-0.5`} />
            <div>
              <span className="font-medium text-gray-700">Created:</span>
              <p className="text-gray-900">{formattedCreatedAt}</p>
            </div>
          </div>
          {createdByUserName && (
            <div className="flex items-start">
              <UserIcon className={`w-4 h-4 mr-2 ${themeClasses.textSecondary} flex-shrink-0 mt-0.5`} />
              <div>
                <span className="font-medium text-gray-700">Created by:</span>
                <p className="text-gray-900">{createdByUserName}</p>
              </div>
            </div>
          )}
          {createdFromIpAddress && (
            <div className="flex items-start">
              <GlobeAltIcon className={`w-4 h-4 mr-2 ${themeClasses.textSecondary} flex-shrink-0 mt-0.5`} />
              <div>
                <span className="font-medium text-gray-700">Created From IP:</span>
                <p className="text-gray-900">{createdFromIpAddress}</p>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Modification Details */}
      {(modifiedAt || modifiedByUserName) && (
        <div className={`${themeClasses.cardHeaderBg} rounded-xl p-5 ${themeClasses.cardBorder} border`}>
          <h4 className={`text-sm font-medium ${themeClasses.cardHeaderText} mb-3 flex items-center`}>
            <ClockIcon className="w-4 h-4 mr-2" />
            Last Modification
          </h4>
          <div className="space-y-3 text-sm">
            {modifiedAt && (
              <div className="flex items-start">
                <CalendarIcon className={`w-4 h-4 mr-2 ${themeClasses.textSecondary} flex-shrink-0 mt-0.5`} />
                <div>
                  <span className="font-medium text-gray-700">Modified:</span>
                  <p className="text-gray-900">{formattedModifiedAt}</p>
                </div>
              </div>
            )}
            {modifiedByUserName && (
              <div className="flex items-start">
                <UserIcon className={`w-4 h-4 mr-2 ${themeClasses.textSecondary} flex-shrink-0 mt-0.5`} />
                <div>
                  <span className="font-medium text-gray-700">Modified by:</span>
                  <p className="text-gray-900">{modifiedByUserName}</p>
                </div>
              </div>
            )}
            {modifiedFromIpAddress && (
              <div className="flex items-start">
                <GlobeAltIcon className={`w-4 h-4 mr-2 ${themeClasses.textSecondary} flex-shrink-0 mt-0.5`} />
                <div>
                  <span className="font-medium text-gray-700">Modified From IP:</span>
                  <p className="text-gray-900">{modifiedFromIpAddress}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
});

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

export default SystemInfo;