@extends('admin.layout')

@section('title', 'Module Management')
@section('page-title', 'Module Management')
@section('page-subtitle', 'Control and configure application modules for your organization')

@section('breadcrumb')
    <span class="breadcrumb-item">Admin</span>
    <span class="breadcrumb-separator">/</span>
    <span class="breadcrumb-item active">Modules</span>
@endsection

@push('header-actions')
    <button class="btn btn-primary" onclick="refreshModules()">
        <i class="fas fa-sync-alt"></i>
        Refresh
    </button>
    <button class="btn btn-secondary" onclick="exportConfiguration()">
        <i class="fas fa-download"></i>
        Export Config
    </button>
@endpush

@section('content')
    <!-- Statistics Cards -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-header">
                <div class="stat-title">Total Modules</div>
                <div class="stat-icon">
                    <i class="fas fa-puzzle-piece"></i>
                </div>
            </div>
            <div class="stat-value">{{ $totalModules }}</div>
            <div class="stat-change positive">
                <i class="fas fa-arrow-up"></i>
                <span>{{ $newModules }} new this month</span>
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-header">
                <div class="stat-title">Active Modules</div>
                <div class="stat-icon">
                    <i class="fas fa-check-circle"></i>
                </div>
            </div>
            <div class="stat-value">{{ $activeModules }}</div>
            <div class="stat-change positive">
                <i class="fas fa-arrow-up"></i>
                <span>{{ round(($activeModules / $totalModules) * 100) }}% enabled</span>
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-header">
                <div class="stat-title">Available Features</div>
                <div class="stat-icon">
                    <i class="fas fa-toggle-on"></i>
                </div>
            </div>
            <div class="stat-value">{{ $totalFeatures }}</div>
            <div class="stat-change">
                <i class="fas fa-info-circle"></i>
                <span>{{ $enabledFeatures }} active</span>
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-header">
                <div class="stat-title">Current Plan</div>
                <div class="stat-icon">
                    <i class="fas fa-crown"></i>
                </div>
            </div>
            <div class="stat-value">{{ ucfirst($currentPlan) }}</div>
            <div class="stat-change">
                <i class="fas fa-star"></i>
                <span>{{ $planLimits }} modules allowed</span>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="card mb-6">
        <div class="card-header">
            <div class="card-title">Quick Actions</div>
            <div class="card-description">Common module management tasks</div>
        </div>
        <div class="card-body">
            <div class="flex gap-4">
                <button class="btn btn-success" onclick="enableAllModules()">
                    <i class="fas fa-power-off"></i>
                    Enable All Available
                </button>
                <button class="btn btn-warning" onclick="disableAllModules()">
                    <i class="fas fa-pause"></i>
                    Disable All Modules
                </button>
                <button class="btn btn-secondary" onclick="resetToDefaults()">
                    <i class="fas fa-undo"></i>
                    Reset to Defaults
                </button>
                <button class="btn btn-primary" onclick="bulkConfigure()">
                    <i class="fas fa-cogs"></i>
                    Bulk Configure
                </button>
            </div>
        </div>
    </div>

    <!-- Module Grid -->
    <div class="modules-grid">
        @foreach($modules as $moduleKey => $module)
            <div class="module-card {{ $module['status'] }}" data-module="{{ $moduleKey }}">
                <!-- Module Header -->
                <div class="module-header">
                    <div class="module-title-row">
                        <div class="module-title">
                            <div class="module-icon">
                                {!! $module['icon'] ?? '<i class="fas fa-cube"></i>' !!}
                            </div>
                            <div>
                                <div class="module-name">{{ $module['name'] }}</div>
                                <div class="module-version">v{{ $module['version'] }}</div>
                            </div>
                        </div>
                        
                        <div class="module-toggle">
                            @if($module['status'] === 'installed')
                                <label class="toggle-switch">
                                    <input type="checkbox" 
                                           {{ $module['enabled'] ? 'checked' : '' }}
                                           onchange="toggleModule('{{ $moduleKey }}', this.checked)"
                                           {{ !$module['can_toggle'] ? 'disabled' : '' }}>
                                    <span class="toggle-slider"></span>
                                </label>
                            @endif
                        </div>
                    </div>
                    
                    <div class="module-description">
                        {{ $module['description'] }}
                    </div>
                </div>
                
                <!-- Module Body -->
                <div class="module-body">
                    <!-- Features List -->
                    <div class="module-features">
                        <div class="module-features-title">
                            <i class="fas fa-list"></i>
                            Features ({{ count($module['features']) }})
                        </div>
                        
                        <div class="feature-list">
                            @foreach($module['features'] as $featureKey => $feature)
                                <div class="feature-item">
                                    <div class="feature-info">
                                        <div class="feature-name">{{ $feature['name'] }}</div>
                                        <div class="feature-description">{{ $feature['description'] }}</div>
                                        @if(!empty($feature['dependencies']))
                                            <div class="feature-dependencies">
                                                Requires: {{ implode(', ', $feature['dependencies']) }}
                                            </div>
                                        @endif
                                    </div>
                                    
                                    <div class="feature-toggle">
                                        @if($module['status'] === 'installed' && $module['enabled'])
                                            <label class="toggle-switch">
                                                <input type="checkbox" 
                                                       {{ $feature['enabled'] ? 'checked' : '' }}
                                                       onchange="toggleFeature('{{ $moduleKey }}', '{{ $featureKey }}', this.checked)"
                                                       {{ !$feature['can_toggle'] ? 'disabled' : '' }}>
                                                <span class="toggle-slider"></span>
                                            </label>
                                        @else
                                            <span class="status-badge disabled">Unavailable</span>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    
                    <!-- Module Configuration -->
                    @if($module['status'] === 'installed' && !empty($module['config']))
                        <div class="module-config">
                            <div class="module-features-title">
                                <i class="fas fa-cog"></i>
                                Configuration
                            </div>
                            
                            <div class="config-grid">
                                @foreach($module['config'] as $configKey => $configValue)
                                    <div class="config-item">
                                        <label class="form-label">{{ ucwords(str_replace('_', ' ', $configKey)) }}</label>
                                        @if(is_bool($configValue))
                                            <label class="toggle-switch">
                                                <input type="checkbox" 
                                                       {{ $configValue ? 'checked' : '' }}
                                                       onchange="updateConfig('{{ $moduleKey }}', '{{ $configKey }}', this.checked)">
                                                <span class="toggle-slider"></span>
                                            </label>
                                        @elseif(is_numeric($configValue))
                                            <input type="number" 
                                                   class="form-control" 
                                                   value="{{ $configValue }}"
                                                   onchange="updateConfig('{{ $moduleKey }}', '{{ $configKey }}', this.value)">
                                        @else
                                            <input type="text" 
                                                   class="form-control" 
                                                   value="{{ $configValue }}"
                                                   onchange="updateConfig('{{ $moduleKey }}', '{{ $configKey }}', this.value)">
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
                
                <!-- Module Footer -->
                <div class="module-footer">
                    <div class="module-status">
                        <span class="status-badge {{ $module['status'] }}">
                            @switch($module['status'])
                                @case('installed')
                                    @if($module['enabled'])
                                        <i class="fas fa-check-circle"></i> Active
                                    @else
                                        <i class="fas fa-pause-circle"></i> Disabled
                                    @endif
                                    @break
                                @case('not-installed')
                                    <i class="fas fa-download"></i> Available
                                    @break
                                @default
                                    <i class="fas fa-question-circle"></i> {{ ucfirst($module['status']) }}
                            @endswitch
                        </span>
                        
                        @if(!empty($module['plan_required']) && $module['plan_required'] !== 'starter')
                            <span class="status-badge warning">
                                <i class="fas fa-crown"></i>
                                {{ ucfirst($module['plan_required']) }} Plan
                            </span>
                        @endif
                    </div>
                    
                    <div class="module-actions">
                        @if($module['status'] === 'not-installed')
                            <button class="btn btn-primary btn-sm" 
                                    onclick="installModule('{{ $moduleKey }}')"
                                    {{ !$module['can_install'] ? 'disabled' : '' }}>
                                <i class="fas fa-download"></i>
                                Install
                            </button>
                        @elseif($module['status'] === 'installed')
                            <button class="btn btn-secondary btn-sm" 
                                    onclick="configureModule('{{ $moduleKey }}')">
                                <i class="fas fa-cog"></i>
                                Configure
                            </button>
                            <button class="btn btn-danger btn-sm" 
                                    onclick="uninstallModule('{{ $moduleKey }}')"
                                    {{ !$module['can_uninstall'] ? 'disabled' : '' }}>
                                <i class="fas fa-trash"></i>
                                Uninstall
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <!-- Module Installation Modal -->
    <div id="installModal" class="modal" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Install Module</h5>
                    <button type="button" class="btn-close" onclick="closeModal('installModal')"></button>
                </div>
                <div class="modal-body">
                    <div id="installModalContent">
                        <!-- Dynamic content will be loaded here -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="closeModal('installModal')">Cancel</button>
                    <button type="button" class="btn btn-primary" onclick="confirmInstallation()">Install Module</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Configuration Modal -->
    <div id="configModal" class="modal" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Module Configuration</h5>
                    <button type="button" class="btn-close" onclick="closeModal('configModal')"></button>
                </div>
                <div class="modal-body">
                    <div id="configModalContent">
                        <!-- Dynamic content will be loaded here -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="closeModal('configModal')">Cancel</button>
                    <button type="button" class="btn btn-primary" onclick="saveConfiguration()">Save Changes</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Loading Overlay -->
    <div id="loadingOverlay" class="loading-overlay" style="display: none;">
        <div class="loading-spinner"></div>
        <div class="loading-text">Processing...</div>
    </div>
@endsection

@push('styles')
<style>
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-dialog {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    padding: var(--space-6);
    border-bottom: 1px solid var(--neutral-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--neutral-900);
}

.btn-close {
    background: none;
    border: none;
    font-size: var(--text-xl);
    cursor: pointer;
    color: var(--neutral-500);
    padding: var(--space-2);
}

.modal-body {
    padding: var(--space-6);
}

.modal-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--neutral-200);
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
}

.loading-text {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-medium);
    color: var(--neutral-700);
}

.config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}

.config-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
</style>
@endpush

@push('scripts')
<script>
// Module management functions
async function toggleModule(moduleKey, enabled) {
    showLoading();
    
    try {
        const response = await fetch(`/api/admin/modules/${moduleKey}/toggle`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({ enabled })
        });
        
        const result = await response.json();
        
        if (result.success) {
            showAlert('success', result.message || 'Module toggled successfully');
            setTimeout(() => location.reload(), 1000);
        } else {
            showAlert('error', result.message || 'Failed to toggle module');
            // Revert toggle
            event.target.checked = !enabled;
        }
    } catch (error) {
        showAlert('error', 'An error occurred while toggling the module');
        event.target.checked = !enabled;
    } finally {
        hideLoading();
    }
}

async function toggleFeature(moduleKey, featureKey, enabled) {
    showLoading();
    
    try {
        const response = await fetch(`/api/admin/modules/${moduleKey}/features/${featureKey}/toggle`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({ enabled })
        });
        
        const result = await response.json();
        
        if (result.success) {
            showAlert('success', result.message || 'Feature toggled successfully');
        } else {
            showAlert('error', result.message || 'Failed to toggle feature');
            event.target.checked = !enabled;
        }
    } catch (error) {
        showAlert('error', 'An error occurred while toggling the feature');
        event.target.checked = !enabled;
    } finally {
        hideLoading();
    }
}

async function installModule(moduleKey) {
    const module = getModuleData(moduleKey);
    
    // Show installation modal
    document.getElementById('installModalContent').innerHTML = `
        <div class="alert alert-info">
            <div class="alert-icon">
                <i class="fas fa-info-circle"></i>
            </div>
            <div class="alert-content">
                <div class="alert-title">Installing ${module.name}</div>
                This will install and configure the module with default settings. You can customize the configuration after installation.
            </div>
        </div>
        
        <div class="module-preview">
            <h6>Features to be installed:</h6>
            <ul>
                ${Object.values(module.features).map(feature => `<li>${feature.name}</li>`).join('')}
            </ul>
        </div>
    `;
    
    document.getElementById('installModal').style.display = 'flex';
    window.currentInstallModule = moduleKey;
}

async function confirmInstallation() {
    const moduleKey = window.currentInstallModule;
    if (!moduleKey) return;
    
    closeModal('installModal');
    showLoading();
    
    try {
        const response = await fetch(`/api/admin/modules/${moduleKey}/install`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            }
        });
        
        const result = await response.json();
        
        if (result.success) {
            showAlert('success', result.message || 'Module installed successfully');
            setTimeout(() => location.reload(), 1500);
        } else {
            showAlert('error', result.message || 'Failed to install module');
        }
    } catch (error) {
        showAlert('error', 'An error occurred during installation');
    } finally {
        hideLoading();
    }
}

async function uninstallModule(moduleKey) {
    if (!confirm('Are you sure you want to uninstall this module? This action cannot be undone.')) {
        return;
    }
    
    showLoading();
    
    try {
        const response = await fetch(`/api/admin/modules/${moduleKey}/uninstall`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            }
        });
        
        const result = await response.json();
        
        if (result.success) {
            showAlert('success', result.message || 'Module uninstalled successfully');
            setTimeout(() => location.reload(), 1500);
        } else {
            showAlert('error', result.message || 'Failed to uninstall module');
        }
    } catch (error) {
        showAlert('error', 'An error occurred during uninstallation');
    } finally {
        hideLoading();
    }
}

function configureModule(moduleKey) {
    // Load module configuration interface
    document.getElementById('configModalContent').innerHTML = `
        <div class="loading-skeleton" style="height: 200px;"></div>
    `;
    
    document.getElementById('configModal').style.display = 'flex';
    
    // Load actual configuration
    loadModuleConfiguration(moduleKey);
}

async function loadModuleConfiguration(moduleKey) {
    try {
        const response = await fetch(`/api/admin/modules/${moduleKey}/config`, {
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            }
        });
        
        const result = await response.json();
        
        if (result.success) {
            renderConfigurationForm(moduleKey, result.data);
        } else {
            document.getElementById('configModalContent').innerHTML = `
                <div class="alert alert-error">
                    <div class="alert-content">Failed to load configuration</div>
                </div>
            `;
        }
    } catch (error) {
        document.getElementById('configModalContent').innerHTML = `
            <div class="alert alert-error">
                <div class="alert-content">Error loading configuration</div>
            </div>
        `;
    }
}

function renderConfigurationForm(moduleKey, config) {
    const formHtml = Object.entries(config).map(([key, value]) => {
        if (typeof value === 'boolean') {
            return `
                <div class="form-group">
                    <label class="form-label">${key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}</label>
                    <label class="toggle-switch">
                        <input type="checkbox" ${value ? 'checked' : ''} data-config-key="${key}">
                        <span class="toggle-slider"></span>
                    </label>
                </div>
            `;
        } else if (typeof value === 'number') {
            return `
                <div class="form-group">
                    <label class="form-label">${key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}</label>
                    <input type="number" class="form-control" value="${value}" data-config-key="${key}">
                </div>
            `;
        } else {
            return `
                <div class="form-group">
                    <label class="form-label">${key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}</label>
                    <input type="text" class="form-control" value="${value}" data-config-key="${key}">
                </div>
            `;
        }
    }).join('');
    
    document.getElementById('configModalContent').innerHTML = formHtml;
    window.currentConfigModule = moduleKey;
}

async function saveConfiguration() {
    const moduleKey = window.currentConfigModule;
    if (!moduleKey) return;
    
    const config = {};
    document.querySelectorAll('[data-config-key]').forEach(input => {
        const key = input.dataset.configKey;
        if (input.type === 'checkbox') {
            config[key] = input.checked;
        } else if (input.type === 'number') {
            config[key] = parseFloat(input.value) || 0;
        } else {
            config[key] = input.value;
        }
    });
    
    showLoading();
    
    try {
        const response = await fetch(`/api/admin/modules/${moduleKey}/config`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({ config })
        });
        
        const result = await response.json();
        
        if (result.success) {
            showAlert('success', 'Configuration saved successfully');
            closeModal('configModal');
        } else {
            showAlert('error', result.message || 'Failed to save configuration');
        }
    } catch (error) {
        showAlert('error', 'An error occurred while saving configuration');
    } finally {
        hideLoading();
    }
}

// Utility functions
function showLoading() {
    document.getElementById('loadingOverlay').style.display = 'flex';
}

function hideLoading() {
    document.getElementById('loadingOverlay').style.display = 'none';
}

function closeModal(modalId) {
    document.getElementById(modalId).style.display = 'none';
}

function showAlert(type, message) {
    // Create and show alert
    const alert = document.createElement('div');
    alert.className = `alert alert-${type}`;
    alert.innerHTML = `
        <div class="alert-icon">
            <i class="fas fa-${type === 'success' ? 'check' : type === 'error' ? 'exclamation' : 'info'}-circle"></i>
        </div>
        <div class="alert-content">${message}</div>
    `;
    
    document.querySelector('.admin-content').insertBefore(alert, document.querySelector('.admin-content').firstChild);
    
    // Remove after 5 seconds
    setTimeout(() => {
        if (alert.parentNode) {
            alert.parentNode.removeChild(alert);
        }
    }, 5000);
}

function getModuleData(moduleKey) {
    // This would typically come from the server data
    return @json($modules)[moduleKey] || {};
}

// Quick actions
async function refreshModules() {
    showLoading();
    setTimeout(() => {
        location.reload();
    }, 1000);
}

function exportConfiguration() {
    showAlert('info', 'Configuration export will be available soon');
}

function enableAllModules() {
    if (confirm('Enable all available modules? This may take a few moments.')) {
        showAlert('info', 'Enabling all modules...');
        // Implementation would go here
    }
}

function disableAllModules() {
    if (confirm('Disable all modules? This will affect system functionality.')) {
        showAlert('warning', 'Disabling all modules...');
        // Implementation would go here
    }
}

function resetToDefaults() {
    if (confirm('Reset all module configurations to defaults? This cannot be undone.')) {
        showAlert('info', 'Resetting to defaults...');
        // Implementation would go here
    }
}

function bulkConfigure() {
    showAlert('info', 'Bulk configuration interface coming soon');
}
</script>
@endpush