{% extends "base.html" %}
{% block title %}Timeline - History{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div>
            <h1 class="text-2xl font-bold text-white">Prediction History</h1>
            <p class="text-sm text-gray-400">Riwayat antrian prediksi dan akurasi</p>
        </div>
        <a href="/timeline/" class="text-sm text-koin-400 hover:text-koin-300 transition">
            &larr; Back to Queue
        </a>
    </div>

    <!-- History Table -->
    {% if recent_queues %}
    <div class="glass rounded-xl border border-gray-800 overflow-hidden">
        <table class="w-full">
            <thead>
                <tr class="border-b border-gray-800 text-xs text-gray-400">
                    <th class="px-4 py-3 text-left">Date</th>
                    <th class="px-4 py-3 text-left">{{ item_label }}</th>
                    <th class="px-4 py-3 text-right">Entries</th>
                    <th class="px-4 py-3 text-right">Total Profit</th>
                    <th class="px-4 py-3 text-right">Total Fees</th>
                    <th class="px-4 py-3 text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-800/50">
                {% for q in recent_queues %}
                <tr class="hover:bg-gray-800/30 transition">
                    <td class="px-4 py-3 text-sm text-white font-mono">{{ q.prediction_date }}</td>
                    <td class="px-4 py-3 text-sm text-gray-300">{{ q.asset_id }}</td>
                    <td class="px-4 py-3 text-sm text-right text-white">{{ q.entries }}</td>
                    <td class="px-4 py-3 text-sm text-right font-mono {% if q.total_profit and q.total_profit > 0 %}text-emerald-400{% elif q.total_profit and q.total_profit < 0 %}text-red-400{% else %}text-gray-400{% endif %}">
                        {% if q.total_profit %}Rp {{ q.total_profit|idr }}{% else %}-{% endif %}
                    </td>
                    <td class="px-4 py-3 text-sm text-right font-mono text-amber-400">
                        {% if q.total_fees %}Rp {{ q.total_fees|idr }}{% else %}-{% endif %}
                    </td>
                    <td class="px-4 py-3 text-sm text-right">
                        <a href="/api/v1/timeline/queue/{{ q.asset_id }}?date={{ q.prediction_date }}"
                           target="_blank"
                           class="text-koin-400 hover:text-koin-300 text-xs">
                            View JSON
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="glass rounded-xl border border-gray-800 p-12 text-center">
        <p class="text-gray-500 text-lg mb-2">Belum ada riwayat prediksi</p>
        <p class="text-gray-600 text-sm">Generate dan save timeline terlebih dahulu</p>
        <a href="/timeline/" class="inline-block mt-4 px-4 py-2 bg-koin-600 hover:bg-koin-700 rounded-lg text-sm font-medium text-white transition">
            Go to Timeline
        </a>
    </div>
    {% endif %}
</div>
{% endblock %}