{% extends "base.html" %}

{% block title %}{{ title }} - HYDRA-24 Demo{% endblock %}

{% block content %}
<div class="scenario-header">
    <h1>{{ title }}</h1>
    <p class="scenario-description">{{ description }}</p>
</div>

<div class="scenario-layout">
    <div class="control-panel">
        <div class="panel-section">
            <h3>Demo Controls</h3>
            <button class="btn btn-run" id="run-without-hydra">Run Without HYDRA-24</button>
            <button class="btn btn-run btn-primary" id="run-with-hydra">Run With HYDRA-24</button>
        </div>

        <div class="panel-section" id="data-preview">
            <h3>Dataset Info</h3>
            <div id="dataset-stats"></div>
        </div>
    </div>

    <div class="visualization-panel">
        <div id="loading-state" class="loading-state" style="display: none;">
            <div class="spinner"></div>
            <p id="loading-message">Running demo...</p>
        </div>

        <div id="results-view" style="display: none;">
            <div class="results-header">
                <h2 id="results-title"></h2>
                <div class="results-badges">
                    <span class="badge" id="mode-badge"></span>
                    <span class="badge" id="status-badge"></span>
                </div>
            </div>

            <div id="metrics-display"></div>

            <div id="compliance-findings" style="display: none;">
                <h3>Compliance Findings</h3>
                <div id="findings-list"></div>
            </div>

            <div id="dag-visualization" style="display: none;">
                <h3>Computation DAG</h3>
                <p class="dag-description">Interactive graph showing how data flows through the pipeline. Drag nodes to explore. Hover for details.</p>
                <svg id="dag-svg" width="100%" height="500"></svg>
            </div>

            <div id="business-impact" style="display: none;">
                <h3>Business Impact</h3>
                <div id="impact-metrics"></div>
            </div>
        </div>
    </div>

    <div class="sidebar-panel">
        <div class="panel-section">
            <h3>Quick Stats</h3>
            <div id="quick-stats"></div>
        </div>

        <div class="panel-section" id="export-section" style="display: none;">
            <h3>Export</h3>
            <button class="btn btn-small" id="export-json">Export JSON</button>
        </div>
    </div>
</div>

<script>
// Pass scenario name to JavaScript
window.SCENARIO = "{{ scenario }}";
</script>

<style>
.scenario-header {
    margin-bottom: 30px;
}

.scenario-header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: #fbbf24;
}

.scenario-description {
    font-size: 1.2rem;
    color: #9ca3af;
}

.scenario-layout {
    display: grid;
    grid-template-columns: 300px 1fr 250px;
    gap: 20px;
    min-height: 600px;
}

.control-panel, .visualization-panel, .sidebar-panel {
    background: #1f2937;
    border-radius: 12px;
    padding: 20px;
}

.panel-section {
    margin-bottom: 25px;
}

.panel-section h3 {
    color: #fbbf24;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.btn-run {
    width: 100%;
    margin-bottom: 10px;
    padding: 15px;
    background: #374151;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-run:hover {
    background: #4b5563;
}

.btn-run.btn-primary {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    color: #000;
}

.btn-run.btn-primary:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(251, 191, 36, 0.4);
}

.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.spinner {
    border: 4px solid #374151;
    border-top: 4px solid #fbbf24;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #374151;
}

.results-badges {
    display: flex;
    gap: 10px;
}

.badge {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
}

.badge.success {
    background: #10b981;
    color: #fff;
}

.badge.warning {
    background: #f59e0b;
    color: #000;
}

.badge.error {
    background: #ef4444;
    color: #fff;
}

.badge.info {
    background: #3b82f6;
    color: #fff;
}

.finding-card {
    background: #111827;
    border-left: 4px solid #ef4444;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.finding-card.severity-critical {
    border-left-color: #ef4444;
}

.finding-card.severity-warning {
    border-left-color: #f59e0b;
}

.finding-card.severity-info {
    border-left-color: #3b82f6;
}

.finding-title {
    font-weight: 600;
    color: #fbbf24;
    margin-bottom: 8px;
}

.finding-description {
    color: #d1d5db;
    margin-bottom: 8px;
    line-height: 1.5;
}

.finding-citation {
    font-size: 0.85rem;
    color: #9ca3af;
    font-style: italic;
}

.metric-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #374151;
}

.metric-label {
    color: #9ca3af;
}

.metric-value {
    color: #fbbf24;
    font-weight: 600;
}

.impact-card {
    background: #111827;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
}

.impact-amount {
    font-size: 2rem;
    color: #10b981;
    font-weight: bold;
    margin-bottom: 5px;
}

.impact-label {
    color: #9ca3af;
}

.btn-small {
    width: 100%;
    padding: 10px;
    background: #374151;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    margin-bottom: 8px;
    transition: background 0.3s;
}

.btn-small:hover {
    background: #4b5563;
}

#dag-svg {
    background: #111827;
    border-radius: 8px;
}

.dag-description {
    color: #9ca3af;
    font-size: 0.9rem;
    margin-bottom: 15px;
    font-style: italic;
}

.node {
    cursor: grab;
}

.node:active {
    cursor: grabbing;
}

@media (max-width: 1200px) {
    .scenario-layout {
        grid-template-columns: 1fr;
    }

    .sidebar-panel {
        display: none;
    }
}
</style>

{% endblock %}

{% block extra_scripts %}
<script src="{{ url_for('static', filename='js/charts.js') }}"></script>
{% endblock %}