{% extends "base.html" %}
{% block title %}{{ coin.name }} ({{ coin.symbol }}){% endblock %}

{% block content %}
<div x-data="coinDetailSync()" class="space-y-6">
    <!-- Back + Header -->
    <div class="flex items-center gap-4">
        <a href="/market/assets" class="text-gray-400 hover:text-white transition">&larr; Back</a>
        <div class="flex-1">
            <div class="flex items-center gap-3">
                {% set _icon = coin_icon(coin) or coin.image_url %}
                {% if _icon %}
                <img src="{{ _icon }}" alt="{{ coin.symbol }}" data-symbol="{{ coin.symbol }}" class="w-10 h-10 rounded-full" onerror="__iconError(this)">
                {% endif %}
                <div>
                    <h1 class="text-2xl font-bold text-white">{{ coin.name }}</h1>
                    <span class="text-sm text-gray-400 font-mono">{{ coin.symbol }}</span>
                    {% if coin.market_cap_rank %}
                    <span class="ml-2 text-xs px-2 py-0.5 rounded-full bg-gray-800 text-gray-400">#{{ coin.market_cap_rank }}</span>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="flex items-center gap-2">
            {% if not in_watchlist %}
            <button onclick="addToWatchlist('{{ coin.id }}')" id="wl-btn"
                    class="px-3 py-1.5 rounded-lg bg-amber-900/30 text-amber-400 hover:bg-amber-800/50 text-sm transition">
                + Watchlist
            </button>
            {% else %}
            <span class="px-3 py-1.5 rounded-lg bg-amber-900/50 text-amber-300 text-sm">In Watchlist</span>
            {% endif %}
            <button @click="startSync('{{ coin.id }}', '{{ coin.name }}', '{{ coin.asset_type or "crypto" }}')"
                    class="px-3 py-1.5 rounded-lg bg-koin-900/50 text-koin-400 hover:bg-koin-800 text-sm transition">
                Sync
            </button>
            {% if is_admin %}
            <a href="/admin/workflow?coin={{ coin.id }}&name={{ coin.name|urlencode }}&symbol={{ coin.symbol|urlencode }}"
               class="px-3 py-1.5 rounded-lg bg-cyan-900/30 text-cyan-400 hover:bg-cyan-800/50 text-sm transition flex items-center gap-1"
               title="Open Pipeline Workflow">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                Pipeline
            </a>
            {% endif %}
        </div>
    </div>

    <!-- Profile Info -->
    {% if profile %}
    {% set is_us = coin.asset_type == 'stock_us' %}
    {% set ps = '$ ' if is_us else 'Rp ' %}
    {% set pc = 'USD' if is_us else 'IDR' %}
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div class="glass rounded-xl p-4 border border-gray-800">
            <p class="text-xs text-gray-500">Harga ({{ pc }})</p>
            <p class="text-xl font-bold text-white">
                {% if is_us and profile.current_price_usd %}
                    $ {{ profile.current_price_usd|float|price }}
                    <span class="block text-xs text-gray-500 font-normal">~Rp {{ profile.current_price_idr|float|price if profile.current_price_idr else '-' }}</span>
                {% else %}
                    {{ ('Rp ' ~ (profile.current_price_idr|float|price)) if profile.current_price_idr else '-' }}
                {% endif %}
            </p>
        </div>
        <div class="glass rounded-xl p-4 border border-gray-800">
            <p class="text-xs text-gray-500">Perubahan 24j</p>
            <p class="text-xl font-bold {% if profile.price_change_24h and profile.price_change_24h|float > 0 %}text-emerald-400{% elif profile.price_change_24h and profile.price_change_24h|float < 0 %}text-red-400{% else %}text-gray-400{% endif %}">
                {{ (profile.price_change_24h|float|spct2) if profile.price_change_24h else '-' }}
            </p>
        </div>
        <div class="glass rounded-xl p-4 border border-gray-800">
            <p class="text-xs text-gray-500">Market Cap ({{ pc }})</p>
            <p class="text-xl font-bold text-white">
                {% if is_us and profile.market_cap_usd %}
                    $ {{ profile.market_cap_usd|float|abbr }}
                {% else %}
                    {{ ('Rp ' ~ (profile.market_cap_idr|float|idr)) if profile.market_cap_idr else '-' }}
                {% endif %}
            </p>
        </div>
        <div class="glass rounded-xl p-4 border border-gray-800">
            <p class="text-xs text-gray-500">Volume 24j ({{ pc }})</p>
            <p class="text-xl font-bold text-white">
                {% if is_us and profile.total_volume_usd %}
                    $ {{ profile.total_volume_usd|float|abbr }}
                {% else %}
                    {{ ('Rp ' ~ (profile.total_volume_idr|float|idr)) if profile.total_volume_idr else '-' }}
                {% endif %}
            </p>
        </div>
    </div>
    {% if profile.fetched_at %}
    <p class="text-[10px] text-gray-600 text-right -mt-2">Terakhir sync: {{ profile.fetched_at|wib_short }}</p>
    {% endif %}
    {% endif %}

    <!-- Tab Bar -->
    <div class="border-b border-gray-800" x-data="{ tabLoading: false }">
        <nav class="flex gap-1">
            <a href="/market/asset/{{ coin.id }}" @click="tabLoading = true"
               class="px-4 py-2.5 text-sm font-medium border-b-2 transition
               {% if active_tab == 'overview' %}border-koin-500 text-koin-300{% else %}border-transparent text-gray-400 hover:text-white hover:border-gray-600{% endif %}">
                Overview
            </a>
            {% if coin.asset_type in ('stock', 'stock_us') %}
            <a href="/market/asset/{{ coin.id }}?tab=profile" @click="tabLoading = true"
               class="px-4 py-2.5 text-sm font-medium border-b-2 transition
               {% if active_tab == 'profile' %}border-cyan-500 text-cyan-300{% else %}border-transparent text-gray-400 hover:text-white hover:border-gray-600{% endif %}">
                Profil
            </a>
            {% endif %}
            <a href="/market/asset/{{ coin.id }}?tab=analysis&timeframe={{ timeframe or '1h' }}" @click="tabLoading = true"
               class="px-4 py-2.5 text-sm font-medium border-b-2 transition
               {% if active_tab == 'analysis' %}border-koin-500 text-koin-300{% else %}border-transparent text-gray-400 hover:text-white hover:border-gray-600{% endif %}">
                Analisis
            </a>
            <a href="/market/asset/{{ coin.id }}?tab=timeline" @click="tabLoading = true"
               class="px-4 py-2.5 text-sm font-medium border-b-2 transition
               {% if active_tab == 'timeline' %}border-koin-500 text-koin-300{% else %}border-transparent text-gray-400 hover:text-white hover:border-gray-600{% endif %}">
                Timeline
            </a>
            <a href="/market/asset/{{ coin.id }}?tab=range_trading" @click="tabLoading = true"
               class="px-4 py-2.5 text-sm font-medium border-b-2 transition
               {% if active_tab == 'range_trading' %}border-pink-500 text-pink-300{% else %}border-transparent text-gray-400 hover:text-white hover:border-gray-600{% endif %}">
                Range Trading
            </a>
        </nav>
        <!-- Tab loading indicator -->
        <div x-show="tabLoading" x-cloak class="h-0.5 w-full bg-gray-800 overflow-hidden">
            <div class="h-full bg-koin-500 animate-pulse w-1/3"></div>
        </div>
    </div>

    <!-- Tab Content -->
    {% if active_tab == 'overview' %}
        {% include "market/_tab_overview.html" %}
    {% elif active_tab == 'profile' %}
        {% include "market/_tab_profile.html" %}
    {% elif active_tab == 'analysis' %}
        {% include "market/_tab_analysis.html" %}
    {% elif active_tab == 'timeline' %}
        {% include "market/_tab_timeline.html" %}
    {% elif active_tab == 'range_trading' %}
        {% include "market/_tab_range_trading.html" %}
    {% endif %}

    <!-- Sync Modal (SSE streaming, sama dengan data/coins) -->
    <div x-show="showSyncModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4" @keydown.escape.window="!syncLoading && (showSyncModal = false)">
        <div class="fixed inset-0 bg-black/60" @click="!syncLoading && (showSyncModal = false)"></div>
        <div class="relative glass rounded-2xl border border-gray-700 w-full max-w-md p-6 space-y-4" @click.stop>
            <h2 class="text-lg font-bold text-white flex items-center gap-2">
                <svg class="w-5 h-5 text-cyan-400" :class="syncLoading ? 'animate-spin' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                </svg>
                <span>Sync <span class="text-koin-300" x-text="syncCoinName"></span></span>
            </h2>
            <p class="text-xs text-gray-400">Sync lengkap: profile, icon, dan OHLCV data dari <span x-text="['stock','stock_us'].includes(syncCoinAssetType) ? 'Yahoo Finance' : 'CoinGecko'">CoinGecko</span>.</p>

            <!-- Steps List -->
            <div class="space-y-2">
                <template x-for="(step, idx) in syncSteps" :key="step.key">
                    <div class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition"
                         :class="{
                             'bg-gray-800/30 text-gray-500': !step.status || step.status === 'pending',
                             'bg-cyan-900/20 text-cyan-300 border border-cyan-800/30': step.status === 'running',
                             'bg-emerald-900/20 text-emerald-400': step.status === 'done',
                             'bg-red-900/20 text-red-400': step.status === 'error',
                             'bg-gray-800/30 text-gray-500': step.status === 'skip',
                         }">
                        <!-- Status icon -->
                        <div class="w-5 h-5 flex-shrink-0 flex items-center justify-center">
                            <svg x-show="!step.status || step.status === 'pending'" class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke-width="2"/></svg>
                            <svg x-show="step.status === 'running'" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                            <svg x-show="step.status === 'done'" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                            <svg x-show="step.status === 'error'" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                            <svg x-show="step.status === 'skip'" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"/></svg>
                        </div>
                        <!-- Label -->
                        <div class="flex-1 min-w-0">
                            <span class="font-medium" x-text="step.label"></span>
                            <span x-show="step.attempt > 1" class="text-[10px] px-1.5 py-0.5 rounded bg-amber-900/50 text-amber-400 border border-amber-800/50 ml-1"
                                  x-text="'retry #' + (step.attempt - 1)" x-cloak></span>
                            <span x-show="step.detail" class="text-xs opacity-70 ml-1" x-text="step.detail"></span>
                        </div>
                    </div>
                </template>
            </div>

            <!-- Progress bar -->
            <div x-show="syncLoading || syncDone" class="w-full bg-gray-800 rounded-full h-2 overflow-hidden">
                <div class="h-full rounded-full transition-all duration-500 ease-out"
                     :class="syncDone ? (syncAllOk ? 'bg-emerald-500' : 'bg-amber-500') : 'bg-cyan-500'"
                     :style="'width: ' + (syncTotalSteps > 0 ? Math.round(syncCurrentStep / syncTotalSteps * 100) : 0) + '%'"></div>
            </div>

            <!-- Done message -->
            <div x-show="syncDone" x-cloak class="rounded-lg p-3 text-sm border"
                 :class="syncAllOk ? 'bg-emerald-900/30 border-emerald-800 text-emerald-300' : 'bg-amber-900/30 border-amber-800 text-amber-300'">
                <p class="font-medium" x-text="syncDoneMsg"></p>
            </div>

            <div class="flex justify-end gap-2 pt-2">
                <button x-show="syncDone" @click="showSyncModal = false; location.reload()" class="px-4 py-2 text-sm bg-koin-600 hover:bg-koin-700 text-white rounded-lg transition">Refresh Data</button>
                <button @click="showSyncModal = false" :disabled="syncLoading" class="px-4 py-2 text-sm text-gray-400 hover:text-white disabled:opacity-30 transition">Tutup</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function coinDetailSync() {
    return {
        // Sync modal state
        showSyncModal: false,
        syncCoinId: '',
        syncCoinName: '',
        syncCoinAssetType: 'crypto',
        syncLoading: false,
        syncDone: false,
        syncDoneMsg: '',
        syncAllOk: false,
        syncResults: {},
        syncSteps: [],
        syncCurrentStep: 0,
        syncTotalSteps: 0,

        startSync(coinId, coinName, assetType) {
            this.syncCoinId = coinId;
            this.syncCoinName = coinName;
            this.syncCoinAssetType = assetType || 'crypto';
            this.syncLoading = true;
            this.syncDone = false;
            this.syncDoneMsg = '';
            this.syncAllOk = false;
            this.syncResults = {};
            this.syncSteps = [];
            this.syncCurrentStep = 0;
            this.syncTotalSteps = 0;
            this.showSyncModal = true;

            fetch(`/api/v1/market/asset/${coinId}/sync/full`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
            }).then(response => {
                const reader = response.body.getReader();
                const decoder = new TextDecoder();
                let buffer = '';

                const read = () => {
                    reader.read().then(({ done, value }) => {
                        if (done) { this.syncLoading = false; return; }
                        buffer += decoder.decode(value, { stream: true });
                        const lines = buffer.split('\n');
                        buffer = lines.pop();
                        for (const line of lines) {
                            if (line.startsWith('data: ')) {
                                try { this.handleSyncEvent(JSON.parse(line.slice(6))); } catch (e) {}
                            }
                        }
                        read();
                    });
                };
                read();
            }).catch(e => {
                this.syncLoading = false;
                this.syncDone = true;
                this.syncDoneMsg = 'Network error: ' + e.message;
            });
        },

        handleSyncEvent(evt) {
            if (evt.type === 'start') {
                this.syncTotalSteps = evt.total_steps;
                this.syncSteps = (evt.steps || []).map(s => ({
                    ...s, status: 'pending', detail: '', attempt: 0,
                }));
            } else if (evt.type === 'step') {
                this.syncCurrentStep = evt.step;
                const idx = this.syncSteps.findIndex(s => s.key === evt.key);
                if (idx >= 0) {
                    this.syncSteps[idx].status = evt.status;
                    if (evt.detail) this.syncSteps[idx].detail = evt.detail;
                    if (evt.attempt) this.syncSteps[idx].attempt = evt.attempt;
                }
            } else if (evt.type === 'done') {
                this.syncLoading = false;
                this.syncDone = true;
                this.syncDoneMsg = evt.msg;
                this.syncAllOk = evt.all_ok;
                this.syncResults = evt.results || {};
                this.syncCurrentStep = this.syncTotalSteps;
            }
        },
    };
}

function addToWatchlist(coinId) {
    fetch('/api/v1/market/watchlist', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ asset_id: coinId })
    })
    .then(r => r.json())
    .then(d => {
        const btn = document.getElementById('wl-btn');
        btn.textContent = 'In Watchlist';
        btn.className = 'px-3 py-1.5 rounded-lg bg-amber-900/50 text-amber-300 text-sm';
    });
}
</script>

{% if active_tab == 'overview' %}
    {% include "market/_tab_overview_scripts.html" %}
{% elif active_tab == 'analysis' %}
    {% include "market/_tab_analysis_scripts.html" %}
{% elif active_tab == 'timeline' %}
    {% include "market/_tab_timeline_scripts.html" %}
{% elif active_tab == 'range_trading' %}
    {% include "market/_tab_range_trading_scripts.html" %}
{% endif %}
{% endblock %}