{% extends "layout.html" %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h2><i class="fas fa-dice"></i> 抽卡池管理</h2>
    <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="row">
    {% for pool in pools %}
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-body">
                <h5 class="card-title">{{ pool.name }} (ID: {{ pool.gacha_pool_id }})</h5>
                <p class="card-text">{{ pool.description or '无描述' }}</p>
                
                <p>
                    {% if pool.is_limited_time %}
                        <span class="badge bg-danger me-2">限时开放</span>
                    {% endif %}
                    {% if pool.cost_premium_currency and pool.cost_premium_currency > 0 %}
                        <span class="badge bg-warning text-dark">花费：高级货币 {{ pool.cost_premium_currency }}</span>
                    {% else %}
                        <span class="badge bg-primary">花费：金币 {{ pool.cost_coins }}</span>
                    {% endif %}
                </p>
            </div>
            <div class="card-footer text-end">
                <button class="btn btn-sm btn-info edit-btn"
                        data-bs-toggle="modal"
                        data-bs-target="#itemModal"
                        data-item-json='{{ pool|tojson|safe }}'>
                    <i class="fas fa-edit"></i> 编辑
                </button>
                <a href="{{ url_for('admin_bp.manage_gacha_pool_details', pool_id=pool.gacha_pool_id) }}" class="btn btn-sm btn-secondary">
                    <i class="fas fa-cogs"></i> 管理物品
                </a>
                <form action="{{ url_for('admin_bp.copy_gacha_pool', pool_id=pool.gacha_pool_id) }}" method="post" class="d-inline" onsubmit="return confirm('确定要复制【{{ pool.name }}】及其所有物品吗？');">
                    <button type="submit" class="btn btn-sm btn-success">
                        <i class="fas fa-copy"></i> 复制
                    </button>
                </form>
                <form action="{{ url_for('admin_bp.delete_gacha_pool', pool_id=pool.gacha_pool_id) }}" method="post" class="d-inline" onsubmit="return confirm('确定要删除【{{ pool.name }}】及其所有物品吗？');">
                    <button type="submit" class="btn btn-sm btn-danger">
                        <i class="fas fa-trash"></i> 删除
                    </button>
                </form>
            </div>
        </div>
    </div>
    {% else %}
    <p>还没有创建任何抽卡池。</p>
    {% endfor %}
</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>名称</label><input type="text" name="name" class="form-control" required></div>
                    <div class="mb-3"><label>描述</label><textarea name="description" class="form-control" rows="2"></textarea></div>
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" id="isLimitedTime" name="is_limited_time">
                        <label class="form-check-label" for="isLimitedTime">限时开放</label>
                    </div>
                    <div class="mb-3" id="openUntilContainer">
                        <label>开放截止时间</label>
                        <input type="datetime-local" name="open_until" class="form-control">
                        <div class="form-text">开启限时后，设置开放到什么时候（本地时间）。</div>
                    </div>
                    <div class="mb-3">
                        <label>消耗货币</label>
                        <select name="currency_type" class="form-select">
                            <option value="coins">金币</option>
                            <option value="premium">高级货币</option>
                        </select>
                    </div>
                    <div class="mb-1"><label>消耗数量</label><input type="number" name="cost_amount" class="form-control" value="0"></div>
                    <div class="form-text text-muted">卡池消耗为单一币种：金币或高级货币。</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 isLimitedInput = form.elements['is_limited_time'];
    const openUntilInput = form.elements['open_until'];
    const openUntilContainer = document.getElementById('openUntilContainer');

    function updateOpenUntilVisibility() {
        const enabled = !!isLimitedInput.checked;
        if (enabled) {
            openUntilContainer.style.display = '';
        } else {
            // 仅隐藏，不清空，避免来回切换需要重复选择日期
            openUntilContainer.style.display = 'none';
        }
    }

    // 初始化显示状态
    updateOpenUntilVisibility();
    // 监听切换
    isLimitedInput.addEventListener('change', updateOpenUntilVisibility);

    document.getElementById('addItemBtn').addEventListener('click', function () {
        modalTitle.textContent = '添加新奖池';
        form.action = "{{ url_for('admin_bp.add_gacha_pool') }}";
        form.reset();
        if (form.elements['currency_type']) form.elements['currency_type'].value = 'coins';
        if (form.elements['cost_amount']) form.elements['cost_amount'].value = 0;
        if (form.elements['is_limited_time']) form.elements['is_limited_time'].checked = false;
        if (form.elements['open_until']) form.elements['open_until'].value = '';
        updateOpenUntilVisibility();
    });

    document.querySelectorAll('.edit-btn').forEach(button => {
        button.addEventListener('click', function () {
            const data = JSON.parse(this.dataset.itemJson);
            modalTitle.textContent = `编辑奖池: ${data.name}`;
            form.action = `/admin/gacha/edit/${data.gacha_pool_id}`;
            // 名称与描述
            if (form.elements['name']) form.elements['name'].value = data.name || '';
            if (form.elements['description']) form.elements['description'].value = data.description || '';

            // 货币类型与金额（单选）
            const isPremium = (data.cost_premium_currency && data.cost_premium_currency > 0);
            if (form.elements['currency_type']) form.elements['currency_type'].value = isPremium ? 'premium' : 'coins';
            if (form.elements['cost_amount']) form.elements['cost_amount'].value = isPremium ? (data.cost_premium_currency || 0) : (data.cost_coins || 0);

            // 限时开放
            if (form.elements['is_limited_time']) form.elements['is_limited_time'].checked = !!data.is_limited_time;
            if (form.elements['open_until']) form.elements['open_until'].value = data.open_until ? data.open_until.replace(' ', 'T') : '';
            updateOpenUntilVisibility();
        });
    });
});
</script>
{% endblock %}