{% extends "base.html" %}

{% block title %}Architecture Settings - PairCoder Setup{% endblock %}

{% block content %}
<section class="architecture-page">
    <div class="page-header">
        <h2>Architecture Settings</h2>
        <p class="page-description">Set file/function size caps and how existing code is treated.</p>
    </div>

    {% if update_mode %}
    <div id="architecture-delta-panel" class="architecture-delta-panel hidden">
        <h3>Current vs. Proposed</h3>
        <ul id="architecture-delta-list" class="architecture-delta-list"></ul>
    </div>
    {% endif %}

    <form id="architecture-form" class="wizard-form">
        <div class="form-group">
            <label>Cap Preset</label>
            <div class="architecture-presets">
                <label class="architecture-preset">
                    <input type="radio" name="preset" value="default"
                           {% if project_preset == 'default' or not project_preset %}checked{% endif %}>
                    <div class="architecture-preset-card">
                        <h4>Default</h4>
                        <p>Balanced caps for most projects.</p>
                    </div>
                </label>
                <label class="architecture-preset">
                    <input type="radio" name="preset" value="strict"
                           {% if project_preset == 'strict' %}checked{% endif %}>
                    <div class="architecture-preset-card">
                        <h4>Strict</h4>
                        <p>Tighter caps for high-accountability teams.</p>
                    </div>
                </label>
                <label class="architecture-preset">
                    <input type="radio" name="preset" value="relaxed"
                           {% if project_preset == 'relaxed' %}checked{% endif %}>
                    <div class="architecture-preset-card">
                        <h4>Relaxed</h4>
                        <p>Looser caps for rapid prototyping.</p>
                    </div>
                </label>
                <label class="architecture-preset">
                    <input type="radio" name="preset" value="pro-workflow"
                           {% if project_preset == 'pro-workflow' %}checked{% endif %}>
                    <div class="architecture-preset-card">
                        <h4>Pro Workflow</h4>
                        <p>Default caps, full workflow integration.</p>
                    </div>
                </label>
                <label class="architecture-preset">
                    <input type="radio" name="preset" value="enterprise"
                           {% if project_preset == 'enterprise' %}checked{% endif %}>
                    <div class="architecture-preset-card">
                        <h4>Enterprise</h4>
                        <p>Strict caps with enterprise containment.</p>
                    </div>
                </label>
            </div>
        </div>

        <div class="section-divider"></div>

        <div class="form-group">
            <label>Existing-Code Scan</label>
            <p class="field-description">A read-only scan against your chosen preset -- nothing is written yet.</p>
            <div id="scan-results-panel" class="scan-results-panel">
                <p id="scan-status">Scanning...</p>
                <ul id="scan-breakdown" class="scan-breakdown hidden"></ul>
            </div>
        </div>

        <div class="section-divider"></div>

        <div id="legacy-debt-section" class="form-group hidden">
            <label>Pre-Existing Violations Found</label>
            <div class="legacy-debt-choice">
                <label class="legacy-debt-option">
                    <input type="radio" name="accept_legacy_debt" value="true" checked>
                    <div class="legacy-debt-card">
                        <h4>Grandfather existing code (recommended)</h4>
                        <p>Enforce the strict bar on everything new; existing code keeps a wider cap.</p>
                    </div>
                </label>
                <label class="legacy-debt-option">
                    <input type="radio" name="accept_legacy_debt" value="false">
                    <div class="legacy-debt-card">
                        <h4>Decline -- apply the preset uniformly</h4>
                        <p class="opt-out-copy">Pre-existing violations will fire on your next <code>arch check</code>. This is an explicit opt-out, not a silent trap.</p>
                    </div>
                </label>
            </div>

            <div id="hold-the-line-group" class="hold-the-line-group">
                <label for="hold-the-line-input">Hold the line: directories to keep on the strict bar</label>
                <p class="field-description">Multi-select which actively-developed directories should NOT be grandfathered.</p>
                <div class="hold-the-line-dirs" id="hold-the-line-dirs"></div>
                <div class="add-path-row">
                    <input type="text" id="hold-the-line-input" placeholder="Add a directory (e.g. src)..."
                           class="path-input">
                    <button type="button" id="add-hold-the-line-btn" class="btn btn-small">+ Add</button>
                </div>
            </div>
        </div>

        <div class="section-divider"></div>

        <div class="form-group">
            <label>Gate Modes</label>
            <p class="field-description">Observe / warn / enforce, per gate. Defaults to enforce for everyone who clicks through.</p>
            <div class="gate-modes-list">
                {% set current_gate_modes = architecture_data.get("gate_modes", {}) if architecture_data else {} %}
                {% for gate in ["arch_gate", "qc_gate", "contract_gate", "budget_gate", "containment_gate"] %}
                {% set current_mode = current_gate_modes.get(gate, "enforce") %}
                <div class="gate-mode-item">
                    <label for="gate-mode-{{ gate }}">{{ gate }}</label>
                    <select id="gate-mode-{{ gate }}" name="{{ gate }}" class="gate-mode-select">
                        <option value="observe" {% if current_mode == "observe" %}selected{% endif %}>observe</option>
                        <option value="warn" {% if current_mode == "warn" %}selected{% endif %}>warn</option>
                        <option value="enforce" {% if current_mode == "enforce" %}selected{% endif %}>enforce</option>
                    </select>
                </div>
                {% endfor %}
            </div>
        </div>

        <div id="form-error" class="form-error-banner hidden" role="alert"></div>

        <div class="form-actions navigation-buttons">
            <button type="button" class="btn btn-secondary" onclick="navigateBack()">Back</button>
            <button type="submit" id="architecture-submit-btn" class="btn btn-primary">Next</button>
        </div>
    </form>
</section>

<script id="architecture-seed" type="application/json">{{ architecture_data | tojson }}</script>
<script>
const UPDATE_MODE = {{ 'true' if update_mode else 'false' }};
const ARCHITECTURE_SEED = JSON.parse(document.getElementById('architecture-seed').textContent || '{}');
const STRICT_NEW_CODE_PROFILE = 'strict-new-code';

const CATEGORY_LABELS = {
    'file-length': 'file length',
    'function-length': 'function length',
    'handler-length': 'handler length',
    'import-count': 'import count',
    'function-count': 'function count',
    'provenance': 'provenance'
};

function getSelectedPreset() {
    const checked = document.querySelector('input[name="preset"]:checked');
    return checked ? checked.value : 'default';
}

function runScan() {
    const statusEl = document.getElementById('scan-status');
    const breakdownEl = document.getElementById('scan-breakdown');
    const legacyDebtSection = document.getElementById('legacy-debt-section');
    statusEl.textContent = 'Scanning...';
    breakdownEl.classList.add('hidden');

    fetch('/api/architecture/scan', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({preset: getSelectedPreset()})
    })
    .then(function(response) { return response.json(); })
    .then(function(data) {
        if (!data.success) {
            statusEl.textContent = 'Scan failed.';
            return;
        }
        if (data.empty || data.total === 0) {
            statusEl.textContent = '0 pre-existing violations.';
            legacyDebtSection.classList.add('hidden');
            return;
        }
        statusEl.textContent = data.total + ' pre-existing violation(s):';
        breakdownEl.innerHTML = '';
        Object.keys(data.by_category).forEach(function(category) {
            const count = data.by_category[category];
            if (count > 0) {
                const li = document.createElement('li');
                li.textContent = count + ' ' + (CATEGORY_LABELS[category] || category);
                breakdownEl.appendChild(li);
            }
        });
        breakdownEl.classList.remove('hidden');
        legacyDebtSection.classList.remove('hidden');
    })
    .catch(function() {
        statusEl.textContent = 'Scan failed. Network error.';
    });
}

document.querySelectorAll('input[name="preset"]').forEach(function(radio) {
    radio.addEventListener('change', runScan);
});

runScan();

// Hold-the-line directory management
function getHoldTheLineDirs() {
    const items = document.querySelectorAll('#hold-the-line-dirs .path-item code');
    return Array.from(items).map(function(el) { return el.textContent; });
}

document.getElementById('add-hold-the-line-btn').addEventListener('click', function() {
    const input = document.getElementById('hold-the-line-input');
    const value = input.value.trim();
    if (!value) return;

    const container = document.getElementById('hold-the-line-dirs');
    const item = document.createElement('div');
    item.className = 'path-item';
    item.innerHTML = '<code>' + value.replace(/</g, '&lt;') + '</code>' +
        '<button type="button" class="path-remove" aria-label="Remove directory">&times;</button>';
    container.appendChild(item);
    input.value = '';

    item.querySelector('.path-remove').addEventListener('click', function() {
        item.remove();
    });
});

function getGateModes() {
    const gates = ['arch_gate', 'qc_gate', 'contract_gate', 'budget_gate', 'containment_gate'];
    const modes = {};
    gates.forEach(function(gate) {
        modes[gate] = document.getElementById('gate-mode-' + gate).value;
    });
    return modes;
}

document.getElementById('architecture-form').addEventListener('submit', function(e) {
    e.preventDefault();

    var submitBtn = document.getElementById('architecture-submit-btn');
    setButtonLoading(submitBtn, 'Saving...');
    clearFormErrors('architecture-form');

    const acceptRadio = document.querySelector('input[name="accept_legacy_debt"]:checked');

    const formData = {
        preset: getSelectedPreset(),
        accept_legacy_debt: acceptRadio ? acceptRadio.value === 'true' : true,
        hold_the_line_dirs: getHoldTheLineDirs(),
        gate_modes: getGateModes()
    };

    fetch('/api/architecture', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(formData)
    })
    .then(function(response) { return response.json(); })
    .then(function(data) {
        if (data.success) {
            window.location.href = data.next_url || '/wizard/trello';
        } else {
            showFormError(data.error || 'Failed to save architecture settings.');
            clearButtonLoading(submitBtn);
        }
    })
    .catch(function(err) {
        console.error('Form submission error:', err);
        showFormError('Network error. Please check your connection and try again.');
        clearButtonLoading(submitBtn);
    });
});

function navigateBack() {
    window.location.href = '/wizard/enforcement';
}

// PF.8c -- update-mode pre-populate + current-vs-proposed delta
function addHoldTheLineDir(value) {
    const container = document.getElementById('hold-the-line-dirs');
    const item = document.createElement('div');
    item.className = 'path-item';
    item.innerHTML = '<code>' + value.replace(/</g, '&lt;') + '</code>' +
        '<button type="button" class="path-remove" aria-label="Remove directory">&times;</button>';
    container.appendChild(item);
    item.querySelector('.path-remove').addEventListener('click', function() {
        item.remove();
    });
}

function prefillHoldTheLineDirs() {
    const assignments = ARCHITECTURE_SEED.profile_assignments || [];
    assignments
        .filter(function(a) { return a.profile === STRICT_NEW_CODE_PROFILE; })
        .forEach(function(a) { addHoldTheLineDir(a.glob); });
    if (assignments.some(function(a) { return a.profile === STRICT_NEW_CODE_PROFILE; })) {
        document.getElementById('legacy-debt-section').classList.remove('hidden');
    }
}

function renderArchitectureDelta(delta) {
    const panel = document.getElementById('architecture-delta-panel');
    const list = document.getElementById('architecture-delta-list');
    if (!panel || !list) return;

    const changedKeys = Object.keys(delta).filter(function(key) { return delta[key].changed; });
    if (changedKeys.length === 0) return;

    list.innerHTML = '';
    changedKeys.forEach(function(key) {
        const entry = delta[key];
        const li = document.createElement('li');
        li.textContent = key + ': ' + JSON.stringify(entry.current) + ' -> ' + JSON.stringify(entry.proposed);
        list.appendChild(li);
    });
    panel.classList.remove('hidden');
}

function loadArchitectureDelta() {
    fetch('/api/architecture/delta')
        .then(function(response) { return response.json(); })
        .then(function(data) {
            if (data.success) {
                renderArchitectureDelta(data.delta);
            }
        })
        .catch(function() { /* delta is advisory-only; ignore failures */ });
}

if (UPDATE_MODE) {
    prefillHoldTheLineDirs();
    loadArchitectureDelta();
}
</script>
{% endblock %}