{% extends "base.html" %}
{% set active_page = "config" %}
{% block title %}Configuration{% endblock %}

{% block content %}
<div class="mb-6">
    <h1 class="text-xl font-semibold text-white">Configuration</h1>
</div>

<form method="POST" action="/config" class="max-w-2xl">
    <div class="space-y-6">
        <!-- Operational Controls -->
        <div class="card rounded-lg p-5">
            <h2 class="text-sm font-medium text-white mb-4">Operational Controls</h2>
            <div class="space-y-4">
                <div>
                    <label class="block text-sm text-gray-400 mb-1">Preview Mode</label>
                    <select name="preview_mode" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-gray-200">
                        <option value="true" {% if configs.get('preview_mode', {}).get('value') == 'true' %}selected{% endif %}>On — agent discovers but does not bid</option>
                        <option value="false" {% if configs.get('preview_mode', {}).get('value', 'false') != 'true' %}selected{% endif %}>Off — full autonomous operation</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-1">Max Daily Bids</label>
                    <input type="number" name="max_daily_bids" value="{{ configs.get('max_daily_bids', {}).get('value', '10') }}"
                           class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-gray-200">
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-1">Daily Revenue Target ($)</label>
                    <input type="number" name="daily_revenue_target" value="{{ configs.get('daily_revenue_target', {}).get('value', '500') }}"
                           class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-gray-200">
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-1">Max Concurrent Projects</label>
                    <input type="number" name="max_concurrent_projects" value="{{ configs.get('max_concurrent_projects', {}).get('value', '5') }}"
                           class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-gray-200">
                </div>
            </div>
        </div>

        <!-- Auth Whitelist -->
        <div class="card rounded-lg p-5">
            <h2 class="text-sm font-medium text-white mb-4">Authorized Emails</h2>
            <div>
                <label class="block text-sm text-gray-400 mb-1">Allowed emails (comma-separated)</label>
                <textarea name="allowed_emails" rows="3"
                    class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-gray-200 resize-none placeholder-gray-600"
                    placeholder="user@example.com, admin@bridgestack.systems">{{ configs.get('allowed_emails', {}).get('value', '') }}</textarea>
            </div>
        </div>

        <!-- Search Queries -->
        <div class="card rounded-lg p-5">
            <h2 class="text-sm font-medium text-white mb-4">Freelancer Search Queries</h2>
            <div>
                <label class="block text-sm text-gray-400 mb-1">Search queries (one per line)</label>
                <textarea name="search_queries" rows="8"
                    class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-gray-200 mono resize-none placeholder-gray-600"
                    placeholder="web application development&#10;mobile app development&#10;python django project">{{ configs.get('search_queries', {}).get('value', '') }}</textarea>
            </div>
        </div>

        <!-- All Config -->
        <div class="card rounded-lg p-5">
            <h2 class="text-sm font-medium text-white mb-4">All Config Values</h2>
            <div class="space-y-3">
                {% for key, info in configs.items() %}
                {% if key not in ['preview_mode', 'max_daily_bids', 'daily_revenue_target', 'max_concurrent_projects', 'allowed_emails', 'search_queries'] %}
                <div class="flex items-center justify-between text-sm">
                    <span class="text-gray-400 mono">{{ key }}</span>
                    <span class="text-gray-500 truncate ml-4 max-w-sm text-right">{{ info.value[:80] }}</span>
                </div>
                {% endif %}
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="mt-6">
        <button type="submit"
                class="px-6 py-2.5 bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium rounded-lg transition">
            Save Configuration
        </button>
    </div>
</form>
{% endblock %}