{% extends "base.html" %}
{% block title %}Dashboard — dvad{% endblock %}
{% block content %}

{% macro readiness_popover(mode_key) %}
{% set ms = mode_readiness.get(mode_key) %}
{% if ms %}
<span class="mode-ready-badge {{ 'ready' if ms.ready else 'not-ready' }} info-trigger">
    <i data-lucide="{{ 'check-circle' if ms.ready else 'x-circle' }}"></i>
    <span class="info-popover readiness-popover">
        {% if ms.ready %}
        <strong>Ready</strong> - required roles assigned
        {% else %}
        <strong>Not ready</strong> - missing roles:<br>
        {% for role in ms.roles %}
        {% if role.required and not role.assigned %}
        - {{ role.label }}<br>
        {% endif %}
        {% endfor %}
        {% endif %}
    </span>
</span>
{% endif %}
{% endmacro %}

{% if has_config_errors %}
<div class="onboarding-banner">
    <span class="onboarding-banner-icon"><i data-lucide="alert-triangle"></i></span>
    <span class="onboarding-banner-text">
        <strong>Setup incomplete</strong> — {{ config_error_summary }}.
        Models and API keys must be configured before running reviews.
    </span>
    <a href="/config" class="btn btn-accent btn-sm">Open Settings</a>
</div>
{% endif %}

{# ── Mode Selector Cards ───────────────────────────────────────────── #}
<div class="mode-cards">
    <label class="mode-card mode-card--spec">
        <div class="mode-card-title">
            <input type="radio" name="mode" value="spec" checked>
            <span class="mode-card-name">specification</span>
            {{ readiness_popover('spec') }}
        </div>
        <p class="mode-card-desc">Enrich specification documents with multi-reviewer suggestions</p>
        <div class="mode-card-meta">
            <div><strong>requires:</strong> spec file(s) in txt or md format</div>
            <div><strong>returns:</strong> revised spec with all suggestions from all reviewers</div>
            <div><strong>minimum:</strong> Reviewer 1, Normalization</div>
            <div><strong>recommended:</strong> Reviewer 2 + Dedup, Revision</div>
        </div>
        <div class="mode-card-tip">Mid-tier models produce comparable results to more expensive flagship models here.</div>
    </label>
    <label class="mode-card mode-card--code">
        <div class="mode-card-title">
            <input type="radio" name="mode" value="code">
            <span class="mode-card-name">code</span>
            {{ readiness_popover('code') }}
        </div>
        <p class="mode-card-desc">Review code diffs and patches with adversarial analysis</p>
        <div class="mode-card-meta">
            <div><strong>requires:</strong> exactly one code file</div>
            <div><strong>returns:</strong> revised diff patch</div>
            <div><strong>minimum:</strong> Author, Reviewer 1, Normalization</div>
            <div><strong>recommended:</strong> Reviewer 2 + Dedup, Revision</div>
        </div>
        <div class="mode-card-tip">Use deep thinkers to catch subtle bugs/blindspots; otherwise mid-tier models perform well here.</div>
    </label>
    <label class="mode-card mode-card--integration">
        <div class="mode-card-title">
            <input type="radio" name="mode" value="integration">
            <span class="mode-card-name">integration</span>
            {{ readiness_popover('integration') }}
        </div>
        <p class="mode-card-desc">Review integration concerns across system components</p>
        <div class="mode-card-meta">
            <div><strong>requires:</strong> optional files + project directory</div>
            <div><strong>returns:</strong> remediation plan</div>
            <div><strong>minimum:</strong> Integration, Normalization</div>
            <div><strong>recommended:</strong> Revision</div>
        </div>
        <div class="mode-card-tip">Models with large context windows hold more of your codebase in view and make better cross-system connections. See note on project directory setting below.</div>
    </label>
    <label class="mode-card mode-card--plan">
        <div class="mode-card-title">
            <input type="radio" name="mode" value="plan">
            <span class="mode-card-name">plan</span>
            {{ readiness_popover('plan') }}
        </div>
        <p class="mode-card-desc">Adversarial review of implementation plans with author rebuttals</p>
        <div class="mode-card-meta">
            <div><strong>requires:</strong> plan file</div>
            <div><strong>returns:</strong> revised plan with incorporated feedback</div>
            <div><strong>minimum:</strong> Author, Reviewer 1, Normalization</div>
            <div><strong>recommended:</strong> Reviewer 2 + Dedup, Revision</div>
        </div>
        <div class="mode-card-tip">SOTA flagship models provide the strongest adversarial feedback here. Different providers for each role and increased timeouts recommended.</div>
    </label>
</div>

{# ── Review Settings Box ──────────────────────────────────────────── #}
<div class="review-settings">
    <div class="settings-layout">
        <form id="review-form" enctype="multipart/form-data" class="settings-form">
            <input type="hidden" name="mode" id="review-mode" value="spec">

            <div class="settings-grid">
                <div class="form-row">
                    <label for="project">Project</label>
                    <input type="text" id="project" name="project" required class="input" placeholder="project-name">
                </div>

                <div class="form-row" id="input-files-row">
                    <label id="input-files-label">Required Files</label>
                    <div class="file-input-wrapper">
                        <button type="button" class="browse-btn" id="input-files-browse" onclick="dvad.openFilePicker('input_files', false)">
                            <i data-lucide="folder-open"></i> Browse…
                        </button>
                        <div id="input_files_display" class="selected-files-display"></div>
                        <input type="hidden" id="input_files_paths" name="input_paths">
                    </div>
                    <span class="field-hint" id="file-hint">Plan file + up to 5 reference files</span>
                </div>

                <div class="form-row" id="reference-files-row" style="display:none">
                    <label>Reference Files <span class="dim">(optional)</span></label>
                    <div class="file-input-wrapper">
                        <button type="button" class="browse-btn" onclick="dvad.openFilePicker('reference_files', true)">
                            <i data-lucide="folder-open"></i> Browse…
                        </button>
                        <div id="reference_files_display" class="selected-files-display"></div>
                        <input type="hidden" id="reference_files_paths" name="reference_paths">
                    </div>
                    <span class="field-hint">Up to 7 reference files for reviewers to cross-check against</span>
                </div>

                <div class="form-row" id="spec-row" style="display:none">
                    <label for="spec_file">Spec File <span class="dim">(optional)</span></label>
                    <div class="file-input-wrapper">
                        <button type="button" class="browse-btn" onclick="dvad.openFilePicker('spec_file', false)">
                            <i data-lucide="folder-open"></i> Browse…
                        </button>
                        <div id="spec_file_display" class="selected-files-display"></div>
                        <input type="hidden" id="spec_file_paths" name="spec_path">
                    </div>
                </div>

                <div class="form-row" id="project-dir-row" style="display:none">
                    <label for="project_dir">
                        Project Directory <span class="dim">(optional)</span>
                        <span class="info-trigger">
                            <i data-lucide="help-circle"></i>
                            <span class="info-popover">
                                <strong>What does this do?</strong><br><br>
                                The project directory is <em>not</em> recursively scanned. It serves two purposes:<br><br>
                                <strong>1. Manifest-based file discovery</strong><br>
                                If no input files are provided, dvad looks for <code>.dvad/manifest.json</code>
                                inside this directory and pulls only files listed under tasks with
                                <code>status: "completed"</code>.<br><br>
                                <strong>2. Spec file fallback</strong><br>
                                If no <code>--spec</code> file is given, it looks for
                                <code>000-strategic-summary.md</code> or <code>strategic-summary.md</code>
                                in the project root.<br><br>
                                <strong>Limits:</strong> All collected content must fit within 80% of the
                                integration reviewer model's context window. No chunking — if it doesn't fit,
                                the review aborts.
                            </span>
                        </span>
                    </label>
                    <div class="dir-input-wrapper">
                        <input type="text" id="project_dir" name="project_dir" class="input" placeholder="/path/to/project">
                        <button type="button" class="browse-btn" onclick="dvad.openFilePicker('project_dir', false, true)">
                            <i data-lucide="folder-open"></i>
                        </button>
                    </div>
                </div>

                <div class="form-row">
                    <label for="max_cost">Max Cost <span class="dim">(optional)</span></label>
                    <input type="number" id="max_cost" name="max_cost" step="0.01" min="0" class="input input-sm" placeholder="$0.00">
                </div>

                <div class="form-row">
                    <label class="checkbox-label">
                        <input type="checkbox" name="dry_run" id="dry_run"> Dry run
                    </label>
                    <span class="field-hint">Validates inputs and builds the command without calling any models</span>
                </div>
            </div>

            <div id="form-error" class="error-msg" style="display:none"></div>
        </form>

        {% if role_assignments %}
        <div class="dashboard-sidebar">
            <div class="dashboard-roles">
                <h2 class="dashboard-roles-title">Role Assignments</h2>
                <div class="role-summary">
                    {% for r in role_assignments %}
                    <div class="role-summary-row">
                        <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">unassigned</span>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}
    </div>
    <div class="settings-action-row">
        <button type="submit" form="review-form" class="btn btn-accent" id="submit-btn">New Review</button>
    </div>
</div>

{# ── Interstitial — Command Preview ───────────────────────────────── #}
<div class="interstitial" id="interstitial" style="display:none">
    <h3>Review Command</h3>
    <p class="dim">Copy this command to run from a terminal, or click "Run Review" to execute via the GUI.</p>
    <div class="command-preview">
        <pre id="command-preview-text"></pre>
        <button class="btn btn-sm" onclick="dvad.copyCommand()">Copy</button>
    </div>

    <div class="interstitial-actions">
        <button class="btn" onclick="dvad.cancelInterstitial()">Back</button>
        <button class="btn btn-accent" id="run-review-btn" onclick="dvad.executeReview()">Run Review</button>
    </div>
</div>

{# ── Reviews Table ─────────────────────────────────────────────────── #}
<div class="review-history">
    <div class="page-header">
        <h1>Reviews <span class="dim">({{ total }})</span></h1>
    </div>
    <div class="filter-bar">
        <input type="text" id="project-filter" placeholder="Filter by project..." class="input-sm">
        <label class="checkbox-label">
            <input type="checkbox" id="show-test-toggle" {% if show_test %}checked{% endif %} onchange="window.location.href='/?show_test=' + this.checked + '&page=1'">
            Show test reviews
        </label>
    </div>

    <table class="data-table" id="reviews-table">
        <thead>
            <tr>
                <th class="th-sortable" data-col="0" data-sort-type="string">Review ID<span class="sort-indicator"></span></th>
                <th class="th-sortable" data-col="1" data-sort-type="string">Project<span class="sort-indicator"></span></th>
                <th class="th-sortable" data-col="2" data-sort-type="string">Result<span class="sort-indicator"></span></th>
                <th class="th-sortable" data-col="3" data-sort-type="string">Mode<span class="sort-indicator"></span></th>
                <th class="th-sortable" data-col="4" data-sort-type="string">Date<span class="sort-indicator"></span></th>
                <th class="num th-sortable" data-col="5" data-sort-type="numeric">Points<span class="sort-indicator"></span></th>
                <th class="num th-sortable" data-col="6" data-sort-type="numeric">Groups<span class="sort-indicator"></span></th>
                <th class="num th-sortable" data-col="7" data-sort-type="numeric">Escalated<span class="sort-indicator"></span></th>
                <th class="num th-sortable" data-col="8" data-sort-type="numeric">Cost<span class="sort-indicator"></span></th>
            </tr>
        </thead>
        <tbody>
            {% for r in reviews %}
            <tr class="clickable-row" data-href="/review/{{ r.review_id }}">
                <td class="mono" data-sort-val="{{ r.review_id }}">{{ r.review_id[:20] }}</td>
                <td data-sort-val="{{ r.get('project', '—')|lower }}">{{ r.get('project', '—') }}</td>
                <td data-sort-val="{{ r.get('result', 'success') }}">
                    {% set res = r.get('result', 'success') %}
                    {% if res == 'success' %}<span class="badge badge-low">Success</span>
                    {% elif res == 'complete' %}<span class="badge badge-low">Success</span>
                    {% elif res == 'completed' %}<span class="badge badge-warning">Completed</span>
                    {% elif res == 'dry_run' %}<span class="badge badge-info">Dry Run</span>
                    {% elif res == 'cost_exceeded' %}<span class="badge badge-high">Cost Exceeded</span>
                    {% elif res == 'cost_aborted' %}<span class="badge badge-high">Cost Aborted</span>
                    {% elif res == 'failed' %}<span class="badge badge-critical">Failed</span>
                    {% else %}<span class="badge">{{ res }}</span>
                    {% endif %}
                </td>
                <td data-sort-val="{{ r.mode|lower }}">{{ r.mode }}</td>
                <td class="mono" data-sort-val="{{ r.timestamp|string }}">{{ r.timestamp|human_date }}</td>
                <td class="num" data-sort-val="{{ r.total_points }}">{{ r.total_points }}</td>
                <td class="num" data-sort-val="{{ r.get('total_groups', 0) }}">{{ r.get('total_groups', '—') }}</td>
                <td class="num" data-sort-val="{{ r.get('escalated', 0) }}">{{ r.get('escalated', '—') }}</td>
                <td class="num" data-sort-val="{{ r.total_cost }}">${{ "%.4f"|format(r.total_cost) }}</td>
            </tr>
            {% endfor %}
            {% if not reviews %}
            <tr><td colspan="9" class="empty-state">No reviews found.</td></tr>
            {% endif %}
        </tbody>
    </table>

    {% if total_pages > 1 %}
    <div class="pagination">
        {% if page > 1 %}
        <a href="/?page={{ page - 1 }}{% if show_test %}&show_test=true{% endif %}" class="btn btn-sm">&laquo; Prev</a>
        {% endif %}
        <span class="dim">Page {{ page }} of {{ total_pages }}</span>
        {% if page < total_pages %}
        <a href="/?page={{ page + 1 }}{% if show_test %}&show_test=true{% endif %}" class="btn btn-sm">Next &raquo;</a>
        {% endif %}
    </div>
    {% endif %}
</div>

{# ── Validation Modal ─────────────────────────────────────────────── #}
<div id="validation-modal" class="modal-overlay">
    <div class="modal-panel modal-panel-sm">
        <div class="modal-header">
            <h3>Review Readiness</h3>
            <button class="modal-close-btn" onclick="dvad.closeValidationPopover()">&times;</button>
        </div>
        <div id="validation-messages" class="validation-messages"></div>
        <div class="modal-actions">
            <button class="btn" onclick="dvad.closeValidationPopover()">Cancel</button>
            <a href="/config" class="btn btn-accent" id="validation-config-btn" style="display:none">Go to Config</a>
            <button class="btn btn-accent" id="validation-confirm-btn" style="display:none">Proceed Anyway</button>
        </div>
    </div>
</div>

{# ── File Picker Modal ────────────────────────────────────────────── #}
<div id="file-picker-modal" class="modal-overlay">
    <div class="modal-panel">
        <div class="modal-header">
            <h3 id="picker-title">Select Files</h3>
            <button class="modal-close-btn" onclick="dvad.closeFilePicker()">&times;</button>
        </div>
        <div class="modal-breadcrumb" id="picker-breadcrumb"></div>
        <div class="modal-file-list" id="picker-file-list">
            <p class="dim">Loading…</p>
        </div>
        <div class="modal-selected" id="picker-selected"></div>
        <div class="modal-actions">
            <button class="btn" onclick="dvad.closeFilePicker()">Cancel</button>
            <button class="btn btn-accent" id="picker-confirm-btn" onclick="dvad.confirmFilePicker()">Select</button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    var dvadBinary = {{ dvad_binary|tojson }};
</script>
{% endblock %}