{% extends "base.html" %}
{% block title %}ClawHub Skills — ICDEV™ Dashboard{% endblock %}
{% block content %}

<h1>ClawHub Skill Browser</h1>

{% if not enabled %}
<div class="intro-panel" style="border-left: 4px solid var(--warning-color, #f0ad4e);">
    <h2>OpenClaw Bridge Disabled</h2>
    <p>Set <code>ICDEV_OPENCLAW_ENABLED=true</code> environment variable to enable skill import from ClawHub.</p>
</div>
{% endif %}

<!-- Stat cards -->
<div class="stat-grid">
    <div class="stat-card">
        <div class="label">Imported Skills</div>
        <div class="value blue">{{ imports|length }}</div>
    </div>
    <div class="stat-card">
        <div class="label">Pending Review</div>
        <div class="value orange">{{ imports|length }}</div>
    </div>
    <div class="stat-card">
        <div class="label">Promoted</div>
        <div class="value green">0</div>
    </div>
    <div class="stat-card">
        <div class="label">Bridge Status</div>
        <div class="value {% if enabled %}green{% else %}red{% endif %}">{% if enabled %}ENABLED{% else %}DISABLED{% endif %}</div>
    </div>
</div>

<!-- Search Section -->
<div class="card" style="margin-top: 20px;">
    <div class="card-header"><h2>Discover Skills on ClawHub</h2></div>
    <div style="padding: 16px;">
        <div style="display: flex; gap: 10px; margin-bottom: 16px;">
            <input type="text" id="search-query" placeholder="Search skills (e.g., code review, testing, deployment)..."
                   style="flex: 1; padding: 10px 14px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-primary); color: var(--text-primary); font-size: 14px;">
            <button id="btn-search" class="btn btn-primary" onclick="searchClawHub()" {% if not enabled %}disabled{% endif %}>
                Search ClawHub
            </button>
        </div>
        <div id="search-status" style="color: var(--text-muted); font-size: 13px;"></div>
        <div id="search-results" style="margin-top: 12px;"></div>
    </div>
</div>

<!-- Skill Detail Modal -->
<div id="skill-modal" style="display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.7); z-index:1002; overflow-y:auto;">
    <div style="max-width: 700px; margin: 40px auto; background: var(--bg-secondary, #1e1e2e); border-radius: 12px; padding: 24px; position: relative;">
        <button onclick="closeModal()" style="position:absolute; top:12px; right:16px; background:none; border:none; color:var(--text-muted); font-size:20px; cursor:pointer;">&times;</button>
        <div id="skill-detail-content">Loading...</div>
    </div>
</div>

<!-- Import Progress Modal -->
<div id="import-modal" style="display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.7); z-index:1001; overflow-y:auto;">
    <div style="max-width: 560px; margin: 80px auto; background: var(--bg-secondary, #1e1e2e); border-radius: 12px; padding: 28px; position: relative;">
        <h2 id="import-title" style="margin:0 0 6px 0; font-size:18px;">Importing Skill</h2>
        <p id="import-slug" style="color:var(--text-muted); margin:0 0 20px 0; font-size:13px;"></p>

        <div id="import-stages" style="margin-bottom: 20px;"></div>

        <div id="import-result" style="display:none; margin-top:16px; padding:14px; border-radius:8px;"></div>

        <div id="import-actions" style="display:none; margin-top:16px; text-align:right;">
            <button class="btn btn-secondary" onclick="closeImportModal()">Close</button>
        </div>
    </div>
</div>

<style>
.import-stage {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.import-stage:last-child { border-bottom: none; }
.stage-icon {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; flex-shrink: 0;
}
.stage-pending .stage-icon { background: rgba(255,255,255,0.08); color: var(--text-dim, #555); }
.stage-active .stage-icon { background: #2563eb; color: #fff; animation: stage-pulse 1.2s ease-in-out infinite; }
.stage-done .stage-icon { background: #16a34a; color: #fff; }
.stage-fail .stage-icon { background: #dc2626; color: #fff; }
.stage-label { flex: 1; }
.stage-label .stage-name { font-size: 13px; font-weight: 500; }
.stage-label .stage-detail { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.stage-pending .stage-name { color: var(--text-dim, #555); }
.stage-active .stage-name { color: var(--text-primary); }
.stage-done .stage-name { color: #4ade80; }
.stage-fail .stage-name { color: #f87171; }
@keyframes stage-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
/* Rich tooltip for import status badges */
.oc-tooltip {
    position: relative;
    cursor: help;
}
.oc-tooltip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a2e;
    color: #e2e8f0;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    max-width: 320px;
    width: max-content;
    word-break: break-word;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.oc-tooltip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(255,255,255,0.15);
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.oc-tooltip:hover::after,
.oc-tooltip:hover::before {
    opacity: 1;
}
</style>

<!-- Import Queue -->
<div class="card" style="margin-top: 20px;">
    <div class="card-header"><h2>Import Queue</h2></div>
    <div style="padding: 0;">
        {% if imports %}
        <table class="data-table" style="width: 100%;">
            <thead>
                <tr>
                    <th>Skill</th>
                    <th>Author</th>
                    <th>Scan</th>
                    <th>Status</th>
                    <th>Trust</th>
                    <th>Imported</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for imp in imports %}
                <tr>
                    <td><strong>{{ imp[1] if imp[1] else imp[0] }}</strong></td>
                    <td>{{ imp[2] or 'unknown' }}</td>
                    <td>
                        {% if imp[3] == 'passed' %}
                            <span class="badge badge-green">PASSED</span>
                        {% elif imp[3] == 'failed' %}
                            {% set failed_gates = imp[11] if imp|length > 11 else [] %}
                            {% if failed_gates %}
                                <span class="badge badge-red oc-tooltip" data-tip="Failed gates: {{ failed_gates|join(', ') }}">FAILED</span>
                            {% else %}
                                <span class="badge badge-red">FAILED</span>
                            {% endif %}
                        {% else %}
                            <span class="badge badge-yellow">{{ imp[3]|upper }}</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if imp[4] == 'promoted' %}
                            <span class="badge badge-green">PROMOTED</span>
                        {% elif imp[4] == 'rejected' %}
                            {% set rej_by = imp[9] if imp|length > 9 else '' %}
                            {% set rej_reason = imp[10] if imp|length > 10 else '' %}
                            {% set failed_gates = imp[11] if imp|length > 11 else [] %}
                            {% set tip_parts = [] %}
                            {% if rej_by %}{% set _ = tip_parts.append('By: ' ~ rej_by) %}{% endif %}
                            {% if rej_reason %}{% set _ = tip_parts.append('Reason: ' ~ rej_reason) %}{% endif %}
                            {% if failed_gates %}{% set _ = tip_parts.append('Failed gates: ' ~ failed_gates|join(', ')) %}{% endif %}
                            {% if tip_parts %}
                                <span class="badge badge-red oc-tooltip" data-tip="{{ tip_parts|join(' | ') }}">REJECTED</span>
                            {% else %}
                                <span class="badge badge-red">REJECTED</span>
                            {% endif %}
                        {% elif imp[4] == 'review_pending' %}
                            <span class="badge badge-yellow oc-tooltip" data-tip="Scan passed but manual review required before promotion">REVIEW</span>
                        {% elif imp[4] == 'quarantined' %}
                            {% set failed_gates = imp[11] if imp|length > 11 else [] %}
                            {% if failed_gates %}
                                <span class="badge oc-tooltip" data-tip="Quarantined — failed gates: {{ failed_gates|join(', ') }}">QUARANTINED</span>
                            {% else %}
                                <span class="badge">QUARANTINED</span>
                            {% endif %}
                        {% else %}
                            <span class="badge">{{ imp[4]|upper }}</span>
                        {% endif %}
                    </td>
                    <td>
                        {% set trust = imp[5] if imp[5] else 0.30 %}
                        {% if trust >= 0.70 %}
                            <span class="badge badge-green" title="Normal — full autonomous operation">{{ '%.2f'|format(trust) }}</span>
                        {% elif trust >= 0.50 %}
                            <span class="badge badge-yellow" title="Degraded — requires confirmation">{{ '%.2f'|format(trust) }}</span>
                        {% elif trust >= 0.30 %}
                            <span class="badge" style="background:rgba(249,115,22,0.2);color:#fb923c;" title="Untrusted — autonomous actions blocked">{{ '%.2f'|format(trust) }}</span>
                        {% else %}
                            <span class="badge badge-red" title="Blocked — all actions blocked">{{ '%.2f'|format(trust) }}</span>
                        {% endif %}
                    </td>
                    <td style="font-size: 12px; color: var(--text-muted);">{{ (imp[8]|string)[:10] if imp[8] else '' }}</td>
                    <td style="white-space: nowrap;">
                        {% if imp[4] in ('quarantined', 'review_pending') and imp[3] == 'passed' %}
                            <button class="btn btn-sm btn-primary" onclick="promoteImport('{{ imp[0] }}')">Promote</button>
                            <button class="btn btn-sm btn-danger" onclick="rejectImport('{{ imp[0] }}')">Reject</button>
                        {% elif imp[4] == 'promoted' %}
                            <button class="btn btn-sm" style="border:1px solid #4ade80; color:#4ade80;" onclick="installToProject('{{ imp[0] }}', '{{ imp[1] }}')">Install</button>
                            <button class="btn btn-sm" style="border:1px solid var(--border-color);" onclick="boostTrust('{{ imp[0] }}', '{{ imp[1] }}', {{ trust }})">Trust</button>
                            <button class="btn btn-sm" style="border:1px solid #60a5fa; color:#60a5fa;" onclick="checkUpdate('{{ imp[0] }}', '{{ imp[1] }}')">Update?</button>
                            <button class="btn btn-sm" style="border:1px solid #facc15; color:#facc15;" onclick="rateSkill('{{ imp[0] }}', '{{ imp[1] }}')">Rate</button>
                            <button class="btn btn-sm btn-danger" onclick="revokeImport('{{ imp[0] }}', '{{ imp[1] }}')">Unpromote</button>
                        {% elif imp[4] == 'quarantined' and imp[3] == 'failed' %}
                            <button class="btn btn-sm btn-danger" onclick="rejectImport('{{ imp[0] }}')">Reject</button>
                        {% else %}
                            <span style="color: var(--text-dim); font-size: 12px;">—</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div style="padding: 24px; text-align: center; color: var(--text-muted);">
            No imports yet. Search ClawHub above to discover and import skills.
        </div>
        {% endif %}
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
(function() {
    var searchInput = document.getElementById('search-query');
    if (searchInput) {
        searchInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') searchClawHub();
        });
    }

    window.searchClawHub = function() {
        var query = document.getElementById('search-query').value.trim();
        if (!query) return;

        var statusEl = document.getElementById('search-status');
        var resultsEl = document.getElementById('search-results');
        statusEl.textContent = 'Searching ClawHub...';
        resultsEl.innerHTML = '';

        fetch('/api/clawhub/search?q=' + encodeURIComponent(query) + '&limit=10')
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (data.error) {
                    statusEl.innerHTML = '<span style="color:#f88;">Error: ' + data.error + '</span>';
                    return;
                }
                var results = data.results || [];
                var statusHtml = results.length + ' skill(s) found';
                if (results.length > 1) {
                    statusHtml += ' <button class="btn btn-sm btn-primary" onclick="bulkImportResults()" style="margin-left:8px;">Import All ' + results.length + '</button>';
                }
                statusEl.innerHTML = statusHtml;

                // Store slugs for bulk import
                window._lastSearchSlugs = results.map(function(s) { return s.slug || s.displayName || ''; }).filter(Boolean);

                if (results.length === 0) {
                    resultsEl.innerHTML = '<div style="padding:12px; color:var(--text-muted);">No skills found for "' + query + '"</div>';
                    return;
                }

                var html = '';
                for (var i = 0; i < results.length; i++) {
                    var s = results[i];
                    var slug = s.slug || s.displayName || '';
                    var name = s.displayName || slug;
                    var summary = s.summary || '';
                    var score = s.score ? s.score.toFixed(2) : '';

                    html += '<div style="display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border-color);">';
                    html += '<div style="flex:1;">';
                    html += '<strong style="cursor:pointer; color:var(--link-color, #58a6ff);" onclick="viewSkill(\'' + slug + '\')">' + name + '</strong>';
                    if (score) html += ' <span style="font-size:11px; color:var(--text-dim);">score: ' + score + '</span>';
                    html += '<div style="font-size:13px; color:var(--text-muted); margin-top:4px;">' + summary.substring(0, 200) + '</div>';
                    html += '</div>';
                    html += '<div style="margin-left:12px; flex-shrink:0;">';
                    html += '<button class="btn btn-sm btn-primary" onclick="importSkill(\'' + slug + '\')">Import</button> ';
                    html += '<button class="btn btn-sm btn-secondary" onclick="viewSkill(\'' + slug + '\')">Details</button>';
                    html += '</div></div>';
                }
                resultsEl.innerHTML = html;
            })
            .catch(function(err) {
                statusEl.innerHTML = '<span style="color:#f88;">Network error: ' + err + '</span>';
            });
    };

    window.viewSkill = function(slug) {
        var modal = document.getElementById('skill-modal');
        var content = document.getElementById('skill-detail-content');
        modal.style.display = 'block';
        content.innerHTML = '<div style="text-align:center; padding:20px;">Loading skill details...</div>';

        fetch('/api/clawhub/skill/' + encodeURIComponent(slug))
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (data.error) {
                    content.innerHTML = '<p style="color:#f88;">Error: ' + data.error + '</p>';
                    return;
                }
                var skill = data.skill || {};
                var ver = data.latestVersion || {};
                var owner = data.owner || {};
                var stats = skill.stats || {};

                var html = '<h2>' + (skill.displayName || slug) + '</h2>';
                html += '<p style="color:var(--text-muted);">' + (skill.summary || '') + '</p>';

                html += '<div class="stat-grid" style="margin:16px 0;">';
                html += '<div class="stat-card"><div class="label">Downloads</div><div class="value blue">' + (stats.downloads || 0).toLocaleString() + '</div></div>';
                html += '<div class="stat-card"><div class="label">Stars</div><div class="value orange">' + (stats.stars || 0).toLocaleString() + '</div></div>';
                html += '<div class="stat-card"><div class="label">Installs</div><div class="value green">' + (stats.installsAllTime || 0).toLocaleString() + '</div></div>';
                html += '<div class="stat-card"><div class="label">Version</div><div class="value">' + (ver.version || 'N/A') + '</div></div>';
                html += '</div>';

                html += '<table style="width:100%; font-size:13px; margin:12px 0;">';
                html += '<tr><td style="padding:4px 8px; color:var(--text-muted);">Author</td><td>' + (owner.handle || 'unknown') + '</td></tr>';
                html += '<tr><td style="padding:4px 8px; color:var(--text-muted);">License</td><td>' + (ver.license || '<span style="color:#f88;">Not declared</span>') + '</td></tr>';
                html += '<tr><td style="padding:4px 8px; color:var(--text-muted);">Versions</td><td>' + (stats.versions || 1) + '</td></tr>';
                if (ver.changelog) html += '<tr><td style="padding:4px 8px; color:var(--text-muted);">Changelog</td><td>' + ver.changelog + '</td></tr>';
                html += '</table>';

                html += '<div style="margin-top:16px; display:flex; gap:10px;">';
                html += '<button class="btn btn-primary" onclick="importSkill(\'' + slug + '\')">Import to ICDEV™</button>';
                html += '<a href="https://clawhub.ai/' + (owner.handle || '') + '/' + slug + '" target="_blank" class="btn btn-secondary">View on ClawHub</a>';
                html += '<button class="btn btn-secondary" onclick="closeModal()">Close</button>';
                html += '</div>';

                content.innerHTML = html;
            })
            .catch(function(err) {
                content.innerHTML = '<p style="color:#f88;">Error: ' + err + '</p>';
            });
    };

    window.closeModal = function() {
        document.getElementById('skill-modal').style.display = 'none';
    };

    var IMPORT_STAGES = [
        {id: 'download',   name: 'Download from ClawHub',     icon: '1'},
        {id: 'compat',     name: 'Compatibility Check',       icon: '2'},
        {id: 'translate',  name: 'Translate to ICDEV™ Format', icon: '3'},
        {id: 'quarantine', name: 'Copy to Quarantine',        icon: '4'},
        {id: 'scan_pi',    name: 'Prompt Injection Scan',     icon: '5'},
        {id: 'scan_code',  name: 'Code Pattern Analysis',     icon: '6'},
        {id: 'scan_safety',name: 'Script Safety (AST)',       icon: '7'},
        {id: 'scan_intent',name: 'Content Intent Scan',      icon: '8'},
        {id: 'validate',   name: 'Functional Validation',     icon: '9'},
        {id: 'enrich_disc',name: 'Discover Similar Skills',   icon: '10'},
        {id: 'enrich_inn', name: 'Innovation Engine',         icon: '11'},
        {id: 'enrich_cre', name: 'Creative Engine',           icon: '12'},
        {id: 'enrich_res', name: 'Research Engine',           icon: '13'},
        {id: 'scriptgen',  name: 'Generate Companion Script', icon: '14'},
        {id: 'record',     name: 'Record & Classify',         icon: '15'},
    ];

    function renderStages(activeIdx, details) {
        var html = '';
        for (var i = 0; i < IMPORT_STAGES.length; i++) {
            var s = IMPORT_STAGES[i];
            var state = 'pending';
            var icon = s.icon;
            var detail = '';
            if (i < activeIdx) { state = 'done'; icon = '\u2713'; }
            else if (i === activeIdx) { state = 'active'; }
            if (details && details[s.id]) {
                detail = details[s.id];
                if (detail.startsWith('FAIL:')) { state = 'fail'; icon = '\u2717'; }
            }
            html += '<div class="import-stage stage-' + state + '">';
            html += '<div class="stage-icon">' + icon + '</div>';
            html += '<div class="stage-label"><div class="stage-name">' + s.name + '</div>';
            if (detail) html += '<div class="stage-detail">' + detail.replace('FAIL:','') + '</div>';
            html += '</div></div>';
        }
        document.getElementById('import-stages').innerHTML = html;
    }

    window.closeImportModal = function() {
        document.getElementById('import-modal').style.display = 'none';
    };

    window.importSkill = function(slug) {
        // Show progress modal
        var modal = document.getElementById('import-modal');
        var resultEl = document.getElementById('import-result');
        var actionsEl = document.getElementById('import-actions');
        document.getElementById('import-slug').textContent = slug + ' from ClawHub';
        document.getElementById('import-title').textContent = 'Importing Skill';
        resultEl.style.display = 'none';
        actionsEl.style.display = 'none';
        modal.style.display = 'block';
        closeModal(); // close detail modal if open

        var stageDetails = {};

        // Stage 1: Download
        renderStages(0, stageDetails);

        fetch('/api/clawhub/import', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({slug: slug, tenant_id: 'default', imported_by: 'dashboard-user'})
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.error) {
                // Determine which stage failed
                var failStage = 0;
                var errMsg = data.error || '';
                if (errMsg.indexOf('compat') >= 0 || data.blockers) { failStage = 1; }
                else if (errMsg.indexOf('translat') >= 0) { failStage = 2; }
                else if (errMsg.indexOf('scan') >= 0) { failStage = 4; }
                else if (errMsg.indexOf('Database') >= 0) { failStage = 8; }

                // Mark completed stages
                for (var i = 0; i < failStage; i++) {
                    stageDetails[IMPORT_STAGES[i].id] = 'Done';
                }
                stageDetails[IMPORT_STAGES[failStage].id] = 'FAIL:' + errMsg.substring(0, 120);
                renderStages(failStage, stageDetails);

                // Show error result
                resultEl.style.display = 'block';
                resultEl.style.background = 'rgba(220,38,38,0.15)';
                resultEl.style.border = '1px solid rgba(220,38,38,0.3)';
                var errHtml = '<strong style="color:#f87171;">Import Failed</strong>';
                errHtml += '<p style="margin:8px 0 0; font-size:13px; color:var(--text-muted);">' + errMsg + '</p>';
                if (data.blockers) {
                    errHtml += '<ul style="margin:8px 0 0; padding-left:20px; font-size:12px;">';
                    for (var b = 0; b < data.blockers.length; b++) {
                        errHtml += '<li style="color:#f87171;">' + data.blockers[b].code + ': ' + data.blockers[b].message + '</li>';
                    }
                    errHtml += '</ul>';
                }
                resultEl.innerHTML = errHtml;
                actionsEl.style.display = 'block';
                return;
            }

            // Success — animate through stages
            stageDetails['download'] = 'Downloaded from clawhub.ai';
            renderStages(1, stageDetails);

            setTimeout(function() {
                var compat = data.compatibility_score;
                stageDetails['compat'] = compat ? ('Score: ' + compat + '/100, ' + (data.adaptations_applied || 0) + ' adaptations') : 'Passed';
                renderStages(2, stageDetails);
            }, 300);

            setTimeout(function() {
                stageDetails['translate'] = data.translation_applied ? 'ICDEV™ SKILL.md generated' : 'Skipped (no translator)';
                renderStages(3, stageDetails);
            }, 600);

            setTimeout(function() {
                stageDetails['quarantine'] = 'SHA-256: ' + (data.sha256 || '').substring(0, 16) + '...';
                renderStages(4, stageDetails);
            }, 900);

            setTimeout(function() {
                var gs = data.gate_results_summary || {};
                stageDetails['scan_pi'] = (gs.prompt_injection_scan || 'pass').toUpperCase();
                renderStages(5, stageDetails);
            }, 1200);

            setTimeout(function() {
                var gs = data.gate_results_summary || {};
                stageDetails['scan_code'] = (gs.code_pattern_scan || 'pass').toUpperCase();
                renderStages(6, stageDetails);
            }, 1500);

            setTimeout(function() {
                var ss = data.script_safety;
                if (ss) {
                    stageDetails['scan_safety'] = ss.all_safe ? ('All ' + ss.script_count + ' scripts safe') : (ss.script_count + ' scripts, review required');
                } else {
                    stageDetails['scan_safety'] = 'No scripts detected';
                }
                renderStages(7, stageDetails);
            }, 1800);

            setTimeout(function() {
                var ci = data.content_intent;
                if (ci) {
                    stageDetails['scan_intent'] = ci.safe ? 'No malicious intent detected' : ('FAIL:' + ci.critical_count + ' critical, ' + ci.high_count + ' high findings');
                } else {
                    stageDetails['scan_intent'] = 'Passed';
                }
                renderStages(8, stageDetails);
            }, 2100);

            setTimeout(function() {
                var fv = data.functional_validation;
                if (fv) {
                    stageDetails['validate'] = fv.passed ? (fv.checks_passed + '/' + fv.total_checks + ' checks passed') : (fv.checks_passed + '/' + fv.total_checks + ' checks');
                } else {
                    stageDetails['validate'] = 'Skipped';
                }
                renderStages(9, stageDetails);
            }, 2400);

            setTimeout(function() {
                var enr = data.enrichment || {};
                var mc = enr.merge_candidates || 0;
                stageDetails['enrich_disc'] = mc > 0 ? (mc + ' similar skills found') : 'No similar skills';
                renderStages(10, stageDetails);
            }, 2700);

            setTimeout(function() {
                var enr = data.enrichment || {};
                var engines = enr.engines_run || [];
                stageDetails['enrich_inn'] = engines.indexOf('innovation') >= 0 ? 'Web trends gathered' : 'Skipped';
                renderStages(11, stageDetails);
            }, 3000);

            setTimeout(function() {
                var enr = data.enrichment || {};
                var engines = enr.engines_run || [];
                stageDetails['enrich_cre'] = engines.indexOf('creative') >= 0 ? 'Alternatives generated' : 'Skipped';
                renderStages(12, stageDetails);
            }, 3300);

            setTimeout(function() {
                var enr = data.enrichment || {};
                var engines = enr.engines_run || [];
                stageDetails['enrich_res'] = engines.indexOf('research') >= 0 ? 'Patterns identified' : 'Skipped';
                renderStages(13, stageDetails);
            }, 3600);

            setTimeout(function() {
                var cs = data.companion_script || {};
                if (cs.generated) {
                    stageDetails['scriptgen'] = cs.function_count + ' functions: ' + (cs.functions || []).join(', ');
                } else {
                    stageDetails['scriptgen'] = 'No actionable steps (reasoning-only skill)';
                }
                renderStages(14, stageDetails);
            }, 3900);

            setTimeout(function() {
                stageDetails['record'] = 'Status: ' + (data.status || 'quarantined').toUpperCase() + ', Trust: ' + (data.trust_score || 0.30);
                renderStages(15, stageDetails);

                // Show success result with enrichment details
                resultEl.style.display = 'block';
                resultEl.style.background = 'rgba(22,163,74,0.12)';
                resultEl.style.border = '1px solid rgba(22,163,74,0.25)';
                resultEl.style.maxHeight = '400px';
                resultEl.style.overflowY = 'auto';
                var html = '<strong style="color:#4ade80;">Import Successful</strong>';

                // Summary badges
                html += '<div style="display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; font-size:13px;">';
                html += '<div><span style="color:var(--text-muted);">Scan:</span> <span class="badge badge-' + (data.scan_status === 'passed' ? 'green' : 'red') + '">' + (data.scan_status || 'N/A').toUpperCase() + '</span></div>';
                html += '<div><span style="color:var(--text-muted);">Compat:</span> ' + (data.compatibility_score || 'N/A') + '/100</div>';
                html += '<div><span style="color:var(--text-muted);">Trust:</span> ' + (data.trust_score || 0.30) + '</div>';
                html += '<div><span style="color:var(--text-muted);">Review:</span> ' + (data.review_required ? 'Required' : 'Auto-eligible') + '</div>';
                html += '</div>';

                // Enrichment results
                var enr = data.enrichment || {};
                var cs = data.companion_script || {};
                var hasEnrichment = (enr.applied || cs.generated || (enr.merge_candidates > 0));

                if (hasEnrichment) {
                    html += '<div style="margin-top:14px; border-top:1px solid rgba(255,255,255,0.08); padding-top:12px;">';
                    html += '<strong style="font-size:13px; color:var(--text-secondary);">Enrichment Results</strong>';

                    // Similar skills / merge candidates
                    var simSkills = enr.similar_skills || [];
                    if (simSkills.length > 0) {
                        html += '<div style="margin-top:10px; padding:10px; background:rgba(96,165,250,0.1); border-radius:6px; border-left:3px solid #60a5fa;">';
                        html += '<div style="font-size:12px; font-weight:600; color:#60a5fa; margin-bottom:6px;">Similar Skills (Merge Candidates): ' + simSkills.length + '</div>';
                        for (var si = 0; si < simSkills.length; si++) {
                            var sk = simSkills[si];
                            html += '<div style="font-size:11px; padding:3px 0; color:var(--text-muted);">';
                            html += '<strong style="color:var(--text-secondary);">' + (sk.name || sk.slug) + '</strong>';
                            if (sk.score) html += ' <span style="color:var(--text-dim);">(relevance: ' + sk.score.toFixed(2) + ')</span>';
                            html += '</div>';
                        }
                        html += '</div>';
                    }

                    // Innovation findings
                    var innSynth = enr.innovation_synthesis || '';
                    var innCount = enr.innovation_count || 0;
                    if (innSynth || innCount > 0) {
                        html += '<div style="margin-top:8px; padding:10px; background:rgba(74,222,128,0.08); border-radius:6px; border-left:3px solid #4ade80;">';
                        html += '<div style="font-size:12px; font-weight:600; color:#4ade80; margin-bottom:4px;">Innovation Engine — ' + innCount + ' web sources</div>';
                        if (innSynth) {
                            html += '<div style="font-size:11px; color:var(--text-muted); line-height:1.5;">' + innSynth.substring(0, 300) + (innSynth.length > 300 ? '...' : '') + '</div>';
                        }
                        html += '</div>';
                    }

                    // Creative alternatives
                    var creAlts = enr.creative_alternatives || [];
                    if (creAlts.length > 0) {
                        html += '<div style="margin-top:8px; padding:10px; background:rgba(168,85,247,0.08); border-radius:6px; border-left:3px solid #a855f7;">';
                        html += '<div style="font-size:12px; font-weight:600; color:#a855f7; margin-bottom:6px;">Creative Engine — ' + creAlts.length + ' alternative(s)</div>';
                        for (var ci = 0; ci < creAlts.length; ci++) {
                            var alt = creAlts[ci];
                            html += '<div style="font-size:11px; padding:3px 0; color:var(--text-muted);">';
                            html += '<strong style="color:var(--text-secondary);">' + (alt.name || 'Alternative ' + (ci+1)) + ':</strong> ';
                            html += alt.approach || '';
                            html += '</div>';
                        }
                        html += '</div>';
                    }

                    // Research patterns
                    var resPats = enr.research_patterns || [];
                    if (resPats.length > 0) {
                        html += '<div style="margin-top:8px; padding:10px; background:rgba(251,146,60,0.08); border-radius:6px; border-left:3px solid #fb923c;">';
                        html += '<div style="font-size:12px; font-weight:600; color:#fb923c; margin-bottom:6px;">Research Engine — ' + resPats.length + ' pattern(s)</div>';
                        for (var ri = 0; ri < resPats.length; ri++) {
                            var pat = resPats[ri];
                            html += '<div style="font-size:11px; padding:3px 0; color:var(--text-muted);">';
                            html += '<strong style="color:var(--text-secondary);">' + (pat.title || 'Pattern ' + (ri+1)) + ':</strong> ';
                            html += pat.detail || '';
                            html += '</div>';
                        }
                        html += '</div>';
                    }

                    // Files generated summary
                    if (enr.files_generated > 0) {
                        html += '<div style="font-size:11px; color:var(--text-dim); margin-top:8px;">' + enr.files_generated + ' context file(s) generated in skill/context/</div>';
                    }

                    // Companion script
                    if (cs.generated) {
                        html += '<div style="margin-top:8px; padding:10px; background:rgba(250,204,21,0.08); border-radius:6px; border-left:3px solid #facc15;">';
                        html += '<div style="font-size:12px; font-weight:600; color:#facc15; margin-bottom:4px;">Companion Script Generated</div>';
                        html += '<div style="font-size:11px; color:var(--text-muted);">' + cs.function_count + ' functions: <code>' + (cs.functions || []).join(', ') + '</code></div>';
                        html += '<div style="font-size:11px; color:var(--text-dim); margin-top:4px;">Any LLM can call: <code>python scripts/companion.py &lt;action&gt;</code></div>';
                        html += '</div>';
                    } else {
                        html += '<div style="margin-top:8px; padding:10px; background:rgba(255,255,255,0.03); border-radius:6px; border-left:3px solid var(--border-color);">';
                        html += '<div style="font-size:12px; color:var(--text-muted);">No companion script needed — reasoning-only skill (LLM handles all steps)</div>';
                        html += '</div>';
                    }

                    html += '</div>';
                }

                html += '<div style="margin-top:12px; display:flex; gap:8px;">';
                html += '<button class="btn btn-sm" style="border:1px solid #60a5fa; color:#60a5fa;" onclick="viewEnhancedSkill(\'' + (data.import_id || '') + '\', true)">View Enhanced Skill</button>';
                html += '</div>';

                html += '<p style="margin:10px 0 0; font-size:11px; color:var(--text-dim);">ID: ' + (data.import_id || '') + '</p>';
                resultEl.innerHTML = html;
                actionsEl.style.display = 'block';

                document.getElementById('import-title').textContent = 'Import Complete';

                // Add reload button
                actionsEl.innerHTML = '<button class="btn btn-primary" onclick="closeImportModal(); location.reload();">View in Queue</button> <button class="btn btn-secondary" onclick="closeImportModal()">Close</button>';
            }, 4200);
        })
        .catch(function(err) {
            stageDetails['download'] = 'FAIL:Network error: ' + err;
            renderStages(0, stageDetails);
            resultEl.style.display = 'block';
            resultEl.style.background = 'rgba(220,38,38,0.15)';
            resultEl.style.border = '1px solid rgba(220,38,38,0.3)';
            resultEl.innerHTML = '<strong style="color:#f87171;">Network Error</strong><p style="font-size:13px; color:var(--text-muted);">' + err + '</p>';
            actionsEl.style.display = 'block';
        });
    };

    var PROMOTE_STAGES = [
        {id: 'review',    name: 'ISSO Review Approval',        icon: '1'},
        {id: 'verify',    name: 'Verify Security Gates Passed', icon: '2'},
        {id: 'convert',   name: 'Convert to ICDEV™ SKILL.md',   icon: '3'},
        {id: 'register',  name: 'Register in Marketplace',     icon: '4'},
        {id: 'catalog',   name: 'Add to Asset Catalog',        icon: '5'},
        {id: 'audit',     name: 'Record Audit Trail',          icon: '6'},
    ];

    var REVOKE_STAGES = [
        {id: 'verify',    name: 'Verify Promoted Status',      icon: '1'},
        {id: 'revoke_mkt',name: 'Revoke from Marketplace',     icon: '2'},
        {id: 'update',    name: 'Update Import Record',        icon: '3'},
        {id: 'audit',     name: 'Record Audit Trail',          icon: '4'},
    ];

    function showPipelineModal(title, subtitle, stages, apiFetch) {
        var modal = document.getElementById('import-modal');
        var resultEl = document.getElementById('import-result');
        var actionsEl = document.getElementById('import-actions');
        document.getElementById('import-title').textContent = title;
        document.getElementById('import-slug').textContent = subtitle;
        resultEl.style.display = 'none';
        actionsEl.style.display = 'none';
        modal.style.display = 'block';

        // Render initial stages
        var savedStages = IMPORT_STAGES;
        IMPORT_STAGES = stages;
        renderStages(0, {});
        IMPORT_STAGES = savedStages;

        apiFetch.then(function(r) { return r.json(); }).then(function(data) {
            var details = {};
            if (data.error) {
                // Fail on first incomplete stage
                details[stages[0].id] = 'FAIL:' + data.error.substring(0, 120);
                IMPORT_STAGES = stages;
                renderStages(0, details);
                IMPORT_STAGES = savedStages;

                resultEl.style.display = 'block';
                resultEl.style.background = 'rgba(220,38,38,0.15)';
                resultEl.style.border = '1px solid rgba(220,38,38,0.3)';
                resultEl.innerHTML = '<strong style="color:#f87171;">' + title + ' Failed</strong><p style="margin:8px 0 0; font-size:13px; color:var(--text-muted);">' + data.error + '</p>';
                actionsEl.style.display = 'block';
                actionsEl.innerHTML = '<button class="btn btn-secondary" onclick="closeImportModal()">Close</button>';
                return;
            }

            // Animate through stages
            var delay = 0;
            for (var i = 0; i < stages.length; i++) {
                (function(idx) {
                    setTimeout(function() {
                        details[stages[idx].id] = 'Done';
                        IMPORT_STAGES = stages;
                        renderStages(idx + 1, details);
                        IMPORT_STAGES = savedStages;
                    }, delay);
                })(i);
                delay += 350;
            }

            // Show result after all stages
            setTimeout(function() {
                resultEl.style.display = 'block';
                resultEl.style.background = 'rgba(22,163,74,0.15)';
                resultEl.style.border = '1px solid rgba(22,163,74,0.3)';
                var html = '<strong style="color:#4ade80;">' + title + ' Successful</strong>';
                if (data.marketplace_asset_id) html += '<p style="margin:6px 0 0; font-size:12px; color:var(--text-muted);">Asset ID: ' + data.marketplace_asset_id + '</p>';
                if (data.status) html += '<p style="margin:4px 0 0; font-size:12px; color:var(--text-muted);">Status: ' + data.status.toUpperCase() + '</p>';
                if (data.reason) html += '<p style="margin:4px 0 0; font-size:12px; color:var(--text-muted);">Reason: ' + data.reason + '</p>';
                resultEl.innerHTML = html;
                actionsEl.style.display = 'block';
                actionsEl.innerHTML = '<button class="btn btn-primary" onclick="closeImportModal(); location.reload();">Done</button>';
            }, delay + 200);
        })
        .catch(function(err) {
            resultEl.style.display = 'block';
            resultEl.style.background = 'rgba(220,38,38,0.15)';
            resultEl.style.border = '1px solid rgba(220,38,38,0.3)';
            resultEl.innerHTML = '<strong style="color:#f87171;">Network Error</strong><p style="font-size:13px;">' + err + '</p>';
            actionsEl.style.display = 'block';
            actionsEl.innerHTML = '<button class="btn btn-secondary" onclick="closeImportModal()">Close</button>';
        });
    }

    window.promoteImport = function(importId) {
        showPipelineModal(
            'Promoting to Marketplace',
            importId,
            PROMOTE_STAGES,
            fetch('/api/clawhub/promote', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({import_id: importId, promoted_by: 'dashboard-isso'})
            })
        );
    };

    window.revokeImport = function(importId, skillName) {
        var reason = prompt('Reason for unpromoting "' + (skillName || importId) + '":');
        if (!reason) return;
        showPipelineModal(
            'Unpromoting from Marketplace',
            (skillName || importId),
            REVOKE_STAGES,
            fetch('/api/clawhub/revoke', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({import_id: importId, revoked_by: 'dashboard-isso', reason: reason})
            })
        );
    };

    window.rejectImport = function(importId) {
        var reason = prompt('Rejection reason:');
        if (!reason) return;
        fetch('/api/clawhub/reject', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({import_id: importId, rejected_by: 'dashboard-isso', reason: reason})
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.error) alert('Reject failed: ' + data.error);
            else location.reload();
        });
    };

    window.toggleDiff = function() {
        var dv = document.getElementById('diff-view');
        var btn = document.getElementById('btn-diff-toggle');
        if (dv.style.display === 'none') {
            dv.style.display = 'block';
            btn.textContent = 'Hide Diff';
        } else {
            dv.style.display = 'none';
            btn.textContent = 'Show Before/After Diff';
        }
    };

    window.viewEnhancedSkill = function(importId, fromImport) {
        var modal = document.getElementById('skill-modal');
        var content = document.getElementById('skill-detail-content');
        modal.style.display = 'block';
        content.innerHTML = '<div style="text-align:center; padding:20px; color:var(--text-muted);">Loading enhanced skill...</div>';

        fetch('/api/clawhub/view-skill?import_id=' + encodeURIComponent(importId))
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (data.error) {
                    content.innerHTML = '<p style="color:#f88;">Error: ' + data.error + '</p>';
                    return;
                }
                var html = '<h2>Enhanced Skill: ' + (data.skill_name || importId) + '</h2>';
                html += '<p style="color:var(--text-muted); font-size:12px; margin-bottom:8px;">Final SKILL.md after enrichment. Sections tagged <span style="background:rgba(96,165,250,0.15); padding:1px 6px; border-radius:3px; font-size:11px; color:#60a5fa;">ICDEV™ Enhanced</span> were added by the enrichment pipeline.</p>';

                // Diff toggle if pre-enrichment available
                if (data.pre_enrichment) {
                    html += '<div style="margin-bottom:10px;">';
                    html += '<button id="btn-diff-toggle" class="btn btn-sm" style="border:1px solid #a855f7; color:#a855f7;" onclick="toggleDiff()">Show Before/After Diff</button>';
                    html += '</div>';
                    html += '<div id="diff-view" style="display:none; margin-bottom:12px;">';
                    html += '<div style="display:grid; grid-template-columns:1fr 1fr; gap:8px;">';
                    html += '<div style="padding:10px; background:rgba(220,38,38,0.05); border:1px solid rgba(220,38,38,0.2); border-radius:6px; max-height:300px; overflow-y:auto;"><div style="font-size:11px; font-weight:600; color:#f87171; margin-bottom:6px;">BEFORE (translated, pre-enrichment)</div><pre style="font-size:10px; white-space:pre-wrap; color:var(--text-muted); margin:0;">' + (data.pre_enrichment || '').replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;") + '</pre></div>';
                    html += '<div style="padding:10px; background:rgba(74,222,128,0.05); border:1px solid rgba(74,222,128,0.2); border-radius:6px; max-height:300px; overflow-y:auto;"><div style="font-size:11px; font-weight:600; color:#4ade80; margin-bottom:6px;">AFTER (enriched final)</div><pre style="font-size:10px; white-space:pre-wrap; color:var(--text-muted); margin:0;">' + skillContent.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;") + '</pre></div>';
                    html += '</div></div>';
                }

                // Render the markdown content in a scrollable pre block
                var skillContent = data.content || '';
                // Basic markdown rendering: headers, bold, lists, code blocks
                // Highlight ICDEV™-enhanced sections with colored backgrounds
                var enhancedSections = ['Enrichment (ICDEV™ Intelligence)', 'Industry Context', 'Alternative Approaches', 'Proven Patterns', 'Related Skills on ClawHub', 'Companion Script (LLM-Agnostic)', 'Provenance', 'Compatibility Notes'];

                var rendered = skillContent
                    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');

                // Highlight enhanced section headers
                for (var hs = 0; hs < enhancedSections.length; hs++) {
                    var secName = enhancedSections[hs].replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                    var secRegex = new RegExp('^(##+ ' + secName + ')$', 'gm');
                    rendered = rendered.replace(secRegex, '<div style="background:rgba(96,165,250,0.1); border-left:3px solid #60a5fa; padding:2px 8px; margin:12px -8px 4px; border-radius:0 4px 4px 0;"><span style="font-size:10px; color:#60a5fa; text-transform:uppercase; letter-spacing:0.5px;">ICDEV™ Enhanced</span><br>$1</div>');
                }

                rendered = rendered
                    .replace(/^### (.+)$/gm, '<h4 style="color:var(--text-primary); margin:12px 0 4px; font-size:13px;">$1</h4>')
                    .replace(/^## (.+)$/gm, '<h3 style="color:#60a5fa; margin:16px 0 6px; font-size:14px; border-bottom:1px solid rgba(255,255,255,0.06); padding-bottom:4px;">$1</h3>')
                    .replace(/^# (.+)$/gm, '<h2 style="color:var(--text-primary); margin:12px 0 8px;">$1</h2>')
                    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
                    .replace(/\*(.+?)\*/g, '<em style="color:var(--text-muted);">$1</em>')
                    .replace(/`([^`]+)`/g, '<code style="background:rgba(0,0,0,0.3); padding:1px 4px; border-radius:3px; font-size:12px;">$1</code>')
                    .replace(/^- (.+)$/gm, '<div style="padding-left:16px; font-size:12px;">• $1</div>')
                    .replace(/^\d+\. (.+)$/gm, '<div style="padding-left:16px; font-size:12px;">$1</div>')
                    .replace(/\n\n/g, '<br><br>')
                    .replace(/\n/g, '<br>')

                    // Highlight "Adapted from @" attributions
                    .replace(/Adapted from @(\S+)/g, '<span style="background:rgba(250,204,21,0.15); padding:1px 4px; border-radius:3px; font-size:11px; color:#facc15;">Adapted from @$1</span>')
                    // Highlight "Enhanced by: ICDEV™"
                    .replace(/Enhanced by:.+ICDEV/g, '<span style="background:rgba(74,222,128,0.15); padding:1px 4px; border-radius:3px; color:#4ade80;">$&</span>')
                    // Highlight "Original Author:"
                    .replace(/Original Author:.+/g, '<span style="background:rgba(96,165,250,0.1); padding:1px 4px; border-radius:3px;">$&</span>');

                html += '<div style="max-height:500px; overflow-y:auto; padding:14px; background:rgba(0,0,0,0.2); border-radius:8px; border:1px solid var(--border-color); font-size:12px; line-height:1.6; color:var(--text-secondary);">';
                html += rendered;
                html += '</div>';

                // Context files
                var files = data.context_files || [];
                if (files.length > 0) {
                    html += '<div style="margin-top:12px;">';
                    html += '<strong style="font-size:12px; color:var(--text-muted);">Generated Context Files:</strong>';
                    html += '<div style="margin-top:4px; display:flex; gap:6px; flex-wrap:wrap;">';
                    for (var fi = 0; fi < files.length; fi++) {
                        html += '<span style="font-size:11px; padding:2px 8px; background:rgba(255,255,255,0.06); border-radius:4px; color:var(--text-muted);">' + files[fi] + '</span>';
                    }
                    html += '</div></div>';
                }

                html += '<div style="text-align:right; margin-top:14px; display:flex; gap:8px; justify-content:flex-end;">';
                if (fromImport) {
                    html += '<button class="btn btn-primary" onclick="closeModal()">Back to Import Results</button>';
                    html += '<button class="btn btn-secondary" onclick="closeModal(); closeImportModal(); location.reload();">Done</button>';
                } else {
                    html += '<button class="btn btn-secondary" onclick="closeModal()">Close</button>';
                }
                html += '</div>';
                content.innerHTML = html;
            })
            .catch(function(err) {
                content.innerHTML = '<p style="color:#f88;">Error: ' + err + '</p>';
            });
    };

    window.bulkImportResults = function() {
        var slugs = window._lastSearchSlugs || [];
        if (slugs.length === 0) return;
        if (!confirm('Import all ' + slugs.length + ' skills?\n\n' + slugs.join(', ') + '\n\nEach will go through the full 15-stage pipeline.')) return;

        var modal = document.getElementById('import-modal');
        var resultEl = document.getElementById('import-result');
        var actionsEl = document.getElementById('import-actions');
        document.getElementById('import-title').textContent = 'Bulk Import: ' + slugs.length + ' Skills';
        document.getElementById('import-slug').textContent = slugs.join(', ');
        resultEl.style.display = 'none';
        actionsEl.style.display = 'none';
        modal.style.display = 'block';

        // Show progress as simple list
        var stagesEl = document.getElementById('import-stages');
        stagesEl.innerHTML = '<div style="padding:12px; color:var(--text-muted);">Importing ' + slugs.length + ' skills... this may take a moment.</div>';

        fetch('/api/clawhub/bulk-import', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({slugs: slugs, tenant_id: 'default', imported_by: 'dashboard-user'})
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            var html = '';
            var results = data.results || [];
            for (var i = 0; i < results.length; i++) {
                var r = results[i];
                var icon = r.success ? '\u2713' : '\u2717';
                var color = r.success ? '#4ade80' : '#f87171';
                html += '<div class="import-stage stage-' + (r.success ? 'done' : 'fail') + '">';
                html += '<div class="stage-icon">' + icon + '</div>';
                html += '<div class="stage-label"><div class="stage-name">' + r.slug + '</div>';
                html += '<div class="stage-detail">' + (r.success ? 'Import ID: ' + (r.import_id || '') : r.error || 'Failed') + '</div>';
                html += '</div></div>';
            }
            stagesEl.innerHTML = html;

            resultEl.style.display = 'block';
            resultEl.style.background = data.succeeded > 0 ? 'rgba(22,163,74,0.15)' : 'rgba(220,38,38,0.15)';
            resultEl.style.border = '1px solid ' + (data.succeeded > 0 ? 'rgba(22,163,74,0.3)' : 'rgba(220,38,38,0.3)');
            resultEl.innerHTML = '<strong style="color:' + (data.succeeded > 0 ? '#4ade80' : '#f87171') + ';">Bulk Import Complete</strong><div style="font-size:13px; margin-top:6px; color:var(--text-muted);">' + data.succeeded + '/' + data.total + ' succeeded, ' + data.failed + ' failed</div>';
            actionsEl.style.display = 'block';
            actionsEl.innerHTML = '<button class="btn btn-primary" onclick="closeImportModal(); location.reload();">Done</button>';
        })
        .catch(function(err) {
            stagesEl.innerHTML = '<div style="color:#f88; padding:12px;">Error: ' + err + '</div>';
            actionsEl.style.display = 'block';
            actionsEl.innerHTML = '<button class="btn btn-secondary" onclick="closeImportModal()">Close</button>';
        });
    };

    window.installToProject = function(importId, skillName) {
        showPipelineModal(
            'Installing to Project',
            skillName || importId,
            [
                {id: 'copy_skill', name: 'Copy SKILL.md to .claude/skills/', icon: '1'},
                {id: 'copy_scripts', name: 'Copy companion scripts', icon: '2'},
                {id: 'copy_context', name: 'Copy context files', icon: '3'},
            ],
            fetch('/api/clawhub/install-to-project', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({import_id: importId})
            })
        );
    };

    window.checkUpdate = function(importId, skillName) {
        var modal = document.getElementById('skill-modal');
        var content = document.getElementById('skill-detail-content');
        modal.style.display = 'block';
        content.innerHTML = '<div style="text-align:center; padding:20px; color:var(--text-muted);">Checking ClawHub for updates...</div>';

        fetch('/api/clawhub/check-update?import_id=' + encodeURIComponent(importId))
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (data.error) {
                    content.innerHTML = '<p style="color:#f88;">Error: ' + data.error + '</p><button class="btn btn-secondary" onclick="closeModal()">Close</button>';
                    return;
                }
                var html = '<h2>Version Check: ' + (skillName || importId) + '</h2>';
                if (data.update_available) {
                    html += '<div style="margin:16px 0; padding:14px; background:rgba(250,204,21,0.1); border-radius:8px; border-left:3px solid #facc15;">';
                    html += '<div style="font-size:14px; font-weight:600; color:#facc15;">Update Available</div>';
                    html += '<div style="font-size:13px; margin-top:6px; color:var(--text-muted);">Current: <strong>' + data.current_version + '</strong> → Latest: <strong style="color:#4ade80;">' + data.latest_version + '</strong></div>';
                    if (data.changelog) html += '<div style="font-size:12px; margin-top:8px; color:var(--text-dim);"><strong>Changelog:</strong> ' + data.changelog + '</div>';
                    html += '</div>';
                    html += '<p style="font-size:12px; color:var(--text-muted);">To update: unpromote the current version, then re-import from ClawHub.</p>';
                } else {
                    html += '<div style="margin:16px 0; padding:14px; background:rgba(74,222,128,0.1); border-radius:8px; border-left:3px solid #4ade80;">';
                    html += '<div style="font-size:14px; font-weight:600; color:#4ade80;">Up to Date</div>';
                    html += '<div style="font-size:13px; margin-top:4px; color:var(--text-muted);">Version ' + data.current_version + ' is the latest on ClawHub.</div>';
                    html += '</div>';
                }
                html += '<div style="text-align:right; margin-top:14px;"><button class="btn btn-secondary" onclick="closeModal()">Close</button></div>';
                content.innerHTML = html;
            });
    };

    window.rateSkill = function(importId, skillName) {
        var modal = document.getElementById('skill-modal');
        var content = document.getElementById('skill-detail-content');
        modal.style.display = 'block';

        var html = '<h2>Rate: ' + (skillName || importId) + '</h2>';
        html += '<p style="color:var(--text-muted); margin-bottom:16px;">How useful is this imported skill? Your rating adjusts the trust score.</p>';
        html += '<div style="display:flex; gap:12px; justify-content:center; margin:20px 0;">';
        for (var s = 1; s <= 5; s++) {
            var starColor = s <= 2 ? '#f87171' : s === 3 ? '#facc15' : '#4ade80';
            var label = ['', 'Poor (-0.05)', 'Below Avg (-0.02)', 'Average', 'Good (+0.03)', 'Excellent (+0.05)'][s];
            html += '<button onclick="submitRating(\'' + importId + '\', ' + s + ')" style="';
            html += 'width:56px; height:56px; border-radius:12px; border:2px solid ' + starColor + ';';
            html += 'background:transparent; color:' + starColor + '; font-size:20px; font-weight:700;';
            html += 'cursor:pointer; transition:all 0.2s;" title="' + label + '"';
            html += ' onmouseover="this.style.background=\'' + starColor + '22\'"';
            html += ' onmouseout="this.style.background=\'transparent\'">';
            html += s + '</button>';
        }
        html += '</div>';
        html += '<div style="display:flex; justify-content:space-between; font-size:11px; color:var(--text-dim); padding:0 20px;">';
        html += '<span>Poor</span><span>Average</span><span>Excellent</span>';
        html += '</div>';
        html += '<div style="text-align:right; margin-top:20px;"><button class="btn btn-secondary" onclick="closeModal()">Cancel</button></div>';
        content.innerHTML = html;
    };

    window.submitRating = function(importId, rating) {
        fetch('/api/clawhub/rate', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({import_id: importId, rating: rating})
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.error) { alert('Rating failed: ' + data.error); return; }
            var content = document.getElementById('skill-detail-content');
            content.innerHTML = '<div style="text-align:center; padding:30px;"><div style="font-size:40px; margin-bottom:10px;">' + ['','','','','',''][rating] + '</div><h3 style="color:#4ade80;">Rated ' + rating + '/5</h3><p style="color:var(--text-muted); font-size:13px;">Trust adjusted by ' + (data.trust_adjustment > 0 ? '+' : '') + data.trust_adjustment + '</p><button class="btn btn-primary" onclick="closeModal(); location.reload();" style="margin-top:16px;">Done</button></div>';
        });
    };

    window.viewSkillUsage = function(skillName) {
        var modal = document.getElementById('skill-modal');
        var content = document.getElementById('skill-detail-content');
        modal.style.display = 'block';

        var html = '<h2>Using "' + skillName + '"</h2>';
        html += '<p style="color:var(--text-muted); margin-bottom:16px;">This skill has been promoted to your ICDEV™ Marketplace. Here\'s how to use it:</p>';

        html += '<div style="margin-bottom:16px;">';
        html += '<h3 style="font-size:14px; margin:0 0 8px;">1. In Claude Code (VS Code / CLI)</h3>';
        html += '<p style="font-size:13px; color:var(--text-muted);">The skill is available as a slash command. Type:</p>';
        html += '<pre style="background:rgba(0,0,0,0.3); padding:10px; border-radius:6px; font-size:13px; margin:8px 0;"><code>/' + skillName + '</code></pre>';
        html += '<p style="font-size:12px; color:var(--text-dim);">Claude will load the skill instructions and follow them for your current task.</p>';
        html += '</div>';

        html += '<div style="margin-bottom:16px;">';
        html += '<h3 style="font-size:14px; margin:0 0 8px;">2. In Other AI Platforms</h3>';
        html += '<p style="font-size:13px; color:var(--text-muted);">Companion sync distributes this skill to all 9 platforms:</p>';
        html += '<ul style="font-size:12px; color:var(--text-muted); margin:6px 0; padding-left:20px;">';
        html += '<li><strong>Cursor:</strong> .cursor/rules/' + skillName + '.mdc</li>';
        html += '<li><strong>Copilot:</strong> .github/prompts/' + skillName + '.prompt.md</li>';
        html += '<li><strong>Codex:</strong> .agents/skills/' + skillName + '/SKILL.md</li>';
        html += '</ul>';
        html += '<p style="font-size:12px; color:var(--text-dim);">Run <code>python tools/dx/companion.py --sync --write</code> to push to all platforms.</p>';
        html += '</div>';

        html += '<div style="margin-bottom:16px;">';
        html += '<h3 style="font-size:14px; margin:0 0 8px;">3. View the Translated Skill</h3>';
        html += '<p style="font-size:13px; color:var(--text-muted);">The ICDEV™-formatted SKILL.md is in the quarantine directory. To install it as a local skill:</p>';
        html += '<pre style="background:rgba(0,0,0,0.3); padding:10px; border-radius:6px; font-size:12px; margin:8px 0;"><code>cp -r .tmp/openclaw_quarantine/' + skillName + '-*/  .claude/skills/' + skillName + '/</code></pre>';
        html += '</div>';

        html += '<div style="text-align:right; margin-top:16px;">';
        html += '<button class="btn btn-secondary" onclick="closeModal()">Close</button>';
        html += '</div>';

        content.innerHTML = html;
    };

    window.boostTrust = function(importId, skillName, currentTrust) {
        var modal = document.getElementById('skill-modal');
        var content = document.getElementById('skill-detail-content');
        modal.style.display = 'block';

        var html = '<h2>Trust Management</h2>';
        html += '<p style="color:var(--text-muted); margin-bottom:12px;">"' + skillName + '"</p>';

        // Trust level indicator
        var level = currentTrust >= 0.70 ? 'Normal' : currentTrust >= 0.50 ? 'Degraded' : currentTrust >= 0.30 ? 'Untrusted' : 'Blocked';
        var color = currentTrust >= 0.70 ? '#4ade80' : currentTrust >= 0.50 ? '#facc15' : currentTrust >= 0.30 ? '#fb923c' : '#f87171';

        html += '<div style="margin:16px 0;">';
        html += '<div style="display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px;">';
        html += '<span>Current: <strong style="color:' + color + ';">' + currentTrust.toFixed(2) + ' (' + level + ')</strong></span>';
        html += '<span style="color:var(--text-dim);">0.00 — 1.00</span>';
        html += '</div>';
        html += '<div style="background:rgba(255,255,255,0.08); border-radius:8px; height:12px; overflow:hidden;">';
        html += '<div style="width:' + (currentTrust * 100) + '%; height:100%; background:' + color + '; border-radius:8px; transition:width 0.5s;"></div>';
        html += '</div>';
        html += '<div style="display:flex; justify-content:space-between; font-size:10px; color:var(--text-dim); margin-top:4px;">';
        html += '<span>Blocked</span><span>Untrusted</span><span>Degraded</span><span>Normal</span>';
        html += '</div>';
        html += '</div>';

        // Trust level descriptions
        html += '<table style="width:100%; font-size:12px; margin:12px 0; border-collapse:collapse;">';
        html += '<tr style="border-bottom:1px solid rgba(255,255,255,0.06);"><td style="padding:6px; color:#f87171;">< 0.30</td><td style="padding:6px;"><strong>Blocked</strong> — all actions blocked</td></tr>';
        html += '<tr style="border-bottom:1px solid rgba(255,255,255,0.06);"><td style="padding:6px; color:#fb923c;">0.30</td><td style="padding:6px;"><strong>Untrusted</strong> — autonomous actions blocked, manual use only</td></tr>';
        html += '<tr style="border-bottom:1px solid rgba(255,255,255,0.06);"><td style="padding:6px; color:#facc15;">0.50</td><td style="padding:6px;"><strong>Degraded</strong> — requires human confirmation per action</td></tr>';
        html += '<tr><td style="padding:6px; color:#4ade80;">0.70</td><td style="padding:6px;"><strong>Normal</strong> — full autonomous operation</td></tr>';
        html += '</table>';

        // Boost buttons
        html += '<div style="margin-top:16px;">';
        html += '<p style="font-size:13px; color:var(--text-muted); margin-bottom:10px;">Adjust trust level:</p>';
        html += '<div style="display:flex; gap:8px; flex-wrap:wrap;">';

        if (currentTrust < 0.50) {
            html += '<button class="btn btn-sm" style="border:1px solid #facc15; color:#facc15;" onclick="setTrust(\'' + importId + '\', 0.50)">Set to 0.50 (Degraded)</button>';
        }
        if (currentTrust < 0.70) {
            html += '<button class="btn btn-sm" style="border:1px solid #4ade80; color:#4ade80;" onclick="setTrust(\'' + importId + '\', 0.70)">Set to 0.70 (Normal)</button>';
        }
        if (currentTrust < 1.0) {
            html += '<button class="btn btn-sm" style="border:1px solid #60a5fa; color:#60a5fa;" onclick="setTrust(\'' + importId + '\', 1.00)">Set to 1.00 (Full Trust)</button>';
        }
        if (currentTrust > 0.30) {
            html += '<button class="btn btn-sm" style="border:1px solid #f87171; color:#f87171;" onclick="setTrust(\'' + importId + '\', 0.30)">Reset to 0.30 (Untrusted)</button>';
        }
        html += '</div></div>';

        html += '<div style="text-align:right; margin-top:16px;">';
        html += '<button class="btn btn-secondary" onclick="closeModal()">Close</button>';
        html += '</div>';

        content.innerHTML = html;
    };

    window.setTrust = function(importId, newScore) {
        var label = newScore >= 0.70 ? 'Normal' : newScore >= 0.50 ? 'Degraded' : 'Untrusted';
        if (!confirm('Set trust to ' + newScore.toFixed(2) + ' (' + label + ')?')) return;

        fetch('/api/clawhub/trust', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({import_id: importId, trust_score: newScore})
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.error) alert('Failed: ' + data.error);
            else { closeModal(); location.reload(); }
        });
    };

    // Close modal on Escape
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') closeModal();
    });

    // Close modal on backdrop click
    document.getElementById('skill-modal').addEventListener('click', function(e) {
        if (e.target === this) closeModal();
    });
})();
</script>
{% endblock %}