{% extends "layout.html" %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h2><i class="fas fa-gavel"></i> 鱼竿管理</h2>
    <div class="d-flex gap-2 align-items-center">
        <a class="btn btn-outline-primary" href="{{ url_for('admin_bp.rods_csv_template') }}">
            <i class="fas fa-download"></i> 下载CSV模板
        </a>
        <form id="rodCsvForm" action="{{ url_for('admin_bp.import_rods_csv') }}" method="post" enctype="multipart/form-data" class="d-inline">
            <input id="rodCsvInput" type="file" name="file" accept=".csv" class="d-none" required>
            <button type="button" id="rodCsvBtn" 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>成本</th>
                        <th>属性加成</th>
                        <th class="text-end">操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in items %}
                    <tr>
                        <td>{{ item.rod_id }}</td>
                        <td>{{ item.name }}</td>
                        <td>{{ '★' * item.rarity }}</td>
                        <td>{{ item.source }}</td>
                        <td>{{ item.purchase_cost or 'N/A' }}</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>
                        </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_rod', rod_id=item.rod_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-6"><label>来源</label>
                            <select name="source" class="form-select" required>
                                <option value="shop">商店</option>
                                <option value="gacha">抽卡</option>
                                <option value="event">活动</option>
                            </select>
                        </div>
                        <div class="col-md-6"><label>购买成本(可选)</label><input type="number" name="purchase_cost" class="form-control"></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-6"><label>耐久度(可选)</label><input type="number" name="durability" class="form-control"></div>
                        <div class="col-md-6"><label>图标URL(可选)</label><input type="text" name="icon_url" class="form-control"></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_rod') }}";
    const editUrlBase = "{{ url_for('admin_bp.edit_rod', rod_id=0) }}".slice(0, -1);
    document.addEventListener('DOMContentLoaded', function () {
        const form = document.getElementById('rodCsvForm');
        if (!form) return;
        const input = document.getElementById('rodCsvInput');
        const btn = document.getElementById('rodCsvBtn');
        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/rods_manager.js') }}"></script>
{% endblock %}