{% extends "base.html" %}
{% block title %}Price Alerts{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-950 text-gray-100 px-4 py-6 sm:px-6 lg:px-8" x-data="priceAlertPanel()">

    <!-- ================================================================== -->
    <!-- A. HEADER                                                          -->
    <!-- ================================================================== -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
        <div>
            <h1 class="text-2xl font-bold tracking-tight text-white flex items-center gap-2">
                <span class="text-2xl">&#127919;</span> Watchlist Price Alerts
            </h1>
            <p class="mt-1 text-sm text-gray-400">
                Monitor coin prices and get notified when targets are hit.
            </p>
        </div>
        <div class="flex items-center gap-3">
            <button @click="checkAlerts()"
                    :disabled="loading"
                    class="inline-flex items-center gap-2 rounded-lg bg-amber-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-amber-500 transition disabled:opacity-50 disabled:cursor-not-allowed">
                <svg class="h-4 w-4" :class="loading && 'animate-spin'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
                </svg>
                Check Alerts
            </button>
            <button @click="fetchAlerts()"
                    :disabled="loading"
                    class="inline-flex items-center gap-2 rounded-lg bg-gray-800 border border-gray-700 px-4 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 transition disabled:opacity-50">
                <svg class="h-4 w-4" :class="loading && 'animate-spin'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" 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>
                Refresh
            </button>
        </div>
    </div>

    <!-- ================================================================== -->
    <!-- B. STATS ROW                                                       -->
    <!-- ================================================================== -->
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
        <!-- Active Alerts -->
        <div class="rounded-xl bg-gray-900 border border-gray-800 p-5">
            <div class="flex items-center justify-between">
                <p class="text-sm font-medium text-gray-400">Active Alerts</p>
                <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-500/10 text-emerald-400">
                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </span>
            </div>
            <p class="mt-2 text-3xl font-bold text-white" x-text="stats.active ?? 0"></p>
        </div>
        <!-- Triggered Today -->
        <div class="rounded-xl bg-gray-900 border border-gray-800 p-5">
            <div class="flex items-center justify-between">
                <p class="text-sm font-medium text-gray-400">Triggered Today</p>
                <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-amber-500/10 text-amber-400">
                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                </span>
            </div>
            <p class="mt-2 text-3xl font-bold text-white" x-text="stats.triggered_today ?? 0"></p>
        </div>
        <!-- Total Alerts -->
        <div class="rounded-xl bg-gray-900 border border-gray-800 p-5">
            <div class="flex items-center justify-between">
                <p class="text-sm font-medium text-gray-400">Total Alerts</p>
                <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-500/10 text-blue-400">
                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
                </span>
            </div>
            <p class="mt-2 text-3xl font-bold text-white" x-text="stats.total ?? 0"></p>
        </div>
    </div>

    <!-- ================================================================== -->
    <!-- C. CREATE ALERT FORM                                               -->
    <!-- ================================================================== -->
    <div class="rounded-xl bg-gray-900 border border-gray-800 p-5 mb-8">
        <h2 class="text-lg font-semibold text-white mb-4">Create New Alert</h2>
        <form @submit.prevent="createAlert()" class="grid grid-cols-1 sm:grid-cols-12 gap-4 items-end">
            <!-- Coin Search -->
            <div class="sm:col-span-4 relative">
                <label class="block text-xs font-medium text-gray-400 mb-1.5">Coin</label>
                <input type="text"
                       x-model="searchQ"
                       @input.debounce.250ms="searchCoins()"
                       @focus="searchCoins()"
                       @click.away="searchResults = []"
                       placeholder="Search coin name or symbol..."
                       class="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-100 placeholder-gray-500 focus:border-amber-500 focus:ring-1 focus:ring-amber-500 focus:outline-none transition">
                <!-- Autocomplete Dropdown -->
                <div x-show="searchResults.length > 0" x-transition
                     class="absolute z-30 mt-1 w-full rounded-lg bg-gray-800 border border-gray-700 shadow-xl max-h-56 overflow-y-auto">
                    <template x-for="coin in searchResults" :key="coin.id">
                        <button type="button"
                                @click="selectCoin(coin)"
                                class="w-full flex items-center gap-3 px-3 py-2 text-left text-sm hover:bg-gray-700 transition">
                            <img :src="coin.icon || coin.image || '/static/icons/crypto/generic.png'"
                                 class="h-6 w-6 rounded-full flex-shrink-0 bg-gray-700" alt=""
                                 onerror="this.src='/static/icons/crypto/generic.png'">
                            <span>
                                <span class="font-medium text-white" x-text="coin.name"></span>
                                <span class="ml-1 text-gray-500 uppercase text-xs" x-text="coin.symbol"></span>
                            </span>
                        </button>
                    </template>
                </div>
            </div>

            <!-- Alert Type -->
            <div class="sm:col-span-2">
                <label class="block text-xs font-medium text-gray-400 mb-1.5">Type</label>
                <select x-model="newAlert.alert_type"
                        class="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-100 focus:border-amber-500 focus:ring-1 focus:ring-amber-500 focus:outline-none transition">
                    <option value="above">&#9650; Above</option>
                    <option value="below">&#9660; Below</option>
                </select>
            </div>

            <!-- Target Price -->
            <div class="sm:col-span-2">
                <label class="block text-xs font-medium text-gray-400 mb-1.5">Target Price (Rp)</label>
                <input type="number"
                       x-model.number="newAlert.target_price"
                       placeholder="0"
                       min="0"
                       step="any"
                       class="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-100 placeholder-gray-500 focus:border-amber-500 focus:ring-1 focus:ring-amber-500 focus:outline-none transition">
            </div>

            <!-- Note -->
            <div class="sm:col-span-3">
                <label class="block text-xs font-medium text-gray-400 mb-1.5">Note <span class="text-gray-600">(optional)</span></label>
                <input type="text"
                       x-model="newAlert.note"
                       placeholder="e.g. Buy signal zone"
                       maxlength="140"
                       class="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-100 placeholder-gray-500 focus:border-amber-500 focus:ring-1 focus:ring-amber-500 focus:outline-none transition">
            </div>

            <!-- Create Button -->
            <div class="sm:col-span-1">
                <button type="submit"
                        :disabled="!newAlert.asset_id || !newAlert.target_price"
                        class="w-full rounded-lg bg-emerald-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-emerald-500 transition disabled:opacity-40 disabled:cursor-not-allowed">
                    Create
                </button>
            </div>
        </form>
    </div>

    <!-- ================================================================== -->
    <!-- D. ALERTS LIST                                                     -->
    <!-- ================================================================== -->
    <div class="rounded-xl bg-gray-900 border border-gray-800 overflow-hidden">
        <!-- Filter Tabs -->
        <div class="flex items-center gap-1 border-b border-gray-800 px-5 pt-4 pb-0">
            <template x-for="f in [{k:'all',l:'All'},{k:'active',l:'Active'},{k:'triggered',l:'Triggered'}]" :key="f.k">
                <button @click="filter = f.k; fetchAlerts()"
                        :class="filter === f.k
                            ? 'border-amber-500 text-amber-400'
                            : 'border-transparent text-gray-500 hover:text-gray-300 hover:border-gray-600'"
                        class="px-4 pb-3 text-sm font-medium border-b-2 transition -mb-px">
                    <span x-text="f.l"></span>
                </button>
            </template>
            <span class="ml-auto text-xs text-gray-600 pb-3" x-show="alerts.length > 0" x-text="alerts.length + ' alert(s)'"></span>
        </div>

        <!-- Loading State -->
        <div x-show="loading" class="flex items-center justify-center py-16">
            <svg class="animate-spin h-8 w-8 text-amber-500" xmlns="http://www.w3.org/2000/svg" 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>
        </div>

        <!-- Empty State -->
        <div x-show="!loading && alerts.length === 0" class="flex flex-col items-center justify-center py-16 text-gray-500">
            <svg class="h-12 w-12 mb-3 text-gray-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
            </svg>
            <p class="text-sm font-medium">No alerts found</p>
            <p class="text-xs text-gray-600 mt-1">Create your first price alert above.</p>
        </div>

        <!-- Alert Cards -->
        <div x-show="!loading && alerts.length > 0" class="divide-y divide-gray-800">
            <template x-for="alert in alerts" :key="alert.id">
                <div class="flex flex-col sm:flex-row sm:items-center gap-4 px-5 py-4 hover:bg-gray-800/50 transition">
                    <!-- Coin Info -->
                    <div class="flex items-center gap-3 sm:w-56 flex-shrink-0">
                        <img :src="alert.coin_icon || '/static/icons/crypto/generic.png'"
                             class="h-8 w-8 rounded-full bg-gray-800 flex-shrink-0" alt=""
                             onerror="this.src='/static/icons/crypto/generic.png'">
                        <div class="min-w-0">
                            <p class="text-sm font-semibold text-white truncate" x-text="alert.coin_name || alert.asset_id"></p>
                            <p class="text-xs text-gray-500 uppercase" x-text="alert.coin_symbol || ''"></p>
                        </div>
                    </div>

                    <!-- Type Badge -->
                    <div class="sm:w-24 flex-shrink-0">
                        <span x-show="alert.alert_type === 'above'"
                              class="inline-flex items-center gap-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 px-2.5 py-0.5 text-xs font-semibold text-emerald-400">
                            <svg class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"/></svg>
                            Above
                        </span>
                        <span x-show="alert.alert_type === 'below'"
                              class="inline-flex items-center gap-1 rounded-full bg-red-500/10 border border-red-500/20 px-2.5 py-0.5 text-xs font-semibold text-red-400">
                            <svg class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                            Below
                        </span>
                    </div>

                    <!-- Target Price -->
                    <div class="sm:w-40 flex-shrink-0">
                        <p class="text-xs text-gray-500">Target Price</p>
                        <p class="text-sm font-bold text-white" x-text="formatPrice(alert.target_price)"></p>
                    </div>

                    <!-- Status / Triggered Info -->
                    <div class="flex-1 min-w-0">
                        <template x-if="alert.is_active && !alert.triggered_at">
                            <span class="inline-flex items-center gap-1.5 text-xs text-emerald-400">
                                <span class="relative flex h-2 w-2">
                                    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                                    <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
                                </span>
                                Monitoring
                            </span>
                        </template>
                        <template x-if="alert.triggered_at">
                            <div>
                                <span class="inline-flex items-center gap-1 text-xs font-medium text-amber-400">
                                    <svg class="h-3.5 w-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                                    Triggered
                                </span>
                                <p class="text-xs text-gray-500 mt-0.5">
                                    at <span class="text-gray-400" x-text="formatPrice(alert.triggered_price)"></span>
                                    &middot; <span x-text="timeAgo(alert.triggered_at)"></span>
                                </p>
                            </div>
                        </template>
                        <template x-if="!alert.is_active && !alert.triggered_at">
                            <span class="inline-flex items-center gap-1.5 text-xs text-gray-500">
                                <span class="h-2 w-2 rounded-full bg-gray-600"></span>
                                Paused
                            </span>
                        </template>
                        <!-- Note -->
                        <p x-show="alert.note" class="text-xs text-gray-600 mt-1 truncate" x-text="alert.note"></p>
                    </div>

                    <!-- Actions -->
                    <div class="flex items-center gap-2 flex-shrink-0">
                        <button @click="toggleAlert(alert.id)"
                                :title="alert.is_active ? 'Pause alert' : 'Activate alert'"
                                class="rounded-lg p-2 text-gray-500 hover:text-white hover:bg-gray-700 transition">
                            <!-- Pause icon -->
                            <svg x-show="alert.is_active" class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                            <!-- Play icon -->
                            <svg x-show="!alert.is_active" class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </button>
                        <button @click="deleteAlert(alert.id)"
                                title="Delete alert"
                                class="rounded-lg p-2 text-gray-500 hover:text-red-400 hover:bg-red-500/10 transition">
                            <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                            </svg>
                        </button>
                    </div>
                </div>
            </template>
        </div>
    </div>

</div>
{% endblock %}

{% block scripts %}
<script>
function priceAlertPanel() {
    return {
        alerts: [],
        stats: {},
        loading: false,
        filter: 'all',
        searchQ: '',
        searchResults: [],
        newAlert: {
            asset_id: '',
            coin_name: '',
            alert_type: 'above',
            target_price: '',
            note: ''
        },

        init() {
            this.fetchAlerts();
        },

        async fetchAlerts() {
            this.loading = true;
            try {
                const params = new URLSearchParams({ limit: '50' });
                if (this.filter === 'active') params.set('active', 'true');
                else if (this.filter === 'triggered') params.set('active', 'false');
                const r = await fetch('/api/v1/market/alerts/price?' + params);
                const data = await r.json();
                this.alerts = data.alerts || [];
                this.stats = data.stats || {};
            } catch (e) {
                console.error('Failed to fetch alerts:', e);
            } finally {
                this.loading = false;
            }
        },

        async searchCoins() {
            if (this.searchQ.length < 1) {
                this.searchResults = [];
                return;
            }
            try {
                const r = await fetch('/api/v1/market/assets/search?q=' + encodeURIComponent(this.searchQ) + '&limit=8');
                const data = await r.json();
                this.searchResults = data.coins || data.results || [];
            } catch (e) {
                console.error('Coin search failed:', e);
                this.searchResults = [];
            }
        },

        selectCoin(coin) {
            this.newAlert.asset_id = coin.id;
            this.newAlert.coin_name = coin.name + ' (' + coin.symbol + ')';
            this.searchQ = this.newAlert.coin_name;
            this.searchResults = [];
        },

        async createAlert() {
            if (!this.newAlert.asset_id || !this.newAlert.target_price) return;
            try {
                await fetch('/api/v1/market/alerts/price', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(this.newAlert)
                });
                this.newAlert = { asset_id: '', coin_name: '', alert_type: 'above', target_price: '', note: '' };
                this.searchQ = '';
                this.fetchAlerts();
            } catch (e) {
                console.error('Failed to create alert:', e);
            }
        },

        async toggleAlert(id) {
            try {
                await fetch('/api/v1/market/alerts/price/' + id + '/toggle', { method: 'POST' });
                this.fetchAlerts();
            } catch (e) {
                console.error('Failed to toggle alert:', e);
            }
        },

        async deleteAlert(id) {
            if (!confirm('Hapus alert ini?')) return;
            try {
                await fetch('/api/v1/market/alerts/price/' + id, { method: 'DELETE' });
                this.fetchAlerts();
            } catch (e) {
                console.error('Failed to delete alert:', e);
            }
        },

        async checkAlerts() {
            this.loading = true;
            try {
                const r = await fetch('/api/v1/market/alerts/price/check', { method: 'POST' });
                const data = await r.json();
                if (data.count > 0) {
                    alert('\u{1F3AF} ' + data.count + ' alert(s) triggered!');
                } else {
                    alert('No alerts triggered.');
                }
                this.fetchAlerts();
            } catch (e) {
                console.error('Failed to check alerts:', e);
                alert('Failed to check alerts. See console for details.');
            } finally {
                this.loading = false;
            }
        },

        formatPrice(p) {
            return p ? 'Rp ' + Number(p).toLocaleString('id-ID') : '-';
        },

        timeAgo(iso) {
            if (!iso) return '-';
            const diff = Math.floor((new Date() - new Date(iso)) / 1000);
            if (diff < 60) return diff + 's ago';
            if (diff < 3600) return Math.floor(diff / 60) + 'm ago';
            if (diff < 86400) return Math.floor(diff / 3600) + 'h ago';
            return Math.floor(diff / 86400) + 'd ago';
        }
    };
}
</script>
{% endblock %}