{% extends "settings/_layout.html" %}
{% block title %}Settings - Export{% endblock %}

{% block settings_content %}
<div class="space-y-6" x-data="exportApp()">
    <h1 class="text-2xl font-bold text-white">Data Export</h1>

    <!-- Quick Exports -->
    <div class="glass rounded-xl border border-gray-800 p-6">
        <h3 class="text-lg font-semibold text-white mb-4">Quick Export</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <a href="/api/v1/export/signals" class="group block p-4 bg-gray-800/50 rounded-lg hover:bg-gray-800 border border-gray-700/50 hover:border-koin-700/50 transition">
                <div class="flex items-center gap-2 mb-1">
                    <svg class="w-4 h-4 text-koin-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
                    <p class="text-sm font-semibold text-white">All Signals</p>
                </div>
                <p class="text-xs text-gray-500">Export semua sinyal trading (JSON)</p>
            </a>
            <a href="/api/v1/export/portfolio" class="group block p-4 bg-gray-800/50 rounded-lg hover:bg-gray-800 border border-gray-700/50 hover:border-koin-700/50 transition">
                <div class="flex items-center gap-2 mb-1">
                    <svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
                    <p class="text-sm font-semibold text-white">Portfolio</p>
                </div>
                <p class="text-xs text-gray-500">Export portofolio & trade history (JSON)</p>
            </a>
            <a href="/api/v1/export/signals?status=active" class="group block p-4 bg-gray-800/50 rounded-lg hover:bg-gray-800 border border-gray-700/50 hover:border-koin-700/50 transition">
                <div class="flex items-center gap-2 mb-1">
                    <svg class="w-4 h-4 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                    <p class="text-sm font-semibold text-white">Active Signals Only</p>
                </div>
                <p class="text-xs text-gray-500">Export sinyal yang masih aktif (JSON)</p>
            </a>
        </div>
    </div>

    <!-- OHLCV Export -->
    {% if coin_data %}
    <div class="glass rounded-xl border border-gray-800 p-6">
        <h3 class="text-lg font-semibold text-white mb-4">OHLCV Export (CSV)</h3>

        <!-- Filters -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
            <!-- Date Range -->
            <div>
                <label class="block text-xs text-gray-500 uppercase tracking-wider mb-2">Date Range</label>
                <div class="flex items-center gap-2">
                    <input type="date" x-model="startDate" @change="updatePreview()"
                           class="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:ring-1 focus:ring-koin-500 focus:outline-none">
                    <span class="text-gray-500 text-sm">to</span>
                    <input type="date" x-model="endDate" @change="updatePreview()"
                           class="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:ring-1 focus:ring-koin-500 focus:outline-none">
                </div>
            </div>

            <!-- Timeframes -->
            <div>
                <label class="block text-xs text-gray-500 uppercase tracking-wider mb-2">Timeframes</label>
                <div class="flex flex-wrap gap-2">
                    <template x-for="tf in allTimeframes" :key="tf">
                        <button @click="toggleTimeframe(tf)"
                                :class="selectedTimeframes.includes(tf) ? 'bg-koin-600 text-white border-koin-500' : 'bg-gray-800 text-gray-400 border-gray-700 hover:bg-gray-700'"
                                class="px-3 py-1.5 rounded-lg text-xs border transition" x-text="tf"></button>
                    </template>
                </div>
            </div>
        </div>

        <!-- Coin Selection -->
        <div class="mb-4">
            <div class="flex items-center justify-between mb-2">
                <label class="text-xs text-gray-500 uppercase tracking-wider">Select Coins</label>
                <div class="flex gap-2">
                    <button @click="selectAllCoins()" class="text-xs text-koin-400 hover:text-koin-300 transition">Select All</button>
                    <button @click="deselectAllCoins()" class="text-xs text-gray-500 hover:text-gray-300 transition">Clear</button>
                </div>
            </div>
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 max-h-48 overflow-y-auto">
                {% for item in coin_data %}
                <label class="flex items-center gap-2 px-3 py-2 bg-gray-800/50 rounded-lg hover:bg-gray-800 cursor-pointer transition">
                    <input type="checkbox" value="{{ item.asset.id }}" x-model="selectedCoins" @change="updatePreview()"
                           class="rounded bg-gray-700 border-gray-600 text-koin-500 focus:ring-koin-500">
                    <span class="text-sm text-white truncate">{{ item.asset.symbol|upper }}</span>
                    <span class="text-[10px] text-gray-500 ml-auto">{{ item.timeframes|length }}tf</span>
                </label>
                {% endfor %}
            </div>
        </div>

        <!-- Preview & Download -->
        <div class="flex items-center justify-between pt-4 border-t border-gray-800">
            <div class="flex items-center gap-3">
                <span class="text-sm text-gray-400">
                    <span x-text="selectedCoins.length"></span> coins,
                    <span x-text="selectedTimeframes.length"></span> timeframes
                </span>
                <span x-show="previewLoading" class="text-xs text-gray-500">
                    <svg class="animate-spin inline w-3 h-3" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                    counting...
                </span>
                <span x-show="previewCount > 0 && !previewLoading" class="text-xs text-koin-400">
                    <span x-text="KK.fmtIdr(previewCount)"></span> records
                </span>
            </div>
            <div class="flex items-center gap-2">
                <button @click="downloadSelected()"
                        :disabled="selectedCoins.length === 0 || selectedTimeframes.length === 0 || downloading"
                        class="px-5 py-2 bg-koin-600 hover:bg-koin-700 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-lg text-sm transition flex items-center gap-2">
                    <svg x-show="downloading" class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                    <svg x-show="!downloading" 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="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                    <span x-text="downloading ? 'Downloading...' : (selectedCoins.length > 1 || selectedTimeframes.length > 1 ? 'Download ZIP' : 'Download CSV')"></span>
                </button>
            </div>
        </div>
    </div>
    {% else %}
    <div class="glass rounded-xl border border-gray-800 p-8 text-center">
        <p class="text-gray-500">Belum ada data OHLCV untuk di-export.</p>
        <p class="text-gray-600 text-sm mt-1">Sync data {{ item_label|lower }} terlebih dahulu di halaman <a href="/market/assets" class="text-koin-400 hover:text-koin-300">Market</a>.</p>
    </div>
    {% endif %}

    <!-- Per-Coin Direct Download -->
    {% if coin_data %}
    <div class="glass rounded-xl border border-gray-800 overflow-hidden">
        <div class="px-4 py-3 border-b border-gray-800">
            <h3 class="text-sm font-semibold text-white">Direct Download per Coin</h3>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="text-xs text-gray-500 uppercase bg-gray-900/50">
                    <tr>
                        <th class="px-4 py-2 text-left">{{ item_label }}</th>
                        <th class="px-4 py-2 text-center">Available Timeframes</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-800/50">
                    {% for item in coin_data %}
                    <tr class="hover:bg-gray-800/30">
                        <td class="px-4 py-3 text-white font-medium">{{ item.asset.name }} ({{ item.asset.symbol|upper }})</td>
                        <td class="px-4 py-3 text-center">
                            <div class="flex flex-wrap gap-2 justify-center">
                                {% for tf, count in item.timeframes.items() %}
                                <a href="/api/v1/export/ohlcv/{{ item.asset.id }}/{{ tf }}"
                                   class="px-3 py-1 rounded bg-gray-800 hover:bg-koin-900/50 text-xs text-gray-300 hover:text-koin-400 transition">
                                    {{ tf }} <span class="text-gray-500">({{ count }})</span>
                                </a>
                                {% endfor %}
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block settings_scripts %}
<script>
function exportApp() {
    return {
        allTimeframes: ['1m', '15m', '30m', '1h', '4h', '1D', '1W'],
        selectedTimeframes: ['1h', '4h', '1D'],
        selectedCoins: [],
        startDate: '',
        endDate: '',
        previewCount: 0,
        previewLoading: false,
        downloading: false,
        _debounce: null,

        toggleTimeframe(tf) {
            const idx = this.selectedTimeframes.indexOf(tf);
            if (idx >= 0) this.selectedTimeframes.splice(idx, 1);
            else this.selectedTimeframes.push(tf);
            this.updatePreview();
        },

        selectAllCoins() {
            this.selectedCoins = [...document.querySelectorAll('input[type=checkbox][value]')].map(el => el.value);
            this.updatePreview();
        },

        deselectAllCoins() {
            this.selectedCoins = [];
            this.previewCount = 0;
        },

        updatePreview() {
            clearTimeout(this._debounce);
            this._debounce = setTimeout(() => this._fetchPreview(), 300);
        },

        async _fetchPreview() {
            if (this.selectedCoins.length === 0 || this.selectedTimeframes.length === 0) {
                this.previewCount = 0;
                return;
            }
            this.previewLoading = true;
            try {
                const params = new URLSearchParams({
                    asset_ids: this.selectedCoins.join(','),
                    timeframes: this.selectedTimeframes.join(','),
                });
                if (this.startDate) params.set('start_date', this.startDate);
                if (this.endDate) params.set('end_date', this.endDate);
                const r = await fetch('/api/v1/export/ohlcv-count?' + params);
                const data = await r.json();
                this.previewCount = data.count;
            } catch (e) {
                this.previewCount = 0;
            } finally {
                this.previewLoading = false;
            }
        },

        downloadSelected() {
            if (this.selectedCoins.length === 0 || this.selectedTimeframes.length === 0) return;
            this.downloading = true;

            // Single coin + single timeframe → direct CSV
            if (this.selectedCoins.length === 1 && this.selectedTimeframes.length === 1) {
                const params = new URLSearchParams();
                if (this.startDate) params.set('start_date', this.startDate);
                if (this.endDate) params.set('end_date', this.endDate);
                const qs = params.toString() ? '?' + params.toString() : '';
                window.location.href = `/api/v1/export/ohlcv/${this.selectedCoins[0]}/${this.selectedTimeframes[0]}${qs}`;
                setTimeout(() => { this.downloading = false; }, 2000);
                return;
            }

            // Multiple → ZIP
            const params = new URLSearchParams({
                asset_ids: this.selectedCoins.join(','),
                timeframes: this.selectedTimeframes.join(','),
            });
            if (this.startDate) params.set('start_date', this.startDate);
            if (this.endDate) params.set('end_date', this.endDate);
            window.location.href = '/api/v1/export/ohlcv-bulk?' + params;
            setTimeout(() => { this.downloading = false; }, 3000);
        },
    };
}
</script>
{% endblock %}