{% extends "base.html" %}
{% block content %}
<div class="rule-details-container" data-rule-id="{{ rule_id }}">
    <!-- Header with loading skeleton -->
    <div class="rule-header mb-6">
        <div class="skeleton-loader skeleton-title"></div>
        <div class="skeleton-loader skeleton-subtitle"></div>
        <div class="progress-bar-container mt-4">
            <div class="progress-bar" id="loading-progress"></div>
            <div class="progress-text">Loading rule details: <span id="loading-status">0%</span></div>
        </div>
    </div>

    <!-- Sections that will be populated via JavaScript -->
    <div class="rule-content-grid">
        <div class="rule-basic-info section skeleton-section" id="basic-info-section">
            <h3>Basic Information</h3>
            <div class="skeleton-loader"></div>
            <div class="skeleton-loader"></div>
        </div>

        <div class="rule-mitre section skeleton-section" id="mitre-section">
            <h3>MITRE ATT&CK</h3>
            <div class="skeleton-loader"></div>
            <div class="skeleton-loader"></div>
        </div>

        <div class="rule-performance section skeleton-section" id="performance-section">
            <h3>Performance Analysis</h3>
            <div class="skeleton-loader"></div>
            <div class="skeleton-loader"></div>
        </div>

        <div class="rule-deployment section skeleton-section" id="deployment-section">
            <h3>Deployment Considerations</h3>
            <div class="skeleton-loader"></div>
            <div class="skeleton-loader"></div>
        </div>
    </div>
</div>

<!-- Add JavaScript for loading data -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const ruleId = document.querySelector('.rule-details-container').dataset.ruleId;
    const progressBar = document.getElementById('loading-progress');
    const progressText = document.getElementById('loading-status');

    let loadedSections = 0;
    const totalSections = 4; // basic, mitre, performance, deployment

    function updateProgress() {
        const percentage = Math.round((loadedSections / totalSections) * 100);
        progressBar.style.width = `${percentage}%`;
        progressText.textContent = `${percentage}%`;

        if (loadedSections === totalSections) {
            // Hide progress bar when complete
            setTimeout(() => {
                document.querySelector('.progress-bar-container').style.display = 'none';
            }, 500);
        }
    }

    function handleError(section, error) {
        document.getElementById(`${section}-section`).innerHTML = `
            <h3>${section.charAt(0).toUpperCase() + section.slice(1).replace('-', ' ')}</h3>
            <div class="error-message">
                <p>Error loading data: ${error}</p>
                <button onclick="location.reload()" class="retry-button">Retry</button>
            </div>
        `;
        loadedSections++;
        updateProgress();
    }

    // Load basic info
    fetch(`/sigmarules/api/rule/${ruleId}/basic`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const rule = data.rule;
                document.querySelector('.rule-header').innerHTML = `
                    <h1 class="text-2xl font-bold">${rule.title}</h1>
                    <div class="rule-level ${rule.level.toLowerCase()}">${rule.level}</div>
                    <p class="rule-description">${rule.description}</p>
                `;

                document.getElementById('basic-info-section').innerHTML = `
                    <h3>Basic Information</h3>
                    <div class="info-grid">
                        <div class="info-item">
                            <span class="info-label">Rule ID:</span>
                            <span class="info-value">${rule.id}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">Title:</span>
                            <span class="info-value">${rule.title}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">Severity:</span>
                            <span class="info-value ${rule.level.toLowerCase()}">${rule.level}</span>
                        </div>
                    </div>
                `;
            } else {
                handleError('basic-info', data.error || 'Unknown error');
                return;
            }
            loadedSections++;
            updateProgress();
        })
        .catch(error => handleError('basic-info', error.message));

    // Load MITRE data
    fetch(`/sigmarules/api/rule/${ruleId}/mitre`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const mitreData = data.mitre_data;
                let html = `<h3>MITRE ATT&CK</h3>`;

                if (mitreData.length > 0) {
                    html += `<div class="mitre-techniques">`;
                    mitreData.forEach(technique => {
                        html += `
                            <div class="mitre-technique">
                                <div class="technique-header">
                                    <span class="technique-id">${technique.technique_id}</span>
                                    <span class="technique-name">${technique.name}</span>
                                </div>
                                <p class="technique-description">${technique.description}</p>
                                <div class="technique-meta">
                                    <span class="technique-tactic">${technique.tactics.join(', ')}</span>
                                    <a href="${technique.url}" target="_blank" class="technique-link">View in MITRE ATT&CK</a>
                                </div>
                            </div>
                        `;
                    });
                    html += `</div>`;
                } else {
                    html += `<p>No MITRE ATT&CK techniques associated with this rule.</p>`;
                }

                document.getElementById('mitre-section').innerHTML = html;
            } else {
                handleError('mitre', data.error || 'Unknown error');
                return;
            }
            loadedSections++;
            updateProgress();
        })
        .catch(error => handleError('mitre', error.message));

    // Load performance data
    fetch(`/sigmarules/api/rule/${ruleId}/analysis`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Render performance section
                const performance = data.performance;
                let perfHtml = `
                    <h3>Performance Analysis</h3>
                    <div class="performance-summary">
                        <div class="performance-score ${performance.impact_level.toLowerCase()}">
                            <span class="score-value">${performance.score}</span>
                            <span class="score-label">Performance Score</span>
                        </div>
                        <div class="performance-impact">
                            <h4>Impact: ${performance.impact_level}</h4>
                            <p>${performance.impact_description}</p>
                        </div>
                    </div>
                    <div class="performance-factors">
                        <h4>Factors</h4>
                        <ul>
                            ${performance.factors.map(factor => `<li>${factor}</li>`).join('')}
                        </ul>
                    </div>
                `;
                document.getElementById('performance-section').innerHTML = perfHtml;

                // Render deployment section
                const deployment = data.deployment;
                let deployHtml = `
                    <h3>Deployment Considerations</h3>
                    <div class="deployment-items">
                `;

                deployment.items.forEach(item => {
                    deployHtml += `
                        <div class="deployment-item ${item.type}">
                            <div class="item-icon">${item.icon}</div>
                            <div class="item-content">
                                <h4>${item.title}</h4>
                                <p>${item.text}</p>
                            </div>
                        </div>
                    `;
                });

                deployHtml += `</div>`;
                document.getElementById('deployment-section').innerHTML = deployHtml;
            } else {
                handleError('performance', data.error || 'Unknown error');
                handleError('deployment', data.error || 'Unknown error');
                return;
            }
            loadedSections += 2; // Count for both performance and deployment
            updateProgress();
        })
        .catch(error => {
            handleError('performance', error.message);
            handleError('deployment', error.message);
        });
});
</script>

<style>
.skeleton-loader {
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 4px;
    height: 20px;
    margin-bottom: 10px;
}

.skeleton-title {
    height: 32px;
    width: 70%;
}

.skeleton-subtitle {
    height: 20px;
    width: 50%;
}

.skeleton-section {
    min-height: 200px;
}

.progress-bar-container {
    width: 100%;
    height: 10px;
    background-color: #333;
    border-radius: 5px;
    margin: 20px 0;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background-color: #4CAF50;
    width: 0%;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 14px;
    color: #aaa;
    margin-top: 5px;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.rule-content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.section {
    background-color: #222;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.error-message {
    color: #ff6b6b;
    padding: 10px;
    border-left: 3px solid #ff6b6b;
    background-color: rgba(255,107,107,0.1);
}

.retry-button {
    background-color: #333;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    margin-top: 10px;
    cursor: pointer;
}

.retry-button:hover {
    background-color: #444;
}
</style>
{% endblock %}