{% extends "base.html" %}
{% block title %}Config — dvad{% endblock %}
{% block content %}
<div class="page-header">
    <h1>Configuration</h1>
</div>

<div class="config-meta">
    <div class="config-paths">
        <div class="path-row"><span class="dim">Binary:</span> <span class="mono">{{ dvad_binary }}</span></div>
        <div class="path-row"><span class="dim">Config:</span> <span class="mono">{{ config_file }}</span></div>
        <div class="path-row"><span class="dim">Data:</span> <span class="mono">{{ data_dir }}</span></div>
        <div class="path-row"><span class="dim">Reviews:</span> <span class="mono">{{ reviews_dir }}</span></div>
        <div class="path-row"><span class="dim">Logs:</span> <span class="mono">{{ logs_dir }}</span></div>
        <div class="path-row"><span class="dim">Templates:</span> <span class="mono">{{ templates_dir }}</span></div>
    </div>
</div>

<div class="tab-bar">
    <button class="tab-btn active" data-tab="structured" onclick="dvad.switchTab('structured')">Structured</button>
    <button class="tab-btn" data-tab="raw" onclick="dvad.switchTab('raw')">Raw YAML</button>
</div>

{# ── Structured Tab ─────────────────────────────────────────────────── #}
<div class="tab-content" id="tab-structured">
    <div class="config-layout">
        <div class="config-panel">
            <h2>Models</h2>
            {% if config and sorted_models %}
            {% for name, m in sorted_models %}
            <details class="model-card-collapsible{% if m.enabled is defined and not m.enabled %} model-disabled{% endif %}" data-model-name="{{ name }}">
                <summary class="model-card-header" onclick="event.preventDefault()">
                    <span class="model-name" onclick="this.closest('details').toggleAttribute('open')">{{ name }}{% if m.enabled is defined and not m.enabled %} <span class="disabled-badge">disabled</span>{% endif %}</span>
                    <span class="model-role-icons">
                        <span class="role-icon{% if roles.get('author') == name %} role-active{% endif %}" data-role="author" data-model="{{ name }}" title="Author{% if roles.get('author') == name %} (assigned){% endif %}"><i data-lucide="pen-tool"></i></span>
                        <span class="role-icon{% if name in (roles.get('reviewers') or []) %} role-active{% endif %}" data-role="reviewer" data-model="{{ name }}" title="Reviewer{% if name in (roles.get('reviewers') or []) %} (assigned){% endif %}"><i data-lucide="scan-eye"></i></span>
                        <span class="role-icon{% if roles.get('deduplication') == name %} role-active{% endif %}" data-role="deduplication" data-model="{{ name }}" title="Dedup{% if roles.get('deduplication') == name %} (assigned){% endif %}"><i data-lucide="combine"></i></span>
                        <span class="role-icon{% if roles.get('normalization') == name %} role-active{% endif %}" data-role="normalization" data-model="{{ name }}" title="Normalization{% if roles.get('normalization') == name %} (assigned){% endif %}"><i data-lucide="scale"></i></span>
                        <span class="role-icon{% if roles.get('revision') == name %} role-active{% endif %}" data-role="revision" data-model="{{ name }}" title="Revision{% if roles.get('revision') == name %} (assigned){% endif %}"><i data-lucide="file-pen"></i></span>
                        <span class="role-icon{% if roles.get('integration_reviewer') == name %} role-active{% endif %}" data-role="integration_reviewer" data-model="{{ name }}" title="Integration{% if roles.get('integration_reviewer') == name %} (assigned){% endif %}"><i data-lucide="puzzle"></i></span>
                        <span class="thinking-icon{% if m.thinking %} thinking-active{% endif %}"
                              data-model="{{ name }}"
                              title="Chain of Thought: {{ 'enabled' if m.thinking else 'disabled' }}">
                            <i data-lucide="brain"></i>
                        </span>
                    </span>
                </summary>
                <div class="model-card-body">
                    <div class="model-fields">
                        <div class="field-row">
                            <span class="field-label">provider:</span>
                            <span>{{ m.provider }}</span>
                        </div>
                        <div class="field-row">
                            <span class="field-label">model_id:</span>
                            <span class="mono">{{ m.model_id }}</span>
                        </div>
                        <div class="field-row">
                            <span class="field-label">api_key_env:</span>
                            <span class="mono">{{ m.api_key_env }}</span>
                        </div>
                        {% if m.api_base %}
                        <div class="field-row">
                            <span class="field-label">api_base:</span>
                            <span class="mono truncate">{{ m.api_base }}</span>
                        </div>
                        {% endif %}
                        <div class="field-row">
                            <span class="field-label">context:</span>
                            <span>{{ "{:,}".format(m.context_window) if m.context_window else 'unset' }}</span>
                            <span class="field-label" style="margin-left:12px">timeout:</span>
                            <span class="editable-timeout" data-model="{{ name }}">{{ m.timeout }}</span>s
                            <span class="field-label" style="margin-left:12px">max out:</span>
                            <span class="editable-max-tokens" data-model="{{ name }}">{{ m.max_out_configured if m.max_out_configured else 'unset' }}</span>
                            <span class="dim" style="margin-left:4px">/{{ "{:,}".format(m.max_out_stated) if m.max_out_stated else '?' }}</span>
                        </div>
                        <div class="field-row">
                            <span class="field-label">cost in:</span>
                            <span>{{ m.cost_per_1k_input if m.cost_per_1k_input is not none else 'unset' }}</span>
                            <span class="field-label" style="margin-left:12px">cost out:</span>
                            <span>{{ m.cost_per_1k_output if m.cost_per_1k_output is not none else 'unset' }}</span>
                            <span class="dim">per 1K tokens</span>
                        </div>
                        {% if m.use_completion_tokens %}
                        <div class="field-row">
                            <span class="dim">use_completion_tokens: true</span>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </details>
            {% endfor %}
            {% else %}
            <p class="dim">No models configured.</p>
            {% endif %}
        </div>

        <div class="config-panel">
            <h2>API Keys</h2>
            <div class="env-keys-section" id="env-keys-section">
                <p class="dim" style="margin-bottom: var(--pad-sm);">
                    Keys are saved to <span class="mono">{{ env_file_path }}</span>
                    {% if env_file_exists %}
                    <span class="key-status key-set">exists</span>
                    {% else %}
                    <span class="key-status key-missing">not created</span>
                    {% endif %}
                </p>
                <div id="env-keys-list">
                    <p class="dim">Loading...</p>
                </div>
            </div>

            <h2>Validation</h2>
            <div class="validation-result" id="validation-result">
                {% if issues %}
                {% for level, msg in issues %}
                <div class="issue issue-{{ level }}">{{ level|upper }}: {{ msg }}</div>
                {% endfor %}
                {% else %}
                <div class="issue issue-ok">Configuration is valid.</div>
                {% endif %}
            </div>
            <h2 style="margin-top:12px">Role Assignments</h2>
            <div class="role-summary" id="role-summary">
                {% set role_keys = ['author', 'reviewer1', 'reviewer2', 'dedup', 'normalization', 'revision', 'integration'] %}
                {% for r in role_assignments %}
                <div class="role-summary-row" data-role-key="{{ role_keys[loop.index0] }}">
                    <span class="role-summary-icon {{ 'icon-active' if r.model }}"><i data-lucide="{{ r.icon }}"></i></span>
                    <span class="role-summary-cot {{ 'cot-active' if r.thinking }}"><i data-lucide="brain"></i></span>
                    <span class="role-summary-label">{{ r.label }}:</span>
                    {% if r.model %}
                    <span class="role-summary-value">{{ r.model }}</span>
                    {% else %}
                    <span class="role-summary-value unassigned">-</span>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
            <div class="role-descriptions">
                <details>
                    <summary class="dim">What do these roles do?</summary>
                    <div class="role-desc-list">
                        <div><strong>Author:</strong> Generates initial responses to reviewer findings and produces revised artifacts</div>
                        <div><strong>Reviewer (x2):</strong> Independently analyzes input for issues, risks, and improvements</div>
                        <div><strong>Dedup:</strong> Consolidates overlapping findings from multiple reviewers into groups</div>
                        <div><strong>Normalization:</strong> Standardizes severity levels and categories across grouped findings</div>
                        <div><strong>Revision:</strong> Creates the final revised artifact incorporating accepted feedback</div>
                        <div><strong>Integration:</strong> Reviews cross-system integration concerns and component interactions</div>
                    </div>
                </details>
            </div>
            <h2 style="margin-top:12px">Development</h2>
            <div class="settings-section">
                <div class="field-row">
                    <span class="field-label">live e2e tests:</span>
                    <span class="settings-toggle{% if settings.get('live_testing') %} settings-on{% endif %}"
                          data-key="live_testing">{{ 'enabled' if settings.get('live_testing') else 'disabled' }}</span>
                    <span class="dim" style="margin-left:8px">run without -m live flag</span>
                </div>
            </div>
        </div>
    </div>
</div>

{# ── Save Roles Toast ───────────────────────────────────────────────── #}
<div class="save-roles-toast" id="save-roles-toast">
    <button class="btn btn-accent" onclick="dvad.saveRoles()">Save Changes</button>
</div>

{# ── Raw YAML Tab ───────────────────────────────────────────────────── #}
<div class="tab-content" id="tab-raw" style="display:none">
    <textarea id="yaml-editor" class="yaml-editor" spellcheck="false">{{ raw_yaml }}</textarea>
    <div class="yaml-actions">
        <button class="btn" onclick="dvad.validateYaml()">Validate</button>
        <button class="btn btn-accent" onclick="dvad.saveYaml()">Save</button>
    </div>
    <div id="yaml-result" class="yaml-result"></div>
</div>

{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/js-yaml@4/dist/js-yaml.min.js"></script>
<script>
var initialRoleState = {{ initial_role_state|tojson }};
</script>
<script>
document.addEventListener('DOMContentLoaded', () => {
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }
    dvad.initSettingsToggle();
    dvad.initRoleInteractivity();
});
window.addEventListener('pageshow', function(event) {
    if (event.persisted) {
        window.location.reload();
    }
});
</script>
{% endblock %}