ProxmoxVE-Local/src/app/_components/HelpModal.tsx

'use client';

import { useState } from 'react';
import { Button } from './ui/button';
import { HelpCircle, Server, Settings, RefreshCw, Clock, Package, HardDrive, FolderOpen, Search, Download } from 'lucide-react';
import { useRegisterModal } from './modal/ModalStackProvider';

interface HelpModalProps {
  isOpen: boolean;
  onClose: () => void;
  initialSection?: string;
}

type HelpSection = 'server-settings' | 'general-settings' | 'sync-button' | 'auto-sync' | 'available-scripts' | 'downloaded-scripts' | 'installed-scripts' | 'lxc-settings' | 'update-system';

export function HelpModal({ isOpen, onClose, initialSection = 'server-settings' }: HelpModalProps) {
  useRegisterModal(isOpen, { id: 'help-modal', allowEscape: true, onClose });
  const [activeSection, setActiveSection] = useState<HelpSection>(initialSection as HelpSection);

  if (!isOpen) return null;

  const sections = [
    { id: 'server-settings' as HelpSection, label: 'Server Settings', icon: Server },
    { id: 'general-settings' as HelpSection, label: 'General Settings', icon: Settings },
    { id: 'sync-button' as HelpSection, label: 'Sync Button', icon: RefreshCw },
    { id: 'auto-sync' as HelpSection, label: 'Auto-Sync', icon: Clock },
    { id: 'available-scripts' as HelpSection, label: 'Available Scripts', icon: Package },
    { id: 'downloaded-scripts' as HelpSection, label: 'Downloaded Scripts', icon: HardDrive },
    { id: 'installed-scripts' as HelpSection, label: 'Installed Scripts', icon: FolderOpen },
    { id: 'lxc-settings' as HelpSection, label: 'LXC Settings', icon: Settings },
    { id: 'update-system' as HelpSection, label: 'Update System', icon: Download },
  ];

  const renderContent = () => {
    switch (activeSection) {
      case 'server-settings':
        return (
          <div className="space-y-6">
            <div>
              <h3 className="text-xl font-semibold text-foreground mb-4">Server Settings</h3>
              <p className="text-muted-foreground mb-6">
                Manage your Proxmox VE servers and configure connection settings.
              </p>
            </div>

            <div className="space-y-4">
              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">Adding PVE Servers</h4>
                <ul className="text-sm text-muted-foreground space-y-2">
                  <li>• <strong>Server Name:</strong> A friendly name to identify your server</li>
                  <li>• <strong>IP Address:</strong> The IP address or hostname of your PVE server</li>
                  <li>• <strong>Username:</strong> PVE user account (usually root or a dedicated user)</li>
                  <li>• <strong>SSH Port:</strong> Default is 22, change if your server uses a different port</li>
                </ul>
              </div>

              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">Authentication Types</h4>
                <ul className="text-sm text-muted-foreground space-y-2">
                  <li>• <strong>Password:</strong> Use username and password authentication</li>
                  <li>• <strong>SSH Key:</strong> Use SSH key pair for secure authentication</li>
                </ul>
                <div className="mt-3 p-3 bg-info/10 rounded-md">
                  <h5 className="font-medium text-info-foreground mb-2">SSH Key Features:</h5>
                  <ul className="text-xs text-info/80 space-y-1">
                    <li>• <strong>Generate Key Pair:</strong> Create new SSH keys automatically</li>
                    <li>• <strong>View Public Key:</strong> Copy public key for server setup</li>
                    <li>• <strong>Persistent Storage:</strong> Keys are stored securely on disk</li>
                  </ul>
                </div>
              </div>

              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">Server Color Coding</h4>
                <p className="text-sm text-muted-foreground">
                  Assign colors to servers for visual distinction throughout the application. 
                  This helps identify which server you&apos;re working with when managing scripts.
                  This needs to be enabled in the General Settings.
                </p>
              </div>
            </div>
          </div>
        );

      case 'general-settings':
        return (
          <div className="space-y-6">
            <div>
              <h3 className="text-xl font-semibold text-foreground mb-4">General Settings</h3>
              <p className="text-muted-foreground mb-6">
                Configure application preferences and behavior.
              </p>
            </div>

            <div className="space-y-4">
              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">Save Filters</h4>
                <p className="text-sm text-muted-foreground mb-2">
                  When enabled, your script filter preferences (search terms, categories, sorting) 
                  will be automatically saved and restored when you return to the application.
                </p>
                <ul className="text-sm text-muted-foreground space-y-1">
                  <li>• Search queries are preserved</li>
                  <li>• Selected script types are remembered</li>
                  <li>• Sort preferences are maintained</li>
                  <li>• Category selections are saved</li>
                </ul>
              </div>

              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">Server Color Coding</h4>
                <p className="text-sm text-muted-foreground">
                  Enable visual color coding for servers throughout the application. 
                  This makes it easier to identify which server you&apos;re working with.
                </p>
              </div>

              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">GitHub Integration</h4>
                <p className="text-sm text-muted-foreground mb-2">
                  Add a GitHub Personal Access Token to increase API rate limits and improve performance.
                </p>
                <ul className="text-sm text-muted-foreground space-y-1">
                  <li>• Bypasses GitHub&apos;s rate limiting for unauthenticated requests</li>
                  <li>• Improves script loading and syncing performance</li>
                  <li>• Token is stored securely and only used for API calls</li>
                </ul>
              </div>

              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">Authentication</h4>
                <p className="text-sm text-muted-foreground mb-2">
                  Secure your application with username and password authentication.
                </p>
                <ul className="text-sm text-muted-foreground space-y-1">
                  <li>• Set up username and password for app access</li>
                  <li>• Enable/disable authentication as needed</li>
                  <li>• Credentials are stored securely</li>
                </ul>
              </div>
            </div>
          </div>
        );

      case 'sync-button':
        return (
          <div className="space-y-6">
            <div>
              <h3 className="text-xl font-semibold text-foreground mb-4">Sync Button</h3>
              <p className="text-muted-foreground mb-6">
                Synchronize script metadata from the ProxmoxVE GitHub repository.
              </p>
            </div>

            <div className="space-y-4">
              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">What Does Syncing Do?</h4>
                <ul className="text-sm text-muted-foreground space-y-2">
                  <li>• <strong>Updates Script Metadata:</strong> Downloads the latest script information (JSON files)</li>
                  <li>• <strong>Refreshes Available Scripts:</strong> Updates the list of scripts you can download</li>
                  <li>• <strong>Updates Categories:</strong> Refreshes script categories and organization</li>
                  <li>• <strong>Checks for Updates:</strong> Identifies which downloaded scripts have newer versions</li>
                </ul>
              </div>

              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">Important Notes</h4>
                <ul className="text-sm text-muted-foreground space-y-2">
                  <li>• <strong>Metadata Only:</strong> Syncing only updates script information, not the actual script files</li>
                  <li>• <strong>No Downloads:</strong> Script files are downloaded separately when you choose to install them</li>
                  <li>• <strong>Last Sync Time:</strong> Shows when the last successful sync occurred</li>
                  <li>• <strong>Rate Limits:</strong> GitHub API limits may apply without a personal access token</li>
                </ul>
              </div>

              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">When to Sync</h4>
                <ul className="text-sm text-muted-foreground space-y-1">
                  <li>• When you want to see the latest available scripts</li>
                  <li>• To check for updates to your downloaded scripts</li>
                  <li>• If you notice scripts are missing or outdated</li>
                  <li>• After the ProxmoxVE repository has been updated</li>
                </ul>
              </div>
            </div>
          </div>
        );

      case 'auto-sync':
        return (
          <div className="space-y-6">
            <div>
              <h3 className="text-xl font-semibold text-foreground mb-4">Auto-Sync</h3>
              <p className="text-muted-foreground mb-6">
                Configure automatic synchronization of scripts with configurable intervals and notifications.
              </p>
            </div>

            <div className="space-y-4">
              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">What Is Auto-Sync?</h4>
                <p className="text-sm text-muted-foreground mb-2">
                  Auto-sync automatically synchronizes script metadata from the ProxmoxVE GitHub repository at specified intervals, 
                  and optionally downloads/updates scripts and sends notifications.
                </p>
                <ul className="text-sm text-muted-foreground space-y-1">
                  <li>• <strong>Automatic JSON Sync:</strong> Downloads latest script metadata periodically</li>
                  <li>• <strong>Auto-Download:</strong> Automatically download new scripts when available</li>
                  <li>• <strong>Auto-Update:</strong> Automatically update existing scripts to newer versions</li>
                  <li>• <strong>Notifications:</strong> Send notifications when sync completes</li>
                </ul>
              </div>

              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">Sync Intervals</h4>
                <ul className="text-sm text-muted-foreground space-y-2">
                  <li>• <strong>Predefined:</strong> Choose from common intervals (15min, 30min, 1hour, 6hours, 12hours, 24hours)</li>
                  <li>• <strong>Custom Cron:</strong> Use cron expressions for advanced scheduling</li>
                  <li>• <strong>Examples:</strong>
                    <ul className="ml-4 mt-1 space-y-1">
                      <li>• <code>0 */6 * * *</code> - Every 6 hours</li>
                      <li>• <code>0 0 * * *</code> - Daily at midnight</li>
                      <li>• <code>0 9 * * 1</code> - Every Monday at 9 AM</li>
                    </ul>
                  </li>
                </ul>
              </div>

              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">Auto-Download Options</h4>
                <ul className="text-sm text-muted-foreground space-y-2">
                  <li>• <strong>Auto-download new scripts:</strong> Automatically download scripts that haven't been downloaded yet</li>
                  <li>• <strong>Auto-update existing scripts:</strong> Automatically update scripts that have newer versions available</li>
                  <li>• <strong>Selective Control:</strong> Enable/disable each option independently</li>
                </ul>
              </div>

              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">Notifications (Apprise)</h4>
                <p className="text-sm text-muted-foreground mb-2">
                  Send notifications when sync completes using Apprise, which supports 80+ notification services.
                  If you want any other notification service, please open an issue on the GitHub repository.
                </p>
                <ul className="text-sm text-muted-foreground space-y-2">
                  <li>• <strong>Apprise Server:</strong> <code>http://YOUR_APPRISE_SERVER/notify/apprise</code></li>
                </ul>
                <p className="text-xs text-muted-foreground mt-2">
                  See the <a href="https://github.com/caronc/apprise" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">Apprise documentation</a> for more supported services.
                </p>
              </div>

              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">Setup Guide</h4>
                <ol className="text-sm text-muted-foreground space-y-2 list-decimal list-inside">
                  <li>Enable auto-sync in the General Settings → Auto-Sync tab</li>
                  <li>Choose your sync interval (predefined or custom cron)</li>
                  <li>Configure auto-download options if desired</li>
                  <li>Set up notifications by adding Apprise URLs</li>
                  <li>Test your notification setup using the "Test Notification" button</li>
                  <li>Save your settings to activate auto-sync</li>
                </ol>
              </div>

              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">Cron Expression Help</h4>
                <p className="text-sm text-muted-foreground mb-2">
                  Cron expressions have 5 fields: minute hour day month weekday
                </p>
                <ul className="text-sm text-muted-foreground space-y-1">
                  <li>• <strong>Minute:</strong> 0-59 or *</li>
                  <li>• <strong>Hour:</strong> 0-23 or *</li>
                  <li>• <strong>Day:</strong> 1-31 or *</li>
                  <li>• <strong>Month:</strong> 1-12 or *</li>
                  <li>• <strong>Weekday:</strong> 0-6 (Sunday=0) or *</li>
                </ul>
                <p className="text-xs text-muted-foreground mt-2">
                  Use <a href="https://crontab.guru" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">crontab.guru</a> to test and learn cron expressions.
                </p>
              </div>
            </div>
          </div>
        );

      case 'available-scripts':
        return (
          <div className="space-y-6">
            <div>
              <h3 className="text-xl font-semibold text-foreground mb-4">Available Scripts</h3>
              <p className="text-muted-foreground mb-6">
                Browse and discover scripts from the ProxmoxVE repository.
              </p>
            </div>

            <div className="space-y-4">
              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">Browsing Scripts</h4>
                <ul className="text-sm text-muted-foreground space-y-2">
                  <li>• <strong>Category Sidebar:</strong> Filter scripts by category (Storage, Network, Security, etc.)</li>
                  <li>• <strong>Search:</strong> Find scripts by name or description</li>
                  <li>• <strong>View Modes:</strong> Switch between card and list view</li>
                  <li>• <strong>Sorting:</strong> Sort by name or creation date</li>
                </ul>
              </div>

              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">Filtering Options</h4>
                <ul className="text-sm text-muted-foreground space-y-2">
                  <li>• <strong>Script Types:</strong> Filter by CT (Container) or other script types</li>
                  <li>• <strong>Update Status:</strong> Show only scripts with available updates</li>
                  <li>• <strong>Search Query:</strong> Search within script names and descriptions</li>
                  <li>• <strong>Categories:</strong> Filter by specific script categories</li>
                </ul>
              </div>

              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">Script Actions</h4>
                <ul className="text-sm text-muted-foreground space-y-2">
                  <li>• <strong>View Details:</strong> Click on a script to see full information and documentation</li>
                  <li>• <strong>Download:</strong> Download script files to your local system</li>
                  <li>• <strong>Install:</strong> Run scripts directly on your PVE servers</li>
                  <li>• <strong>Preview:</strong> View script content before downloading</li>
                </ul>
              </div>
            </div>
          </div>
        );

      case 'downloaded-scripts':
        return (
          <div className="space-y-6">
            <div>
              <h3 className="text-xl font-semibold text-foreground mb-4">Downloaded Scripts</h3>
              <p className="text-muted-foreground mb-6">
                Manage scripts that have been downloaded to your local system.
              </p>
            </div>

            <div className="space-y-4">
              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">What Are Downloaded Scripts?</h4>
                <p className="text-sm text-muted-foreground mb-2">
                  These are scripts that you&apos;ve downloaded from the repository and are stored locally on your system.
                </p>
                <ul className="text-sm text-muted-foreground space-y-1">
                  <li>• Script files are stored in your local scripts directory</li>
                  <li>• You can run these scripts on your PVE servers</li>
                  <li>• Scripts can be updated when newer versions are available</li>
                </ul>
              </div>

              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">Update Detection</h4>
                <p className="text-sm text-muted-foreground mb-2">
                  The system automatically checks if newer versions of your downloaded scripts are available.
                </p>
                <ul className="text-sm text-muted-foreground space-y-1">
                  <li>• Scripts with updates available are marked with an update indicator</li>
                  <li>• You can filter to show only scripts with available updates</li>
                  <li>• Update detection happens when you sync with the repository</li>
                </ul>
              </div>

              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">Managing Downloaded Scripts</h4>
                <ul className="text-sm text-muted-foreground space-y-2">
                  <li>• <strong>Update Scripts:</strong> Download the latest version of a script</li>
                  <li>• <strong>View Details:</strong> See script information and documentation</li>
                  <li>• <strong>Install/Run:</strong> Execute scripts on your PVE servers</li>
                  <li>• <strong>Filter & Search:</strong> Use the same filtering options as Available Scripts</li>
                </ul>
              </div>
            </div>
          </div>
        );

      case 'installed-scripts':
        return (
          <div className="space-y-6">
            <div>
              <h3 className="text-xl font-semibold text-foreground mb-4">Installed Scripts</h3>
              <p className="text-muted-foreground mb-6">
                Track and manage scripts that are installed on your PVE servers.
              </p>
            </div>

            <div className="space-y-4">
              <div className="p-4 border border-border rounded-lg bg-muted/50 border-primary/20">
                <h4 className="font-medium text-foreground mb-2 flex items-center gap-2">
                  <Search className="w-4 h-4" />
                  Auto-Detection (Primary Feature)
                </h4>
                <p className="text-sm text-muted-foreground mb-3">
                  The system can automatically detect LXC containers that have community-script tags on your PVE servers.
                </p>
                <ul className="text-sm text-muted-foreground space-y-2">
                  <li>• <strong>Automatic Discovery:</strong> Scans your PVE servers for containers with community-script tags</li>
                  <li>• <strong>Container Detection:</strong> Identifies LXC containers running Proxmox helper scripts</li>
                  <li>• <strong>Server Association:</strong> Links detected scripts to the specific PVE server</li>
                  <li>• <strong>Bulk Import:</strong> Automatically creates records for all detected scripts</li>
                </ul>
                <div className="mt-3 p-3 bg-primary/10 rounded-lg border border-primary/20">
                  <p className="text-sm font-medium text-primary">How Auto-Detection Works:</p>
                  <ol className="text-sm text-muted-foreground mt-1 space-y-1">
                    <li>1. Connects to your configured PVE servers</li>
                    <li>2. Scans LXC container configurations</li>
                    <li>3. Looks for containers with community-script tags</li>
                    <li>4. Creates installed script records automatically</li>
                  </ol>
                </div>
              </div>

              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">Manual Script Management</h4>
                <ul className="text-sm text-muted-foreground space-y-2">
                  <li>• <strong>Add Scripts Manually:</strong> Create records for scripts not auto-detected</li>
                  <li>• <strong>Edit Script Details:</strong> Update script names and container IDs</li>
                  <li>• <strong>Delete Scripts:</strong> Remove scripts from tracking</li>
                  <li>• <strong>Bulk Operations:</strong> Clean up old or invalid script records</li>
                </ul>
              </div>

              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">Script Tracking Features</h4>
                <ul className="text-sm text-muted-foreground space-y-2">
                  <li>• <strong>Installation Status:</strong> Track success, failure, or in-progress installations</li>
                  <li>• <strong>Server Association:</strong> Know which server each script is installed on</li>
                  <li>• <strong>Container ID:</strong> Link scripts to specific LXC containers</li>
                  <li>• <strong>Web UI Access:</strong> Track and access Web UI IP addresses and ports</li>
                  <li>• <strong>Execution Logs:</strong> View output and logs from script installations</li>
                  <li>• <strong>Filtering:</strong> Filter by server, status, or search terms</li>
                </ul>
              </div>

              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">Managing Installed Scripts</h4>
                <ul className="text-sm text-muted-foreground space-y-2">
                  <li>• <strong>View All Scripts:</strong> See all tracked scripts across all servers</li>
                  <li>• <strong>Filter by Server:</strong> Show scripts for a specific PVE server</li>
                  <li>• <strong>Filter by Status:</strong> Show successful, failed, or in-progress installations</li>
                  <li>• <strong>Sort Options:</strong> Sort by name, container ID, server, status, or date</li>
                  <li>• <strong>Update Scripts:</strong> Re-run or update existing script installations</li>
                </ul>
              </div>

              <div className="p-4 border border-border rounded-lg bg-info/10 border-info/50">
                <h4 className="font-medium text-foreground mb-2">Web UI Access </h4>
                <p className="text-sm text-muted-foreground mb-3">
                  Automatically detect and access Web UI interfaces for your installed scripts.
                </p>
                <ul className="text-sm text-muted-foreground space-y-2">
                  <li>• <strong>Auto-Detection:</strong> Automatically detects Web UI URLs from script installation output</li>
                  <li>• <strong>IP & Port Tracking:</strong> Stores and displays Web UI IP addresses and ports</li>
                  <li>• <strong>One-Click Access:</strong> Click IP:port to open Web UI in new tab</li>
                  <li>• <strong>Manual Detection:</strong> Re-detect IP using <code>hostname -I</code> inside container</li>
                  <li>• <strong>Port Detection:</strong> Uses script metadata to get correct port (e.g., actualbudget:5006)</li>
                  <li>• <strong>Editable Fields:</strong> Manually edit IP and port values as needed</li>
                </ul>
                <div className="mt-3 p-3 bg-info/20 rounded-lg border border-info/30">
                  <p className="text-sm font-medium text-info">💡 How it works:</p>
                  <ul className="text-sm text-muted-foreground mt-1 space-y-1">
                    <li>• Scripts automatically detect URLs like <code>http://10.10.10.1:3000</code> during installation</li>
                    <li>• Re-detect button runs <code>hostname -I</code> inside the container via SSH</li>
                    <li>• Port defaults to 80, but uses script metadata when available</li>
                    <li>• Web UI buttons are disabled when container is stopped</li>
                  </ul>
                </div>
              </div>

              <div className="p-4 border border-border rounded-lg bg-accent/50 dark:bg-accent/20">
                <h4 className="font-medium text-foreground mb-2">Actions Dropdown </h4>
                <p className="text-sm text-muted-foreground mb-3">
                  Clean interface with all actions organized in a dropdown menu.
                </p>
                <ul className="text-sm text-muted-foreground space-y-2">
                  <li>• <strong>Edit Button:</strong> Always visible for quick script editing</li>
                  <li>• <strong>Actions Dropdown:</strong> Contains Update, Shell, Open UI, Start/Stop, Destroy, Delete</li>
                  <li>• <strong>Smart Visibility:</strong> Dropdown only appears when actions are available</li>
                  <li>• <strong>Color Coding:</strong> Start (green), Stop (red), Update (cyan), Shell (gray), Open UI (blue)</li>
                  <li>• <strong>Auto-Close:</strong> Dropdown closes after clicking any action</li>
                  <li>• <strong>Disabled States:</strong> Actions are disabled when container is stopped</li>
                </ul>
              </div>

              <div className="p-4 border border-border rounded-lg bg-accent/50 dark:bg-accent/20">
                <h4 className="font-medium text-foreground mb-2">Container Control</h4>
                <p className="text-sm text-muted-foreground mb-3">
                  Directly control LXC containers from the installed scripts page via SSH.
                </p>
                <ul className="text-sm text-muted-foreground space-y-2">
                  <li>• <strong>Start/Stop Button:</strong> Control container state with <code>pct start/stop &lt;ID&gt;</code></li>
                  <li>• <strong>Container Status:</strong> Real-time status indicator (running/stopped/unknown)</li>
                  <li>• <strong>Destroy Button:</strong> Permanently remove LXC container with <code>pct destroy &lt;ID&gt;</code></li>
                  <li>• <strong>Confirmation Modals:</strong> Simple OK/Cancel for start/stop, type container ID to confirm destroy</li>
                  <li>• <strong>SSH Execution:</strong> All commands executed remotely via configured SSH connections</li>
                </ul>
                <div className="mt-3 p-3 bg-muted/30 dark:bg-muted/20 rounded-lg border border-border">
                  <p className="text-sm font-medium text-foreground">⚠️ Safety Features:</p>
                  <ul className="text-sm text-muted-foreground mt-1 space-y-1">
                    <li>• Start/Stop actions require simple confirmation</li>
                    <li>• Destroy action requires typing the container ID to confirm</li>
                    <li>• All actions show loading states and error handling</li>
                    <li>• Only works with SSH scripts that have valid container IDs</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        );

      case 'update-system':
        return (
          <div className="space-y-6">
            <div>
              <h3 className="text-xl font-semibold text-foreground mb-4">Update System</h3>
              <p className="text-muted-foreground mb-6">
                Keep your PVE Scripts Management application up to date with the latest features and improvements.
              </p>
            </div>

            <div className="space-y-4">
              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">What Does Updating Do?</h4>
                <ul className="text-sm text-muted-foreground space-y-2">
                  <li>• <strong>Downloads Latest Version:</strong> Fetches the newest release from the GitHub repository</li>
                  <li>• <strong>Updates Application Files:</strong> Replaces current files with the latest version</li>
                  <li>• <strong>Installs Dependencies:</strong> Updates Node.js packages and dependencies</li>
                  <li>• <strong>Rebuilds Application:</strong> Compiles the application with latest changes</li>
                  <li>• <strong>Restarts Server:</strong> Automatically restarts the application server</li>
                </ul>
              </div>

              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">How to Update</h4>
                <div className="space-y-3">
                  <div>
                    <h5 className="font-medium text-foreground mb-2">Automatic Update (Recommended)</h5>
                    <ul className="text-sm text-muted-foreground space-y-1">
                      <li>• Click the &quot;Update Now&quot; button when an update is available</li>
                      <li>• The system will handle everything automatically</li>
                      <li>• You&apos;ll see a progress overlay with update logs</li>
                      <li>• The page will reload automatically when complete</li>
                    </ul>
                  </div>
                  
                  <div>
                    <h5 className="font-medium text-foreground mb-2">Manual Update (Advanced)</h5>
                    <p className="text-sm text-muted-foreground mb-2">If automatic update fails, you can update manually:</p>
                    <div className="bg-muted p-3 rounded-lg font-mono text-sm">
                      <div className="text-muted-foreground"># Navigate to the application directory</div>
                      <div>cd $PVESCRIPTLOCAL_DIR</div>
                      <div className="text-muted-foreground"># Pull latest changes</div>
                      <div>git pull</div>
                      <div className="text-muted-foreground"># Install dependencies</div>
                      <div>npm install</div>
                      <div className="text-muted-foreground"># Build the application</div>
                      <div>npm run build</div>
                      <div className="text-muted-foreground"># Start the application</div>
                      <div>npm start</div>
                    </div>
                  </div>
                </div>
              </div>

              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">Update Process</h4>
                <ol className="text-sm text-muted-foreground space-y-2">
                  <li><strong>1. Check for Updates:</strong> System automatically checks GitHub for new releases</li>
                  <li><strong>2. Download Update:</strong> Downloads the latest release files</li>
                  <li><strong>3. Backup Current Version:</strong> Creates backup of current installation</li>
                  <li><strong>4. Install New Version:</strong> Replaces files and updates dependencies</li>
                  <li><strong>5. Build Application:</strong> Compiles the updated code</li>
                  <li><strong>6. Restart Server:</strong> Stops old server and starts new version</li>
                  <li><strong>7. Reload Page:</strong> Automatically refreshes the browser</li>
                </ol>
              </div>

              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">Release Notes</h4>
                <p className="text-sm text-muted-foreground mb-2">
                  Click the external link icon next to the update button to view detailed release notes on GitHub.
                </p>
                <ul className="text-sm text-muted-foreground space-y-1">
                  <li>• See what&apos;s new in each version</li>
                  <li>• Read about bug fixes and improvements</li>
                  <li>• Check for any breaking changes</li>
                  <li>• View installation requirements</li>
                </ul>
              </div>

              <div className="p-4 border border-border rounded-lg bg-muted/50">
                <h4 className="font-medium text-foreground mb-2">Important Notes</h4>
                <ul className="text-sm text-muted-foreground space-y-2">
                  <li>• <strong>Backup:</strong> Your data and settings are preserved during updates</li>
                  <li>• <strong>Downtime:</strong> Brief downtime occurs during the update process</li>
                  <li>• <strong>Compatibility:</strong> Updates maintain backward compatibility with your data</li>
                  <li>• <strong>Rollback:</strong> If issues occur, you can manually revert to previous version</li>
                </ul>
              </div>
            </div>
          </div>
        );

      case 'lxc-settings':
        return (
          <div className="space-y-6">
            <div>
              <h3 className="text-xl font-semibold text-foreground mb-4">LXC Settings</h3>
              <p className="text-muted-foreground mb-6">
                Edit LXC container configuration files directly from the installed scripts interface. This feature allows you to modify container settings without manually accessing the Proxmox VE server.
              </p>
            </div>

            <div className="space-y-4">
              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">Overview</h4>
                <p className="text-sm text-muted-foreground mb-3">
                  The LXC Settings modal provides a user-friendly interface to edit container configuration files. It parses common settings into editable fields while preserving advanced configurations.
                </p>
                <ul className="text-sm text-muted-foreground space-y-1">
                  <li>• <strong>Common Settings:</strong> Edit basic container parameters like cores, memory, network, and storage</li>
                  <li>• <strong>Advanced Settings:</strong> Raw text editing for lxc.* entries and other advanced configurations</li>
                  <li>• <strong>Database Caching:</strong> Configurations are cached locally for faster access</li>
                  <li>• <strong>Change Detection:</strong> Warns when cached config differs from server version</li>
                </ul>
              </div>

              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">Common Settings Tab</h4>
                <div className="space-y-3">
                  <div>
                    <h5 className="font-medium text-sm text-foreground mb-1">Basic Configuration</h5>
                    <ul className="text-sm text-muted-foreground space-y-1">
                      <li>• <strong>Architecture:</strong> Container architecture (usually amd64)</li>
                      <li>• <strong>Cores:</strong> Number of CPU cores allocated to the container</li>
                      <li>• <strong>Memory:</strong> RAM allocation in megabytes</li>
                      <li>• <strong>Swap:</strong> Swap space allocation in megabytes</li>
                      <li>• <strong>Hostname:</strong> Container hostname</li>
                      <li>• <strong>OS Type:</strong> Operating system type (e.g., debian, ubuntu)</li>
                      <li>• <strong>Start on Boot:</strong> Whether to start container automatically on host boot</li>
                      <li>• <strong>Unprivileged:</strong> Whether the container runs in unprivileged mode</li>
                    </ul>
                  </div>
                  
                  <div>
                    <h5 className="font-medium text-sm text-foreground mb-1">Network Configuration</h5>
                    <ul className="text-sm text-muted-foreground space-y-1">
                      <li>• <strong>IP Configuration:</strong> Choose between DHCP or static IP assignment</li>
                      <li>• <strong>IP Address:</strong> Static IP with CIDR notation (e.g., 10.10.10.164/24)</li>
                      <li>• <strong>Gateway:</strong> Network gateway for static IP configuration</li>
                      <li>• <strong>Bridge:</strong> Network bridge interface (usually vmbr0)</li>
                      <li>• <strong>MAC Address:</strong> Hardware address for the network interface</li>
                      <li>• <strong>VLAN Tag:</strong> Optional VLAN tag for network segmentation</li>
                    </ul>
                  </div>

                  <div>
                    <h5 className="font-medium text-sm text-foreground mb-1">Storage & Features</h5>
                    <ul className="text-sm text-muted-foreground space-y-1">
                      <li>• <strong>Root Filesystem:</strong> Storage location and disk identifier</li>
                      <li>• <strong>Size:</strong> Disk size allocation (e.g., 4G, 8G)</li>
                      <li>• <strong>Features:</strong> Container capabilities (keyctl, nesting, fuse)</li>
                      <li>• <strong>Tags:</strong> Comma-separated tags for organization</li>
                    </ul>
                  </div>
                </div>
              </div>

              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">Advanced Settings Tab</h4>
                <p className="text-sm text-muted-foreground mb-3">
                  The Advanced Settings tab provides raw text editing for configurations not covered in the Common Settings tab.
                </p>
                <ul className="text-sm text-muted-foreground space-y-1">
                  <li>• <strong>lxc.* entries:</strong> Low-level LXC configuration options</li>
                  <li>• <strong>Comments:</strong> Configuration file comments and documentation</li>
                  <li>• <strong>Custom settings:</strong> Any other configuration parameters</li>
                  <li>• <strong>Preservation:</strong> All content is preserved when switching between tabs</li>
                </ul>
              </div>

              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">Saving Changes</h4>
                <div className="space-y-3">
                  <p className="text-sm text-muted-foreground">
                    To save configuration changes, you must type the container ID exactly as shown to confirm your changes.
                  </p>
                  <div className="bg-warning/10 border border-warning/20 rounded-md p-3">
                    <h5 className="font-medium text-warning-foreground mb-2">⚠️ Important Warnings</h5>
                    <ul className="text-sm text-warning/80 space-y-1">
                      <li>• Modifying LXC configuration can break your container</li>
                      <li>• Some changes may require container restart to take effect</li>
                      <li>• Always backup your configuration before making changes</li>
                      <li>• Test changes in a non-production environment first</li>
                    </ul>
                  </div>
                </div>
              </div>

              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">Sync from Server</h4>
                <p className="text-sm text-muted-foreground mb-3">
                  The &quot;Sync from Server&quot; button allows you to refresh the configuration from the actual server file, useful when:
                </p>
                <ul className="text-sm text-muted-foreground space-y-1">
                  <li>• Configuration was modified outside of this interface</li>
                  <li>• You want to discard local changes and get the latest server version</li>
                  <li>• The warning banner indicates the cached config differs from server</li>
                  <li>• You want to ensure you&apos;re working with the most current configuration</li>
                </ul>
              </div>

              <div className="p-4 border border-border rounded-lg">
                <h4 className="font-medium text-foreground mb-2">Database Caching</h4>
                <p className="text-sm text-muted-foreground mb-3">
                  LXC configurations are cached in the database for improved performance and offline access.
                </p>
                <ul className="text-sm text-muted-foreground space-y-1">
                  <li>• <strong>Automatic caching:</strong> Configs are cached during auto-detection and after saves</li>
                  <li>• <strong>Cache expiration:</strong> Cached configs expire after 5 minutes for freshness</li>
                  <li>• <strong>Change detection:</strong> Hash comparison detects external modifications</li>
                  <li>• <strong>Manual sync:</strong> Always available via the &quot;Sync from Server&quot; button</li>
                </ul>
              </div>
            </div>
          </div>
        );

      default:
        return null;
    }
  };

  return (
    <div className="fixed inset-0 backdrop-blur-sm bg-black/50 flex items-center justify-center z-50 p-2 sm:p-4">
      <div className="bg-card rounded-lg shadow-xl max-w-6xl w-full max-h-[95vh] sm:max-h-[90vh] overflow-hidden">
        {/* Header */}
        <div className="flex items-center justify-between p-4 sm:p-6 border-b border-border">
          <h2 className="text-xl sm:text-2xl font-bold text-card-foreground flex items-center gap-2">
            <HelpCircle className="w-6 h-6" />
            Help & Documentation
          </h2>
          <Button
            onClick={onClose}
            variant="ghost"
            size="icon"
            className="text-muted-foreground hover:text-foreground"
          >
            <svg className="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </Button>
        </div>

        <div className="flex h-[calc(95vh-120px)] sm:h-[calc(90vh-140px)]">
          {/* Sidebar Navigation */}
          <div className="w-64 border-r border-border bg-muted/30 overflow-y-auto">
            <nav className="p-4 space-y-2">
              {sections.map((section) => {
                const Icon = section.icon;
                return (
                  <Button
                    key={section.id}
                    onClick={() => setActiveSection(section.id)}
                    variant={activeSection === section.id ? "default" : "ghost"}
                    size="sm"
                    className="w-full justify-start gap-2 text-left"
                  >
                    <Icon className="w-4 h-4" />
                    {section.label}
                  </Button>
                );
              })}
            </nav>
          </div>

          {/* Content Area */}
          <div className="flex-1 overflow-y-auto">
            <div className="p-4 sm:p-6">
              {renderContent()}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}