<!-- htmlhint doctype-first:false -->
<div class="trace-detail-header">
    <div>
        <h2 style="margin: 0; font-size: 1.5rem; color: #1f2937;">Trace Details</h2>
        <p style="margin: 0.5rem 0 0 0; color: #6b7280;">
            <code>{{ trace.trace_id }}</code>
        </p>
    </div>
    <button @click="selectedTrace = null" style="background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #6b7280;">✕</button>
</div>

<div class="trace-detail-body">
    <!-- Trace Metadata -->
    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 2rem;">
        <div>
            <h3 style="font-size: 0.875rem; color: #6b7280; margin-bottom: 0.5rem;">REQUEST</h3>
            <p style="margin: 0.25rem 0;"><strong>Method:</strong> {{ trace.http_method }}</p>
            <p style="margin: 0.25rem 0;"><strong>URL:</strong> <code>{{ trace.http_url }}</code></p>
            <p style="margin: 0.25rem 0;"><strong>Status:</strong>
                <span class="status-badge status-{{ trace.status }}">
                    {% if trace.status == 'ok' %}✓{% else %}✗{% endif %} {{ trace.http_status_code }}
                </span>
            </p>
        </div>
        <div>
            <h3 style="font-size: 0.875rem; color: #6b7280; margin-bottom: 0.5rem;">TIMING</h3>
            <p style="margin: 0.25rem 0;"><strong>Start:</strong> {{ trace.start_time.strftime('%Y-%m-%d %H:%M:%S.%f')[:-3] }}</p>
            <p style="margin: 0.25rem 0;"><strong>End:</strong> {{ trace.end_time.strftime('%Y-%m-%d %H:%M:%S.%f')[:-3] if trace.end_time else 'In Progress' }}</p>
            <p style="margin: 0.25rem 0;"><strong>Duration:</strong>
                <span class="duration-badge {% if trace.duration_ms < 100 %}duration-fast{% elif trace.duration_ms < 500 %}duration-medium{% else %}duration-slow{% endif %}">
                    {{ "%.2f"|format(trace.duration_ms) }} ms
                </span>
            </p>
        </div>
        <div>
            <h3 style="font-size: 0.875rem; color: #6b7280; margin-bottom: 0.5rem;">USER CONTEXT</h3>
            <p style="margin: 0.25rem 0;"><strong>User:</strong> {{ trace.user_email or 'anonymous' }}</p>
            <p style="margin: 0.25rem 0;"><strong>IP:</strong> {{ trace.ip_address or 'N/A' }}</p>
            <p style="margin: 0.25rem 0;"><strong>User Agent:</strong> {{ (trace.user_agent[:50] + '...') if trace.user_agent and trace.user_agent|length > 50 else (trace.user_agent or 'N/A') }}</p>
        </div>
        {% if trace.status_message %}
        <div>
            <h3 style="font-size: 0.875rem; color: #6b7280; margin-bottom: 0.5rem;">STATUS MESSAGE</h3>
            <p style="margin: 0.25rem 0; color: #ef4444;">{{ trace.status_message }}</p>
        </div>
        {% endif %}
    </div>

    <!-- Spans Visualization -->
    {% if trace.spans %}
    <div x-data="{ viewMode: 'gantt' }" style="margin-bottom: 1rem;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
            <h3 style="font-size: 1.125rem; color: #1f2937; margin: 0;">Execution Timeline</h3>
            <div style="display: flex; gap: 0.5rem;">
                <button @click="viewMode = 'gantt'" :class="viewMode === 'gantt' ? 'active' : ''" class="view-toggle-btn">
                    📊 Gantt Chart
                </button>
                <button @click="viewMode = 'flame'" :class="viewMode === 'flame' ? 'active' : ''" class="view-toggle-btn">
                    🔥 Flame Graph
                </button>
                <button @click="viewMode = 'waterfall'" :class="viewMode === 'waterfall' ? 'active' : ''" class="view-toggle-btn">
                    📋 Simple View
                </button>
            </div>
        </div>

        <!-- Interactive Gantt Chart -->
        <div x-show="viewMode === 'gantt'" id="gantt-chart-container"></div>

        <!-- Interactive Flame Graph -->
        <div x-show="viewMode === 'flame'" id="flame-graph-container"></div>

        <!-- Simple Waterfall View -->
        <div x-show="viewMode === 'waterfall'" class="waterfall">
        {% set total_duration = trace.duration_ms %}
        {% set trace_start = trace.start_time %}

        {% for span in trace.spans|sort(attribute='start_time') %}
        <div class="span-row">
            <div class="span-name" title="{{ span.name }}">
                {{ '  ' * (0 if not span.parent_span_id else 1) }}{{ span.name }}
            </div>
            <div class="span-timeline">
                {% set span_duration_ms = span.duration_ms or 0 %}
                {% set span_offset_ms = ((span.start_time - trace_start).total_seconds() * 1000) %}
                {% set left_percent = (span_offset_ms / total_duration * 100) if total_duration > 0 else 0 %}
                {% set width_percent = (span_duration_ms / total_duration * 100) if total_duration > 0 else 0 %}

                <div class="span-bar {% if span.status == 'error' %}error{% endif %}"
                     style="left: {{ left_percent }}%; width: {{ width_percent }}%;"
                     title="{{ span.name }}: {{ '%.2f'|format(span_duration_ms) }}ms">
                    {% if width_percent > 10 %}{{ span.name }}{% endif %}
                </div>
            </div>
            <div class="span-duration">{{ "%.2f"|format(span_duration_ms) }} ms</div>
        </div>

        <!-- Show events if any -->
        {% if span.events %}
        {% for event in span.events %}
        <div style="padding-left: 3rem; font-size: 0.875rem; color: #6b7280; padding-top: 0.25rem;">
            <span style="color: {% if event.severity == 'error' %}#ef4444{% elif event.severity == 'warning' %}#f59e0b{% else %}#6b7280{% endif %};">
                {{ event.name }}
                {% if event.message %}: {{ event.message }}{% endif %}
            </span>
        </div>
        {% endfor %}
        {% endif %}
        {% endfor %}
        </div>
        </div>

        <!-- Initialize Gantt Chart -->
        <script>
            // Initialize Gantt chart when the trace detail is loaded
            (function() {
                // Wait for DOM to be ready
                setTimeout(function() {
                    if (typeof GanttChart === 'undefined') {
                        console.error('GanttChart class not loaded. Make sure gantt-chart.js is included.');
                        return;
                    }

                    const traceData = {
                        trace_id: "{{ trace.trace_id }}",
                        duration_ms: {{ trace.duration_ms or 0 }},
                        start_time: "{{ trace.start_time.isoformat() }}",
                        end_time: "{{ trace.end_time.isoformat() if trace.end_time else trace.start_time.isoformat() }}",
                        spans: [
                            {% for span in trace.spans %}
                            {
                                span_id: "{{ span.span_id }}",
                                name: "{{ span.name|replace('"', '\\"') }}",
                                kind: "{{ span.kind }}",
                                status: "{{ span.status }}",
                                start_time: "{{ span.start_time.isoformat() }}",
                                end_time: "{{ span.end_time.isoformat() if span.end_time else span.start_time.isoformat() }}",
                                duration_ms: {{ span.duration_ms or 0 }},
                                parent_span_id: {{ ('"%s"' % span.parent_span_id) if span.parent_span_id else 'null' }},
                                attributes: {{ span.attributes|tojson if span.attributes else '{}' }}
                            }{{ ',' if not loop.last else '' }}
                            {% endfor %}
                        ]
                    };

                    console.log('Initializing Gantt chart with', traceData.spans.length, 'spans');

                    // Initialize the chart
                    window.ganttChart = new GanttChart('gantt-chart-container', traceData);
                    console.log('Gantt chart initialized successfully');
                }, 100);
            })();
        </script>

        <!-- Initialize Flame Graph -->
        <script>
            // Initialize Flame graph when the trace detail is loaded
            (function() {
                // Wait for DOM to be ready
                setTimeout(function() {
                    if (typeof FlameGraph === 'undefined') {
                        console.error('FlameGraph class not loaded. Make sure flame-graph.js is included.');
                        return;
                    }

                    const traceData = {
                        trace_id: "{{ trace.trace_id }}",
                        duration_ms: {{ trace.duration_ms or 0 }},
                        start_time: "{{ trace.start_time.isoformat() }}",
                        end_time: "{{ trace.end_time.isoformat() if trace.end_time else trace.start_time.isoformat() }}",
                        spans: [
                            {% for span in trace.spans %}
                            {
                                span_id: "{{ span.span_id }}",
                                name: "{{ span.name|replace('"', '\\"') }}",
                                kind: "{{ span.kind }}",
                                status: "{{ span.status }}",
                                start_time: "{{ span.start_time.isoformat() }}",
                                end_time: "{{ span.end_time.isoformat() if span.end_time else span.start_time.isoformat() }}",
                                duration_ms: {{ span.duration_ms or 0 }},
                                parent_span_id: {{ ('"%s"' % span.parent_span_id) if span.parent_span_id else 'null' }},
                                attributes: {{ span.attributes|tojson if span.attributes else '{}' }}
                            }{{ ',' if not loop.last else '' }}
                            {% endfor %}
                        ]
                    };

                    console.log('Initializing Flame graph with', traceData.spans.length, 'spans');

                    // Initialize the flame graph
                    window.flameGraph = new FlameGraph('flame-graph-container', traceData);
                    console.log('Flame graph initialized successfully');
                }, 100);
            })();
        </script>
    {% else %}
    <p style="color: #6b7280; text-align: center; padding: 2rem;">No spans recorded for this trace</p>
    {% endif %}

    <!-- Attributes -->
    {% if trace.attributes %}
    <h3 style="font-size: 1.125rem; color: #1f2937; margin: 2rem 0 1rem 0;">Additional Attributes</h3>
    <div style="background: #f9fafb; padding: 1rem; border-radius: 0.375rem; font-family: monospace; font-size: 0.875rem;">
        <pre style="margin: 0; white-space: pre-wrap;">{{ trace.attributes|tojson(indent=2) }}</pre>
    </div>
    {% endif %}
</div>
