import React from "react"; import { HardDrive, Database, Shield, Clock, Upload, Plus, Server, Code, FileArchive, Bug, Terminal, Lock, ServerCrash, AlertTriangle, } from "lucide-react"; // Helper functions for formatting const formatBytes = (bytes) => { if (bytes === null || bytes === undefined || bytes === "") return "-"; if (isNaN(bytes)) return bytes; const sizes = ["Bytes", "KB", "MB", "GB", "TB"]; if (bytes === 0) return "0 Byte"; const i = Math.floor(Math.log(bytes) / Math.log(1024)); return `${(bytes / Math.pow(1024, i)).toFixed(2)} ${sizes[i]}`; }; const formatSeconds = (seconds) => { if (seconds === null || seconds === undefined || seconds === "") return "-"; if (isNaN(seconds)) return seconds; if (seconds < 60) return `${seconds}s`; const m = Math.floor(seconds / 60); const s = seconds % 60; if (m < 60) return `${m}m ${s}s`; const h = Math.floor(m / 60); return `${h}h ${m % 60}m ${s}s`; }; // Minimum recommended values for warnings const minimums = { php_version: { value: "8.0", compare: (v) => v && parseFloat(v) < 8.0, message: "Recommended PHP >= 8.0" }, memory_limit: { value: 256 * 1024 * 1024, compare: (v) => v && v < 256 * 1024 * 1024, message: "Recommended Memory >= 256MB" }, disk_free_space: { value: 1 * 1024 * 1024 * 1024, compare: (v) => v && v < 1 * 1024 * 1024 * 1024, message: "Recommended Free Space >= 1GB" }, max_execution_time: { value: 60, compare: (v) => v && v < 60, message: "Recommended Execution Time >= 60s" }, ZipArchive: { value: true, compare: (v) => !v, message: "ZipArchive should be enabled" }, WP_Debug: { value: false, compare: (v) => !!v, message: "WP Debug should be Off" }, WP_CLI: { value: true, compare: (v) => !v, message: "WP CLI should be enabled" }, safe_mode: { value: false, compare: (v) => !!v, message: "Safe Mode should be Off" }, mysql_version: { value: "5.7", compare: (v) => v && parseFloat(v) < 5.7, message: "Recommended MySQL >= 5.7" }, }; const metricsConfig = [ { key: "disk_free_space", label: "Disk Free Space", format: formatBytes, icon: , }, { key: "disk_total_space", label: "Disk Total Space", format: formatBytes, icon: , }, { key: "memory_limit", label: "Memory Limit", format: formatBytes, icon: , }, { key: "memory_usage", label: "Memory Usage", format: formatBytes, icon: , }, { key: "max_execution_time", label: "Max Execution Time", format: formatSeconds, icon: , }, { key: "upload_max_filesize", label: "Upload Max Filesize", format: formatBytes, icon: , }, { key: "post_max_size", label: "Post Max Size", format: formatBytes, icon: , }, { key: "server_software", label: "Server Software", format: (v) => v || "-", icon: , }, { key: "php_version", label: "PHP Version", format: (v) => v || "-", icon:

,
  },
  {
    key: "ZipArchive",
    label: "ZipArchive",
    format: (v) => (v ? "On" : "Off"),
    icon: ,
  },
  {
    key: "wp_version",
    label: "WP Version",
    format: (v) => v || "-",
    icon: ,
  },
  {
    key: "mysql_version",
    label: "MySQL Version",
    format: (v) => v || "-",
    icon: ,
  },
  {
    key: "WP_Debug",
    label: "WP Debug",
    format: (v) => (v ? "On" : "Off"),
    icon: ,
  },
  {
    key: "WP_CLI",
    label: "WP CLI",
    format: (v) => (v ? "On" : "Off"),
    icon: ,
  },
  // {
  //   key: "WP_Max_Upload_Size",
  //   label: "WP Max Upload Size",
  //   format: formatBytes,
  //   icon: ,
  // },
  {
    key: "safe_mode",
    label: "Safe Mode",
    format: (v) => (v ? "On" : "Off"),
    icon: ,
  },
];

const Warning = ({ message }) => (
  
    {message}
  
);

const ServerMetrics = ({ metrics, showWarnings = true }) => {
  return (
    
      
        
          
          Server Metrics
        

        
          
            
              
                ⚡
              
            
            
              
                Pro Tips for Your Server Setup 💡
              
              
                Hey there! 👋 Your server setup is like choosing the right gear for a mission - 
                it totally depends on your site's vibe! Small sites? You're good with the basics! 
                But if you're running a massive site with tons of plugins, themes, or getting that 
                sweet traffic flow, maybe consider leveling up your server resources. 
                It's like upgrading from a bicycle to a rocket ship! 🚀✨
              
            
          
        

        
          
              {metricsConfig.map(({ key, label, format, icon }) => {
                const value = metrics?.[key];
                const warning =
                  showWarnings && minimums[key] && minimums[key].compare(value)
                    ? minimums[key].message
                    : null;
                return (
                  
                );
              })}
            
            
              
                 
                METRIC
                VALUE
                 
              
            
            
                    
                      
                        {React.cloneElement(icon, { className: "tw-w-4 tw-h-4 tw-text-gray-400" })}
                      
                    
                    {label}
                    {format(value)}
                    
                      {warning && }
                    
                  
          
        
      
    
  );
};

export default ServerMetrics;