{% extends "base.html" %}
{% block title %}Market Calendars{% endblock %}

{% block content %}
<div class="space-y-6" x-data="calendarPage()" x-init="load()">
    <!-- Header -->
    <div class="flex items-center gap-3">
        <a href="/market/assets" class="text-gray-500 hover:text-white transition">←</a>
        <h1 class="text-2xl font-bold text-white">Market Calendars</h1>
    </div>

    <!-- Tabs -->
    <div class="flex flex-wrap gap-2">
        <template x-for="tab in tabs" :key="tab.key">
            <button @click="activeTab = tab.key"
                    class="px-4 py-2 rounded-full text-sm font-medium transition"
                    :class="activeTab === tab.key ? 'bg-koin-600 text-white' : 'bg-gray-800 text-gray-400 hover:bg-gray-700'"
                    x-text="tab.label + (tab.count > 0 ? ' (' + tab.count + ')' : '')">
            </button>
        </template>
    </div>

    <!-- Loading -->
    <template x-if="loading">
        <div class="text-center py-12">
            <div class="inline-block w-8 h-8 border-3 border-gray-600 border-t-koin-400 rounded-full animate-spin"></div>
            <p class="text-gray-500 text-sm mt-3">Memuat data kalender...</p>
        </div>
    </template>

    <!-- Error -->
    <template x-if="!loading && error">
        <div class="glass rounded-xl border border-red-800/30 p-6 text-center">
            <p class="text-red-400 text-sm" x-text="error"></p>
        </div>
    </template>

    <!-- Earnings Calendar -->
    <template x-if="!loading && !error && activeTab === 'earnings'">
        <div class="glass rounded-xl border border-gray-800 p-5">
            <h3 class="text-sm font-semibold text-yellow-400 mb-3 uppercase tracking-wider">Earnings Calendar</h3>
            <template x-if="earnings.length > 0">
                <div class="overflow-x-auto">
                    <table class="w-full text-xs">
                        <thead><tr class="border-b border-gray-800 text-gray-500">
                            <th class="text-left py-2 px-2">Date</th>
                            <th class="text-left py-2 px-2">Symbol</th>
                            <th class="text-left py-2 px-2">Company</th>
                            <th class="text-right py-2 px-2">EPS Est.</th>
                            <th class="text-right py-2 px-2">Revenue Est.</th>
                        </tr></thead>
                        <tbody>
                            <template x-for="(row, i) in earnings" :key="i">
                                <tr class="border-b border-gray-800/30 hover:bg-gray-800/30">
                                    <td class="py-1.5 px-2 text-gray-400" x-text="fmtDate(row['Earnings Date'] || row.date || row.Date || Object.values(row)[0])"></td>
                                    <td class="py-1.5 px-2">
                                        <a :href="'/market/asset/' + (row.Symbol || row.symbol || '')" class="text-koin-400 hover:text-koin-300 font-medium" x-text="row.Symbol || row.symbol || '-'"></a>
                                    </td>
                                    <td class="py-1.5 px-2 text-gray-300" x-text="row['Company Name'] || row.company || row.longName || '-'"></td>
                                    <td class="py-1.5 px-2 text-right text-white font-mono" x-text="fmtNum(row['EPS Estimate'] || row.epsEstimate)"></td>
                                    <td class="py-1.5 px-2 text-right text-white font-mono" x-text="fmtBig(row['Revenue Estimate'] || row.revenueEstimate)"></td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            </template>
            <template x-if="earnings.length === 0">
                <p class="text-gray-500 text-sm text-center py-6">Tidak ada data earnings calendar.</p>
            </template>
        </div>
    </template>

    <!-- IPO Calendar -->
    <template x-if="!loading && !error && activeTab === 'ipo'">
        <div class="glass rounded-xl border border-gray-800 p-5">
            <h3 class="text-sm font-semibold text-emerald-400 mb-3 uppercase tracking-wider">IPO Calendar</h3>
            <template x-if="ipo.length > 0">
                <div class="overflow-x-auto">
                    <table class="w-full text-xs">
                        <thead><tr class="border-b border-gray-800 text-gray-500">
                            <th class="text-left py-2 px-2">Date</th>
                            <th class="text-left py-2 px-2">Symbol</th>
                            <th class="text-left py-2 px-2">Company</th>
                            <th class="text-right py-2 px-2">Price Range</th>
                            <th class="text-right py-2 px-2">Shares</th>
                        </tr></thead>
                        <tbody>
                            <template x-for="(row, i) in ipo" :key="i">
                                <tr class="border-b border-gray-800/30 hover:bg-gray-800/30">
                                    <td class="py-1.5 px-2 text-gray-400" x-text="fmtDate(row.date || row.Date || Object.values(row)[0])"></td>
                                    <td class="py-1.5 px-2 text-koin-400 font-medium" x-text="row.Symbol || row.symbol || '-'"></td>
                                    <td class="py-1.5 px-2 text-gray-300" x-text="row['Company Name'] || row.company || row.name || '-'"></td>
                                    <td class="py-1.5 px-2 text-right text-white font-mono" x-text="row['Price Range'] || row.priceRange || '-'"></td>
                                    <td class="py-1.5 px-2 text-right text-white font-mono" x-text="fmtBig(row.Shares || row.shares)"></td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            </template>
            <template x-if="ipo.length === 0">
                <p class="text-gray-500 text-sm text-center py-6">Tidak ada data IPO calendar.</p>
            </template>
        </div>
    </template>

    <!-- Stock Splits -->
    <template x-if="!loading && !error && activeTab === 'splits'">
        <div class="glass rounded-xl border border-gray-800 p-5">
            <h3 class="text-sm font-semibold text-blue-400 mb-3 uppercase tracking-wider">Stock Splits</h3>
            <template x-if="splits.length > 0">
                <div class="overflow-x-auto">
                    <table class="w-full text-xs">
                        <thead><tr class="border-b border-gray-800 text-gray-500">
                            <th class="text-left py-2 px-2">Date</th>
                            <th class="text-left py-2 px-2">Symbol</th>
                            <th class="text-left py-2 px-2">Company</th>
                            <th class="text-right py-2 px-2">Ratio</th>
                        </tr></thead>
                        <tbody>
                            <template x-for="(row, i) in splits" :key="i">
                                <tr class="border-b border-gray-800/30 hover:bg-gray-800/30">
                                    <td class="py-1.5 px-2 text-gray-400" x-text="fmtDate(row.date || row.Date || Object.values(row)[0])"></td>
                                    <td class="py-1.5 px-2 text-koin-400 font-medium" x-text="row.Symbol || row.symbol || '-'"></td>
                                    <td class="py-1.5 px-2 text-gray-300" x-text="row['Company Name'] || row.company || row.name || '-'"></td>
                                    <td class="py-1.5 px-2 text-right text-white font-mono" x-text="row.Ratio || row.ratio || row['Stock Splits'] || '-'"></td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            </template>
            <template x-if="splits.length === 0">
                <p class="text-gray-500 text-sm text-center py-6">Tidak ada data stock splits.</p>
            </template>
        </div>
    </template>

    <!-- Economic Events -->
    <template x-if="!loading && !error && activeTab === 'economic'">
        <div class="glass rounded-xl border border-gray-800 p-5">
            <h3 class="text-sm font-semibold text-orange-400 mb-3 uppercase tracking-wider">Economic Events</h3>
            <template x-if="economic.length > 0">
                <div class="overflow-x-auto">
                    <table class="w-full text-xs">
                        <thead><tr class="border-b border-gray-800 text-gray-500">
                            <th class="text-left py-2 px-2">Date</th>
                            <th class="text-left py-2 px-2">Event</th>
                            <th class="text-left py-2 px-2">Country</th>
                            <th class="text-right py-2 px-2">Forecast</th>
                            <th class="text-right py-2 px-2">Previous</th>
                        </tr></thead>
                        <tbody>
                            <template x-for="(row, i) in economic" :key="i">
                                <tr class="border-b border-gray-800/30 hover:bg-gray-800/30">
                                    <td class="py-1.5 px-2 text-gray-400" x-text="fmtDate(row.date || row.Date || row['Start Date'] || Object.values(row)[0])"></td>
                                    <td class="py-1.5 px-2 text-gray-300" x-text="row.event || row.Event || row['Event Name'] || '-'"></td>
                                    <td class="py-1.5 px-2 text-gray-400" x-text="row.country || row.Country || '-'"></td>
                                    <td class="py-1.5 px-2 text-right text-white font-mono" x-text="row.forecast || row.Forecast || '-'"></td>
                                    <td class="py-1.5 px-2 text-right text-gray-400 font-mono" x-text="row.previous || row.Previous || '-'"></td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            </template>
            <template x-if="economic.length === 0">
                <p class="text-gray-500 text-sm text-center py-6">Tidak ada data economic events.</p>
            </template>
        </div>
    </template>
</div>

{% endblock %}

{% block scripts %}
<script>
function calendarPage() {
    return {
        loading: false,
        error: null,
        activeTab: 'earnings',
        earnings: [],
        ipo: [],
        splits: [],
        economic: [],
        get tabs() {
            return [
                { key: 'earnings', label: 'Earnings', count: this.earnings.length },
                { key: 'ipo', label: 'IPO', count: this.ipo.length },
                { key: 'splits', label: 'Stock Splits', count: this.splits.length },
                { key: 'economic', label: 'Economic Events', count: this.economic.length },
            ];
        },
        async load() {
            this.loading = true;
            try {
                const r = await fetch('/api/v1/market/market-calendars');
                if (!r.ok) {
                    this.error = 'Gagal memuat data kalender (HTTP ' + r.status + ')';
                    this.loading = false;
                    return;
                }
                const data = await r.json();
                this.earnings = Array.isArray(data.earnings) ? data.earnings : [];
                this.ipo = Array.isArray(data.ipo) ? data.ipo : [];
                this.splits = Array.isArray(data.splits) ? data.splits : [];
                this.economic = Array.isArray(data.economic_events) ? data.economic_events : [];
                // Auto-select first tab with data
                if (this.earnings.length > 0) this.activeTab = 'earnings';
                else if (this.ipo.length > 0) this.activeTab = 'ipo';
                else if (this.splits.length > 0) this.activeTab = 'splits';
                else if (this.economic.length > 0) this.activeTab = 'economic';
            } catch (e) {
                this.error = 'Gagal memuat data kalender.';
            }
            this.loading = false;
        },
        fmtDate(d) {
            if (!d) return '-';
            try {
                const dt = new Date(d);
                if (isNaN(dt.getTime())) return String(d).substring(0, 10);
                return dt.toLocaleDateString('id-ID', { day: '2-digit', month: 'short', year: 'numeric' });
            } catch { return String(d).substring(0, 10); }
        },
        fmtNum(v) {
            if (v == null) return '-';
            const n = Number(v);
            return isNaN(n) ? String(v) : n.toFixed(2);
        },
        fmtBig(v) {
            if (v == null) return '-';
            const n = Number(v);
            if (isNaN(n)) return String(v);
            if (Math.abs(n) >= 1e9) return (n / 1e9).toFixed(1) + 'B';
            if (Math.abs(n) >= 1e6) return (n / 1e6).toFixed(0) + 'M';
            return n.toLocaleString();
        }
    };
}
</script>
{% endblock %}