@model List<ToolHub.Models.Tool>
@{
    ViewData["Title"] = "工具列表";
    var categories = ViewBag.Categories as List<ToolHub.Models.Category> ?? new List<ToolHub.Models.Category>();
    var currentCategory = ViewBag.CurrentCategory as int? ?? 0;
    var search = ViewBag.Search as string;
}

<div class="container">
    <!-- 页面标题 -->
    <div class="text-center mb-6" style="padding: 2rem 0;">
        <h1 style="font-size: 2rem; font-weight: 700; margin-bottom: 1rem; color: var(--dark);">
            @if (!string.IsNullOrEmpty(search))
            {
                <span>搜索结果: "@search"</span>
            }
            else if (currentCategory > 0)
            {
                var categoryName = categories.FirstOrDefault(c => c.Id == currentCategory)?.Name ?? "工具";
                <span>@categoryName</span>
            }
            else
            {
                <span>所有工具</span>
            }
        </h1>
        <p style="color: var(--dark-2);">发现更多实用工具，提升您的工作效率</p>
    </div>

    <!-- 分类标签 -->
    @if (string.IsNullOrEmpty(search))
    {
        <div class="category-tabs mb-6">
            <a href="@Url.Action("Tools", "Home")" class="category-tab @(currentCategory == 0 ? "active" : "")">
                全部工具
            </a>
            @foreach (var category in categories)
            {
                <a href="@Url.Action("Tools", "Home", new { categoryId = category.Id })" 
                   class="category-tab @(currentCategory == category.Id ? "active" : "")">
                    <i class="@category.Icon" style="margin-right: 0.5rem;"></i>
                    @category.Name
                </a>
            }
        </div>
    }

    <!-- 工具网格 -->
    @if (Model.Any())
    {
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            @foreach (var tool in Model)
            {
                <div class="card tool-card" data-tool-id="@tool.Id">
                    @if (!string.IsNullOrEmpty(tool.Image))
                    {
                        <img src="@tool.Image" alt="@tool.Name" class="card-img" />
                    }
                    else
                    {
                        <div class="card-img" style="background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; align-items: center; justify-content: center;">
                            <i class="@tool.Icon" style="font-size: 3rem; color: white;"></i>
                        </div>
                    }
                    
                    <!-- 工具标签 -->
                    @if (tool.IsHot)
                    {
                        <div class="tool-badge hot">热门</div>
                    }
                    @if (tool.IsNew)
                    {
                        <div class="tool-badge new">新品</div>
                    }
                    @if (tool.IsRecommended)
                    {
                        <div class="tool-badge recommended">推荐</div>
                    }

                    <div class="card-body">
                        <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem;">
                            <div style="flex: 1;">
                                <h4 class="card-title">@tool.Name</h4>
                                <p class="card-text">@(tool.Description ?? "")</p>
                            </div>
                        </div>
                        
                        <div class="card-footer">
                            <div class="tool-stats">
                                @if (tool.Rating > 0)
                                {
                                    <div class="tool-rating">
                                        <i class="fas fa-star rating-stars"></i>
                                        <span>@tool.Rating.ToString("F1")</span>
                                    </div>
                                }
                                <span>@(tool.ViewCount > 1000 ? (tool.ViewCount / 1000).ToString("F0") + "K" : tool.ViewCount.ToString()) 次使用</span>
                            </div>
                            <a href="@(tool.Url ?? "#")" class="btn btn-primary btn-sm" target="_blank">
                                使用
                            </a>
                        </div>
                    </div>
                </div>
            }
        </div>
        
        <!-- 分页 (如果需要的话) -->
        <div class="text-center mt-8">
            <button class="btn btn-outline" id="loadMore" style="display: none;">
                <span>加载更多</span>
                <i class="fas fa-chevron-down"></i>
            </button>
        </div>
    }
    else
    {
        <!-- 空状态 -->
        <div class="text-center" style="padding: 4rem 2rem;">
            <div style="font-size: 4rem; color: var(--light-3); margin-bottom: 1rem;">
                <i class="fas fa-search"></i>
            </div>
            <h3 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--dark);">
                @if (!string.IsNullOrEmpty(search))
                {
                    <span>未找到相关工具</span>
                }
                else
                {
                    <span>暂无工具</span>
                }
            </h3>
            <p style="color: var(--dark-2); margin-bottom: 2rem;">
                @if (!string.IsNullOrEmpty(search))
                {
                    <span>试试其他关键词，或浏览其他分类的工具</span>
                }
                else
                {
                    <span>该分类下暂时没有工具，敬请期待</span>
                }
            </p>
            <a href="@Url.Action("Tools", "Home")" class="btn btn-primary">
                <i class="fas fa-th-large" style="margin-right: 0.5rem;"></i>
                <span>浏览所有工具</span>
            </a>
        </div>
    }
</div>

<style>
    /* 工具页面特定样式 */
    .category-tabs {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .category-tabs::-webkit-scrollbar {
        display: none;
    }
    
    @@media (max-width: 767px) {
        .category-tabs {
            padding-bottom: 1rem;
        }
        
        .grid {
            grid-template-columns: repeat(1, 1fr);
        }
    }
    
    @@media (min-width: 768px) and (max-width: 1023px) {
        .grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    
    @@media (min-width: 1024px) and (max-width: 1279px) {
        .grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }
    
    @@media (min-width: 1280px) {
        .grid {
            grid-template-columns: repeat(4, 1fr);
        }
    }
</style>