{% extends 'base.html' %}

{% block title %}My Blueprints - Open Swarm{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col">
            <h1 class="display-5 mb-2">
                <i class="fas fa-bookmark me-2"></i>My Blueprints
            </h1>
            <p class="lead text-muted">
                Your personal collection of installed and custom blueprints. Run them directly from here.
            </p>
        </div>
        <div class="col-auto">
            <div class="d-flex gap-2">
                <a href="{% url 'blueprint_library' %}" class="btn btn-outline-secondary">
                    <i class="fas fa-cube me-1"></i>Browse Library
                </a>
                <a href="{% url 'blueprint_creator' %}" class="btn btn-success">
                    <i class="fas fa-plus me-1"></i>Create New
                </a>
            </div>
        </div>
    </div>

    <!-- Stats -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card border-0 bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h6 class="card-title">Installed</h6>
                            <h3 class="mb-0">{{ installed_blueprints|length }}</h3>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-download fa-2x opacity-75"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h6 class="card-title">Custom Created</h6>
                            <h3 class="mb-0">{{ custom_blueprints|length }}</h3>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-magic fa-2x opacity-75"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 bg-info text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h6 class="card-title">Total</h6>
                            <h3 class="mb-0">{{ installed_blueprints|length|add:custom_blueprints|length }}</h3>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-cubes fa-2x opacity-75"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 bg-warning text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h6 class="card-title">Ready to Run</h6>
                            <h3 class="mb-0">{{ installed_blueprints|length|add:custom_blueprints|length }}</h3>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-play fa-2x opacity-75"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Installed Blueprints -->
    {% if installed_blueprints %}
    <div class="row mb-5">
        <div class="col">
            <h3 class="mb-3">
                <i class="fas fa-download me-2"></i>Installed Blueprints
            </h3>
            <div class="row">
                {% for blueprint in installed_blueprints %}
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="card blueprint-runner-card h-100">
                        <div class="card-header d-flex justify-content-between align-items-start">
                            <div>
                                <h5 class="card-title mb-1">{{ blueprint.name }}</h5>
                                <small class="text-muted">{{ blueprint.category_info.name }}</small>
                            </div>
                            <span class="badge bg-success">Installed</span>
                        </div>
                        
                        <div class="card-body d-flex flex-column">
                            <p class="card-text flex-grow-1">{{ blueprint.description }}</p>
                            
                            <!-- Quick Actions -->
                            <div class="mt-auto">
                                <div class="d-grid gap-2">
                                    <button class="btn btn-primary btn-run-blueprint" 
                                            data-blueprint-id="{{ blueprint.id }}"
                                            data-blueprint-name="{{ blueprint.name }}">
                                        <i class="fas fa-play me-1"></i>Run Blueprint
                                    </button>
                                    <div class="btn-group btn-group-sm">
                                        <button class="btn btn-outline-secondary" 
                                                onclick="previewBlueprint('{{ blueprint.id }}')">
                                            <i class="fas fa-eye"></i> Preview
                                        </button>
                                        <button class="btn btn-outline-danger" 
                                                onclick="removeBlueprint('{{ blueprint.id }}')">
                                            <i class="fas fa-trash"></i> Remove
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Custom Blueprints -->
    {% if custom_blueprints %}
    <div class="row mb-5">
        <div class="col">
            <h3 class="mb-3">
                <i class="fas fa-magic me-2"></i>Custom Blueprints
            </h3>
            <div class="row">
                {% for blueprint in custom_blueprints %}
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="card blueprint-runner-card h-100">
                        <div class="card-header d-flex justify-content-between align-items-start">
                            <div>
                                <h5 class="card-title mb-1">{{ blueprint.name }}</h5>
                                <small class="text-muted">{{ blueprint.category }}</small>
                            </div>
                            <span class="badge bg-info">Custom</span>
                        </div>
                        
                        <div class="card-body d-flex flex-column">
                            <p class="card-text flex-grow-1">{{ blueprint.description }}</p>
                            
                            {% if blueprint.tags %}
                            <div class="mb-3">
                                {% for tag in blueprint.tags %}
                                <span class="badge bg-light text-dark me-1">{{ tag }}</span>
                                {% endfor %}
                            </div>
                            {% endif %}
                            
                            <!-- Quick Actions -->
                            <div class="mt-auto">
                                <div class="d-grid gap-2">
                                    <button class="btn btn-primary btn-run-blueprint" 
                                            data-blueprint-id="{{ blueprint.id }}"
                                            data-blueprint-name="{{ blueprint.name }}"
                                            data-blueprint-code="{{ blueprint.code|escape }}">
                                        <i class="fas fa-play me-1"></i>Run Blueprint
                                    </button>
                                    <div class="btn-group btn-group-sm">
                                        <button class="btn btn-outline-secondary" 
                                                onclick="editBlueprint('{{ blueprint.id }}')">
                                            <i class="fas fa-edit"></i> Edit
                                        </button>
                                        <button class="btn btn-outline-danger" 
                                                onclick="deleteBlueprint('{{ blueprint.id }}')">
                                            <i class="fas fa-trash"></i> Delete
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="card-footer">
                            <small class="text-muted">
                                <i class="fas fa-calendar me-1"></i>Created: {{ blueprint.created_at }}
                            </small>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Empty State -->
    {% if not installed_blueprints and not custom_blueprints %}
    <div class="row">
        <div class="col text-center py-5">
            <div class="empty-state">
                <i class="fas fa-cube fa-4x text-muted mb-4"></i>
                <h3>No Blueprints Yet</h3>
                <p class="text-muted mb-4">
                    You haven't added any blueprints to your library yet. 
                    Start by browsing the library or creating your own custom blueprint.
                </p>
                <div class="d-flex gap-3 justify-content-center">
                    <a href="{% url 'blueprint_library' %}" class="btn btn-primary">
                        <i class="fas fa-cube me-1"></i>Browse Library
                    </a>
                    <a href="{% url 'blueprint_creator' %}" class="btn btn-success">
                        <i class="fas fa-plus me-1"></i>Create Custom
                    </a>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<!-- Blueprint Runner Modal -->
<div class="modal fade" id="blueprintRunnerModal" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-play me-2"></i>Running: <span id="runnerBlueprintName"></span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- Input Section -->
                <div class="row mb-4">
                    <div class="col-md-8">
                        <label for="blueprintInput" class="form-label">Input Message</label>
                        <textarea class="form-control" id="blueprintInput" rows="3" 
                                  placeholder="Enter your message or input for the blueprint..."></textarea>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Actions</label>
                        <div class="d-grid gap-2">
                            <button class="btn btn-primary" id="runBlueprintBtn">
                                <i class="fas fa-play me-1"></i>Run
                            </button>
                            <button class="btn btn-outline-secondary" id="clearOutputBtn">
                                <i class="fas fa-eraser me-1"></i>Clear Output
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Output Section -->
                <div class="row">
                    <div class="col-12">
                        <label class="form-label">Output</label>
                        <div class="border rounded p-3 bg-light" id="blueprintOutput" style="min-height: 300px; max-height: 500px; overflow-y: auto;">
                            <div class="text-muted text-center py-5">
                                <i class="fas fa-terminal fa-2x mb-3"></i>
                                <p>Output will appear here when you run the blueprint...</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Status -->
                <div class="row mt-3">
                    <div class="col">
                        <div id="runnerStatus" class="alert alert-info d-none">
                            <i class="fas fa-info-circle me-2"></i>
                            <span id="statusMessage">Ready to run</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-outline-primary" id="saveOutputBtn">
                    <i class="fas fa-save me-1"></i>Save Output
                </button>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Handle run blueprint buttons
    document.querySelectorAll('.btn-run-blueprint').forEach(button => {
        button.addEventListener('click', function() {
            const blueprintId = this.dataset.blueprintId;
            const blueprintName = this.dataset.blueprintName;
            const blueprintCode = this.dataset.blueprintCode;
            
            openBlueprintRunner(blueprintId, blueprintName, blueprintCode);
        });
    });

    // Handle run button in modal
    document.getElementById('runBlueprintBtn').addEventListener('click', function() {
        runBlueprint();
    });

    // Handle clear output button
    document.getElementById('clearOutputBtn').addEventListener('click', function() {
        document.getElementById('blueprintOutput').innerHTML = `
            <div class="text-muted text-center py-5">
                <i class="fas fa-terminal fa-2x mb-3"></i>
                <p>Output will appear here when you run the blueprint...</p>
            </div>
        `;
    });
});

function openBlueprintRunner(blueprintId, blueprintName, blueprintCode) {
    document.getElementById('runnerBlueprintName').textContent = blueprintName;
    
    // Store blueprint data for execution
    window.currentBlueprint = {
        id: blueprintId,
        name: blueprintName,
        code: blueprintCode
    };
    
    const modal = new bootstrap.Modal(document.getElementById('blueprintRunnerModal'));
    modal.show();
}

function runBlueprint() {
    const input = document.getElementById('blueprintInput').value;
    const outputDiv = document.getElementById('blueprintOutput');
    const statusDiv = document.getElementById('runnerStatus');
    const statusMessage = document.getElementById('statusMessage');
    
    if (!input.trim()) {
        showStatus('Please enter some input for the blueprint', 'warning');
        return;
    }
    
    // Show running status
    showStatus('Running blueprint...', 'info');
    outputDiv.innerHTML = '<div class="text-center py-3"><div class="spinner-border text-primary" role="status"></div><p class="mt-2">Executing blueprint...</p></div>';
    
    // Simulate blueprint execution (in real implementation, this would call the actual blueprint)
    setTimeout(() => {
        const output = simulateBlueprintExecution(window.currentBlueprint, input);
        outputDiv.innerHTML = `<pre class="mb-0">${output}</pre>`;
        showStatus('Blueprint completed successfully', 'success');
    }, 2000);
}

function simulateBlueprintExecution(blueprint, input) {
    // This is a simulation - in reality, you'd execute the actual blueprint code
    const timestamp = new Date().toISOString();
    return `[${timestamp}] Running ${blueprint.name}...
[${timestamp}] Input: ${input}
[${timestamp}] Processing...
[${timestamp}] Output: This is a simulated response from the ${blueprint.name} blueprint.
[${timestamp}] The blueprint would normally execute the actual code here.
[${timestamp}] For custom blueprints, the generated code would be executed.
[${timestamp}] Execution completed successfully.`;
}

function showStatus(message, type) {
    const statusDiv = document.getElementById('runnerStatus');
    const statusMessage = document.getElementById('statusMessage');
    
    statusMessage.textContent = message;
    statusDiv.className = `alert alert-${type}`;
    statusDiv.classList.remove('d-none');
}

function previewBlueprint(blueprintId) {
    window.open(`/blueprint/${blueprintId}/`, '_blank');
}

function removeBlueprint(blueprintId) {
    if (confirm('Are you sure you want to remove this blueprint from your library?')) {
        fetch(`/blueprint-library/remove/${blueprintId}/`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error: ' + (data.error || 'Failed to remove blueprint'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while removing the blueprint');
        });
    }
}

function editBlueprint(blueprintId) {
    // TODO: Implement blueprint editing
    alert('Blueprint editing will be implemented soon!');
}

function deleteBlueprint(blueprintId) {
    if (confirm('Are you sure you want to delete this custom blueprint? This action cannot be undone.')) {
        // TODO: Implement custom blueprint deletion
        alert('Custom blueprint deletion will be implemented soon!');
    }
}
</script>

<style>
.blueprint-runner-card {
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.blueprint-runner-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.empty-state {
    max-width: 400px;
    margin: 0 auto;
}

#blueprintOutput {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.4;
}

#blueprintOutput pre {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}
</style>
{% endblock %}