{% extends "base.html" %}
{% block title %}我的收藏 - 太白购物商城{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/favorites.css') }}">
{% endblock %}

{% block content %}
<div class="row">
    <!-- 侧边栏 -->
    <div class="col-md-3">
        <div class="card">
            <div class="card-header">
                <h5><i class="bi bi-person-circle"></i> 个人中心</h5>
            </div>
            <div class="list-group list-group-flush">
                <a href="{{ url_for('user.profile') }}" class="list-group-item list-group-item-action">
                    <i class="bi bi-person"></i> 基本信息
                </a>
                <a href="{{ url_for('user.orders') }}" class="list-group-item list-group-item-action">
                    <i class="bi bi-bag"></i> 我的订单
                </a>
                <a href="{{ url_for('address.index') }}" class="list-group-item list-group-item-action">
                    <i class="bi bi-geo-alt"></i> 收货地址
                </a>
                <a href="{{ url_for('review.my_reviews') }}" class="list-group-item list-group-item-action">
                    <i class="bi bi-star"></i> 我的评价
                </a>
                <a href="{{ url_for('favorite.index') }}" class="list-group-item list-group-item-action active">
                    <i class="bi bi-heart"></i> 我的收藏
                </a>
                <a href="{{ url_for('history.index') }}" class="list-group-item list-group-item-action">
                    <i class="bi bi-clock-history"></i> 浏览历史
                </a>
            </div>
        </div>
    </div>

    <!-- 主要内容 -->
    <div class="col-md-9">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5><i class="bi bi-heart text-danger"></i> 我的收藏</h5>
                <div>
                    <span class="badge bg-secondary">共 {{ total_count }} 件商品</span>
                    {% if total_count > 0 %}
                    <button class="btn btn-sm btn-outline-secondary ms-2" onclick="toggleSelectAll()">
                        <i class="bi bi-check-square"></i> 全选
                    </button>
                    <button class="btn btn-sm btn-outline-danger ms-1" onclick="batchRemove()">
                        <i class="bi bi-trash"></i> 批量删除
                    </button>
                    {% endif %}
                </div>
            </div>

            <div class="card-body">
                {% if favorites.items %}
                <div class="row">
                    {% for favorite in favorites.items %}
                    <div class="col-lg-6 col-xl-4 mb-4">
                        <div class="card favorite-item h-100" data-product-id="{{ favorite.product_id }}">
                            <div class="card-body">
                                <div class="d-flex">
                                    <div class="form-check me-3">
                                        <input class="form-check-input favorite-checkbox" type="checkbox" 
                                               value="{{ favorite.product_id }}" id="favorite-{{ favorite.product_id }}">
                                    </div>
                                    
                                    <div class="flex-shrink-0 me-3">
                                        <a href="{{ url_for('main.product_detail', product_id=favorite.product_id) }}">
                                            {% if favorite.product.main_image %}
                                            <img src="{{ favorite.product.main_image }}" 
                                                 alt="{{ favorite.product.name }}" 
                                                 class="favorite-image">
                                            {% else %}
                                            <div class="favorite-image-placeholder">
                                                <i class="bi bi-image"></i>
                                            </div>
                                            {% endif %}
                                        </a>
                                    </div>
                                    
                                    <div class="flex-grow-1">
                                        <h6 class="card-title">
                                            <a href="{{ url_for('main.product_detail', product_id=favorite.product_id) }}" 
                                               class="text-decoration-none">
                                                {{ favorite.product.name }}
                                            </a>
                                        </h6>
                                        
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <span class="text-danger fw-bold">
                                                ¥{{ "%.2f"|format(favorite.product.price) }}
                                            </span>
                                            <small class="text-muted">
                                                销量 {{ favorite.product.sales_count }}
                                            </small>
                                        </div>
                                        
                                        <div class="d-flex justify-content-between align-items-center">
                                            <small class="text-muted">
                                                {{ favorite.created_at.strftime('%Y-%m-%d') }}
                                            </small>
                                            {% if favorite.product.status == 1 %}
                                            <span class="badge bg-success">有货</span>
                                            {% else %}
                                            <span class="badge bg-secondary">下架</span>
                                            {% endif %}
                                        </div>
                                        
                                        <div class="mt-3">
                                            <div class="btn-group btn-group-sm w-100 icon-buttons">
                                                {% if favorite.product.status == 1 %}
                                                <button class="btn btn-outline-primary" 
                                                        onclick="addToCart({{ favorite.product_id }})"
                                                        data-bs-toggle="tooltip" data-bs-placement="top" title="加入购物车">
                                                    <i class="bi bi-cart-plus"></i>
                                                </button>
                                                {% endif %}
                                                <button class="btn btn-outline-danger" 
                                                        onclick="removeFavorite({{ favorite.product_id }})"
                                                        data-bs-toggle="tooltip" data-bs-placement="top" title="取消收藏">
                                                    <i class="bi bi-heart-fill"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>

                <!-- 分页 -->
                {% if favorites.pages > 1 %}
                <nav aria-label="收藏分页">
                    <ul class="pagination justify-content-center">
                        {% if favorites.has_prev %}
                        <li class="page-item">
                            <a class="page-link" href="{{ url_for('favorite.index', page=favorites.prev_num) }}">
                                <i class="bi bi-chevron-left"></i>
                            </a>
                        </li>
                        {% endif %}
                        
                        {% for page_num in favorites.iter_pages() %}
                            {% if page_num %}
                                {% if page_num != favorites.page %}
                                <li class="page-item">
                                    <a class="page-link" href="{{ url_for('favorite.index', page=page_num) }}">
                                        {{ page_num }}
                                    </a>
                                </li>
                                {% else %}
                                <li class="page-item active">
                                    <span class="page-link">{{ page_num }}</span>
                                </li>
                                {% endif %}
                            {% else %}
                            <li class="page-item disabled">
                                <span class="page-link">...</span>
                            </li>
                            {% endif %}
                        {% endfor %}
                        
                        {% if favorites.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="{{ url_for('favorite.index', page=favorites.next_num) }}">
                                <i class="bi bi-chevron-right"></i>
                            </a>
                        </li>
                        {% endif %}
                    </ul>
                </nav>
                {% endif %}

                {% else %}
                <!-- 空状态 -->
                <div class="empty-state">
                    <div class="text-center py-5">
                        <i class="bi bi-heart display-1 text-muted"></i>
                        <h4 class="mt-3 text-muted">还没有收藏任何商品</h4>
                        <p class="text-muted">去逛逛，收藏心仪的商品吧~</p>
                        <a href="{{ url_for('main.index') }}" class="btn btn-primary">
                            <i class="bi bi-house"></i> 去首页逛逛
                        </a>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- 确认删除模态框 -->
<div class="modal fade" id="confirmModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">确认删除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p id="confirmMessage">确定要取消收藏这些商品吗？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="confirmBtn">确认删除</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/favorites.js') }}"></script>
{% endblock %}