{% extends "base.html" %}

{% block title %}{{ prompt.title }} - PromptBin{% endblock %}

{% block content %}
<div class="view-container">
    <!-- Navigation breadcrumbs -->
    <nav class="breadcrumbs">
        <a href="{{ url_for('index') }}">All Prompts</a>
        <span class="separator">›</span>
        <a href="{{ url_for('index', category=prompt.category) }}">{{ prompt.category.title() }}</a>
        <span class="separator">›</span>
        <span class="current">{{ prompt.title }}</span>
    </nav>

    <!-- Prompt header -->
    <div class="prompt-header-full">
        <div class="prompt-title-section">
            <h1>{{ prompt.title }}</h1>
            <span class="category-badge {{ prompt.category }}">{{ prompt.category.title() }}</span>
        </div>
        
        <div class="prompt-actions">
            <button class="btn-icon" title="Copy Content" onclick="copyToClipboard('prompt-content')">📋</button>
            <button class="btn-icon" title="Share Prompt" onclick="sharePrompt('{{ prompt.id }}')">🔗</button>
            <a href="{{ url_for('edit', prompt_id=prompt.id) }}" class="btn btn-secondary">Edit</a>
        </div>
    </div>

    <!-- Prompt metadata -->
    {% if prompt.description or prompt.tags %}
    <div class="prompt-metadata">
        {% if prompt.description %}
        <div class="prompt-description">
            <p>{{ prompt.description }}</p>
        </div>
        {% endif %}
        
        {% if prompt.tags %}
        <div class="prompt-tags">
            {% for tag in prompt.tags %}
            <span class="tag">{{ tag }}</span>
            {% endfor %}
        </div>
        {% endif %}
    </div>
    {% endif %}

    <!-- Prompt content -->
    <div class="prompt-content-container">
        <div class="content-header">
            <h3>Content</h3>
            <div class="content-stats">
                <span class="word-count">{{ prompt.content.split()|length }} words</span>
                {% set template_vars = prompt.content|regex_findall('\{\{[^}]+\}\}')|length %}
                {% if template_vars > 0 %}
                <span class="template-vars">{{ template_vars }} variable{{ 's' if template_vars != 1 else '' }}</span>
                {% endif %}
            </div>
        </div>
        
        <div class="prompt-content" id="prompt-content">
            <pre><code>{{ prompt.content }}</code></pre>
        </div>
    </div>

    <!-- Prompt info -->
    <div class="prompt-info">
        <div class="info-item">
            <strong>Created:</strong> 
            <time datetime="{{ prompt.created_at }}">{{ prompt.created_at[:10] }}</time>
        </div>
        {% if prompt.updated_at != prompt.created_at %}
        <div class="info-item">
            <strong>Updated:</strong> 
            <time datetime="{{ prompt.updated_at }}">{{ prompt.updated_at[:10] }}</time>
        </div>
        {% endif %}
        <div class="info-item">
            <strong>ID:</strong> 
            <code class="prompt-id">{{ prompt.id }}</code>
        </div>
    </div>

    <!-- Related actions -->
    <div class="related-actions">
        <h3>Related Actions</h3>
        <div class="action-buttons">
            <a href="{{ url_for('create') }}" class="btn btn-primary">Create Similar</a>
            <a href="{{ url_for('index', category=prompt.category) }}" class="btn btn-secondary">View {{ prompt.category.title() }} Prompts</a>
            <button class="btn btn-danger" onclick="deletePrompt('{{ prompt.id }}')">Delete Prompt</button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // Copy to clipboard functionality
    function copyToClipboard(elementId) {
        const element = document.getElementById(elementId);
        const content = element.querySelector('code').textContent;
        
        navigator.clipboard.writeText(content).then(function() {
            showNotification('Content copied to clipboard!');
        }).catch(function(err) {
            console.error('Could not copy text: ', err);
            showNotification('Failed to copy content', 'error');
        });
    }

    // sharePrompt function is now defined globally in base.html

    // Delete prompt functionality
    function deletePrompt(promptId) {
        if (confirm('Are you sure you want to delete this prompt? This action cannot be undone.')) {
            fetch('/api/prompts/' + promptId, {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json',
                }
            })
            .then(response => response.json())
            .then(result => {
                if (result.status === 'success') {
                    showNotification('Prompt deleted successfully');
                    setTimeout(function() {
                        window.location.href = '/';
                    }, 1000);
                } else {
                    showNotification('Error: ' + result.message, 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showNotification('Failed to delete prompt', 'error');
            });
        }
    }

    // Simple notification function
    function showNotification(message, type = 'success') {
        const notification = document.createElement('div');
        notification.className = 'notification notification-' + type;
        notification.textContent = message;
        notification.style.cssText = 
            'position: fixed;' +
            'top: 20px;' +
            'right: 20px;' +
            'background: ' + (type === 'error' ? '#dc2626' : '#2563eb') + ';' +
            'color: white;' +
            'padding: 1rem;' +
            'border-radius: 0.375rem;' +
            'z-index: 1000;' +
            'max-width: 300px;';
        document.body.appendChild(notification);
        
        setTimeout(function() {
            notification.remove();
        }, 3000);
    }

    // Highlight template variables in content
    document.addEventListener('DOMContentLoaded', function() {
        const contentElement = document.querySelector('#prompt-content code');
        if (contentElement) {
            contentElement.innerHTML = contentElement.innerHTML.replace(
                /\{\{([^}]+)\}\}/g, 
                '<span class="template-var">{' + '{$1}' + '}</span>'
            );
        }
    });
</script>
{% endblock %}