{% extends 'admin/base.html' %}

{% block title %}价格管理 - 后台管理{% endblock %}

{% block extra_css %}
<style>
.category-badge {
    background: linear-gradient(135deg, #28a745, #20c997) !important;
    color: white !important;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.category-badge:hover {
    background: linear-gradient(135deg, #218838, #1ea87a) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}
</style>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 分类筛选
    $('#categoryFilter').change(function() {
        $('#filterForm').submit();
    });

    // 全选/取消全选
    $('#selectAll').change(function() {
        $('.product-checkbox').prop('checked', this.checked);
    });

    // 获取价格按钮
    $('#fetchPricesBtn').click(function() {
        var selectedProducts = $('.product-checkbox:checked');
        if (selectedProducts.length === 0) {
            alert('请至少选择一个产品');
            return;
        }

        var productIds = [];
        selectedProducts.each(function() {
            productIds.push($(this).val());
        });

        var platform = $('#platformSelect').val();
        
        // 显示加载中
        $(this).html('<i class="fas fa-spinner fa-spin"></i> 获取中...').prop('disabled', true);
        
        $.ajax({
            url: '{% url "fetch_prices" %}',
            type: 'POST',
            headers: {
                'X-CSRFToken': window.getCSRFToken(),
                'X-Requested-With': 'XMLHttpRequest'
            },
            data: {
                'product_ids[]': productIds,
                'platform': platform
            },
            success: function(response) {
                if (response.results && response.results.length > 0) {
                    // 显示详细结果
                    let resultMsg = response.message + '\n\n详细结果:\n';
                    response.results.forEach(function(result) {
                        if (result.status === 'success') {
                            resultMsg += `✓ ${result.product}: ¥${result.price}\n`;
                        } else {
                            resultMsg += `✗ ${result.product}: ${result.error}\n`;
                        }
                    });
                    alert(resultMsg);
                } else {
                    alert(response.message);
                }
                location.reload();
            },
            error: function(xhr, status, error) {
                console.error('Error:', error);
                let errorMsg = '获取价格失败: ';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMsg += xhr.responseJSON.message;
                } else {
                    errorMsg += error;
                }
                alert(errorMsg);
            },
            complete: function() {
                $('#fetchPricesBtn').html('<i class="fas fa-download"></i> 获取价格').prop('disabled', false);
            }
        });
    });
});
</script>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4 fade-in">
    <h2><i class="fas fa-tags me-2"></i>价格管理</h2>
    <div class="d-flex gap-2 align-items-center">
        <a href="{% url 'cookie_management' %}" class="btn btn-outline-secondary">
            <i class="fas fa-cookie me-1"></i>管理Cookie
        </a>
        <select id="platformSelect" class="form-select" style="width: auto;">
            <option value="jd">京东</option>
            <option value="taobao">淘宝</option>
            <option value="tmall">天猫</option>
            <option value="manual">手动录入</option>
        </select>
        <button id="fetchPricesBtn" class="btn btn-primary">
            <i class="fas fa-download me-1"></i>获取价格
        </button>
    </div>
</div>

<!-- 筛选表单 -->
<div class="mb-4 fade-in">
    <form id="filterForm" method="get" class="row g-3 align-items-end p-3 bg-white rounded shadow-sm">
        <div class="col-md-4">
            <label class="form-label">产品分类</label>
            <select id="categoryFilter" name="category" class="form-select">
                <option value="">所有分类</option>
                {% for category in categories %}
                <option value="{{ category.id }}" {% if selected_category == category.id|stringformat:'s' %}selected{% endif %}>
                    {{ category.name }}
                </option>
                {% endfor %}
            </select>
        </div>
        <div class="col-md-4">
            <label class="form-label">搜索产品</label>
            <input type="text" name="search" class="form-control" placeholder="产品名称、品牌、型号" value="{{ search }}">
        </div>
        <div class="col-md-4">
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-search me-1"></i>筛选
            </button>
            <a href="{% url 'price_list' %}" class="btn btn-outline-secondary ms-2">
                <i class="fas fa-times me-1"></i>清除
            </a>
        </div>
    </form>
</div>

<!-- 产品列表 -->
<div class="card fade-in">
    <div class="card-header">
        <h3><i class="fas fa-list me-2"></i>产品列表</h3>
    </div>
    <div class="card-body">
        {% if products %}
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th width="50">
                            <input type="checkbox" id="selectAll">
                        </th>
                        <th>产品名称</th>
                        <th>品牌型号</th>
                        <th>分类</th>
                        <th>最新价格</th>
                        <th>平台</th>
                        <th>更新时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for product in products %}
                    <tr>
                        <td>
                            <input type="checkbox" class="product-checkbox" value="{{ product.id }}">
                        </td>
                        <td>
                            <div class="d-flex align-items-center">
                                {% if product.image %}
                                <div class="me-2">
                                    <i class="fas fa-image text-success"></i>
                                </div>
                                {% endif %}
                                <div>
                                    <strong>{{ product.name }}</strong>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div>
                                {% if product.brand %}<span class="badge bg-info me-1">{{ product.brand }}</span>{% endif %}
                                {% if product.model %}<span class="badge bg-secondary">{{ product.model }}</span>{% endif %}
                            </div>
                        </td>
                        <td>
                            <span class="badge category-badge">{{ product.category.name }}</span>
                        </td>
                        <td>
                            {% if product.latest_price %}
                            <span class="fw-bold text-primary">¥{{ product.latest_price.price }}</span>
                            {% else %}
                            <span class="text-muted">暂无</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if product.latest_price %}
                            <span class="badge bg-secondary">{{ product.latest_price.get_platform_display }}</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if product.latest_price %}
                            <small class="text-muted">
                                <i class="fas fa-clock me-1"></i>{{ product.latest_price.fetched_at|date:"m-d H:i" }}
                            </small>
                            {% endif %}
                        </td>
                        <td>
                            <div class="btn-group" role="group">
                                <button class="btn btn-sm btn-outline-info" 
                                        onclick="getProductPrice({{ product.id }})" 
                                        title="刷新价格">
                                    <i class="fas fa-sync"></i>
                                </button>
                                <a href="/admin/portal/product/{{ product.id }}/change/" 
                                   class="btn btn-sm btn-outline-secondary"
                                   title="编辑产品">
                                    <i class="fas fa-edit"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="text-center py-5">
            <i class="fas fa-box-open fa-5x text-muted mb-4"></i>
            <h4 class="text-muted mb-3">暂无产品数据</h4>
            <p class="text-muted mb-4">开始添加产品来管理价格信息</p>
            <a href="/admin/portal/product/add/" class="btn btn-primary btn-lg">
                <i class="fas fa-plus me-2"></i>添加产品
            </a>
        </div>
        {% endif %}
    </div>
</div>

<script>
function getProductPrice(productId) {
    $.ajax({
        url: '/api/product/' + productId + '/price/',
        type: 'GET',
        success: function(response) {
            alert('产品价格: ¥' + response.price + '\n平台: ' + response.platform + '\n更新时间: ' + response.fetched_at);
        },
        error: function() {
            alert('获取价格失败');
        }
    });
}
</script>
{% endblock %}