{% extends 'base.html' %}

{% block title %}Configuration - VidAI{% endblock %}

{% block head %}
<style>
    .config-container { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; }
    .config-section { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin-bottom: 2rem; }
    .section-title { color: #333; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 600; border-bottom: 2px solid #667eea; padding-bottom: 0.5rem; }
    .form-row { display: flex; gap: 1rem; margin-bottom: 1rem; }
    .form-row .form-group { flex: 1; }
    .form-group { margin-bottom: 1.5rem; }
    .form-group label { display: block; margin-bottom: 0.5rem; color: #374151; font-weight: 500; }
    .form-group input, .form-group select { width: 100%; padding: 0.75rem; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 1rem; }
    .form-group input:focus, .form-group select:focus { outline: none; border-color: #667eea; }
    .form-group input[type="checkbox"] { width: auto; margin-right: 0.5rem; }
    .btn-submit { padding: 0.75rem 2rem; background: #667eea; color: white; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; }
    .btn-submit:hover { background: #5a67d8; }
</style>
{% endblock %}

{% block content %}
<div class="config-container">
    <div class="config-section">
        <h2 class="section-title">Registration Settings</h2>
        <form method="post">
            <div class="form-row">
                <div class="form-group">
                    <label for="allow_registration">
                        <input type="checkbox" id="allow_registration" name="allow_registration" {% if current_config.allow_registration %}checked{% endif %}>
                        Allow User Registration
                    </label>
                </div>
                <div class="form-group">
                    <label for="default_user_tokens">Default User Tokens</label>
                    <input type="number" id="default_user_tokens" name="default_user_tokens" value="{{ current_config.default_user_tokens }}">
                </div>
                <div class="form-group">
                    <label for="token_price_usd">Token Price (USD)</label>
                    <input type="number" step="0.01" id="token_price_usd" name="token_price_usd" value="{{ current_config.token_price_usd }}">
                </div>
            </div>
    </div>

    <div class="config-section">
        <h2 class="section-title">Email Settings</h2>
        <div class="form-row">
            <div class="form-group">
                <label for="smtp_server">SMTP Server</label>
                <input type="text" id="smtp_server" name="smtp_server" value="{{ current_config.smtp_server }}">
            </div>
            <div class="form-group">
                <label for="smtp_port">SMTP Port</label>
                <input type="number" id="smtp_port" name="smtp_port" value="{{ current_config.smtp_port }}">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group">
                <label for="smtp_username">SMTP Username</label>
                <input type="text" id="smtp_username" name="smtp_username" value="{{ current_config.smtp_username }}">
            </div>
            <div class="form-group">
                <label for="smtp_password">SMTP Password</label>
                <input type="password" id="smtp_password" name="smtp_password" value="{{ current_config.smtp_password }}">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group">
                <label for="smtp_use_tls">
                    <input type="checkbox" id="smtp_use_tls" name="smtp_use_tls" {% if current_config.smtp_use_tls %}checked{% endif %}>
                    Use TLS
                </label>
            </div>
            <div class="form-group">
                <label for="smtp_use_ssl">
                    <input type="checkbox" id="smtp_use_ssl" name="smtp_use_ssl" {% if current_config.smtp_use_ssl %}checked{% endif %}>
                    Use SSL
                </label>
            </div>
        </div>
    </div>

    <div class="config-section">
        <h2 class="section-title">Payment Settings</h2>
        <h3>Stripe</h3>
        <div class="form-row">
            <div class="form-group">
                <label for="stripe_publishable_key">Stripe Publishable Key</label>
                <input type="text" id="stripe_publishable_key" name="stripe_publishable_key" value="{{ current_config.stripe_publishable_key }}">
            </div>
            <div class="form-group">
                <label for="stripe_secret_key">Stripe Secret Key</label>
                <input type="password" id="stripe_secret_key" name="stripe_secret_key" value="{{ current_config.stripe_secret_key }}">
            </div>
        </div>
        <h3>PayPal</h3>
        <div class="form-row">
            <div class="form-group">
                <label for="paypal_client_id">PayPal Client ID</label>
                <input type="text" id="paypal_client_id" name="paypal_client_id" value="{{ current_config.paypal_client_id }}">
            </div>
            <div class="form-group">
                <label for="paypal_client_secret">PayPal Client Secret</label>
                <input type="password" id="paypal_client_secret" name="paypal_client_secret" value="{{ current_config.paypal_client_secret }}">
            </div>
        </div>
        <h3>Cryptocurrency</h3>
        <div class="form-row">
            <div class="form-group">
                <label for="btc_payment_address">BTC Payment Address</label>
                <input type="text" id="btc_payment_address" name="btc_payment_address" value="{{ current_config.btc_payment_address }}">
            </div>
            <div class="form-group">
                <label for="eth_payment_address">ETH Payment Address</label>
                <input type="text" id="eth_payment_address" name="eth_payment_address" value="{{ current_config.eth_payment_address }}">
            </div>
        </div>
    </div>

    <div class="config-section">
        <h2 class="section-title">General Settings</h2>
        <div class="form-group">
            <label for="base_url">Base URL</label>
            <input type="text" id="base_url" name="base_url" value="{{ current_config.base_url }}">
        </div>
    </div>

    <div class="config-section">
        <h2 class="section-title">Database Settings</h2>
        <div class="form-group">
            <label for="db_type">Database Type</label>
            <select id="db_type" name="db_type">
                <option value="sqlite" {% if current_config.db_type == 'sqlite' %}selected{% endif %}>SQLite</option>
                <option value="mysql" {% if current_config.db_type == 'mysql' %}selected{% endif %}>MySQL</option>
            </select>
        </div>
        <div id="sqlite_settings" {% if current_config.db_type != 'sqlite' %}style="display: none;"{% endif %}>
            <div class="form-group">
                <label for="db_sqlite_path">SQLite Database Path</label>
                <input type="text" id="db_sqlite_path" name="db_sqlite_path" value="{{ current_config.db_sqlite_path }}">
            </div>
        </div>
        <div id="mysql_settings" {% if current_config.db_type != 'mysql' %}style="display: none;"{% endif %}>
            <div class="form-row">
                <div class="form-group">
                    <label for="db_mysql_host">MySQL Host</label>
                    <input type="text" id="db_mysql_host" name="db_mysql_host" value="{{ current_config.db_mysql_host }}">
                </div>
                <div class="form-group">
                    <label for="db_mysql_port">MySQL Port</label>
                    <input type="number" id="db_mysql_port" name="db_mysql_port" value="{{ current_config.db_mysql_port }}">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="db_mysql_user">MySQL User</label>
                    <input type="text" id="db_mysql_user" name="db_mysql_user" value="{{ current_config.db_mysql_user }}">
                </div>
                <div class="form-group">
                    <label for="db_mysql_password">MySQL Password</label>
                    <input type="password" id="db_mysql_password" name="db_mysql_password" value="{{ current_config.db_mysql_password }}">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="db_mysql_database">MySQL Database</label>
                    <input type="text" id="db_mysql_database" name="db_mysql_database" value="{{ current_config.db_mysql_database }}">
                </div>
                <div class="form-group">
                    <label for="db_mysql_charset">MySQL Charset</label>
                    <input type="text" id="db_mysql_charset" name="db_mysql_charset" value="{{ current_config.db_mysql_charset }}">
                </div>
            </div>
        </div>
    </div>

    <div class="config-section">
        <h2 class="section-title">Network Settings</h2>
        <div class="form-row">
            <div class="form-group">
                <label for="web_host">Web Host</label>
                <input type="text" id="web_host" name="web_host" value="{{ current_config.web_host }}">
            </div>
            <div class="form-group">
                <label for="web_port">Web Port</label>
                <input type="number" id="web_port" name="web_port" value="{{ current_config.web_port }}">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group">
                <label for="backend_host">Backend Host</label>
                <input type="text" id="backend_host" name="backend_host" value="{{ current_config.backend_host }}">
            </div>
            <div class="form-group">
                <label for="backend_web_port">Backend Web Port</label>
                <input type="number" id="backend_web_port" name="backend_web_port" value="{{ current_config.backend_web_port }}">
            </div>
            <div class="form-group">
                <label for="backend_worker_port">Backend Worker Port</label>
                <input type="number" id="backend_worker_port" name="backend_worker_port" value="{{ current_config.backend_worker_port }}">
            </div>
        </div>
        <button type="submit" class="btn-submit">Save Configuration</button>
        </form>
    </div>
</div>

<script>
    document.getElementById('db_type').addEventListener('change', function() {
        const dbType = this.value;
        document.getElementById('sqlite_settings').style.display = dbType === 'sqlite' ? 'block' : 'none';
        document.getElementById('mysql_settings').style.display = dbType === 'mysql' ? 'block' : 'none';
    });
</script>
{% endblock %}