{% extends "layout.html" %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h2><i class="fas fa-gem"></i> 饰品管理</h2>
    <div class="d-flex gap-2 align-items-center">
        <a class="btn btn-outline-primary" href="{{ url_for('admin_bp.accessories_csv_template') }}">
            <i class="fas fa-download"></i> 下载CSV模板
        </a>
        <form id="accCsvForm" action="{{ url_for('admin_bp.import_accessories_csv') }}" method="post" enctype="multipart/form-data" class="d-inline">
            <input id="accCsvInput" type="file" name="file" accept=".csv" class="d-none" required>
            <button type="button" id="accCsvBtn" class="btn btn-success">
                <i class="fas fa-upload"></i> 导入CSV
            </button>
        </form>
        <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>

<div class="card border-primary">
    <div class="card-header">现有饰品列表</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 class="text-end">操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in items %}
                    <tr>
                        <td>{{ item.accessory_id }}</td>
                        <td>{{ item.name }}</td>
                        <td>{{ '★' * item.rarity }}</td>
                        <td>
                            <span class="badge bg-secondary">品质: {{ item.bonus_fish_quality_modifier }}</span>
                            <span class="badge bg-secondary">数量: {{ item.bonus_fish_quantity_modifier }}</span>
                            <span class="badge bg-secondary">稀有: {{ item.bonus_rare_fish_chance }}</span>
                            <span class="badge bg-warning text-dark">金币: {{ item.bonus_coin_modifier }}</span>
                        </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_accessory', accessory_id=item.accessory_id) }}" method="post" class="d-inline" onsubmit="return confirm('确定要删除【{{ 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 modal-lg">
        <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="row g-3">
                        <div class="col-md-8"><label>名称</label><input type="text" name="name" class="form-control" required></div>
                        <div class="col-md-4"><label>稀有度</label><input type="number" name="rarity" class="form-control" min="1" required></div>
                        <div class="col-12"><label>描述</label><textarea name="description" class="form-control" rows="2"></textarea></div>
                        <div class="col-md-4"><label>品质加成</label><input type="number" step="0.01" name="bonus_fish_quality_modifier" class="form-control" value="1.0"></div>
                        <div class="col-md-4"><label>数量加成</label><input type="number" step="0.01" name="bonus_fish_quantity_modifier" class="form-control" value="1.0"></div>
                        <div class="col-md-4"><label>稀有加成</label><input type="number" step="0.01" name="bonus_rare_fish_chance" class="form-control" value="0.0"></div>
                        <div class="col-md-4"><label>金币加成</label><input type="number" step="0.01" name="bonus_coin_modifier" class="form-control" value="1.0"></div>
                        <div class="col-md-4"><label>装备槽类型</label><input type="text" name="slot_type" class="form-control" value="general"></div>
                        <div class="col-md-4"><label>图标URL(可选)</label><input type="text" name="icon_url" class="form-control"></div>
                        <div class="col-12"><label>其他效果描述</label><textarea name="other_bonus_description" class="form-control" rows="2"></textarea></div>
                    </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 %}
<script>
    const addUrl = "{{ url_for('admin_bp.add_accessory') }}";
    const editUrlBase = "{{ url_for('admin_bp.edit_accessory', accessory_id=0) }}".slice(0, -1);
    document.addEventListener('DOMContentLoaded', function () {
        const form = document.getElementById('accCsvForm');
        if (!form) return;
        const input = document.getElementById('accCsvInput');
        const btn = document.getElementById('accCsvBtn');
        btn.addEventListener('click', function () { input.click(); });
        input.addEventListener('change', function () {
            if (input.files && input.files.length > 0) { form.submit(); }
        });
    });
</script>
<script src="{{ url_for('admin_bp.static', filename='js/accessories_manager.js') }}"></script>
{% endblock %}