{% extends 'admin/base.html' %}

{% block page_title %}Settings{% endblock %}

{% block admin_content %}
<!-- Payment Gateway Section -->
<div class="settings-section">
    <div class="section-header">
        <div class="section-title">
            <i class="fas fa-credit-card"></i>
            <h2>Payment Gateway (MeSomb)</h2>
        </div>
        <div class="section-status">
            {% if mesomb_configured %}
            <span class="status-pill status-active">
                <i class="fas fa-check-circle"></i> Configured
            </span>
            {% else %}
            <span class="status-pill status-warning">
                <i class="fas fa-exclamation-triangle"></i> Not Configured
            </span>
            {% endif %}
        </div>
    </div>

    <div class="content-grid">
        <!-- API Keys Card -->
        <div class="admin-card">
            <div class="card-header">
                <h3><i class="fas fa-key"></i> API Credentials</h3>
                {% if mesomb_configured %}
                <button type="button" class="btn btn-sm btn-secondary" onclick="testMesomb()">
                    <i class="fas fa-plug"></i> Test Connection
                </button>
                {% endif %}
            </div>
            <div class="card-body">
                <form method="POST" class="settings-form">
                    <input type="hidden" name="action" value="save_payment_settings">

                    <div class="form-group">
                        <label class="form-label">
                            <i class="fas fa-id-badge"></i> Application Key
                        </label>
                        <input type="password" name="mesomb_app_key" class="form-input"
                            placeholder="{{ '********' if settings.mesomb_app_key else 'Enter Application Key' }}"
                            autocomplete="off">
                        <small class="form-hint">Your MeSomb application key</small>
                    </div>

                    <div class="form-group">
                        <label class="form-label">
                            <i class="fas fa-user-shield"></i> Access Key
                        </label>
                        <input type="password" name="mesomb_access_key" class="form-input"
                            placeholder="{{ '********' if settings.mesomb_access_key else 'Enter Access Key' }}"
                            autocomplete="off">
                        <small class="form-hint">Your MeSomb access key</small>
                    </div>

                    <div class="form-group">
                        <label class="form-label">
                            <i class="fas fa-lock"></i> Secret Key
                        </label>
                        <input type="password" name="mesomb_secret_key" class="form-input"
                            placeholder="{{ '********' if settings.mesomb_secret_key else 'Enter Secret Key' }}"
                            autocomplete="off">
                        <small class="form-hint">Your MeSomb secret key</small>
                    </div>

                    <div class="form-divider"></div>

                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">Min Deposit (XAF)</label>
                            <input type="number" name="min_deposit" class="form-input"
                                value="{{ settings.min_deposit }}">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Max Deposit (XAF)</label>
                            <input type="number" name="max_deposit" class="form-input"
                                value="{{ settings.max_deposit }}">
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">Min Withdrawal (XAF)</label>
                            <input type="number" name="min_withdrawal" class="form-input"
                                value="{{ settings.min_withdrawal }}">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Max Withdrawal (XAF)</label>
                            <input type="number" name="max_withdrawal" class="form-input"
                                value="{{ settings.max_withdrawal }}">
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary btn-block">
                        <i class="fas fa-save"></i> Save Payment Settings
                    </button>
                </form>
            </div>
        </div>

        <!-- Payment Info Card -->
        <div class="admin-card">
            <div class="card-header">
                <h3><i class="fas fa-info-circle"></i> Supported Methods</h3>
            </div>
            <div class="card-body">
                <div class="payment-methods-info">
                    <div class="payment-method">
                        <div class="method-icon mtn">
                            <i class="fas fa-mobile-alt"></i>
                        </div>
                        <div class="method-details">
                            <h4>MTN Mobile Money</h4>
                            <p>Instant deposits and withdrawals</p>
                            <span class="method-code">Service Code: MTN</span>
                        </div>
                    </div>
                    <div class="payment-method">
                        <div class="method-icon orange">
                            <i class="fas fa-mobile-alt"></i>
                        </div>
                        <div class="method-details">
                            <h4>Orange Money</h4>
                            <p>Instant deposits and withdrawals</p>
                            <span class="method-code">Service Code: ORANGE</span>
                        </div>
                    </div>
                </div>

                <div class="info-box">
                    <i class="fas fa-lightbulb"></i>
                    <div>
                        <strong>How it works:</strong>
                        <ul>
                            <li><strong>Deposits:</strong> User pays from their mobile money account</li>
                            <li><strong>Withdrawals:</strong> Money is sent directly to user's mobile money</li>
                        </ul>
                    </div>
                </div>

                <div class="connection-status" id="connection-status" style="display: none;">
                    <div class="status-content">
                        <div class="status-icon">
                            <i class="fas fa-spinner fa-spin"></i>
                        </div>
                        <div class="status-text">Testing connection...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Game Settings Section -->
<div class="settings-section">
    <div class="section-header">
        <div class="section-title">
            <i class="fas fa-gamepad"></i>
            <h2>Game Settings</h2>
        </div>
    </div>

    <div class="content-grid">
        <div class="admin-card">
            <div class="card-header">
                <h3><i class="fas fa-sliders-h"></i> Betting Limits</h3>
            </div>
            <div class="card-body">
                <form method="POST" class="settings-form">
                    <input type="hidden" name="action" value="save_game_settings">

                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">Minimum Bet (XAF)</label>
                            <input type="number" name="min_bet" class="form-input" value="{{ settings.min_bet }}">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Maximum Bet (XAF)</label>
                            <input type="number" name="max_bet" class="form-input" value="{{ settings.max_bet }}">
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">House Edge (%)</label>
                            <input type="number" step="0.1" name="house_edge" class="form-input"
                                value="{{ settings.house_edge }}">
                            <small class="form-hint">Percentage of house advantage</small>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Betting Duration (seconds)</label>
                            <input type="number" name="betting_duration" class="form-input"
                                value="{{ settings.betting_duration }}">
                            <small class="form-hint">Time for placing bets</small>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary btn-block">
                        <i class="fas fa-save"></i> Save Game Settings
                    </button>
                </form>
            </div>
        </div>

        <!-- System Info Card -->
        <div class="admin-card">
            <div class="card-header">
                <h3><i class="fas fa-server"></i> System Information</h3>
            </div>
            <div class="card-body">
                <div class="detail-grid">
                    <div class="detail-row">
                        <span class="label">Application</span>
                        <span class="value">CrashXAF</span>
                    </div>
                    <div class="detail-row">
                        <span class="label">Version</span>
                        <span class="value">1.0.0</span>
                    </div>
                    <div class="detail-row">
                        <span class="label">Database</span>
                        <span class="value">SQLite</span>
                    </div>
                    <div class="detail-row">
                        <span class="label">Payment Gateway</span>
                        <span class="value">MeSomb v2.0</span>
                    </div>
                    <div class="detail-row">
                        <span class="label">Server Time</span>
                        <span class="value" id="server-time">-</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Quick Actions Section -->
<div class="settings-section">
    <div class="section-header">
        <div class="section-title">
            <i class="fas fa-bolt"></i>
            <h2>Quick Actions</h2>
        </div>
    </div>

    <div class="admin-card">
        <div class="card-body">
            <div class="quick-actions-grid">
                <button class="action-card" onclick="alert('Feature coming soon!')">
                    <div class="action-icon">
                        <i class="fas fa-download"></i>
                    </div>
                    <span>Export Users</span>
                </button>
                <button class="action-card" onclick="alert('Feature coming soon!')">
                    <div class="action-icon">
                        <i class="fas fa-file-export"></i>
                    </div>
                    <span>Export Transactions</span>
                </button>
                <button class="action-card" onclick="alert('Feature coming soon!')">
                    <div class="action-icon warning">
                        <i class="fas fa-broom"></i>
                    </div>
                    <span>Clear Sessions</span>
                </button>
                <button class="action-card" onclick="alert('Feature coming soon!')">
                    <div class="action-icon danger">
                        <i class="fas fa-database"></i>
                    </div>
                    <span>Backup Database</span>
                </button>
            </div>
        </div>
    </div>
</div>

<style>
    /* Only responsive overrides needed - main styles are in admin.css */
    @media (max-width: 768px) {
        .form-row {
            grid-template-columns: 1fr;
        }

        .section-header {
            flex-direction: column;
            align-items: flex-start;
            gap: var(--spacing-md);
        }
    }

    /* Loading spinner for status icon */
    .connection-status.loading .status-icon {
        color: var(--accent-primary);
    }

    .action-card span {
        font-size: 0.875rem;
        font-weight: 500;
    }
</style>

<script>
    // Update server time
    function updateServerTime() {
        const now = new Date();
        document.getElementById('server-time').textContent = now.toLocaleString();
    }
    updateServerTime();
    setInterval(updateServerTime, 1000);

    // Test MeSomb connection
    function testMesomb() {
        const statusEl = document.getElementById('connection-status');
        statusEl.style.display = 'block';
        statusEl.className = 'connection-status loading';
        statusEl.innerHTML = `
        <div class="status-content">
            <div class="status-icon">
                <i class="fas fa-spinner fa-spin"></i>
            </div>
            <div class="status-text">Testing connection...</div>
        </div>
    `;

        fetch('{{ url_for("admin.test_mesomb") }}')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    statusEl.className = 'connection-status success';
                    statusEl.innerHTML = `
                    <div class="status-content">
                        <div class="status-icon">
                            <i class="fas fa-check"></i>
                        </div>
                        <div>
                            <strong>${data.message}</strong>
                            ${data.data ? `<br><small>App: ${data.data.name} | Balance: ${data.data.balance} XAF</small>` : ''}
                        </div>
                    </div>
                `;
                } else {
                    statusEl.className = 'connection-status error';
                    statusEl.innerHTML = `
                    <div class="status-content">
                        <div class="status-icon">
                            <i class="fas fa-times"></i>
                        </div>
                        <div>
                            <strong>Connection Failed</strong>
                            <br><small>${data.message}</small>
                        </div>
                    </div>
                `;
                }
            })
            .catch(error => {
                statusEl.className = 'connection-status error';
                statusEl.innerHTML = `
                <div class="status-content">
                    <div class="status-icon">
                        <i class="fas fa-times"></i>
                    </div>
                    <div>
                        <strong>Error</strong>
                        <br><small>${error.message}</small>
                    </div>
                </div>
            `;
            });
    }
</script>
{% endblock %}