{% extends "base.html" %}

{% block title %}Workflow Configuration - PairCoder Setup{% endblock %}

{% block content %}
<section class="workflow-page">
    <div class="page-header">
        <h2>Workflow Configuration</h2>
        <p class="page-description">Select a workflow preset or provide a custom workflow YAML file.</p>
    </div>

    <form id="workflow-form" class="wizard-form">
        <div class="form-group">
            <label>Workflow Preset</label>
            <div class="mode-options">
                {% for preset in presets %}
                <label class="mode-option">
                    <input type="radio" name="preset" value="{{ preset }}"
                           {% if selected_preset == preset %}checked{% endif %}>
                    <div class="mode-card">
                        <h4>{{ preset }}</h4>
                    </div>
                </label>
                {% endfor %}
                <label class="mode-option">
                    <input type="radio" name="preset" value="custom"
                           {% if selected_preset == 'custom' %}checked{% endif %}
                           onclick="toggleCustomPath(true)">
                    <div class="mode-card">
                        <h4>Custom</h4>
                        <p>Provide a custom workflow YAML file path.</p>
                    </div>
                </label>
            </div>
        </div>

        <div id="custom-path-group" class="form-group" style="display:none;">
            <label for="custom-path">Custom Workflow Path</label>
            <input type="text" id="custom-path" name="custom_path" class="form-input"
                   placeholder="/path/to/workflow.yaml">
            <p class="help-text">Path to a YAML file (.yaml or .yml) containing your workflow configuration.</p>
        </div>

        <div class="form-actions navigation-buttons">
            <button type="button" class="btn btn-secondary" onclick="navigateBack()">Back</button>
            <div class="nav-right">
                <button type="button" class="btn btn-ghost" onclick="skipWorkflow()">Skip</button>
                <button type="submit" class="btn btn-primary">Next</button>
            </div>
        </div>
    </form>
</section>

<script>
function toggleCustomPath(show) {
    document.getElementById('custom-path-group').style.display = show ? '' : 'none';
}

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

function skipWorkflow() {
    window.location.href = '/wizard/budget';
}

document.getElementById('workflow-form').addEventListener('submit', function(e) {
    e.preventDefault();
    var selected = document.querySelector('input[name="preset"]:checked');
    if (!selected) { alert('Please select a workflow preset.'); return; }

    var payload = { preset: selected.value };
    if (selected.value === 'custom') {
        payload.custom_path = document.getElementById('custom-path').value;
    }

    fetch('/api/workflow', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(payload)
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.success) {
            window.location.href = data.next_url || '/wizard/budget';
        } else {
            alert('Error: ' + (data.error || 'Failed to save workflow settings'));
        }
    })
    .catch(function() {
        alert('Failed to save settings. Please try again.');
    });
});

function navigateBack() {
    window.location.href = '/wizard/github';
}
</script>
{% endblock %}