{% extends "base.html" %}

{% block title %}Settings & Webhooks | Issueforge{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto space-y-8">
    <div>
        <h1 class="text-2xl font-bold text-white tracking-tight">System Settings & Webhook Configurations</h1>
        <p class="text-sm text-slate-400 mt-1">Native Jetson Orin deployment, Multi-LLM model routing, and repository webhook integration.</p>
    </div>

    <!-- Webhook Integration Card -->
    <div class="bg-cardbg border border-bordercolor rounded-xl p-6 shadow-sm space-y-6">
        <div class="flex items-center space-x-2 text-emerald-400 text-sm font-bold uppercase tracking-wider">
            <i data-lucide="webhook" class="w-5 h-5"></i>
            <span>Webhook Endpoints</span>
        </div>

        <div class="space-y-4 text-sm">
            <div>
                <label class="block text-xs font-semibold text-slate-400 uppercase mb-1">GitHub Webhook URL</label>
                <div class="flex items-center space-x-2">
                    <input type="text" readonly value="{{ settings.forge_base_url }}/api/webhooks/github" class="w-full bg-slate-900 border border-slate-700 rounded-lg px-3.5 py-2 font-mono text-xs text-slate-200">
                    <button onclick="navigator.clipboard.writeText('{{ settings.forge_base_url }}/api/webhooks/github')" class="px-3 py-2 bg-slate-800 hover:bg-slate-700 rounded-lg text-xs font-medium text-slate-300">
                        Copy
                    </button>
                </div>
                <p class="text-xs text-slate-500 mt-1">Events: <code>Issues</code>, <code>Pull requests</code>, <code>Issue comments</code>. Content type: <code>application/json</code>.</p>
            </div>

            <div>
                <label class="block text-xs font-semibold text-slate-400 uppercase mb-1">GitLab Webhook URL</label>
                <div class="flex items-center space-x-2">
                    <input type="text" readonly value="{{ settings.forge_base_url }}/api/webhooks/gitlab" class="w-full bg-slate-900 border border-slate-700 rounded-lg px-3.5 py-2 font-mono text-xs text-slate-200">
                    <button onclick="navigator.clipboard.writeText('{{ settings.forge_base_url }}/api/webhooks/gitlab')" class="px-3 py-2 bg-slate-800 hover:bg-slate-700 rounded-lg text-xs font-medium text-slate-300">
                        Copy
                    </button>
                </div>
                <p class="text-xs text-slate-500 mt-1">Triggers: <code>Issues events</code>, <code>Merge request events</code>, <code>Comments</code>.</p>
            </div>
        </div>
    </div>

    <!-- Multi-LLM Routing Card -->
    <div class="bg-cardbg border border-bordercolor rounded-xl p-6 shadow-sm space-y-6">
        <div class="flex items-center space-x-2 text-cyan-400 text-sm font-bold uppercase tracking-wider">
            <i data-lucide="layers" class="w-5 h-5"></i>
            <span>Multi-LLM Collaborative Pipeline Models</span>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
            <div class="p-4 bg-slate-900/60 border border-slate-800 rounded-lg">
                <div class="text-xs text-slate-400 uppercase font-semibold">1. Planner Agent Model</div>
                <div class="font-mono text-sm text-cyan-300 font-bold mt-1">{{ settings.planner_model }}</div>
                <p class="text-xs text-slate-500 mt-1">Responsible for repository mapping and architecture strategy.</p>
            </div>

            <div class="p-4 bg-slate-900/60 border border-slate-800 rounded-lg">
                <div class="text-xs text-slate-400 uppercase font-semibold">2. Coder Agent Model</div>
                <div class="font-mono text-sm text-emerald-300 font-bold mt-1">{{ settings.coder_model }}</div>
                <p class="text-xs text-slate-500 mt-1">Responsible for surgical code generation and bug fixing.</p>
            </div>

            <div class="p-4 bg-slate-900/60 border border-slate-800 rounded-lg">
                <div class="text-xs text-slate-400 uppercase font-semibold">3. Tester Agent Model</div>
                <div class="font-mono text-sm text-purple-300 font-bold mt-1">{{ settings.tester_model }}</div>
                <p class="text-xs text-slate-500 mt-1">Responsible for test runner discovery and stack trace analysis.</p>
            </div>

            <div class="p-4 bg-slate-900/60 border border-slate-800 rounded-lg">
                <div class="text-xs text-slate-400 uppercase font-semibold">4. Reviewer Agent Model</div>
                <div class="font-mono text-sm text-amber-300 font-bold mt-1">{{ settings.reviewer_model }}</div>
                <p class="text-xs text-slate-500 mt-1">Responsible for git diff evaluation, security, and PR summary.</p>
            </div>
        </div>
    </div>

    <!-- Jetson Native Environment Card -->
    <div class="bg-cardbg border border-bordercolor rounded-xl p-6 shadow-sm space-y-6">
        <div class="flex items-center space-x-2 text-emerald-400 text-sm font-bold uppercase tracking-wider">
            <i data-lucide="cpu" class="w-5 h-5"></i>
            <span>Native Jetson Sandbox & Storage Details</span>
        </div>

        <div class="space-y-3 text-sm">
            <div class="flex justify-between py-2 border-b border-bordercolor">
                <span class="text-slate-400">Execution Mode</span>
                <span class="font-semibold text-white">Native Subprocesses (Zero Docker Overhead)</span>
            </div>
            <div class="flex justify-between py-2 border-b border-bordercolor">
                <span class="text-slate-400">Workspace Root Path</span>
                <span class="font-mono text-xs text-slate-300">{{ settings.forge_workspace_root }}</span>
            </div>
            <div class="flex justify-between py-2 border-b border-bordercolor">
                <span class="text-slate-400">SQLite Database Path</span>
                <span class="font-mono text-xs text-slate-300">{{ settings.forge_db_path }}</span>
            </div>
            <div class="flex justify-between py-2 border-b border-bordercolor">
                <span class="text-slate-400">Telegram Bot Active</span>
                <span class="font-semibold {% if settings.telegram_enabled %}text-emerald-400{% else %}text-slate-500{% endif %}">
                    {{ "Enabled" if settings.telegram_enabled else "Disabled" }}
                </span>
            </div>
            <div class="flex justify-between py-2">
                <span class="text-slate-400">Allowed Telegram User IDs</span>
                <span class="font-mono text-xs text-slate-300">{{ settings.telegram_allowed_user_ids or "All" }}</span>
            </div>
        </div>
    </div>
</div>
{% endblock %}