{% extends "base.html" %}
{% block title %}Connector Forge - ICDEV™ Dashboard{% endblock %}
{% block content %}
<div class="container">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" style="margin-bottom:0.5rem;">
        <span><a href="/" style="color:#1976d2;text-decoration:none;">Home</a></span>
        <span style="color:#999;"> &gt; </span>
        <span style="color:#333;">Connector Forge</span>
    </nav>

    <h1>Connector Forge &mdash; Generate API Connectors from OpenAPI Specs</h1>
    <p class="text-muted">Upload an OpenAPI spec to auto-generate a DataBridge connector with sandbox validation.</p>

    <!-- Stats Grid -->
    <div class="stat-grid" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin:1.5rem 0;">
        <div class="stat-card" style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div id="stat-generated" class="stat-value" style="font-size:2rem;font-weight:bold;">--</div>
            <div class="stat-label" style="color:#666;">Connectors Generated</div>
        </div>
        <div class="stat-card" style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div id="stat-active" class="stat-value" style="font-size:2rem;font-weight:bold;color:#388e3c;">--</div>
            <div class="stat-label" style="color:#666;">Active Connectors</div>
        </div>
        <div class="stat-card" style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div id="stat-validated" class="stat-value" style="font-size:2rem;font-weight:bold;color:#1976d2;">--</div>
            <div class="stat-label" style="color:#666;">Sandbox Validated</div>
        </div>
        <div class="stat-card" style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div id="stat-shared" class="stat-value" style="font-size:2rem;font-weight:bold;color:#7b1fa2;">--</div>
            <div class="stat-label" style="color:#666;">Community Shared</div>
        </div>
    </div>

    <!-- Generate New Connector -->
    <h2 style="margin-top:2rem;">Generate New Connector</h2>
    <div style="margin:1rem 0;padding:1.25rem;border:1px solid #ddd;border-radius:8px;background:#fafafa;">
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;">
            <div>
                <label for="connector-name" style="display:block;font-weight:600;margin-bottom:0.3rem;">Connector Name</label>
                <input id="connector-name" type="text" placeholder="e.g. stripe-payments" style="width:100%;padding:0.5rem 0.8rem;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;" />
            </div>
            <div>
                <label for="openapi-url" style="display:block;font-weight:600;margin-bottom:0.3rem;">OpenAPI Spec URL</label>
                <input id="openapi-url" type="text" placeholder="https://api.example.com/openapi.json" style="width:100%;padding:0.5rem 0.8rem;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;" />
            </div>
        </div>
        <div style="margin-bottom:1rem;">
            <label for="openapi-spec" style="display:block;font-weight:600;margin-bottom:0.3rem;">Or Paste OpenAPI Spec (JSON/YAML)</label>
            <textarea id="openapi-spec" rows="6" placeholder="Paste your OpenAPI 3.x specification here..." style="width:100%;padding:0.5rem 0.8rem;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;font-family:monospace;font-size:0.85rem;resize:vertical;"></textarea>
        </div>
        <button id="btn-generate" onclick="generateConnector()" style="padding:0.6rem 1.5rem;background:#1976d2;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:600;">Generate Connector</button>
        <span id="generate-status" style="margin-left:1rem;color:#666;"></span>
    </div>

    <!-- Existing Connectors Table -->
    <h2 style="margin-top:2rem;">Generated Connectors</h2>
    <div class="table-container" style="margin:1rem 0;">
        <table class="data-table" style="width:100%;border-collapse:collapse;">
            <thead>
                <tr style="border-bottom:2px solid #ddd;">
                    <th style="text-align:left;padding:0.5rem;">Name</th>
                    <th style="text-align:center;padding:0.5rem;">Type</th>
                    <th style="text-align:center;padding:0.5rem;">Status</th>
                    <th style="text-align:center;padding:0.5rem;">Created</th>
                    <th style="text-align:center;padding:0.5rem;">Actions</th>
                </tr>
            </thead>
            <tbody id="connectors-body">
                <tr><td colspan="5" style="text-align:center;padding:1.5rem;color:#999;">Loading connectors...</td></tr>
            </tbody>
        </table>
    </div>
</div>

<script>
function statusBadge(status) {
    var colors = {
        'active': '#388e3c',
        'validated': '#1976d2',
        'pending': '#f57c00',
        'error': '#d32f2f',
        'shared': '#7b1fa2'
    };
    var bg = colors[status] || '#666';
    return '<span class="badge" style="display:inline-block;padding:2px 10px;border-radius:12px;background:' + bg + ';color:#fff;font-size:0.8rem;font-weight:600;">' + status + '</span>';
}

function loadConnectors() {
    fetch('/api/connector-forge/list')
        .then(function(r) { return r.json(); })
        .then(function(data) {
            var connectors = data.connectors || [];
            var total = data.total || 0;
            var active = connectors.filter(function(c) { return c.status === 'active'; }).length;
            var validated = connectors.filter(function(c) { return c.status === 'validated'; }).length;
            var shared = connectors.filter(function(c) { return c.status === 'shared'; }).length;

            document.getElementById('stat-generated').textContent = total;
            document.getElementById('stat-active').textContent = active;
            document.getElementById('stat-validated').textContent = validated;
            document.getElementById('stat-shared').textContent = shared;

            var tbody = document.getElementById('connectors-body');
            if (connectors.length === 0) {
                tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;padding:1.5rem;color:#999;">No connectors generated yet. Use the form above to create one.</td></tr>';
                return;
            }
            var rows = '';
            connectors.forEach(function(c) {
                rows += '<tr style="border-bottom:1px solid #eee;">';
                rows += '<td style="padding:0.5rem;font-weight:600;">' + (c.name || '--') + '</td>';
                rows += '<td style="text-align:center;padding:0.5rem;">' + (c.type || '--') + '</td>';
                rows += '<td style="text-align:center;padding:0.5rem;">' + statusBadge(c.status || 'pending') + '</td>';
                rows += '<td style="text-align:center;padding:0.5rem;">' + (c.created || '--') + '</td>';
                rows += '<td style="text-align:center;padding:0.5rem;">';
                rows += '<a href="#" style="color:#1976d2;text-decoration:none;margin-right:0.5rem;">View</a>';
                rows += '<a href="#" style="color:#f57c00;text-decoration:none;">Test</a>';
                rows += '</td>';
                rows += '</tr>';
            });
            tbody.innerHTML = rows;
        })
        .catch(function(err) {
            console.error('Failed to load connectors:', err);
            document.getElementById('connectors-body').innerHTML = '<tr><td colspan="5" style="text-align:center;padding:1.5rem;color:#d32f2f;">Failed to load connectors.</td></tr>';
        });
}

function generateConnector() {
    var name = document.getElementById('connector-name').value.trim();
    var url = document.getElementById('openapi-url').value.trim();
    var spec = document.getElementById('openapi-spec').value.trim();
    var statusEl = document.getElementById('generate-status');

    if (!name) {
        statusEl.textContent = 'Please enter a connector name.';
        statusEl.style.color = '#d32f2f';
        return;
    }
    if (!url && !spec) {
        statusEl.textContent = 'Please provide an OpenAPI URL or paste a spec.';
        statusEl.style.color = '#d32f2f';
        return;
    }

    statusEl.textContent = 'Generating connector...';
    statusEl.style.color = '#1976d2';
    document.getElementById('btn-generate').disabled = true;

    fetch('/api/connector-forge/generate', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({name: name, url: url, spec: spec})
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.error) {
            statusEl.textContent = 'Error: ' + data.error;
            statusEl.style.color = '#d32f2f';
        } else {
            statusEl.textContent = 'Connector "' + name + '" generated successfully.';
            statusEl.style.color = '#388e3c';
            loadConnectors();
        }
        document.getElementById('btn-generate').disabled = false;
    })
    .catch(function(err) {
        statusEl.textContent = 'Generation failed: ' + err;
        statusEl.style.color = '#d32f2f';
        document.getElementById('btn-generate').disabled = false;
    });
}

document.addEventListener('DOMContentLoaded', loadConnectors);
</script>
{% endblock %}