<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
    <div class="flex items-center justify-between mb-6">
        <div>
            <h3 class="text-lg font-semibold text-gray-900">Conversation Detail</h3>
            <p class="text-sm text-gray-500 mt-0.5">
                <span class="font-mono text-xs">{{ conv.session_id[:16] }}...</span>
                &nbsp;·&nbsp;{{ conv.project_name }}
                &nbsp;·&nbsp;{{ conv.start_date }}
            </p>
        </div>
        <div class="text-right">
            <div class="text-2xl font-bold
                {% if conv.total_cost >= 5 %}text-red-600
                {% elif conv.total_cost >= 1 %}text-orange-600
                {% elif conv.total_cost >= 0.10 %}text-yellow-600
                {% else %}text-[#0770E3]{% endif %}">
                ${{ "%.4f"|format(conv.total_cost) }}
            </div>
            <div class="text-xs text-gray-500">{{ conv.duration_str }} · {{ conv.turn_count }} turns</div>
        </div>
    </div>

    <!-- Token Breakdown + Models -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
        <div class="bg-gray-50 rounded-lg p-3 text-center">
            <div class="text-xs text-gray-500 mb-1">Input</div>
            <div class="font-semibold text-gray-900">{{ conv.input_tokens|format_compact }}</div>
        </div>
        <div class="bg-gray-50 rounded-lg p-3 text-center">
            <div class="text-xs text-gray-500 mb-1">Output</div>
            <div class="font-semibold text-gray-900">{{ conv.output_tokens|format_compact }}</div>
        </div>
        <div class="bg-gray-50 rounded-lg p-3 text-center">
            <div class="text-xs text-gray-500 mb-1">Cache Write</div>
            <div class="font-semibold text-gray-900">{{ conv.cache_creation_tokens|format_compact }}</div>
        </div>
        <div class="bg-gray-50 rounded-lg p-3 text-center">
            <div class="text-xs text-gray-500 mb-1">Cache Read</div>
            <div class="font-semibold text-gray-900">{{ conv.cache_read_tokens|format_compact }}</div>
        </div>
    </div>

    <!-- Models Used -->
    {% if conv.model_badges %}
    <div class="flex flex-wrap gap-2 mb-6">
        {% for badge in conv.model_badges %}
        <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
            {{ badge }}
        </span>
        {% endfor %}
        <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600">
            Cache {{ conv.cache_efficiency }}%
        </span>
    </div>
    {% endif %}

    <!-- Context Growth Chart -->
    {% if conv.context_per_turn and conv.context_per_turn|length > 1 %}
    <div>
        <h4 class="text-sm font-medium text-gray-700 mb-3">Context Window Growth</h4>
        <div class="h-48">
            <canvas id="contextGrowthChart"></canvas>
        </div>
    </div>

    <script>
    (function() {
        const existing = Chart.getChart('contextGrowthChart');
        if (existing) existing.destroy();

        requestAnimationFrame(function() {
            requestAnimationFrame(function() {
                const ctx = document.getElementById('contextGrowthChart');
                if (!ctx) return;

                const contextData = {{ conv.context_per_turn|tojson|safe }};
                const labels = contextData.map((_, i) => 'Turn ' + (i + 1));
                const dataK = contextData.map(v => Math.round(v / 1000));
                const limit200K = 200;

                new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [
                            {
                                label: 'Context (K tokens)',
                                data: dataK,
                                borderColor: '#0770E3',
                                backgroundColor: 'rgba(7,112,227,0.1)',
                                fill: true,
                                tension: 0.3,
                                pointRadius: contextData.length > 30 ? 0 : 3,
                            },
                            {
                                label: '200K limit',
                                data: Array(contextData.length).fill(limit200K),
                                borderColor: '#EF4444',
                                borderDash: [6, 3],
                                borderWidth: 1.5,
                                pointRadius: 0,
                                fill: false,
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            x: {
                                title: { display: true, text: 'Turn' },
                                ticks: {
                                    maxTicksLimit: 10,
                                    font: { size: 11 }
                                }
                            },
                            y: {
                                beginAtZero: true,
                                title: { display: true, text: 'Context (K tokens)' },
                                ticks: { font: { size: 11 } }
                            }
                        },
                        plugins: {
                            legend: { position: 'bottom' },
                            tooltip: {
                                callbacks: {
                                    label: function(ctx) {
                                        if (ctx.dataset.label === '200K limit') return '200K limit';
                                        return ctx.dataset.label + ': ' + ctx.raw + 'K (' + (ctx.raw / 200 * 100).toFixed(0) + '% of limit)';
                                    }
                                }
                            }
                        }
                    }
                });
            });
        });
    })();
    </script>
    {% else %}
    <p class="text-sm text-gray-400 italic">Not enough turns to chart context growth.</p>
    {% endif %}
</div>
