{% extends "layout.html" %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <div>
        <a href="{{ url_for('admin_bp.manage_gacha') }}" class="btn btn-outline-secondary mb-2"><i class="fas fa-arrow-left"></i> 返回奖池列表</a>
        <h2><i class="fas fa-cogs"></i> 管理奖池物品: <span class="text-primary">{{ pool.name }}</span></h2>
    </div>
    <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#itemModal" id="addItemBtn">
        <i class="fas fa-plus"></i> 添加新物品到奖池
    </button>
</div>

<div class="card border-primary">
    <div class="card-header">“{{ pool.name }}”中的物品列表</div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>物品ID</th>
                        <th>物品名称</th>
                        <th>类型</th>
                        <th>数量</th>
                        <th>权重</th>
                        <th class="text-end">操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in items %}
                    <tr>
                        <td>{{ item.gacha_pool_item_id }}</td>
                        <td>
                            {{ item.item_name }} (ID: {{ item.item_id }})
                            {% if item.rarity %}
                                <span class="text-warning">{{ '★' * item.rarity }}</span>
                            {% endif %}
                        </td>
                        <td><span class="badge bg-secondary">{{ item.item_type }}</span></td>
                        <td>{{ item.quantity }}</td>
                        <td>
                            <div class="d-flex align-items-center">
                                <input type="number" 
                                       class="form-control form-control-sm weight-input" 
                                       value="{{ item.weight }}" 
                                       data-item-id="{{ item.gacha_pool_item_id }}"
                                       data-original-value="{{ item.weight }}"
                                       min="1" 
                                       max="1000"
                                       style="width: 80px;">
                                <div class="ms-2">
                                    <button class="btn btn-sm btn-success save-weight-btn d-none" 
                                            data-item-id="{{ item.gacha_pool_item_id }}"
                                            title="保存">
                                        <i class="fas fa-check"></i>
                                    </button>
                                    <button class="btn btn-sm btn-secondary cancel-weight-btn d-none" 
                                            data-item-id="{{ item.gacha_pool_item_id }}"
                                            title="取消">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </div>
                        </td>
                        <td class="text-end">
                            <button class="btn btn-sm btn-info edit-btn"
                                    data-bs-toggle="modal"
                                    data-bs-target="#itemModal"
                                    data-item-json='{{ item|tojson|safe }}'>
                                <i class="fas fa-edit"></i> 编辑
                            </button>
                            <form action="{{ url_for('admin_bp.delete_pool_item', item_id=item.gacha_pool_item_id, pool_id=pool.gacha_pool_id) }}" method="post" class="d-inline" onsubmit="return confirm('确定要从奖池中移除【{{ item.item_name }}】吗？');">
                                <button type="submit" class="btn btn-sm btn-danger">
                                    <i class="fas fa-trash"></i> 删除
                                </button>
                            </form>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="item-form" method="post">
                <div class="modal-header">
                    <h5 class="modal-title" id="itemModalLabel">管理奖池物品</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">选择物品</label>
                        <select name="item_full_id" class="form-select" required>
                            <option value="">-- 请选择 --</option>
                            <optgroup label="通用物品">
                                <option value="coins-0">金币</option>
                            </optgroup>
                            <optgroup label="鱼竿">
                                {% for rod in all_rods %}<option value="rod-{{ rod.rod_id }}">{{ rod.name }} {{ '★' * rod.rarity }}</option>{% endfor %}
                            </optgroup>
                             <optgroup label="鱼饵">
                                {% for bait in all_baits %}<option value="bait-{{ bait.bait_id }}">{{ bait.name }} {{ '★' * bait.rarity }}</option>{% endfor %}
                            </optgroup>
                            <optgroup label="饰品">
                                {% for accessory in all_accessories %}
                                    <option value="accessory-{{ accessory.accessory_id }}">{{ accessory.name }} (稀有度: {{ accessory.rarity }})</option>
                                {% endfor %}
                            </optgroup>
                            <optgroup label="道具">
                                {% for item in all_items %}
                                    <option value="item-{{ item.item_id }}">{{ item.name }} (稀有度: {{ item.rarity }})</option>
                                {% endfor %}
                            </optgroup>
                        </select>
                    </div>
                    <div class="mb-3"><label class="form-label">数量</label><input type="number" name="quantity" class="form-control" value="1" required></div>
                    <div class="mb-3"><label class="form-label">权重 (数字越大越容易抽到)</label><input type="number" name="weight" class="form-control" value="10" required></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
{{ super() }}
<script>
document.addEventListener('DOMContentLoaded', function () {
    const itemModal = document.getElementById('itemModal');
    const modalTitle = itemModal.querySelector('.modal-title');
    const form = itemModal.querySelector('#item-form');
    const addItemBtn = document.getElementById('addItemBtn');
    const editItemBtns = document.querySelectorAll('.edit-btn');

    if(addItemBtn) {
        addItemBtn.addEventListener('click', function () {
            modalTitle.textContent = '添加新物品到奖池';
            form.action = "{{ url_for('admin_bp.add_item_to_pool', pool_id=pool.gacha_pool_id) }}";
            form.reset();
        });
    }

    if(editItemBtns) {
        editItemBtns.forEach(button => {
            button.addEventListener('click', function () {
                const data = JSON.parse(this.dataset.itemJson);
                modalTitle.textContent = `编辑物品: ${data.item_name}`;
                form.action = `/admin/gacha/pool/edit_item/${data.gacha_pool_item_id}?pool_id={{ pool.gacha_pool_id }}`;

                const itemFullId = `${data.item_type}-${data.item_id}`;
                const itemSelect = form.elements['item_full_id'];

                // 检查选项是否存在，不存在则动态添加（处理物品被删除但奖池里还存在的情况）
                if (![...itemSelect.options].some(opt => opt.value === itemFullId)) {
                    const missingOpt = new Option(`${data.item_name} (ID: ${data.item_id}) [已删除]`, itemFullId, true, true);
                    itemSelect.add(missingOpt, 0);
                }

                itemSelect.value = itemFullId;
                form.elements['quantity'].value = data.quantity;
                form.elements['weight'].value = data.weight;
            });
        });
    }

    // 权重内联编辑功能
    const weightInputs = document.querySelectorAll('.weight-input');
    const saveButtons = document.querySelectorAll('.save-weight-btn');
    const cancelButtons = document.querySelectorAll('.cancel-weight-btn');

    weightInputs.forEach(input => {
        let originalValue = input.value;
        
        input.addEventListener('focus', function() {
            originalValue = this.value;
            this.classList.add('border-primary');
            showActionButtons(this);
        });

        input.addEventListener('blur', function() {
            if (this.value === originalValue) {
                hideActionButtons(this);
                this.classList.remove('border-primary');
            }
        });

        input.addEventListener('input', function() {
            if (this.value !== originalValue) {
                showActionButtons(this);
            } else {
                hideActionButtons(this);
            }
        });

        input.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                saveWeight(this);
            } else if (e.key === 'Escape') {
                e.preventDefault();
                cancelEdit(this);
            }
        });
    });

    saveButtons.forEach(button => {
        button.addEventListener('click', function() {
            const input = this.closest('td').querySelector('.weight-input');
            saveWeight(input);
        });
    });

    cancelButtons.forEach(button => {
        button.addEventListener('click', function() {
            const input = this.closest('td').querySelector('.weight-input');
            cancelEdit(input);
        });
    });

    function showActionButtons(input) {
        const container = input.closest('td');
        const saveBtn = container.querySelector('.save-weight-btn');
        const cancelBtn = container.querySelector('.cancel-weight-btn');
        
        saveBtn.classList.remove('d-none');
        cancelBtn.classList.remove('d-none');
    }

    function hideActionButtons(input) {
        const container = input.closest('td');
        const saveBtn = container.querySelector('.save-weight-btn');
        const cancelBtn = container.querySelector('.cancel-weight-btn');
        
        saveBtn.classList.add('d-none');
        cancelBtn.classList.add('d-none');
    }

    function cancelEdit(input) {
        input.value = input.dataset.originalValue;
        input.classList.remove('border-primary');
        hideActionButtons(input);
    }

    async function saveWeight(input) {
        const itemId = input.dataset.itemId;
        const weight = parseInt(input.value);
        
        if (!itemId) {
            showToast('错误：无法获取物品ID', 'error');
            return;
        }
        
        if (weight < 1 || weight > 1000) {
            showToast('权重必须在1-1000之间', 'error');
            input.focus();
            return;
        }

        // 显示保存状态
        const saveBtn = input.closest('td').querySelector('.save-weight-btn');
        const originalIcon = saveBtn.innerHTML;
        saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
        saveBtn.disabled = true;

        try {
            const response = await fetch(`/admin/gacha/pool/update_weight/${itemId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ weight: weight })
            });

            const result = await response.json();

            if (result.success) {
                input.dataset.originalValue = weight.toString();
                input.classList.remove('border-primary');
                hideActionButtons(input);
                showToast('权重更新成功', 'success');
            } else {
                showToast(result.message || '更新失败', 'error');
                input.focus();
            }
        } catch (error) {
            showToast('网络错误，请重试', 'error');
            input.focus();
        } finally {
            saveBtn.innerHTML = originalIcon;
            saveBtn.disabled = false;
        }
    }

    function showToast(message, type) {
        // 创建toast元素
        const toast = document.createElement('div');
        toast.className = `toast align-items-center text-white bg-${type === 'success' ? 'success' : 'danger'} border-0`;
        toast.setAttribute('role', 'alert');
        toast.innerHTML = `
            <div class="d-flex">
                <div class="toast-body">${message}</div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        `;

        // 添加到页面
        let toastContainer = document.querySelector('.toast-container');
        if (!toastContainer) {
            toastContainer = document.createElement('div');
            toastContainer.className = 'toast-container position-fixed top-0 end-0 p-3';
            document.body.appendChild(toastContainer);
        }
        toastContainer.appendChild(toast);

        // 显示toast
        const bsToast = new bootstrap.Toast(toast);
        bsToast.show();

        // 自动移除
        toast.addEventListener('hidden.bs.toast', () => {
            toast.remove();
        });
    }
});
</script>
{% endblock %}