{% extends "base.html" %}
{% block title %}Watchlist{% endblock %}

{% block head %}
<style>
    .wl-chip {
        padding: 0.5rem 1rem;
        border-radius: 9999px;
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        user-select: none;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
    }

    .wl-chip.active {
        background: #0ea5e9;
        color: #fff;
        box-shadow: 0 10px 15px -3px rgba(14, 165, 233, 0.25);
    }

    .wl-chip.inactive {
        background: #1f2937;
        color: #9ca3af;
    }

    .wl-chip.inactive:hover {
        background: #374151;
        color: #e5e7eb;
    }

    .wl-chip.add-btn {
        background: rgba(31, 41, 55, 0.5);
        color: #6b7280;
        border: 1px dashed #374151;
    }

    .wl-chip.add-btn:hover {
        background: #374151;
        color: #7dd3fc;
    }

    .wl-chip[draggable="true"] {
        cursor: grab;
    }

    .wl-chip.dragging {
        opacity: 0.4;
        transform: scale(0.95);
    }

    .wl-chip.drag-over {
        box-shadow: -3px 0 0 0 #38bdf8;
    }

    .wl-row {
        transition: background 0.15s, opacity 0.2s, transform 0.15s;
    }

    .wl-row.dragging {
        opacity: 0.4;
    }

    .wl-row.drag-over {
        border-top: 2px solid #38bdf8 !important;
    }

    .wl-modal-bg {
        position: fixed;
        inset: 0;
        z-index: 50;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
    }

    .wl-modal {
        background: #111827;
        border: 1px solid #374151;
        border-radius: 1rem;
        padding: 1.5rem;
        width: 100%;
        max-width: 28rem;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        animation: fadeIn 0.2s ease-out;
    }

    .search-results-dropdown {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        margin-top: 0.25rem;
        background: #1f2937;
        border: 1px solid #374151;
        border-radius: 0.5rem;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
        z-index: 50;
        max-height: 16rem;
        overflow-y: auto;
    }

    .note-edit-input {
        background: transparent;
        border: 1px solid transparent;
        border-radius: 0.375rem;
        padding: 0.125rem 0.375rem;
        font-size: 0.75rem;
        color: #d1d5db;
        width: 100%;
        max-width: 12rem;
        transition: border-color 0.15s;
    }

    .note-edit-input:focus {
        background: #1f2937;
        border-color: #0ea5e9;
        outline: none;
    }

    /* Move dropdown */
    .move-dropdown {
        position: absolute;
        right: 0;
        top: 100%;
        margin-top: 0.25rem;
        background: #1f2937;
        border: 1px solid #374151;
        border-radius: 0.5rem;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
        z-index: 40;
        min-width: 10rem;
        overflow: hidden;
    }
</style>
{% endblock %}

{% block content %}
<div x-data="watchlistApp()" x-init="init()" class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <h1 class="text-2xl font-bold text-white">Watchlist</h1>
        <span class="text-sm text-gray-500" x-text="allItems.length + ' {{ item_label|lower }} dipantau'"></span>
    </div>

    <!-- Tab/Chip Bar -->
    <div class="flex items-center gap-2 overflow-x-auto pb-2 scrollbar-thin" id="chip-bar">
        <!-- Semua tab (not draggable) -->
        <button class="wl-chip flex-shrink-0" :class="activeGroup === null ? 'active' : 'inactive'"
            @click="activeGroup = null">
            Semua
            <span class="ml-1 text-xs opacity-70" x-text="'(' + allItems.length + ')'"></span>
        </button>

        <!-- Group tabs (draggable) -->
        <template x-for="group in groups" :key="group.id">
            <button class="wl-chip flex-shrink-0 group/chip" :class="activeGroup === group.id ? 'active' : 'inactive'"
                :draggable="true" @click="activeGroup = group.id" @dragstart="onChipDragStart($event, group)"
                @dragover.prevent="onChipDragOver($event, group)" @dragleave="onChipDragLeave($event)"
                @drop.prevent="onChipDrop($event, group)" @dragend="onChipDragEnd($event)"
                @contextmenu.prevent="openGroupMenu($event, group)">
                <span x-text="group.name"></span>
                <span class="ml-1 text-xs opacity-70" x-text="'(' + getGroupCount(group.id) + ')'"></span>
                <!-- Edit/Delete trigger on hover -->
                <span class="ml-1 opacity-0 group-hover/chip:opacity-100 transition"
                    @click.stop="openGroupMenu($event, group)">
                    <svg class="w-3.5 h-3.5 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                    </svg>
                </span>
            </button>
        </template>

        <!-- Add group button -->
        <button class="wl-chip add-btn flex-shrink-0" @click="showCreateModal = true">
            <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
            </svg>
            Add
        </button>
    </div>

    <!-- Add Coin Search -->
    <div class="relative" x-data="{ searchQ: '', searchResults: [], searching: false }">
        <div class="flex gap-2">
            <div class="relative flex-1">
                <input type="text" x-model="searchQ" @input.debounce.300ms="searchCoin()"
                    @focus="if (searchQ.length >= 1) searchCoin()"
                    :placeholder="activeGroup !== null ? 'Cari {{ item_label|lower }} untuk ditambahkan ke grup...' : 'Cari {{ item_label|lower }} untuk ditambahkan ke watchlist...'"
                    class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2.5 text-sm text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-koin-500 pr-8">
                <!-- Clear button -->
                <button x-show="searchQ.length > 0" x-cloak
                    @click="searchQ = ''; searchResults = []"
                    class="absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300">
                    <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="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
                <!-- Search results dropdown -->
                <div x-show="searchResults.length > 0" x-cloak class="search-results-dropdown"
                    @click.outside="searchResults = []">
                    <template x-for="coin in searchResults" :key="coin.id">
                        <button
                            @click="if (!isAlreadyInGroup(coin.id)) { addCoinToGroup(coin.id); searchQ = ''; searchResults = []; }"
                            class="w-full flex items-center gap-2 px-3 py-2 transition text-sm text-left"
                            :class="isAlreadyInGroup(coin.id) ? 'opacity-50 cursor-default bg-gray-800/50' : 'hover:bg-gray-700 cursor-pointer'"
                            :disabled="isAlreadyInGroup(coin.id)">
                            <img :src="coin.icon_thumb_url || (coin.asset_type==='stock' && coin.symbol ? __stockIconUrl(coin.symbol) : '')" :data-symbol="coin.symbol" class="w-5 h-5 rounded-full" loading="lazy"
                                onerror="__iconError(this)" x-show="coin.icon_thumb_url || coin.asset_type==='stock'">
                            <span x-show="!coin.icon_thumb_url && coin.asset_type!=='stock'"
                                class="w-5 h-5 rounded-full bg-gray-700 flex items-center justify-center text-[10px] text-gray-400"
                                x-text="(coin.symbol || '?')[0]"></span>
                            <span class="text-white flex-1 truncate" x-text="coin.name"></span>
                            <span class="text-gray-500 text-xs" x-text="coin.symbol"></span>
                            <!-- Already in group badge -->
                            <span x-show="isAlreadyInGroup(coin.id)" x-cloak
                                class="text-[10px] text-gray-500 bg-gray-800 px-1.5 py-0.5 rounded">Sudah ada</span>
                        </button>
                    </template>
                </div>
                <!-- Searching spinner -->
                <div x-show="searching" x-cloak class="absolute right-8 top-1/2 -translate-y-1/2">
                    <svg class="animate-spin w-4 h-4 text-gray-500" 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>
            </div>
        </div>
    </div>

    <!-- Coin Table -->
    <div class="glass rounded-xl border border-gray-800 overflow-hidden">
        <template x-if="filteredItems.length > 0">
            <table class="w-full text-sm">
                <thead class="text-xs text-gray-500 uppercase bg-gray-900/50">
                    <tr>
                        <th class="px-4 py-3 text-left w-8" x-show="activeGroup !== null">
                            <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M4 6h16M4 12h16M4 18h16" />
                            </svg>
                        </th>
                        <th class="px-4 py-3 text-left w-8" x-show="activeGroup === null"></th>
                        <th class="px-4 py-3 text-left">#</th>
                        <th class="px-4 py-3 text-left">{{ item_label }}</th>
                        <th class="px-4 py-3 text-right">Harga (IDR)</th>
                        <th class="px-4 py-3 text-right">24h</th>
                        <th class="px-4 py-3 text-left" x-show="activeGroup !== null">Catatan</th>
                        <th class="px-4 py-3 text-left" x-show="activeGroup === null">Group</th>
                        <th class="px-4 py-3 text-center">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-800">
                    <template x-for="(item, idx) in filteredItems" :key="item.watchlist.id">
                        <tr class="wl-row hover:bg-gray-800/50" :draggable="activeGroup !== null"
                            @dragstart="onRowDragStart($event, item, idx)"
                            @dragover.prevent="onRowDragOver($event, idx)" @dragleave="onRowDragLeave($event)"
                            @drop.prevent="onRowDrop($event, idx)" @dragend="onRowDragEnd()">
                            <!-- Drag handle (group view) -->
                            <td class="px-4 py-3 text-gray-600 cursor-grab" x-show="activeGroup !== null">
                                <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="M4 8h16M4 16h16" />
                                </svg>
                            </td>
                            <!-- Spacer (all view) -->
                            <td class="px-4 py-3" x-show="activeGroup === null"></td>
                            <!-- Row number -->
                            <td class="px-4 py-3 text-gray-500" x-text="idx + 1"></td>
                            <!-- Coin info -->
                            <td class="px-4 py-3">
                                <a :href="'/market/asset/' + item.asset.id"
                                    class="inline-flex items-center gap-2 font-medium text-white hover:text-koin-300">
                                    <template x-if="item.asset.icon_thumb_url || item.asset.asset_type==='stock'">
                                        <img :src="item.asset.icon_thumb_url || (item.asset.asset_type==='stock' && item.asset.symbol ? __stockIconUrl(item.asset.symbol) : '')" :alt="item.asset.symbol" :data-symbol="item.asset.symbol"
                                            class="w-5 h-5 rounded-full" loading="lazy"
                                            onerror="__iconError(this)">
                                    </template>
                                    <template x-if="!item.asset.icon_thumb_url && item.asset.asset_type!=='stock'">
                                        <span
                                            class="w-5 h-5 rounded-full bg-gray-700 flex items-center justify-center text-[10px] text-gray-400"
                                            x-text="item.asset.symbol.charAt(0)"></span>
                                    </template>
                                    <span x-text="item.asset.name"></span>
                                </a>
                                <span class="text-gray-500 text-xs ml-1" x-text="item.asset.symbol"></span>
                            </td>
                            <!-- Price -->
                            <td class="px-4 py-3 text-right font-mono">
                                <span
                                    x-text="item.price ? KK.fmtRp(item.price) : '-'"></span>
                            </td>
                            <!-- 24h Change -->
                            <td class="px-4 py-3 text-right">
                                <span :class="{
                                    'text-emerald-400': item.change24h > 0,
                                    'text-red-400': item.change24h < 0,
                                    'text-gray-400': !item.change24h
                                }"
                                    x-text="item.change24h ? KK.fmtSpct(item.change24h, 2) : '-'"></span>
                            </td>
                            <!-- Notes (group view) -->
                            <td class="px-4 py-3" x-show="activeGroup !== null"
                                x-data="{ editing: false, noteText: item.watchlist.notes || '' }">
                                <template x-if="!editing">
                                    <span @click="editing = true; $nextTick(() => $refs.noteInput && $refs.noteInput.focus())"
                                        class="text-xs cursor-pointer transition"
                                        :class="noteText ? 'text-gray-400 hover:text-gray-200' : 'text-gray-600 hover:text-gray-400 italic'"
                                        x-text="noteText || 'Tambah catatan...'"></span>
                                </template>
                                <template x-if="editing">
                                    <input x-ref="noteInput" type="text" x-model="noteText"
                                        @blur="editing = false; saveNote(item.watchlist.id, noteText); item.watchlist.notes = noteText"
                                        @keydown.enter="$el.blur()"
                                        @keydown.escape="noteText = item.watchlist.notes || ''; editing = false"
                                        class="note-edit-input" maxlength="200"
                                        placeholder="Catatan...">
                                </template>
                            </td>
                            <!-- Group name (all view) -->
                            <td class="px-4 py-3 text-xs text-gray-500" x-show="activeGroup === null"
                                x-text="getGroupName(item.watchlist.group_id)"></td>
                            <!-- Actions -->
                            <td class="px-4 py-3 text-center">
                                <div class="flex items-center justify-center gap-1">
                                    <a :href="'/market/asset/' + item.asset.id"
                                        class="text-xs text-koin-400 hover:text-koin-300 px-1.5 py-1 rounded hover:bg-gray-800 transition">Detail</a>
                                    <!-- Move to group dropdown -->
                                    <template x-if="groups.length > 0">
                                        <div class="relative" x-data="{ showMove: false }">
                                            <button @click="showMove = !showMove"
                                                class="text-xs text-gray-400 hover:text-gray-200 px-1.5 py-1 rounded hover:bg-gray-800 transition"
                                                title="Pindah ke grup lain">
                                                <svg class="w-3.5 h-3.5 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                        d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
                                                </svg>
                                            </button>
                                            <div x-show="showMove" x-cloak @click.outside="showMove = false"
                                                class="move-dropdown">
                                                <div class="py-1">
                                                    <div class="px-3 py-1.5 text-[10px] text-gray-500 uppercase tracking-wider">Pindah ke</div>
                                                    <!-- Ungrouped option -->
                                                    <button x-show="item.watchlist.group_id !== null"
                                                        @click="moveItem(item.watchlist.id, null); showMove = false"
                                                        class="w-full text-left px-3 py-1.5 text-xs text-gray-300 hover:bg-gray-700 transition">
                                                        (Tanpa Grup)
                                                    </button>
                                                    <!-- Group options -->
                                                    <template x-for="g in groups" :key="g.id">
                                                        <button x-show="g.id !== item.watchlist.group_id"
                                                            @click="moveItem(item.watchlist.id, g.id); showMove = false"
                                                            class="w-full text-left px-3 py-1.5 text-xs text-gray-300 hover:bg-gray-700 transition"
                                                            x-text="g.name"></button>
                                                    </template>
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                    <!-- Remove button -->
                                    <button @click="confirmRemoveItem(item)"
                                        class="text-xs text-red-400 hover:text-red-300 px-1.5 py-1 rounded hover:bg-red-900/20 transition"
                                        title="Hapus dari watchlist">
                                        <svg class="w-3.5 h-3.5 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                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>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </template>
        <template x-if="filteredItems.length === 0">
            <div class="p-8 text-center">
                <template x-if="allItems.length === 0 && groups.length === 0">
                    <div>
                        <svg class="w-12 h-12 mx-auto text-gray-700 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                        </svg>
                        <p class="text-gray-400 font-medium">Watchlist {{ 'saham' if asset_mode in ('stock', 'stock_us') else 'kripto' }} masih kosong</p>
                        <p class="text-gray-500 text-sm mt-1">Mulai dengan membuat grup dan menambahkan {{ item_label|lower }} dari pencarian di atas.</p>
                        <button @click="showCreateModal = true"
                            class="mt-4 px-4 py-2 bg-koin-600 text-white text-sm rounded-lg hover:bg-koin-500 transition">
                            <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                            </svg>
                            Buat Grup Pertama
                        </button>
                    </div>
                </template>
                <template x-if="allItems.length > 0 || groups.length > 0">
                    <div>
                        <p class="text-gray-400"
                            x-text="activeGroup !== null ? 'Grup ini belum memiliki {{ item_label|lower }}.' : 'Tidak ada {{ item_label|lower }} di luar grup.'"></p>
                        <p class="text-gray-500 text-sm mt-1">
                            Gunakan pencarian di atas untuk menambahkan {{ item_label|lower }}.
                        </p>
                    </div>
                </template>
            </div>
        </template>
    </div>

    <!-- Create Group Modal -->
    <div x-show="showCreateModal" x-cloak class="wl-modal-bg" @click.self="showCreateModal = false"
        @keydown.escape.window="showCreateModal = false">
        <div class="wl-modal" @click.stop>
            <h3 class="text-lg font-semibold text-white mb-4">Buat Grup Baru</h3>
            <input type="text" x-model="newGroupName" x-ref="createInput" @keydown.enter="createGroup()"
                placeholder="Nama grup, misal: Scalping Mania"
                class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2.5 text-sm text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-koin-500">
            <div class="flex justify-end gap-2 mt-4">
                <button @click="showCreateModal = false"
                    class="px-4 py-2 text-sm text-gray-400 hover:text-white rounded-lg hover:bg-gray-800 transition">Batal</button>
                <button @click="createGroup()"
                    class="px-4 py-2 text-sm bg-koin-600 text-white rounded-lg hover:bg-koin-500 transition">Buat</button>
            </div>
        </div>
    </div>

    <!-- Edit Group Modal -->
    <div x-show="showEditModal" x-cloak class="wl-modal-bg" @click.self="showEditModal = false"
        @keydown.escape.window="showEditModal = false">
        <div class="wl-modal" @click.stop>
            <h3 class="text-lg font-semibold text-white mb-4">Edit Grup</h3>
            <input type="text" x-model="editingGroup.name" x-ref="editInput" @keydown.enter="saveGroup()"
                class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2.5 text-sm text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-koin-500">
            <div class="flex justify-between mt-4">
                <button @click="confirmDeleteGroup()"
                    class="px-4 py-2 text-sm text-red-400 hover:text-red-300 rounded-lg hover:bg-red-900/20 transition">
                    <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            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>
                    Hapus Grup
                </button>
                <div class="flex gap-2">
                    <button @click="showEditModal = false"
                        class="px-4 py-2 text-sm text-gray-400 hover:text-white rounded-lg hover:bg-gray-800 transition">Batal</button>
                    <button @click="saveGroup()"
                        class="px-4 py-2 text-sm bg-koin-600 text-white rounded-lg hover:bg-koin-500 transition">Simpan</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Group Confirm Modal -->
    <div x-show="showDeleteModal" x-cloak class="wl-modal-bg" @click.self="showDeleteModal = false">
        <div class="wl-modal" @click.stop>
            <h3 class="text-lg font-semibold text-white mb-2">Hapus Grup?</h3>
            <p class="text-gray-400 text-sm mb-4">
                Grup <strong class="text-white" x-text="editingGroup.name"></strong> dan semua koin di dalamnya akan
                dihapus. Aksi ini tidak bisa dibatalkan.
            </p>
            <div class="flex justify-end gap-2">
                <button @click="showDeleteModal = false"
                    class="px-4 py-2 text-sm text-gray-400 hover:text-white rounded-lg hover:bg-gray-800 transition">Batal</button>
                <button @click="deleteGroup()"
                    class="px-4 py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-500 transition">Hapus</button>
            </div>
        </div>
    </div>

    <!-- Remove Item Confirm Modal -->
    <div x-show="showRemoveModal" x-cloak class="wl-modal-bg" @click.self="showRemoveModal = false"
        @keydown.escape.window="showRemoveModal = false">
        <div class="wl-modal" @click.stop>
            <h3 class="text-lg font-semibold text-white mb-2">Hapus dari Watchlist?</h3>
            <p class="text-gray-400 text-sm mb-4" x-show="removingItem">
                <span class="text-white font-medium" x-text="removingItem ? removingItem.asset.name : ''"></span>
                (<span x-text="removingItem ? removingItem.asset.symbol : ''"></span>)
                akan dihapus dari watchlist.
            </p>
            <div class="flex justify-end gap-2">
                <button @click="showRemoveModal = false; removingItem = null"
                    class="px-4 py-2 text-sm text-gray-400 hover:text-white rounded-lg hover:bg-gray-800 transition">Batal</button>
                <button @click="removeItem(removingItem.watchlist.id); showRemoveModal = false; removingItem = null"
                    class="px-4 py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-500 transition">Hapus</button>
            </div>
        </div>
    </div>

    <!-- Toast -->
    <div x-show="toast.show" x-cloak x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 translate-y-2" x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0"
        x-transition:leave-end="opacity-0 translate-y-2"
        class="fixed bottom-4 right-4 z-50 px-4 py-3 rounded-lg text-sm shadow-xl"
        :class="toast.type === 'error' ? 'bg-red-900/90 text-red-200 border border-red-700' : 'bg-gray-800/90 text-gray-200 border border-gray-700'"
        x-text="toast.msg"></div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // Server data injection (Jinja2 rendered)
    const __serverItems = {{ watchlist_coins | tojson }};
    const __serverGroups = {{ groups | tojson }};
    const __assetMode = {{ asset_mode | tojson }};
</script>
{% raw %}
<script>
    function watchlistApp() {
        return {
            allItems: [],
            groups: [],
            activeGroup: null,

            showCreateModal: false,
            showEditModal: false,
            showDeleteModal: false,
            showRemoveModal: false,
            removingItem: null,
            newGroupName: '',
            editingGroup: { id: null, name: '' },
            toast: { show: false, msg: '', type: 'info' },

            dragChip: null,
            dragRowIdx: null,

            init() {
                this.groups = __serverGroups.map(g => ({
                    id: g.id,
                    name: g.name,
                    display_order: g.display_order,
                }));

                this.allItems = __serverItems.map(item => ({
                    watchlist: {
                        id: item.watchlist.id,
                        asset_id: item.watchlist.asset_id,
                        group_id: item.watchlist.group_id,
                        display_order: item.watchlist.display_order,
                        notes: item.watchlist.notes,
                    },
                    coin: {
                        id: item.asset.id,
                        name: item.asset.name,
                        symbol: item.asset.symbol,
                        icon_thumb_url: item.asset.icon_thumb_url,
                        asset_type: item.asset.asset_type || '{{ asset_mode }}',
                    },
                    price: item.profile ? item.profile.current_price_idr : null,
                    change24h: item.profile ? item.profile.price_change_24h : null,
                }));

                // Restore active group from URL hash
                const hash = window.location.hash;
                if (hash.startsWith('#group=')) {
                    const gid = parseInt(hash.replace('#group=', ''), 10);
                    if (this.groups.some(g => g.id === gid)) {
                        this.activeGroup = gid;
                    }
                }

                // Sync hash on activeGroup change
                this.$watch('activeGroup', (val) => {
                    if (val !== null) {
                        history.replaceState(null, '', window.location.pathname + '#group=' + val);
                    } else {
                        history.replaceState(null, '', window.location.pathname);
                    }
                });
            },

            get filteredItems() {
                if (this.activeGroup === null) return this.allItems;
                return this.allItems.filter(i => i.watchlist.group_id === this.activeGroup);
            },

            getGroupCount(groupId) {
                return this.allItems.filter(i => i.watchlist.group_id === groupId).length;
            },

            getGroupName(groupId) {
                if (!groupId) return '-';
                const g = this.groups.find(g => g.id === groupId);
                return g ? g.name : '-';
            },

            isAlreadyInGroup(coinId) {
                // Check if coin is already in the active group (or ungrouped if activeGroup is null)
                return this.allItems.some(i =>
                    i.asset.id === coinId && i.watchlist.group_id === this.activeGroup
                );
            },

            showToast(msg, type) {
                type = type || 'info';
                this.toast = { show: true, msg: msg, type: type };
                setTimeout(() => this.toast.show = false, 2500);
            },

            // --- Group CRUD ---
            async createGroup() {
                const name = this.newGroupName.trim();
                if (!name) return;
                const res = await fetch('/api/v1/market/watchlist/groups', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ name: name }),
                });
                if (res.ok) {
                    const g = await res.json();
                    this.groups.push(g);
                    this.newGroupName = '';
                    this.showCreateModal = false;
                    this.activeGroup = g.id;
                    this.showToast('Grup "' + g.name + '" dibuat');
                }
            },

            async saveGroup() {
                const id = this.editingGroup.id;
                const name = this.editingGroup.name;
                if (!name.trim()) return;
                const res = await fetch('/api/v1/market/watchlist/groups/' + id, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ name: name.trim() }),
                });
                if (res.ok) {
                    const g = this.groups.find(g => g.id === id);
                    if (g) g.name = name.trim();
                    this.showEditModal = false;
                    this.showToast('Grup diupdate');
                }
            },

            confirmDeleteGroup() {
                this.showEditModal = false;
                this.showDeleteModal = true;
            },

            async deleteGroup() {
                const id = this.editingGroup.id;
                const name = this.editingGroup.name;
                const res = await fetch('/api/v1/market/watchlist/groups/' + id, { method: 'DELETE' });
                if (res.ok) {
                    this.groups = this.groups.filter(g => g.id !== id);
                    this.allItems = this.allItems.filter(i => i.watchlist.group_id !== id);
                    if (this.activeGroup === id) this.activeGroup = null;
                    this.showDeleteModal = false;
                    this.showToast('Grup "' + name + '" dihapus');
                }
            },

            // --- Item management ---
            async addCoinToGroup(coinId) {
                const res = await fetch('/api/v1/market/watchlist', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ asset_id: coinId, group_id: this.activeGroup }),
                });
                if (res.ok) {
                    const data = await res.json();
                    if (data.watchlist) {
                        // 201 Created — push enriched item to allItems (no reload!)
                        this.allItems.push({
                            watchlist: {
                                id: data.watchlist.id,
                                asset_id: data.watchlist.asset_id,
                                group_id: data.watchlist.group_id,
                                display_order: data.watchlist.display_order,
                                notes: data.watchlist.notes || '',
                            },
                            coin: {
                                id: data.asset.id,
                                name: data.asset.name,
                                symbol: data.asset.symbol,
                                icon_thumb_url: data.asset.icon_thumb_url,
                                asset_type: data.asset.asset_type || '{{ asset_mode }}',
                            },
                            price: data.profile ? data.profile.current_price_idr : null,
                            change24h: data.profile ? data.profile.price_change_24h : null,
                        });
                        this.showToast(data.asset.name + ' ditambahkan');
                    } else {
                        // 200 — duplicate (shouldn't normally reach here due to isAlreadyInGroup guard)
                        this.showToast(data.message || 'Sudah ada di grup ini', 'error');
                    }
                } else {
                    const data = await res.json().catch(() => ({}));
                    this.showToast(data.error || data.message || 'Gagal menambahkan', 'error');
                }
            },

            confirmRemoveItem(item) {
                this.removingItem = item;
                this.showRemoveModal = true;
            },

            async removeItem(watchlistId) {
                const res = await fetch('/api/v1/market/watchlist/' + watchlistId, { method: 'DELETE' });
                if (res.ok) {
                    this.allItems = this.allItems.filter(i => i.watchlist.id !== watchlistId);
                    this.showToast(__itemLabel + ' dihapus dari watchlist');
                }
            },

            async moveItem(watchlistId, newGroupId) {
                const res = await fetch('/api/v1/market/watchlist/' + watchlistId + '/move', {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ group_id: newGroupId }),
                });
                if (res.ok) {
                    const item = this.allItems.find(i => i.watchlist.id === watchlistId);
                    if (item) item.watchlist.group_id = newGroupId;
                    const targetGroup = this.groups.find(g => g.id === newGroupId);
                    this.showToast('Dipindahkan ke ' + (targetGroup ? targetGroup.name : 'Tanpa Grup'));
                } else {
                    const data = await res.json().catch(() => ({}));
                    this.showToast(data.error || 'Gagal memindahkan', 'error');
                }
            },

            async saveNote(watchlistId, notes) {
                try {
                    await fetch('/api/v1/market/watchlist/' + watchlistId + '/notes', {
                        method: 'PUT',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ notes: notes }),
                    });
                } catch (e) {
                    // Silently fail — note is already updated in local state
                }
            },

            searchCoin() {
                const q = this.$data.searchQ;
                if (!q || q.length < 1) { this.$data.searchResults = []; return; }
                this.$data.searching = true;
                fetch('/api/v1/market/search?q=' + encodeURIComponent(q))
                    .then(r => r.json())
                    .then(d => {
                        this.$data.searchResults = d;
                        this.$data.searching = false;
                    })
                    .catch(() => { this.$data.searching = false; });
            },

            // --- Chip drag (reorder groups) ---
            onChipDragStart(e, group) {
                this.dragChip = group;
                e.target.classList.add('dragging');
                e.dataTransfer.effectAllowed = 'move';
            },
            onChipDragOver(e, group) {
                if (!this.dragChip || this.dragChip.id === group.id) return;
                e.target.closest('.wl-chip').classList.add('drag-over');
            },
            onChipDragLeave(e) {
                var el = e.target.closest('.wl-chip');
                if (el) el.classList.remove('drag-over');
            },
            onChipDragEnd(e) {
                e.target.classList.remove('dragging');
                document.querySelectorAll('.wl-chip').forEach(el => el.classList.remove('drag-over'));
            },
            async onChipDrop(e, targetGroup) {
                document.querySelectorAll('.wl-chip').forEach(el => el.classList.remove('drag-over', 'dragging'));
                if (!this.dragChip || this.dragChip.id === targetGroup.id) return;

                const fromIdx = this.groups.findIndex(g => g.id === this.dragChip.id);
                const toIdx = this.groups.findIndex(g => g.id === targetGroup.id);
                const moved = this.groups.splice(fromIdx, 1)[0];
                this.groups.splice(toIdx, 0, moved);
                this.dragChip = null;

                await fetch('/api/v1/market/watchlist/groups/reorder', {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ order: this.groups.map(g => g.id) }),
                });
            },

            // --- Row drag (reorder items within group) ---
            onRowDragStart(e, item, idx) {
                if (this.activeGroup === null) return;
                this.dragRowIdx = idx;
                e.target.classList.add('dragging');
                e.dataTransfer.effectAllowed = 'move';
            },
            onRowDragOver(e, idx) {
                if (this.dragRowIdx === null || this.dragRowIdx === idx) return;
                const rows = document.querySelectorAll('.wl-row');
                rows.forEach(r => r.classList.remove('drag-over'));
                if (rows[idx]) rows[idx].classList.add('drag-over');
            },
            onRowDragLeave(e) {
                var el = e.target.closest('.wl-row');
                if (el) el.classList.remove('drag-over');
            },
            onRowDragEnd() {
                this.dragRowIdx = null;
                document.querySelectorAll('.wl-row').forEach(r => r.classList.remove('dragging', 'drag-over'));
            },
            async onRowDrop(e, toIdx) {
                document.querySelectorAll('.wl-row').forEach(r => r.classList.remove('drag-over', 'dragging'));
                if (this.dragRowIdx === null || this.dragRowIdx === toIdx) return;

                var items = this.filteredItems;
                var moved = items.splice(this.dragRowIdx, 1)[0];
                items.splice(toIdx, 0, moved);
                this.dragRowIdx = null;

                var otherItems = this.allItems.filter(i => i.watchlist.group_id !== this.activeGroup);
                this.allItems = otherItems.concat(items);

                await fetch('/api/v1/market/watchlist/reorder', {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ order: items.map(i => i.watchlist.id) }),
                });
            },

            openGroupMenu(e, group) {
                this.editingGroup = Object.assign({}, group);
                this.showEditModal = true;
            },
        };
    }
</script>
{% endraw %}
{% endblock %}