{% extends "base.html" %}

{% block content %}
<section class="hero">
    <div>
        <p class="eyebrow">Capabilities &middot;
            {% if cap.is_user %}<span class="cap-badge cap-badge-user">user</span>
            {% else %}<span class="cap-badge cap-badge-builtin">built-in</span>{% endif %}
        </p>
        <h1>{{ cap.name }}</h1>
        {% if cap.description %}<p class="subtitle">{{ cap.description }}</p>{% endif %}
    </div>
    <div style="display:flex;gap:10px;align-items:center">
        <a href="{{ url_for('capabilities_list') }}" class="btn-ghost">Back</a>
        {% if cap.is_user %}
        <button class="btn-danger" id="delete-cap-btn">Delete</button>
        {% endif %}
    </div>
</section>

{% if cap.is_user %}
<!-- Edit form for user capabilities -->
<section class="panel">
    <div class="panel-header"><h2>Edit Capability</h2></div>
    <form id="cap-form">
        <p id="form-error" class="form-error" hidden></p>

        <div class="form-grid-2">
            <div class="form-field">
                <label>Name</label>
                <input type="text" value="{{ cap.name }}" disabled style="opacity:0.5;cursor:not-allowed">
                <small class="field-hint">Name cannot be changed after creation</small>
            </div>
            <div class="form-field">
                <label>Risk Level</label>
                <select name="risk_level" class="form-select">
                    {% for r in risk_levels %}
                    <option value="{{ r }}" {% if r == cap.risk_level %}selected{% endif %}>{{ r }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>

        <div class="form-field">
            <label>Description</label>
            <input type="text" name="description" value="{{ cap.description }}">
        </div>

        <div class="form-grid-2">
            <div class="form-field">
                <label>Max Iterations</label>
                <input type="number" name="max_iterations" value="{{ cap.max_iterations }}" min="1" max="100">
            </div>
            <div class="form-field">
                <label>Preferred Score Dimension</label>
                <input type="text" name="preferred_score" value="{{ cap.preferred_score }}" placeholder="e.g. coding, reasoning, writing">
                <small class="field-hint">Highest-scoring model for this dimension is selected automatically.</small>
            </div>
        </div>

        <div class="form-field">
            <label>System Prompt</label>
            <textarea name="system_prompt" rows="12">{{ cap.system_prompt }}</textarea>
        </div>

        <div class="form-field">
            <label>Tools</label>
            <div class="checkbox-grid">
                {% for tool in available_tools %}
                <label class="checkbox-item">
                    <input type="checkbox" name="tools" value="{{ tool }}" {% if tool in cap.tools %}checked{% endif %}>
                    <span>{{ tool }}</span>
                </label>
                {% endfor %}
            </div>
        </div>

        {% if available_mcp_servers %}
        <div class="form-field">
            <label>MCP Servers</label>
            <div class="checkbox-grid">
                {% for srv in available_mcp_servers %}
                <label class="checkbox-item">
                    <input type="checkbox" name="mcp_servers" value="{{ srv }}" {% if srv in cap.mcp_servers %}checked{% endif %}>
                    <span>{{ srv }}</span>
                </label>
                {% endfor %}
            </div>
        </div>
        {% else %}
        <div class="form-field">
            <label>MCP Servers</label>
            <div class="empty-state" style="padding:14px 18px">
                <p style="margin:0;font-size:0.88rem">No MCP servers configured in <code>config.yaml</code>.</p>
            </div>
        </div>
        {% endif %}

        <div class="form-field">
            <label>LLM Feature Requirements</label>
            <div class="checkbox-grid">
                {% for feat in llm_features %}
                <label class="checkbox-item">
                    <input type="checkbox" name="llm_features" value="{{ feat }}" {% if feat in cap.llm_features %}checked{% endif %}>
                    <span class="feat-label feat-{{ feat }}">{{ feat }}</span>
                </label>
                {% endfor %}
            </div>
        </div>

        <div style="display:flex;justify-content:flex-end;gap:12px;margin-top:8px">
            <button type="submit" class="btn-primary">Save Changes</button>
        </div>
    </form>
</section>

{% else %}
<!-- Read-only view for built-in capabilities -->
<section class="panel">
    <div class="panel-header"><h2>Details</h2></div>
    <dl class="detail-list">
        <div>
            <dt>Risk Level</dt>
            <dd><span class="cap-tag risk-{{ cap.risk_level }}">{{ cap.risk_level }}</span></dd>
        </div>
        <div>
            <dt>Max Iterations</dt>
            <dd>{{ cap.max_iterations }}</dd>
        </div>
        <div>
            <dt>Preferred Score</dt>
            <dd>{{ cap.preferred_score if cap.preferred_score else '—' }}</dd>
        </div>
        <div>
            <dt>Tools</dt>
            <dd>{% if cap.tools %}{% for t in cap.tools %}<span class="cap-tag" style="margin-right:6px">{{ t }}</span>{% endfor %}{% else %}—{% endif %}</dd>
        </div>
        <div>
            <dt>MCP Servers</dt>
            <dd>{% if cap.mcp_servers %}{% for m in cap.mcp_servers %}<span class="cap-tag cap-tag-mcp" style="margin-right:6px">{{ m }}</span>{% endfor %}{% else %}—{% endif %}</dd>
        </div>
        <div>
            <dt>LLM Features</dt>
            <dd>{% if cap.llm_features %}{% for f in cap.llm_features %}<span class="cap-tag cap-tag-feature" style="margin-right:6px">{{ f }}</span>{% endfor %}{% else %}—{% endif %}</dd>
        </div>
    </dl>
</section>

<section class="panel">
    <div class="panel-header"><h2>System Prompt</h2></div>
    <pre class="artifact-code-block" style="margin:0">{{ cap.system_prompt }}</pre>
</section>
{% endif %}

<script>
{% if cap.is_user %}
    document.getElementById('cap-form').addEventListener('submit', async (e) => {
        e.preventDefault();
        const errEl = document.getElementById('form-error');
        errEl.hidden = true;

        const fd = new FormData(e.target);
        const body = {
            description:    fd.get('description'),
            risk_level:     fd.get('risk_level'),
            system_prompt:  fd.get('system_prompt'),
            max_iterations:  parseInt(fd.get('max_iterations'), 10),
            preferred_score: fd.get('preferred_score') || '',
            tools:           fd.getAll('tools'),
            mcp_servers:     fd.getAll('mcp_servers'),
            llm_features:    fd.getAll('llm_features'),
        };

        const res = await fetch('/api/capabilities/{{ cap.name }}', {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(body),
        });

        if (res.ok) {
            window.location.reload();
        } else {
            const err = await res.json().catch(() => ({}));
            errEl.textContent = err.detail || 'Failed to save.';
            errEl.hidden = false;
        }
    });

    document.getElementById('delete-cap-btn').addEventListener('click', async () => {
        if (!confirm('Delete this capability? This cannot be undone.')) return;
        const res = await fetch('/api/capabilities/{{ cap.name }}', { method: 'DELETE' });
        if (res.ok) {
            window.location.href = '/capabilities';
        } else {
            alert('Failed to delete capability.');
        }
    });
{% endif %}
</script>
{% endblock %}