<?php
/**
 * ==========================
 * 🔐 IGNY8 FILE RULE HEADER
 * ==========================
 * @file         : docs.php
 * @location     : /modules/help/docs.php
 * @type         : Admin Page
 * @scope        : Module Only
 * @allowed      : Technical documentation, API reference, architecture overview
 * @reusability  : Single Use
 * @notes        : Technical documentation page for help module
 */

// Prevent direct access
if (!defined('ABSPATH')) {
    exit;
}

// Start output buffering
ob_start();
?>

<!-- System Overview Section -->
<div class="igny8-standard-header">
    <div class="igny8-card-header-content">
        <div class="igny8-card-title-text">
            <h3>Igny8 AI SEO - Complete Technical Snapshot</h3>
            <p class="igny8-card-subtitle">Comprehensive AI-powered SEO operating system for WordPress</p>
        </div>
        <div class="igny8-card-icon">
            <span class="dashicons dashicons-admin-site igny8-dashboard-icon-lg igny8-dashboard-icon-blue"></span>
        </div>
    </div>
</div>

<div class="igny8-card">
    <div class="igny8-card-body">
        <div class="igny8-module-overview">
            <div class="igny8-module-section">
                <h4>System Architecture</h4>
                <p>Igny8 is a sophisticated WordPress plugin that combines AI automation with configuration-driven architecture to deliver enterprise-level SEO functionality.</p>
                <ul>
                    <li><strong>Modular Design:</strong> Independent modules with clear interfaces</li>
                    <li><strong>AI-Centric:</strong> OpenAI integration for intelligent automation</li>
                    <li><strong>Configuration-Driven:</strong> All UI components render from configuration files</li>
                    <li><strong>Automation-First:</strong> CRON-based workflows for hands-off operation</li>
                </ul>
            </div>

            <div class="igny8-module-section">
                <h4>Core Modules</h4>
                <p>Eight main modules provide comprehensive SEO functionality across the entire content lifecycle.</p>
                <ul>
                    <li><strong>Planner:</strong> Keyword research, clustering, and content planning</li>
                    <li><strong>Writer:</strong> AI-powered content generation and task management</li>
                    <li><strong>Analytics:</strong> Performance tracking and SEO analytics</li>
                    <li><strong>Schedules:</strong> Automated task scheduling and CRON management</li>
                </ul>
            </div>

            <div class="igny8-module-section">
                <h4>Technical Stack</h4>
                <p>Built on WordPress with advanced AI integration and modern web technologies.</p>
                <ul>
                    <li><strong>Backend:</strong> PHP 7.4+, WordPress 5.0+, MySQL 5.7+</li>
                    <li><strong>AI Integration:</strong> OpenAI GPT-4, GPT-3.5-turbo</li>
                    <li><strong>Frontend:</strong> Vanilla JavaScript, CSS3, HTML5</li>
                    <li><strong>Database:</strong> 15 custom tables, WordPress integration</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- File Structure Section -->
<div class="igny8-standard-header">
    <div class="igny8-card-header-content">
        <div class="igny8-card-title-text">
            <h3>Complete File Structure</h3>
            <p class="igny8-card-subtitle">Organized file tree with detailed descriptions</p>
        </div>
        <div class="igny8-card-icon">
            <span class="dashicons dashicons-media-code igny8-dashboard-icon-lg igny8-dashboard-icon-purple"></span>
        </div>
    </div>
</div>

<div class="igny8-card">
    <div class="igny8-card-body">
        <div class="igny8-file-tree">
            <pre><code>igny8-ai-seo/
├── igny8.php                          # Main plugin bootstrap and initialization
├── install.php                        # Database setup and plugin activation
├── uninstall.php                      # Plugin cleanup and data removal
├── igny8-wp-load-handler.php          # CRON endpoint handler
├── CHANGELOG.md                       # Version history and changes
│
├── ai/                                # AI Integration System (5 files)
│   ├── integration.php                # API key setup and connection management
│   ├── modules-ai.php                 # Common AI interface for modules
│   ├── model-rates-config.php         # AI model pricing and rate limits
│   ├── openai-api.php                 # OpenAI API integration and AI functions
│   └── prompts-library.php            # AI prompts library and templates
│
├── assets/                            # Frontend Assets
│   ├── css/
│   │   └── core.css                   # Main stylesheet (2000+ lines)
│   ├── js/
│   │   └── core.js                    # Main JavaScript (1000+ lines)
│   ├── templates/                     # CSV templates for import/export
│   │   ├── igny8_clusters_template.csv
│   │   ├── igny8_ideas_template.csv
│   │   └── igny8_keywords_template.csv
│   └── ai-images/                     # AI-generated images
│
├── core/                              # Core System Files
│   ├── admin/                         # Admin Interface System (7 files)
│   │   ├── ajax.php                   # Centralized AJAX endpoint management
│   │   ├── global-helpers.php         # Global utility functions (50+ helpers)
│   │   ├── init.php                   # Admin initialization and settings registration
│   │   ├── menu.php                   # WordPress admin menu registration
│   │   ├── meta-boxes.php             # WordPress meta boxes integration
│   │   ├── module-manager-class.php   # Module management system
│   │   └── routing.php                # Admin page routing and content rendering
│   ├── cron/                          # CRON System (2 files)
│   │   ├── igny8-cron-handlers.php    # CRON task handlers
│   │   └── igny8-cron-master-dispatcher.php # CRON master dispatcher
│   ├── db/                            # Database System (2 files)
│   │   ├── db.php                     # Database operations, schema, and utilities
│   │   └── db-migration.php           # Version-based migration system
│   ├── pages/                        # Admin Page Templates (organized by module)
│   │   ├── analytics/                 # Analytics module pages (2 files)
│   │   │   ├── analytics.php          # Analytics and reporting interface
│   │   │   └── status.php             # System status and health monitoring
│   │   ├── cron/                      # CRON management pages
│   │   ├── help/                      # Help and documentation pages (2 files)
│   │   │   ├── docs.php               # Technical documentation page
│   │   │   └── help.php               # User guide and support page
│   │   ├── settings/                  # Settings module pages (4 files)
│   │   │   ├── general-settings.php   # General plugin settings interface
│   │   │   ├── import-export.php      # Data import/export interface
│   │   │   ├── integration.php        # API integration settings interface
│   │   │   └── schedules.php          # Scheduling and automation interface
│   │   └── thinker/                   # Thinker module pages (5 files)
│   │       ├── image-testing.php      # Image testing interface
│   │       ├── main.php               # Thinker main interface
│   │       ├── profile.php            # Thinker profile interface
│   │       ├── prompts.php            # Prompts management interface
│   │       └── strategies.php         # Strategies interface
│   └── global-layout.php              # Master UI layout template
│
├── debug/                             # Debug & Monitoring System (5 files)
│   ├── debug.php                      # Debug functionality (redirected to status)
│   ├── module-debug.php               # Module-specific debugging utilities
│   ├── monitor-helpers.php            # Monitoring helper functions
│   ├── system-testing.php             # System testing utilities
│   └── temp-function-testing.php      # Function testing utilities
│
├── docs/                              # Documentation System (8 files)
│   ├── HOW_TO_ADD_COLUMN.md           # Database column addition guide
│   ├── IGNY8_SNAPSHOT_V0.1.md       # Complete plugin snapshot
│   ├── MASTER_ARCHITECTURE.md         # Master architecture documentation
│   ├── how-tos/                       # How-to guides (5 files)
│   │   ├── 01-adding-new-pages-and-modules.md
│   │   ├── 02-adding-new-modules-to-module-manager.md
│   │   ├── 03-auto-clustering-system.md
│   │   ├── cron-management.md
│   │   └── HOW_TO_ADD_COLUMN.md
│   └── parts/                         # Architecture parts (2 files)
│       ├── AI_INTEGRATION_ARCHITECTURE.md
│       └── AUTOMATION_FLOWS.md
│
├── flows/                             # Automation & Workflow System (3 files)
│   ├── sync-ajax.php                  # Automation-specific AJAX handlers
│   ├── sync-functions.php             # Core automation logic and workflow functions
│   └── sync-hooks.php                 # Workflow hook definitions and registration
│
└── modules/                           # Module System
    ├── components/                    # Reusable UI Components (8 files)
    │   ├── actions-tpl.php            # Action buttons template
    │   ├── export-modal-tpl.php       # Export modal template
    │   ├── filters-tpl.php           # Filter controls template
    │   ├── forms-tpl.php              # Form rendering template
    │   ├── import-modal-tpl.php       # Import modal template
    │   ├── kpi-tpl.php                # KPI display template
    │   ├── pagination-tpl.php         # Pagination controls template
    │   └── table-tpl.php              # Data table template
    ├── config/                        # Configuration Files (5 files)
    │   ├── filters-config.php         # Filter configuration definitions
    │   ├── forms-config.php           # Form configuration definitions
    │   ├── import-export-config.php    # Import/export configuration
    │   ├── kpi-config.php             # KPI configuration definitions
    │   └── tables-config.php          # Table configuration definitions
    └── modules-pages/                 # Module Page Interfaces
        ├── linker.php                 # Linker module interface
        ├── optimizer.php              # Optimizer module interface
        ├── planner.php                # Planner module interface
        ├── writer.php                 # Writer module interface
        └── personalize/               # Personalization Module (7 files)
            ├── content-generation.php # Content generation interface
            ├── front-end.php          # Frontend personalization
            ├── personalize.ajax       # Personalization AJAX handlers
            ├── personalize.js         # Personalization JavaScript
            ├── personalize.php        # Personalize module main interface
            ├── rewrites.php           # Content rewriting interface
            └── Settings.php           # Personalization settings</code></pre>
        </div>
    </div>
</div>

<!-- Database Schema Section -->
<div class="igny8-standard-header">
    <div class="igny8-card-header-content">
        <div class="igny8-card-title-text">
            <h3>Database Architecture</h3>
            <p class="igny8-card-subtitle">15 custom tables with comprehensive relationships</p>
        </div>
        <div class="igny8-card-icon">
            <span class="dashicons dashicons-database igny8-dashboard-icon-lg igny8-dashboard-icon-green"></span>
        </div>
    </div>
</div>

<div class="igny8-card">
    <div class="igny8-card-body">
        <div class="igny8-module-overview">
            <div class="igny8-module-section">
                <h4>Core Data Tables</h4>
                <ul>
                    <li><strong>igny8_keywords</strong> - Keyword research data with metrics</li>
                    <li><strong>igny8_clusters</strong> - Content topic groupings with stored metrics</li>
                    <li><strong>igny8_content_ideas</strong> - AI-generated content concepts</li>
                    <li><strong>igny8_tasks</strong> - Writer workflow management</li>
                    <li><strong>igny8_variations</strong> - Personalization content cache</li>
                </ul>
            </div>

            <div class="igny8-module-section">
                <h4>Analytics & Tracking</h4>
                <ul>
                    <li><strong>igny8_logs</strong> - System audit trail and AI event logging</li>
                    <li><strong>igny8_ai_queue</strong> - AI processing queue with retry logic</li>
                    <li><strong>igny8_campaigns</strong> - Link building campaign management</li>
                    <li><strong>igny8_backlinks</strong> - Backlink monitoring and tracking</li>
                </ul>
            </div>

            <div class="igny8-module-section">
                <h4>WordPress Integration</h4>
                <ul>
                    <li><strong>wp_options</strong> - Plugin settings (38+ options)</li>
                    <li><strong>wp_posts</strong> - Generated WordPress content</li>
                    <li><strong>wp_postmeta</strong> - Custom post meta fields (6 fields)</li>
                    <li><strong>wp_terms</strong> - Custom taxonomies (sectors, clusters)</li>
                </ul>
            </div>
        </div>

        <div class="igny8-data-flow">
            <h4>Data Flow Architecture</h4>
            <pre><code>Keywords → Clusters → Ideas → Tasks → WordPress Posts
    ↓         ↓        ↓       ↓
  Mapping → Posts ← Variations (Personalization)
    ↓
Campaigns → Sites → Backlinks</code></pre>
        </div>
    </div>
</div>

<!-- AI Integration Section -->
<div class="igny8-standard-header">
    <div class="igny8-card-header-content">
        <div class="igny8-card-title-text">
            <h3>AI Integration System</h3>
            <p class="igny8-card-subtitle">OpenAI integration with cost tracking and automation</p>
        </div>
        <div class="igny8-card-icon">
            <span class="dashicons dashicons-robot igny8-dashboard-icon-lg igny8-dashboard-icon-orange"></span>
        </div>
    </div>
</div>

<div class="igny8-card">
    <div class="igny8-card-body">
        <div class="igny8-module-overview">
            <div class="igny8-module-section">
                <h4>AI Functions</h4>
                <ul>
                    <li><strong>Content Generation:</strong> Blog posts, landing pages, product descriptions</li>
                    <li><strong>Keyword Analysis:</strong> Intent detection, difficulty scoring, clustering</li>
                    <li><strong>SEO Optimization:</strong> Meta descriptions, title optimization</li>
                    <li><strong>Personalization:</strong> Audience-specific content variations</li>
                </ul>
            </div>

            <div class="igny8-module-section">
                <h4>Model Configuration</h4>
                <ul>
                    <li><strong>GPT-4:</strong> Primary model for complex tasks</li>
                    <li><strong>GPT-3.5-turbo:</strong> Fallback for cost optimization</li>
                    <li><strong>Rate Limiting:</strong> Automatic retry with exponential backoff</li>
                    <li><strong>Cost Tracking:</strong> Daily budget limits and usage monitoring</li>
                </ul>
            </div>

            <div class="igny8-module-section">
                <h4>AI Queue System</h4>
                <ul>
                    <li><strong>Queue Processing:</strong> Background AI task processing</li>
                    <li><strong>Retry Logic:</strong> Automatic retry for failed requests</li>
                    <li><strong>Priority System:</strong> Task prioritization for efficient processing</li>
                    <li><strong>Error Handling:</strong> Comprehensive error logging and recovery</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Automation Workflows Section -->
<div class="igny8-standard-header">
    <div class="igny8-card-header-content">
        <div class="igny8-card-title-text">
            <h3>Automation Workflows</h3>
            <p class="igny8-card-subtitle">Event-driven automation with CRON scheduling</p>
        </div>
        <div class="igny8-card-icon">
            <span class="dashicons dashicons-update igny8-dashboard-icon-lg igny8-dashboard-icon-purple"></span>
        </div>
    </div>
</div>

<div class="igny8-card">
    <div class="igny8-card-body">
        <div class="igny8-workflow-examples">
            <div class="igny8-workflow">
                <h4>Keyword Processing Workflow</h4>
                <pre><code>// When keywords are imported/updated
igny8_handle_keyword_cluster_update($keyword_id) {
    // Update cluster metrics
    igny8_update_cluster_metrics($cluster_id);
    
    // Trigger AI clustering if enabled
    if (ai_enabled) {
        igny8_ajax_ai_cluster_keywords($keyword_ids);
    }
}</code></pre>
            </div>

            <div class="igny8-workflow">
                <h4>Content Generation Workflow</h4>
                <pre><code>// When content ideas are created
igny8_create_task_from_idea($idea_id) {
    // Create writer task
    $task_id = create_task($idea_data);
    
    // Generate content if AI enabled
    if (ai_enabled) {
        igny8_ajax_ai_generate_content($task_id);
    }
    
    // Update metrics
    igny8_update_idea_metrics($idea_id);
}</code></pre>
            </div>

            <div class="igny8-workflow">
                <h4>Cluster Management Workflow</h4>
                <pre><code>// When clusters are created/updated
igny8_auto_create_cluster_term($cluster_id) {
    // Create WordPress taxonomy term
    $term_id = wp_insert_term($cluster_name, 'clusters');
    
    // Link cluster to term
    update_cluster_term_id($cluster_id, $term_id);
    
    // Update metrics
    igny8_update_cluster_metrics($cluster_id);
}</code></pre>
            </div>
        </div>
    </div>
</div>

<!-- Configuration System Section -->
<div class="igny8-standard-header">
    <div class="igny8-card-header-content">
        <div class="igny8-card-title-text">
            <h3>Configuration System</h3>
            <p class="igny8-card-subtitle">Configuration-driven UI with reusable components</p>
        </div>
        <div class="igny8-card-icon">
            <span class="dashicons dashicons-admin-tools igny8-dashboard-icon-lg igny8-dashboard-icon-blue"></span>
        </div>
    </div>
</div>

<div class="igny8-card">
    <div class="igny8-card-body">
        <div class="igny8-module-overview">
            <div class="igny8-module-section">
                <h4>Table Configuration</h4>
                <p>Dynamic table rendering with sorting, filtering, and pagination based on configuration files.</p>
                <ul>
                    <li><strong>Column Definitions:</strong> Field types, labels, and display options</li>
                    <li><strong>Sorting & Filtering:</strong> Configurable sort and filter options</li>
                    <li><strong>Actions:</strong> Bulk operations and individual record actions</li>
                    <li><strong>Pagination:</strong> Configurable page sizes and navigation</li>
                </ul>
            </div>

            <div class="igny8-module-section">
                <h4>Form Configuration</h4>
                <p>Dynamic form generation with validation and field types based on configuration.</p>
                <ul>
                    <li><strong>Field Types:</strong> Text, number, select, textarea, date, etc.</li>
                    <li><strong>Validation:</strong> Required fields, data types, and custom validation</li>
                    <li><strong>Lookup Fields:</strong> Foreign key relationships and dropdown options</li>
                    <li><strong>Conditional Logic:</strong> Show/hide fields based on other field values</li>
                </ul>
            </div>

            <div class="igny8-module-section">
                <h4>KPI Configuration</h4>
                <p>Dynamic metrics display with charts and trend indicators based on configuration.</p>
                <ul>
                    <li><strong>Metric Types:</strong> Count, sum, average, percentage calculations</li>
                    <li><strong>Visualization:</strong> Charts, graphs, and trend indicators</li>
                    <li><strong>Filtering:</strong> Date ranges and conditional filtering</li>
                    <li><strong>Real-time Updates:</strong> Live data updates and caching</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Security & Performance Section -->
<div class="igny8-standard-header">
    <div class="igny8-card-header-content">
        <div class="igny8-card-title-text">
            <h3>Security & Performance</h3>
            <p class="igny8-card-subtitle">Enterprise-level security and optimization</p>
        </div>
        <div class="igny8-card-icon">
            <span class="dashicons dashicons-shield igny8-dashboard-icon-lg igny8-dashboard-icon-red"></span>
        </div>
    </div>
</div>

<div class="igny8-card">
    <div class="igny8-card-body">
        <div class="igny8-module-overview">
            <div class="igny8-module-section">
                <h4>Security Measures</h4>
                <ul>
                    <li><strong>Nonce Verification:</strong> All AJAX requests protected with WordPress nonces</li>
                    <li><strong>Capability Checks:</strong> User permission validation for all operations</li>
                    <li><strong>Data Sanitization:</strong> All input data sanitized and validated</li>
                    <li><strong>SQL Injection Protection:</strong> Prepared statements for all database queries</li>
                </ul>
            </div>

            <div class="igny8-module-section">
                <h4>Performance Optimizations</h4>
                <ul>
                    <li><strong>Conditional Loading:</strong> Admin assets only loaded when needed</li>
                    <li><strong>Database Indexing:</strong> Optimized indexes on frequently queried fields</li>
                    <li><strong>Caching:</strong> WordPress transients for expensive operations</li>
                    <li><strong>Lazy Loading:</strong> AJAX-based data loading for large datasets</li>
                </ul>
            </div>

            <div class="igny8-module-section">
                <h4>Monitoring & Debugging</h4>
                <ul>
                    <li><strong>Real-time Monitoring:</strong> Live system health monitoring</li>
                    <li><strong>Module Debug:</strong> Individual module performance tracking</li>
                    <li><strong>Error Logging:</strong> Comprehensive error tracking and reporting</li>
                    <li><strong>Performance Metrics:</strong> Response times and resource usage</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- API Reference Section -->
<div class="igny8-standard-header">
    <div class="igny8-card-header-content">
        <div class="igny8-card-title-text">
            <h3>API Reference</h3>
            <p class="igny8-card-subtitle">Complete function and endpoint documentation</p>
        </div>
        <div class="igny8-card-icon">
            <span class="dashicons dashicons-book igny8-dashboard-icon-lg igny8-dashboard-icon-green"></span>
        </div>
    </div>
</div>

<div class="igny8-card">
    <div class="igny8-card-body">
        <div class="igny8-api-reference">
            <div class="igny8-api-section">
                <h4>Core Functions</h4>
                <div class="igny8-grid-2">
                    <div>
                        <h5>Database Functions</h5>
                        <ul>
                            <li><strong>igny8_create_all_tables()</strong> - Create all database tables</li>
                            <li><strong>igny8_register_taxonomies()</strong> - Register custom taxonomies</li>
                            <li><strong>igny8_register_post_meta()</strong> - Register custom post meta</li>
                            <li><strong>igny8_install_database()</strong> - Complete plugin installation</li>
                        </ul>
                    </div>
                    <div>
                        <h5>Admin Functions</h5>
                        <ul>
                            <li><strong>igny8_get_cluster_options()</strong> - Get cluster dropdown options</li>
                            <li><strong>igny8_get_sector_options()</strong> - Get sector dropdown options</li>
                            <li><strong>igny8_render_table()</strong> - Render dynamic tables</li>
                            <li><strong>igny8_render_filters()</strong> - Render filter controls</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="igny8-api-section">
                <h4>AI Functions</h4>
                <div class="igny8-grid-2">
                    <div>
                        <h5>Content Generation</h5>
                        <ul>
                            <li><strong>igny8_generate_blog_post()</strong> - Generate blog post content</li>
                            <li><strong>igny8_generate_landing_page()</strong> - Generate landing page content</li>
                            <li><strong>igny8_generate_product_description()</strong> - Generate product content</li>
                            <li><strong>igny8_generate_seo_meta()</strong> - Generate SEO meta data</li>
                        </ul>
                    </div>
                    <div>
                        <h5>AI Analysis</h5>
                        <ul>
                            <li><strong>igny8_ai_analyze_keywords()</strong> - Analyze keywords using AI</li>
                            <li><strong>igny8_ai_cluster_keywords()</strong> - Cluster keywords using AI</li>
                            <li><strong>igny8_ai_generate_ideas()</strong> - Generate content ideas</li>
                            <li><strong>igny8_ai_optimize_content()</strong> - Optimize existing content</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="igny8-api-section">
                <h4>Automation Functions</h4>
                <div class="igny8-grid-2">
                    <div>
                        <h5>Workflow Functions</h5>
                        <ul>
                            <li><strong>igny8_update_cluster_metrics()</strong> - Update cluster metrics</li>
                            <li><strong>igny8_update_idea_metrics()</strong> - Update idea metrics</li>
                            <li><strong>igny8_workflow_triggers()</strong> - Trigger workflow automation</li>
                            <li><strong>igny8_bulk_delete_keywords()</strong> - Bulk delete keywords</li>
                        </ul>
                    </div>
                    <div>
                        <h5>AJAX Endpoints</h5>
                        <ul>
                            <li><strong>wp_ajax_igny8_get_table_data</strong> - Get table data</li>
                            <li><strong>wp_ajax_igny8_save_record</strong> - Save/update record</li>
                            <li><strong>wp_ajax_igny8_ai_generate_content</strong> - AI content generation</li>
                            <li><strong>wp_ajax_igny8_bulk_action</strong> - Perform bulk actions</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Development Workflow Section -->
<div class="igny8-standard-header">
    <div class="igny8-card-header-content">
        <div class="igny8-card-title-text">
            <h3>Development Workflow</h3>
            <p class="igny8-card-subtitle">Guidelines for extending and maintaining the plugin</p>
        </div>
        <div class="igny8-card-icon">
            <span class="dashicons dashicons-editor-code igny8-dashboard-icon-lg igny8-dashboard-icon-purple"></span>
        </div>
    </div>
</div>

<div class="igny8-card">
    <div class="igny8-card-body">
        <div class="igny8-module-overview">
            <div class="igny8-module-section">
                <h4>Adding New Modules</h4>
                <ol>
                    <li>Create module page in <code>modules/modules-pages/</code></li>
                    <li>Update module manager in <code>core/admin/module-manager-class.php</code></li>
                    <li>Add table, form, and filter configurations</li>
                    <li>Register routes in <code>core/admin/routing.php</code></li>
                    <li>Add menu items in <code>core/admin/menu.php</code></li>
                </ol>
            </div>

            <div class="igny8-module-section">
                <h4>Adding New Tables</h4>
                <ol>
                    <li>Add database schema to <code>core/db/db.php</code></li>
                    <li>Create migration in <code>core/db/db-migration.php</code></li>
                    <li>Add table configuration to <code>modules/config/tables-config.php</code></li>
                    <li>Add form configuration to <code>modules/config/forms-config.php</code></li>
                    <li>Add filter configuration to <code>modules/config/filters-config.php</code></li>
                </ol>
            </div>

            <div class="igny8-module-section">
                <h4>Adding AI Features</h4>
                <ol>
                    <li>Add prompt template to <code>ai/prompts-library.php</code></li>
                    <li>Add AI handler to <code>ai/modules-ai.php</code></li>
                    <li>Add queue processing to <code>flows/sync-functions.php</code></li>
                    <li>Add AJAX endpoint to <code>flows/sync-ajax.php</code></li>
                </ol>
            </div>
        </div>
    </div>
</div>

<style>
.igny8-help-page {
    max-width: 1200px;
    margin: 0 auto;
}

.igny8-standard-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.igny8-card-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.igny8-card-title-text h3 {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 600;
}

.igny8-card-subtitle {
    margin: 0;
    font-size: 16px;
    opacity: 0.9;
}

.igny8-dashboard-icon-lg {
    font-size: 32px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

.igny8-dashboard-icon-blue { color: #3b82f6; }
.igny8-dashboard-icon-green { color: #10b981; }
.igny8-dashboard-icon-purple { color: #8b5cf6; }
.igny8-dashboard-icon-orange { color: #f59e0b; }
.igny8-dashboard-icon-red { color: #ef4444; }

.igny8-module-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.igny8-module-section {
    background: #f8fafc;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #3b82f6;
}

.igny8-module-section h4 {
    margin: 0 0 12px 0;
    color: #1f2937;
    font-size: 18px;
}

.igny8-module-section p {
    margin: 0 0 15px 0;
    color: #6b7280;
    line-height: 1.6;
}

.igny8-module-section ul {
    margin: 0;
    padding-left: 20px;
}

.igny8-module-section li {
    margin-bottom: 8px;
    color: #374151;
    line-height: 1.5;
}

.igny8-file-tree {
    background: #1f2937;
    color: #f9fafb;
    padding: 20px;
    border-radius: 8px;
    overflow-x: auto;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 13px;
    line-height: 1.5;
}

.igny8-file-tree pre {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.igny8-data-flow {
    margin-top: 20px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 4px solid #10b981;
}

.igny8-data-flow pre {
    background: #1f2937;
    color: #f9fafb;
    padding: 15px;
    border-radius: 6px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 13px;
    overflow-x: auto;
}

.igny8-workflow-examples {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
}

.igny8-workflow {
    background: #f8fafc;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #8b5cf6;
}

.igny8-workflow h4 {
    margin: 0 0 15px 0;
    color: #1f2937;
    font-size: 16px;
}

.igny8-workflow pre {
    background: #1f2937;
    color: #f9fafb;
    padding: 15px;
    border-radius: 6px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 12px;
    overflow-x: auto;
    margin: 0;
}

.igny8-api-reference {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.igny8-api-section {
    background: #f8fafc;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #3b82f6;
}

.igny8-api-section h4 {
    margin: 0 0 20px 0;
    color: #1f2937;
    font-size: 18px;
}

.igny8-api-section h5 {
    margin: 0 0 10px 0;
    color: #374151;
    font-size: 14px;
    font-weight: 600;
}

.igny8-api-section ul {
    margin: 0;
    padding-left: 20px;
}

.igny8-api-section li {
    margin-bottom: 6px;
    color: #4b5563;
    line-height: 1.4;
    font-size: 13px;
}

.igny8-api-section code {
    background: #e5e7eb;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 12px;
}

@media (max-width: 768px) {
    .igny8-card-header-content {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .igny8-module-overview,
    .igny8-workflow-examples {
        grid-template-columns: 1fr;
    }
    
    .igny8-file-tree {
        font-size: 11px;
    }
}
</style>
