<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Settings - MHA Flow</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-dark bg-dark sticky-top shadow-sm">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">
                <i class="fas fa-arrow-left me-2"></i> MHA Flow
            </a>
            <span class="text-light" id="userDisplay">User</span>
        </div>
    </nav>

    <div class="container-fluid py-5">
        <!-- Header -->
        <div class="row mb-5">
            <div class="col-lg-12">
                <h1 class="display-4 fw-bold mb-2">
                    <i class="fas fa-cog"></i> Settings
                </h1>
                <p class="lead text-muted">Configure your MHA Flow experience</p>
            </div>
        </div>

        <!-- Settings Navigation -->
        <div class="row">
            <div class="col-lg-3 mb-4">
                <div class="list-group sticky-top">
                    <button class="list-group-item list-group-item-action active" onclick="switchTab('profile')">
                        <i class="fas fa-user me-2"></i> Profile
                    </button>
                    <button class="list-group-item list-group-item-action" onclick="switchTab('optimization')">
                        <i class="fas fa-sliders-h me-2"></i> Optimization
                    </button>
                    <button class="list-group-item list-group-item-action" onclick="switchTab('visualization')">
                        <i class="fas fa-chart-bar me-2"></i> Visualization
                    </button>
                    <button class="list-group-item list-group-item-action" onclick="switchTab('advanced')">
                        <i class="fas fa-flask me-2"></i> Advanced
                    </button>
                    <button class="list-group-item list-group-item-action" onclick="switchTab('about')">
                        <i class="fas fa-info-circle me-2"></i> About
                    </button>
                </div>
            </div>

            <div class="col-lg-9">
                <!-- Profile Settings -->
                <div id="profile" class="settings-panel">
                    <div class="card shadow-sm border-0 mb-4">
                        <div class="card-header bg-light py-3">
                            <h5 class="mb-0"><i class="fas fa-user me-2"></i> Profile Settings</h5>
                        </div>
                        <div class="card-body">
                            <form>
                                <div class="mb-3">
                                    <label class="form-label">Username</label>
                                    <input type="text" class="form-control" id="username" placeholder="Enter username">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Email</label>
                                    <input type="email" class="form-control" id="email" placeholder="Enter email address">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Theme</label>
                                    <select class="form-select" id="theme">
                                        <option value="light">Light Mode</option>
                                        <option value="dark">Dark Mode</option>
                                        <option value="auto">Auto (System)</option>
                                    </select>
                                </div>
                                <button type="button" class="btn btn-primary" onclick="saveProfile()">
                                    <i class="fas fa-save me-2"></i> Save Changes
                                </button>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Optimization Settings -->
                <div id="optimization" class="settings-panel d-none">
                    <div class="card shadow-sm border-0 mb-4">
                        <div class="card-header bg-light py-3">
                            <h5 class="mb-0"><i class="fas fa-sliders-h me-2"></i> Default Optimization Parameters</h5>
                        </div>
                        <div class="card-body">
                            <form>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Population Size</label>
                                            <input type="number" class="form-control" id="populationSize" min="10" max="1000" value="30">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Iterations</label>
                                            <input type="number" class="form-control" id="iterations" min="10" max="10000" value="100">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Evaluation Limit</label>
                                            <input type="number" class="form-control" id="evalLimit" min="1000" max="1000000" value="10000">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Seed (0 = Random)</label>
                                            <input type="number" class="form-control" id="seed" min="0" value="0">
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Default Algorithm</label>
                                    <select class="form-select" id="defaultAlgorithm">
                                        <option value="">- Select an algorithm -</option>
                                        <option value="pso">Particle Swarm Optimization (PSO)</option>
                                        <option value="ga">Genetic Algorithm (GA)</option>
                                        <option value="de">Differential Evolution (DE)</option>
                                        <option value="abc">Artificial Bee Colony (ABC)</option>
                                        <option value="ba">Bat Algorithm (BA)</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="autoRun" checked>
                                        <label class="form-check-label" for="autoRun">
                                            Auto-save results
                                        </label>
                                    </div>
                                </div>
                                <button type="button" class="btn btn-primary" onclick="saveOptimization()">
                                    <i class="fas fa-save me-2"></i> Save Changes
                                </button>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Visualization Settings -->
                <div id="visualization" class="settings-panel d-none">
                    <div class="card shadow-sm border-0 mb-4">
                        <div class="card-header bg-light py-3">
                            <h5 class="mb-0"><i class="fas fa-chart-bar me-2"></i> Visualization Options</h5>
                        </div>
                        <div class="card-body">
                            <form>
                                <div class="mb-3">
                                    <label class="form-label">Chart Theme</label>
                                    <select class="form-select" id="chartTheme">
                                        <option value="default">Default</option>
                                        <option value="dark">Dark</option>
                                        <option value="minimal">Minimal</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Default Chart Type</label>
                                    <select class="form-select" id="chartType">
                                        <option value="line">Line Chart</option>
                                        <option value="scatter">Scatter Plot</option>
                                        <option value="heatmap">Heatmap</option>
                                        <option value="3d">3D Surface</option>
                                    </select>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Chart Resolution (DPI)</label>
                                            <input type="number" class="form-control" id="chartDPI" min="72" max="300" value="150">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Animation Speed</label>
                                            <select class="form-select" id="animSpeed">
                                                <option value="slow">Slow</option>
                                                <option value="normal" selected>Normal</option>
                                                <option value="fast">Fast</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="showGrid" checked>
                                        <label class="form-check-label" for="showGrid">
                                            Show grid on charts
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="showLegend" checked>
                                        <label class="form-check-label" for="showLegend">
                                            Show legend
                                        </label>
                                    </div>
                                </div>
                                <button type="button" class="btn btn-primary" onclick="saveVisualization()">
                                    <i class="fas fa-save me-2"></i> Save Changes
                                </button>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Advanced Settings -->
                <div id="advanced" class="settings-panel d-none">
                    <div class="card shadow-sm border-0 mb-4">
                        <div class="card-header bg-light py-3">
                            <h5 class="mb-0"><i class="fas fa-flask me-2"></i> Advanced Settings</h5>
                        </div>
                        <div class="card-body">
                            <form>
                                <div class="mb-3">
                                    <label class="form-label">Parallel Execution</label>
                                    <select class="form-select" id="parallelMode">
                                        <option value="none">Disabled</option>
                                        <option value="threads" selected>Multi-threaded</option>
                                        <option value="processes">Multi-processing</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Max Concurrent Workers</label>
                                    <input type="number" class="form-control" id="maxWorkers" min="1" max="32" value="4">
                                </div>
                                <div class="mb-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="enableLogging" checked>
                                        <label class="form-check-label" for="enableLogging">
                                            Enable detailed logging
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="enableCaching">
                                        <label class="form-check-label" for="enableCaching">
                                            Enable result caching
                                        </label>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Data Directory</label>
                                    <input type="text" class="form-control" id="dataDir" value="./data" readonly>
                                </div>
                                <button type="button" class="btn btn-danger" onclick="resetToDefaults()">
                                    <i class="fas fa-redo me-2"></i> Reset to Defaults
                                </button>
                                <button type="button" class="btn btn-primary ms-2" onclick="saveAdvanced()">
                                    <i class="fas fa-save me-2"></i> Save Changes
                                </button>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- About -->
                <div id="about" class="settings-panel d-none">
                    <div class="card shadow-sm border-0 mb-4">
                        <div class="card-header bg-light py-3">
                            <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i> About MHA Flow</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-4">
                                <h6>Version Information</h6>
                                <p>
                                    <strong>Application:</strong> MHA Flow v2.0.6<br>
                                    <strong>Last Updated:</strong> <span id="updateDate">-</span><br>
                                    <strong>Python Version:</strong> 3.8+
                                </p>
                            </div>
                            <div class="mb-4">
                                <h6>Dependencies</h6>
                                <p class="text-muted small">
                                    NumPy, SciPy, Pandas, Matplotlib, Plotly, Streamlit
                                </p>
                            </div>
                            <div class="mb-4">
                                <h6>Resources</h6>
                                <p>
                                    <a href="/docs" target="_blank"><i class="fas fa-book me-1"></i> Documentation</a><br>
                                    <a href="/help" target="_blank"><i class="fas fa-question-circle me-1"></i> Get Help</a><br>
                                    <a href="/feedback" target="_blank"><i class="fas fa-envelope me-1"></i> Send Feedback</a>
                                </p>
                            </div>
                            <div>
                                <h6>License</h6>
                                <p class="text-muted small">
                                    MIT License - See LICENSE file for details
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function switchTab(tabName) {
            // Hide all panels
            document.querySelectorAll('.settings-panel').forEach(panel => {
                panel.classList.add('d-none');
            });

            // Show selected panel
            const panel = document.getElementById(tabName);
            if (panel) {
                panel.classList.remove('d-none');
            }

            // Update active button
            document.querySelectorAll('.list-group-item').forEach(btn => {
                btn.classList.remove('active');
            });
            event.target.classList.add('active');
        }

        function saveProfile() {
            const username = document.getElementById('username').value;
            const email = document.getElementById('email').value;
            const theme = document.getElementById('theme').value;

            localStorage.setItem('username', username);
            localStorage.setItem('email', email);
            localStorage.setItem('theme', theme);

            alert('Profile settings saved successfully!');
        }

        function saveOptimization() {
            const settings = {
                populationSize: document.getElementById('populationSize').value,
                iterations: document.getElementById('iterations').value,
                evalLimit: document.getElementById('evalLimit').value,
                seed: document.getElementById('seed').value,
                defaultAlgorithm: document.getElementById('defaultAlgorithm').value,
                autoRun: document.getElementById('autoRun').checked
            };

            localStorage.setItem('optimizationSettings', JSON.stringify(settings));
            alert('Optimization settings saved successfully!');
        }

        function saveVisualization() {
            const settings = {
                chartTheme: document.getElementById('chartTheme').value,
                chartType: document.getElementById('chartType').value,
                chartDPI: document.getElementById('chartDPI').value,
                animSpeed: document.getElementById('animSpeed').value,
                showGrid: document.getElementById('showGrid').checked,
                showLegend: document.getElementById('showLegend').checked
            };

            localStorage.setItem('visualizationSettings', JSON.stringify(settings));
            alert('Visualization settings saved successfully!');
        }

        function saveAdvanced() {
            const settings = {
                parallelMode: document.getElementById('parallelMode').value,
                maxWorkers: document.getElementById('maxWorkers').value,
                enableLogging: document.getElementById('enableLogging').checked,
                enableCaching: document.getElementById('enableCaching').checked
            };

            localStorage.setItem('advancedSettings', JSON.stringify(settings));
            alert('Advanced settings saved successfully!');
        }

        function resetToDefaults() {
            if (confirm('Are you sure you want to reset all settings to defaults?')) {
                localStorage.clear();
                location.reload();
            }
        }

        function loadSettings() {
            // Load profile settings
            const username = localStorage.getItem('username') || '';
            const email = localStorage.getItem('email') || '';
            const theme = localStorage.getItem('theme') || 'auto';

            document.getElementById('username').value = username;
            document.getElementById('email').value = email;
            document.getElementById('theme').value = theme;
            document.getElementById('userDisplay').textContent = username || 'User';

            // Load optimization settings
            const optSettings = JSON.parse(localStorage.getItem('optimizationSettings') || '{}');
            if (optSettings.populationSize) document.getElementById('populationSize').value = optSettings.populationSize;
            if (optSettings.iterations) document.getElementById('iterations').value = optSettings.iterations;

            // Update last modified date
            document.getElementById('updateDate').textContent = new Date().toLocaleDateString();
        }

        document.addEventListener('DOMContentLoaded', loadSettings);
    </script>
</body>
</html>
