---
import MainLayout from "../../components/MainLayout.astro";
import { getCollection, type CollectionEntry } from "astro:content";

// 获取美食内容集合
const cuisines = await getCollection("cuisine");

// 按照日期排序
const sortByDate = <T extends { data: { pubDate?: Date | string, updatedDate?: Date | string } }>(a: T, b: T): number => {
  return new Date(b.data.pubDate || b.data.updatedDate || 0).getTime() - 
         new Date(a.data.pubDate || a.data.updatedDate || 0).getTime();
};

// 按发布日期排序
const sortedCuisines = [...cuisines].sort(sortByDate);

// 从URL参数获取筛选条件
const url = new URL(Astro.request.url);
const searchParam = url.searchParams.get('search');
const categoryParam = url.searchParams.get('category');
const cityParam = url.searchParams.get('city');
const tasteParam = url.searchParams.get('taste');
const tagParam = url.searchParams.get('tag');
const ingredientParam = url.searchParams.get('ingredient');
const page = parseInt(url.searchParams.get('page') || '1');

// 服务端筛选数据
let filteredCuisines = sortedCuisines;

// 根据搜索参数筛选
if (searchParam) {
  const searchValue = searchParam.toLowerCase();
  filteredCuisines = filteredCuisines.filter(cuisine => {
    const titleMatch = cuisine.data.title.toLowerCase().includes(searchValue);
    const descriptionMatch = cuisine.data.description && cuisine.data.description.toLowerCase().includes(searchValue);
    const tagMatch = cuisine.data.tags && cuisine.data.tags.some(tag => tag.toLowerCase().includes(searchValue));
    const cityMatch = cuisine.data.city && cuisine.data.city.some(city => city.toLowerCase().includes(searchValue));
    const ingredientMatch = cuisine.data.ingredients && cuisine.data.ingredients.some(ing => ing.toLowerCase().includes(searchValue));
    
    return titleMatch || descriptionMatch || tagMatch || cityMatch || ingredientMatch;
  });
}

// 根据标签筛选
if (tagParam) {
  filteredCuisines = filteredCuisines.filter(cuisine => 
    cuisine.data.tags.some(tag => tag.toLowerCase() === tagParam.toLowerCase())
  );
}

// 根据分类筛选
if (categoryParam) {
  filteredCuisines = filteredCuisines.filter(cuisine => 
    cuisine.data.category && cuisine.data.category.toLowerCase() === categoryParam.toLowerCase()
  );
}

// 根据城市筛选
if (cityParam) {
  filteredCuisines = filteredCuisines.filter(cuisine => 
    cuisine.data.city && cuisine.data.city.some(city => city.toLowerCase() === cityParam.toLowerCase())
  );
}

// 根据口味筛选
if (tasteParam) {
  filteredCuisines = filteredCuisines.filter(cuisine => 
    cuisine.data.taste && cuisine.data.taste.toLowerCase() === tasteParam.toLowerCase()
  );
}

// 提取所有标签
const allTags: {name: string, count: number}[] = [];
sortedCuisines.forEach((cuisine: CollectionEntry<"cuisine">) => {
  cuisine.data.tags.forEach((tag: string) => {
    const existingTag = allTags.find(t => t.name === tag);
    if (existingTag) {
      existingTag.count++;
    } else {
      allTags.push({ name: tag, count: 1 });
    }
  });
});

// 按照标签出现次数排序
allTags.sort((a, b) => b.count - a.count);

// 获取所有分类并计数
const categories: {name: string, count: number}[] = [];
sortedCuisines.forEach((cuisine: CollectionEntry<"cuisine">) => {
  if (cuisine.data.category) {
    const existingCategory = categories.find(c => c.name === cuisine.data.category);
    if (existingCategory) {
      existingCategory.count++;
    } else {
      categories.push({ name: cuisine.data.category, count: 1 });
    }
  }
});

// 按照分类出现次数排序
categories.sort((a, b) => b.count - a.count);

// 获取所有产地并计数
const citys: {name: string, count: number}[] = [];
sortedCuisines.forEach((cuisine: CollectionEntry<"cuisine">) => {
  if (cuisine.data.city && cuisine.data.city.length > 0) {
    // 遍历每个城市数组
    cuisine.data.city.forEach(cityName => {
      const existingcity = citys.find(o => o.name === cityName);
      if (existingcity) {
        existingcity.count++;
      } else {
        citys.push({ name: cityName, count: 1 });
      }
    });
  }
});

// 按照产地出现次数排序
citys.sort((a, b) => b.count - a.count);

// 获取所有口味并计数
const tastes: {name: string, count: number}[] = [];
sortedCuisines.forEach((cuisine: CollectionEntry<"cuisine">) => {
  if (cuisine.data.taste) {
    const existingTaste = tastes.find(t => t.name === cuisine.data.taste);
    if (existingTaste) {
      existingTaste.count++;
    } else {
      tastes.push({ name: cuisine.data.taste, count: 1 });
    }
  }
});

// 按照口味出现次数排序
tastes.sort((a, b) => b.count - a.count);

// 获取所有主要食材并计数
const mainIngredients: {name: string, count: number}[] = [];
sortedCuisines.forEach((cuisine: CollectionEntry<"cuisine">) => {
  if (cuisine.data.ingredients && cuisine.data.ingredients.length > 0) {
    // 遍历所有食材
    cuisine.data.ingredients.forEach(ingredient => {
      const ingredientName = ingredient.trim();
      if (ingredientName) {
        const existingIngredient = mainIngredients.find(i => i.name === ingredientName);
        if (existingIngredient) {
          existingIngredient.count++;
        } else {
          mainIngredients.push({ name: ingredientName, count: 1 });
        }
      }
    });
  }
});

// 按照主要食材出现次数排序
mainIngredients.sort((a, b) => b.count - a.count);

// 如果食材太多，可以只显示前N个最常用的
const topIngredients = mainIngredients.slice(0, 30); // 显示前30个最常用的食材

// 检查是否有筛选条件
const hasFilters = !!searchParam || !!categoryParam || !!cityParam || !!tasteParam || !!tagParam || !!ingredientParam;

// 分页逻辑
const itemsPerPage = 9;
const totalPages = Math.ceil(filteredCuisines.length / itemsPerPage);
const currentPageCuisines = filteredCuisines.slice((page - 1) * itemsPerPage, page * itemsPerPage);

// 构建查询参数字符串（用于分页）
let queryParams = '';
if (searchParam) queryParams += `&search=${encodeURIComponent(searchParam)}`;
if (categoryParam) queryParams += `&category=${encodeURIComponent(categoryParam)}`;
if (cityParam) queryParams += `&city=${encodeURIComponent(cityParam)}`;
if (tasteParam) queryParams += `&taste=${encodeURIComponent(tasteParam)}`;
if (tagParam) queryParams += `&tag=${encodeURIComponent(tagParam)}`;
if (ingredientParam) queryParams += `&ingredient=${encodeURIComponent(ingredientParam)}`;
// 如果有查询参数，确保第一个字符是?而不是&
if (queryParams) queryParams = '?' + queryParams.substring(1);
---

<MainLayout title="河北美食食谱 - 河北游礼">
  <!-- 食谱风格头部 -->
  <div class="relative overflow-hidden bg-recipe-paper dark:bg-recipe-paper-dark min-h-[480px] flex items-center">
    <!-- 纸张纹理和装饰 -->
    <div class="absolute inset-0 bg-[url('/images/recipe-paper-texture.png')] opacity-10"></div>
    <div class="absolute top-16 left-0 w-32 h-32 bg-[url('/images/spoon-fork.png')] bg-no-repeat bg-contain opacity-15 -rotate-12"></div>
    <div class="absolute bottom-0 right-0 w-32 h-32 bg-[url('/images/chef-hat.png')] bg-no-repeat bg-contain opacity-15 rotate-12"></div>
    
    <!-- 食谱标题区域 -->
    <div class="container mx-auto px-4 relative z-10 pt-16">
      <div class="max-w-4xl mx-auto text-center recipe-card">
        <!-- 食谱卡片装饰 -->
        <div class="recipe-card-pins absolute -top-3 left-1/2 transform -translate-x-1/2">
          <div class="w-6 h-6 bg-red-500 dark:bg-red-700 rounded-full absolute -left-16 shadow-md"></div>
          <div class="w-6 h-6 bg-amber-500 dark:bg-amber-700 rounded-full absolute left-16 shadow-md"></div>
        </div>
        
        <!-- 手写风格标题 -->
        <div class="handwritten-title py-6">
          <h1 class="text-6xl md:text-7xl font-recipe text-brown-900 dark:text-brown-100 mb-2 recipe-title">河北美食食谱</h1>
          <div class="w-3/4 mx-auto h-px bg-brown-300 dark:bg-brown-700 my-6"></div>
          <p class="text-xl text-brown-700 dark:text-brown-300 font-recipe-body mb-6 leading-relaxed">
            收集自河北各地的传统美食配方，
            <br>家传秘方与地方特色，尽在此食谱
        </p>
      </div>
      
        <!-- 食谱元数据 -->
        <div class="recipe-metadata flex flex-wrap justify-center gap-8 text-sm text-brown-600 dark:text-brown-400 mb-8">
          <div class="flex items-center">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
            </svg>
            <span>{cuisines.length} 道经典菜肴</span>
          </div>
          <div class="flex items-center">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
            <span>{citys.length} 个地方特色</span>
          </div>
          <div class="flex items-center">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
            </svg>
            <span>收集于 2025 年</span>
          </div>
        </div>
        

      </div>
    </div>
    
    <!-- 装饰性图案 -->
    <div class="absolute -top-4 -left-4 w-24 h-24 border-t-4 border-l-4 border-brown-300 dark:border-brown-700 opacity-50"></div>
    <div class="absolute -bottom-4 -right-4 w-24 h-24 border-b-4 border-r-4 border-brown-300 dark:border-brown-700 opacity-50"></div>
              </div>
  
  <!-- 主内容区域 - 食谱风格 -->
  <div class="bg-recipe-paper dark:bg-recipe-paper-dark py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <!-- 移动端筛选按钮和搜索框 -->
      <div class="lg:hidden mb-6 flex justify-between items-center">
        <button id="mobile-filter-toggle" class="bg-amber-500 text-white px-4 py-2 rounded-full inline-flex items-center space-x-2 shadow-md active:shadow-sm transition-shadow h-[38px]">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
          </svg>
          <span>筛选</span>
        </button>
        
        <!-- 移动端搜索框 -->
        <form id="search-form-mobile" class="relative flex-grow mx-3" method="get" action="/cuisine">
          <input 
            type="text" 
            id="search-input-mobile"
            name="search" 
            placeholder="输入菜名或食材..." 
            value={searchParam || ''} 
            class="w-full text-brown-800 dark:text-brown-200 bg-amber-50/50 dark:bg-amber-900/20 border border-brown-300 dark:border-brown-700 rounded-full py-2 pl-3 pr-10 focus:outline-none focus:border-amber-500 dark:focus:border-amber-400 text-sm"
          />
          {/* 保留当前的其他筛选参数 */}
          {categoryParam && <input type="hidden" name="category" value={categoryParam} />}
          {cityParam && <input type="hidden" name="city" value={cityParam} />}
          {tasteParam && <input type="hidden" name="taste" value={tasteParam} />}
          {tagParam && <input type="hidden" name="tag" value={tagParam} />}
          {ingredientParam && <input type="hidden" name="ingredient" value={ingredientParam} />}
          <button type="submit" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-amber-600 dark:text-amber-400">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          </button>
        </form>
      </div>
      
      <!-- 移动端筛选抽屉 - 默认隐藏 -->
      <div id="mobile-filter-drawer" class="lg:hidden fixed inset-0 z-50 transform translate-x-full transition-transform duration-300 ease-in-out">
        <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" id="mobile-filter-backdrop"></div>
        <div class="absolute right-0 top-0 bottom-0 w-4/5 max-w-sm bg-recipe-paper dark:bg-recipe-paper-dark shadow-xl overflow-y-auto">
          <div class="p-4 border-b border-brown-200 dark:border-brown-700 flex justify-between items-center">
            <h3 class="text-lg font-recipe text-brown-800 dark:text-brown-200">美食筛选</h3>
            <button id="mobile-filter-close" class="rounded-full p-2 text-brown-500 hover:bg-amber-100/50 dark:hover:bg-amber-900/30">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
          
          <div class="p-4 space-y-5">
            <!-- 菜系筛选 - 移动端 -->
            <div>
              <h3 class="text-base font-recipe mb-3 text-brown-800 dark:text-brown-200 flex items-center">
                <svg class="w-4 h-4 mr-2 text-red-600 dark:text-red-400 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v14a2 2 0 01-2 2z" />
                </svg>
                <span class="inline-block">菜系</span>
              </h3>
              <div class="grid grid-cols-2 gap-2">
                {categories.slice(0, 8).map((category) => {
                  const isSelected = categoryParam && categoryParam.toLowerCase() === category.name.toLowerCase();
                  return (
                    <div class="mobile-category-item px-3 py-2 border rounded-md cursor-pointer flex items-center font-recipe-body bg-amber-50/70 dark:bg-amber-900/20 border-amber-200 dark:border-amber-800 text-brown-800 dark:text-brown-200" data-value={category.name}>
                      <div class={`w-3 h-3 mr-2 transition-colors ${isSelected ? 'bg-red-500 dark:bg-red-500' : 'border border-red-400 dark:border-red-600'}`}></div>
                      <span class="truncate">{category.name}</span>
                    </div>
                  );
                })}
              </div>
            </div>
            
            <!-- 地域筛选 - 移动端 -->
            <div>
              <h3 class="text-base font-recipe mb-3 text-brown-800 dark:text-brown-200 flex items-center">
                <svg class="w-4 h-4 mr-2 text-green-600 dark:text-green-400 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
                <span class="inline-block">地域特色</span>
              </h3>
              <div class="flex flex-wrap gap-2">
                {citys.slice(0, 10).map((city) => {
                  const isSelected = cityParam && cityParam.toLowerCase() === city.name.toLowerCase();
                  return (
                    <div class="mobile-city-item px-3 py-1.5 rounded-full cursor-pointer flex items-center bg-green-50/70 dark:bg-green-900/30 border border-green-200 dark:border-green-800 text-sm font-recipe-body" data-value={city.name}>
                      <div class={`w-3 h-3 mr-2 transition-colors ${isSelected ? 'bg-green-500 dark:bg-green-500' : 'border border-green-400 dark:border-green-600'}`}></div>
                      <span>{city.name}</span>
                    </div>
                  );
                })}
              </div>
            </div>
            
            <!-- 口味筛选 - 移动端 -->
            <div>
              <h3 class="text-base font-recipe mb-3 text-brown-800 dark:text-brown-200 flex items-center">
                <svg class="w-4 h-4 mr-2 text-orange-600 dark:text-orange-400 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                </svg>
                <span class="inline-block">味道特点</span>
              </h3>
              <div class="flex flex-wrap gap-2">
                {tastes.slice(0, 8).map((taste) => {
                  const isSelected = tasteParam && tasteParam.toLowerCase() === taste.name.toLowerCase();
                  return (
                    <div class="mobile-taste-item px-3 py-1.5 rounded-full cursor-pointer flex items-center bg-orange-50/70 dark:bg-orange-900/30 border border-orange-200 dark:border-orange-800 text-sm font-recipe-body" data-value={taste.name}>
                      <div class={`w-3 h-3 mr-2 rounded-full transition-colors ${isSelected ? 'bg-orange-400 dark:bg-orange-500' : 'border border-orange-400 dark:border-orange-500'}`}></div>
                      <span>{taste.name}</span>
                    </div>
                  );
                })}
              </div>
            </div>
            
            <!-- 食谱标签 - 移动端 -->
            <div>
              <h3 class="text-base font-recipe mb-3 text-brown-800 dark:text-brown-200 flex items-center">
                <svg class="w-4 h-4 mr-2 text-red-600 dark:text-red-400 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                </svg>
                <span class="inline-block">食谱标签</span>
              </h3>
              <div class="flex flex-wrap gap-2">
                {allTags.slice(0, 15).map((tag, i) => {
                  const isSelected = tagParam && tagParam.toLowerCase() === tag.name.toLowerCase();
                  // 为标签生成不同的颜色
                  const colors = ['amber', 'red', 'green', 'orange', 'amber', 'red'];
                  const colorClasses = {
                    'amber': 'border-amber-200 dark:border-amber-800 text-amber-700 dark:text-amber-50 hover:text-amber-900 dark:hover:text-amber-50 hover:border-amber-400 dark:hover:border-amber-700 bg-amber-50/50 dark:bg-amber-900/80',
                    'red': 'border-red-200 dark:border-red-800 text-red-700 dark:text-red-50 hover:text-red-900 dark:hover:text-red-50 hover:border-red-400 dark:hover:border-red-700 bg-red-50/50 dark:bg-red-900/80',
                    'green': 'border-green-200 dark:border-green-800 text-green-700 dark:text-green-50 hover:text-green-900 dark:hover:text-green-50 hover:border-green-400 dark:hover:border-green-700 bg-green-50/50 dark:bg-green-900/80',
                    'orange': 'border-orange-200 dark:border-orange-800 text-orange-700 dark:text-orange-50 hover:text-orange-900 dark:hover:text-orange-50 hover:border-orange-400 dark:hover:border-orange-700 bg-orange-50/50 dark:bg-orange-900/80'
                  };
                  const color = colors[i % colors.length] as keyof typeof colorClasses;
                  const selectedClass = isSelected ? 'ring-2 ring-amber-500 dark:ring-amber-400 shadow-md' : '';
                  
                  return (
                    <div class={`mobile-tag-item px-3 py-1.5 rounded-full cursor-pointer text-sm border ${colorClasses[color]} ${selectedClass} font-recipe-body`} data-value={tag.name}>
                      {tag.name}
                    </div>
                  );
                })}
              </div>
            </div>
            
            <!-- 主食材筛选 - 移动端 -->
            <div>
              <h3 class="text-base font-recipe mb-3 text-brown-800 dark:text-brown-200 flex items-center">
                <svg class="w-4 h-4 mr-2 text-green-600 dark:text-green-400 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                </svg>
                <span class="inline-block">主要食材</span>
              </h3>
              <div class="flex flex-wrap gap-2">
                {topIngredients.slice(0, 15).map((ingredient) => {
                  const isSelected = ingredientParam && ingredientParam.split(',').some(ing => ing.toLowerCase() === ingredient.name.toLowerCase());
                  return (
                    <div class="mobile-ingredient-item px-3 py-1.5 rounded-full cursor-pointer flex items-center bg-green-50/70 dark:bg-green-900/30 border border-green-200 dark:border-green-800 text-sm font-recipe-body" data-value={ingredient.name}>
                      <div class={`w-3 h-3 mr-2 rounded-full transition-colors ${isSelected ? 'bg-green-400 dark:bg-green-500' : 'border border-green-400 dark:border-green-500'}`}></div>
                      <span>{ingredient.name}</span>
                    </div>
                  );
                })}
              </div>
            </div>
            
            <!-- 底部应用按钮 -->
            <div class="border-t border-brown-200 dark:border-brown-700 pt-4 flex justify-between">
              <button id="reset-mobile-filters" class="px-4 py-2 rounded-full border border-brown-300 dark:border-brown-700 text-brown-600 dark:text-brown-300 font-recipe-body">
                重置筛选
              </button>
              <button id="mobile-filter-apply" class="bg-amber-500 dark:bg-amber-600 text-white px-6 py-2 rounded-full shadow-md font-recipe-body">
                应用筛选
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
        <!-- 左侧筛选区域 - 食谱风格 -->
        <div class="hidden lg:block lg:col-span-3">
          <div class="sticky top-20 space-y-8">
            <!-- 食谱筛选卡片 -->
            <div class="recipe-card-item p-6">
              <!-- 搜索筛选框 -->
              <div class="mb-8">
                <h3 class="text-base font-recipe mb-2 text-brown-800 dark:text-brown-200 flex items-center">
                  <svg class="w-4 h-4 mr-2 text-amber-600 dark:text-amber-400 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                  </svg>
                  <span class="inline-block">食谱检索</span>
                </h3>
                <form action="/cuisine" method="get" class="relative">
                  <input
                    type="text"
                    id="search-input"
                    name="search"
                    placeholder="输入菜名或食材..."
                    value={searchParam || ''}
                    class="w-full bg-amber-50/50 dark:bg-amber-900/20 border border-brown-300 dark:border-brown-700 px-4 py-2 text-brown-800 dark:text-brown-200 focus:outline-none focus:border-amber-500 dark:focus:border-amber-400 focus:ring-2 focus:ring-amber-200 dark:focus:ring-amber-800/50 rounded-md font-recipe-body text-sm"
                  />
                  {/* 保留当前的其他筛选参数 */}
                  {categoryParam && <input type="hidden" name="category" value={categoryParam} />}
                  {cityParam && <input type="hidden" name="city" value={cityParam} />}
                  {tasteParam && <input type="hidden" name="taste" value={tasteParam} />}
                  {tagParam && <input type="hidden" name="tag" value={tagParam} />}
                  {ingredientParam && <input type="hidden" name="ingredient" value={ingredientParam} />}
                  <button
                    type="submit"
                    class="absolute right-0 top-0 h-full px-3 text-amber-600 dark:text-amber-400 hover:text-amber-800 dark:hover:text-amber-300 transition-colors"
                  >
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                  </button>
                </form>
              </div>
                
              <!-- 菜系筛选 -->
              <div class="mb-8">
                <h3 class="text-base font-recipe mb-2 text-brown-800 dark:text-brown-200 flex items-center">
                  <svg class="w-4 h-4 mr-2 text-red-600 dark:text-red-400 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v14a2 2 0 01-2 2z" />
                  </svg>
                  <span class="inline-block">菜系</span>
                </h3>
              <div class="space-y-3">
                  {categories.map((category, index) => {
                    const isSelected = categoryParam && categoryParam.toLowerCase() === category.name.toLowerCase();
                    return (
                      <a href={isSelected ? `/cuisine${queryParams.replace(new RegExp(`[&?]category=${encodeURIComponent(categoryParam)}`, 'i'), '')}` : `/cuisine?category=${encodeURIComponent(category.name)}${queryParams.replace(/^\?/, '&')}`} 
                         class="flex items-center group cursor-pointer font-recipe-body">
                        <div class={`w-4 h-4 mr-3 transition-colors ${isSelected ? 'bg-red-500 dark:bg-red-500' : 'border border-red-400 dark:border-red-600'}`}></div>
                      <div class="font-light text-brown-700 dark:text-brown-300 flex items-center justify-between w-full">
                        <span>{category.name}</span>
                        <span class="text-amber-600/70 dark:text-amber-500/50 bg-amber-50/80 dark:bg-amber-900/30 px-1.5 py-0.5 rounded-full text-xs">{category.count}</span>
                      </div>
                      </a>
                    )
                  })}
              </div>
            </div>
            
              <!-- 地域筛选 -->
              <div class="mb-8">
                <h3 class="text-base font-recipe mb-2 text-brown-800 dark:text-brown-200 flex items-center">
                  <svg class="w-4 h-4 mr-2 text-green-600 dark:text-green-400 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                  </svg>
                  <span class="inline-block">地域特色</span>
                </h3>
                <div class="grid grid-cols-2 gap-3">
                  {citys.map((city) => {
                    const isSelected = cityParam && cityParam.toLowerCase() === city.name.toLowerCase();
                    return (
                      <a href={isSelected ? `/cuisine${queryParams.replace(new RegExp(`[&?]city=${encodeURIComponent(cityParam)}`, 'i'), '')}` : `/cuisine?city=${encodeURIComponent(city.name)}${queryParams.replace(/^\?/, '&')}`} 
                         class="flex items-center group cursor-pointer font-recipe-body">
                        <div class={`w-4 h-4 mr-2 transition-colors ${isSelected ? 'bg-green-500 dark:bg-green-500' : 'border border-green-400 dark:border-green-600'}`}></div>
                      <div class="font-light text-brown-700 dark:text-brown-300 text-sm truncate">
                        <span>{city.name}</span> <span class="text-green-600/70 dark:text-green-500/50 text-xs">({city.count})</span>
                      </div>
                      </a>
                    );
                  })}
              </div>
            </div>
            
            <!-- 口味筛选 -->
              <div class="mb-8">
                <h3 class="text-base font-recipe mb-2 text-brown-800 dark:text-brown-200 flex items-center">
                  <svg class="w-4 h-4 mr-2 text-orange-600 dark:text-orange-400 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                  </svg>
                  <span class="inline-block">味道特点</span>
                </h3>
                <div class="flex flex-wrap gap-2">
                  {tastes.map((taste) => {
                    const isSelected = tasteParam && tasteParam.toLowerCase() === taste.name.toLowerCase();
                    return (
                      <a href={isSelected ? `/cuisine${queryParams.replace(new RegExp(`[&?]taste=${encodeURIComponent(tasteParam)}`, 'i'), '')}` : `/cuisine?taste=${encodeURIComponent(taste.name)}${queryParams.replace(/^\?/, '&')}`} 
                         class="inline-flex items-center group cursor-pointer px-3 py-1 bg-orange-50/50 dark:bg-orange-900/50 border border-orange-200 dark:border-orange-800 rounded-full font-recipe-body">
                        <div class={`w-3 h-3 mr-2 rounded-full transition-colors ${isSelected ? 'bg-orange-400 dark:bg-orange-500' : 'border border-orange-400 dark:border-orange-500'}`}></div>
                      <div class="font-light text-orange-800 dark:text-orange-100 text-xs">
                        {taste.name} <span class="text-orange-600/70 dark:text-orange-300/90">({taste.count})</span>
                      </div>
                      </a>
                    );
                  })}
              </div>
            </div>
              
              <!-- 食谱标签 -->
              <div class="mb-8">
                <h3 class="text-base font-recipe mb-2 text-brown-800 dark:text-brown-200 flex items-center">
                  <svg class="w-4 h-4 mr-2 text-red-600 dark:text-red-400 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                  </svg>
                  <span class="inline-block">食谱标签</span>
                </h3>
                <div class="flex flex-wrap gap-2">
                  {allTags.map((tag, i) => {
                    // 为标签生成不同的颜色
                    const colors = ['amber', 'red', 'green', 'orange', 'amber', 'red'];
                    const colorClasses = {
                      'amber': 'border-amber-200 dark:border-amber-800 text-amber-700 dark:text-amber-50 hover:text-amber-900 dark:hover:text-amber-50 hover:border-amber-400 dark:hover:border-amber-700 bg-amber-50/50 dark:bg-amber-900/80',
                      'red': 'border-red-200 dark:border-red-800 text-red-700 dark:text-red-50 hover:text-red-900 dark:hover:text-red-50 hover:border-red-400 dark:hover:border-red-700 bg-red-50/50 dark:bg-red-900/80',
                      'green': 'border-green-200 dark:border-green-800 text-green-700 dark:text-green-50 hover:text-green-900 dark:hover:text-green-50 hover:border-green-400 dark:hover:border-green-700 bg-green-50/50 dark:bg-green-900/80',
                      'orange': 'border-orange-200 dark:border-orange-800 text-orange-700 dark:text-orange-50 hover:text-orange-900 dark:hover:text-orange-50 hover:border-orange-400 dark:hover:border-orange-700 bg-orange-50/50 dark:bg-orange-900/80'
                    };
                    const color = colors[i % colors.length] as keyof typeof colorClasses;
                    // 判断当前标签是否被选中
                    const isSelected = tagParam && tagParam.toLowerCase() === tag.name.toLowerCase();
                    const selectedClass = isSelected ? 'ring-2 ring-amber-500 dark:ring-amber-400 shadow-md' : '';
                    
                    return (
                      <a href={`/cuisine?tag=${encodeURIComponent(tag.name)}`} class={`inline-block px-3 py-1 text-xs border rounded-full transition-colors font-recipe-body ${colorClasses[color]} ${selectedClass}`}>
                        {tag.name}
                      </a>
                    );
                  })}
                </div>
              </div>
              
              <!-- 主食材筛选 -->
              <div>
                <h3 class="text-base font-recipe mb-2 text-brown-800 dark:text-brown-200 flex items-center">
                  <svg class="w-4 h-4 mr-2 text-green-600 dark:text-green-400 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                  </svg>
                  <span class="inline-block">主要食材</span>
                </h3>
                <div class="flex flex-wrap gap-2">
                  {topIngredients.map((ingredient) => {
                    const isSelected = ingredientParam && ingredientParam.split(',').some(ing => ing.toLowerCase() === ingredient.name.toLowerCase());
                    return (
                      <a href={isSelected 
                        ? `/cuisine${queryParams.replace(new RegExp(`[&?]ingredient=${encodeURIComponent(ingredientParam)}`, 'i'), '')}`
                        : `/cuisine?ingredient=${encodeURIComponent(ingredient.name)}${queryParams.replace(/^\?/, '&')}`} 
                        class="inline-flex items-center group cursor-pointer px-3 py-1 bg-green-50/50 dark:bg-green-900/50 border border-green-200 dark:border-green-800 rounded-full font-recipe-body">
                        <div class={`w-3 h-3 mr-2 rounded-full transition-colors ${isSelected ? 'bg-green-400 dark:bg-green-500' : 'border border-green-400 dark:border-green-500 group-hover:bg-green-400 dark:group-hover:bg-green-500'}`}></div>
                      <div class="font-light text-green-800 dark:text-green-100 text-xs">
                        {ingredient.name} <span class="text-green-600/70 dark:text-green-300/90">({ingredient.count})</span>
                      </div>
                      </a>
                    );
                  })}
                </div>
              </div>
            </div>
              
            <!-- 烹饪小贴士 -->
            <div class="recipe-card-item p-5 mt-6 recipe-tip">
              <div class="flex items-start space-x-3">
                <div class="text-amber-600 dark:text-amber-400">
                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </div>
                <div class="flex-1">
                  <h4 class="font-recipe text-base text-brown-800 dark:text-brown-200 mb-1">食谱小贴士</h4>
                  <p class="text-sm text-brown-700 dark:text-brown-300 leading-relaxed font-recipe-body">
                    烹饪是一门艺术，每一道河北美食都融合了独特的地域文化和历史传承，讲究用料、火候与调味的绝妙平衡。
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 右侧食谱展示区 -->
        <div class="lg:col-span-9">
          <!-- 筛选状态 -->
          {hasFilters && (
            <div class="mb-8 bg-amber-50/50 dark:bg-amber-900/20 p-4 border-l-4 border-amber-300 dark:border-amber-700 rounded-r-lg">
              <div class="flex flex-wrap items-center gap-3 text-sm text-brown-700 dark:text-brown-300">
                <div class="font-recipe text-xs tracking-wider text-amber-700 dark:text-amber-300 bg-amber-100/70 dark:bg-amber-900/50 px-2 py-1 rounded">筛选条件</div>
                  
                {searchParam && (
                  <div class="px-3 py-1 bg-amber-100/70 dark:bg-amber-900/30 rounded-full text-sm flex items-center space-x-1 font-recipe-body">
                    <svg class="w-4 h-4 mr-1 text-amber-700 dark:text-amber-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                    <span>搜索: {searchParam}</span>
                  </div>
                )}
                
                {categoryParam && (
                  <div class="px-3 py-1 bg-red-100/70 dark:bg-red-900/30 rounded-full text-sm flex items-center space-x-1 font-recipe-body">
                    <svg class="w-4 h-4 mr-1 text-red-700 dark:text-red-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v14a2 2 0 01-2 2z" />
                    </svg>
                    <span>类别: {categoryParam}</span>
                  </div>
                )}
                
                {cityParam && (
                  <div class="px-3 py-1 bg-green-100/70 dark:bg-green-900/30 rounded-full text-sm flex items-center space-x-1 font-recipe-body">
                    <svg class="w-4 h-4 mr-1 text-green-700 dark:text-green-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                    </svg>
                    <span>地域: {cityParam}</span>
                  </div>
                )}
                
                {tasteParam && (
                  <div class="px-3 py-1 bg-orange-100/70 dark:bg-orange-900/30 rounded-full text-sm flex items-center space-x-1 font-recipe-body">
                    <svg class="w-4 h-4 mr-1 text-orange-700 dark:text-orange-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                    </svg>
                    <span>口味: {tasteParam}</span>
                  </div>
                )}
                
                {tagParam && (
                  <div class="px-3 py-1 bg-brown-100/70 dark:bg-brown-900/30 rounded-full text-sm flex items-center space-x-1 font-recipe-body">
                    <svg class="w-4 h-4 mr-1 text-brown-700 dark:text-brown-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                    </svg>
                    <span>标签: {tagParam}</span>
                  </div>
                )}
                
                {ingredientParam && (
                  <div class="px-3 py-1 bg-green-100/70 dark:bg-green-900/30 rounded-full text-sm flex items-center space-x-1 font-recipe-body">
                    <svg class="w-4 h-4 mr-1 text-green-700 dark:text-green-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                    </svg>
                    <span>主食材: {ingredientParam}</span>
                  </div>
                )}
                
                <a href="/cuisine" class="ml-auto text-red-600 hover:text-red-800 dark:hover:text-red-300 text-sm flex items-center space-x-1 bg-white/80 dark:bg-black/30 px-3 py-1 rounded-full font-recipe-body">
                  <span>重置</span>
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                  </svg>
                </a>
              </div>
            </div>
          )}
          
          <!-- 食谱卡片列表 -->
          {filteredCuisines.length > 0 ? (
          <div id="cuisine-list" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
            {currentPageCuisines.map((cuisine, index) => {
              
              // 随机食谱纸张背景颜色
              const paperColors = [
                'bg-amber-50/80 border-amber-200 dark:bg-amber-900/30 dark:border-amber-800',
                'bg-orange-50/80 border-orange-200 dark:bg-orange-900/30 dark:border-orange-800',
                'bg-red-50/80 border-red-200 dark:bg-red-900/30 dark:border-red-800',
                'bg-green-50/80 border-green-200 dark:bg-green-900/30 dark:border-green-800'
              ];
              const paperColor = paperColors[index % paperColors.length];
              
              return (
              <div class="transition-all duration-300">
                <a href={`/cuisine/${cuisine.slug}`} class="block group">
                    <div class={`recipe-card-item border transition-all duration-300 ${paperColor}`}
                         data-ingredients={cuisine.data.ingredients && cuisine.data.ingredients.length > 0 ? 
                           JSON.stringify(cuisine.data.ingredients.map(ing => ing.toLowerCase().trim())) : '[]'}
                         data-tags={JSON.stringify(cuisine.data.tags.map(tag => tag.toLowerCase().trim()))}>
                      <!-- 食谱卡片头部 -->
                      <div class="aspect-[4/3] relative overflow-hidden">
                        <div class={`absolute inset-0 bg-recipe-paper dark:bg-recipe-paper-dark flex items-center justify-center`}>
                          {cuisine.data.image ? (
                            <img 
                              src={cuisine.data.image} 
                              alt={cuisine.data.title}
                              class="w-full h-full object-cover"
                            />
                          ) : (
                            <span class="text-brown-400 dark:text-brown-600 font-recipe-body">{cuisine.data.title}</span>
                          )}
                        </div>
                    
                        <!-- 图钉装饰 -->
                        <div class="absolute top-3 left-3 w-4 h-4 bg-red-500 dark:bg-red-700 rounded-full shadow-sm"></div>
                        <div class="absolute top-3 right-3 w-4 h-4 bg-amber-500 dark:bg-amber-700 rounded-full shadow-sm"></div>
                        
                        {cuisine.data.category && (
                          <div class="absolute bottom-3 right-3 px-2 py-1 text-xs font-recipe-body bg-white/90 dark:bg-black/70 text-brown-800 dark:text-brown-200 rounded-md shadow-sm border border-brown-200 dark:border-brown-500">
                            {cuisine.data.category}
                          </div>
                        )}
                        
                        {cuisine.data.taste && (
                          <div class="absolute bottom-3 left-3 px-2 py-1 text-xs font-recipe-body bg-white/90 dark:bg-black/70 text-brown-800 dark:text-brown-200 rounded-md shadow-sm border border-brown-200 dark:border-brown-500">
                            {cuisine.data.taste}
                          </div>
                        )}
                        
                      </div>
                      
                      <!-- 食谱内容 -->
                      <div class="p-5">
                        <h3 class="text-xl font-recipe text-brown-900 dark:text-brown-100 mb-3 group-hover:text-amber-700 dark:group-hover:text-amber-400 transition-colors">
                          {cuisine.data.title}
                        </h3>
                        
                        <!-- 食谱元数据 -->
                        <div class="flex overflow-x-auto gap-3 text-sm mb-3 scrollbar-thin scrollbar-thumb-amber-500/30 dark:scrollbar-thumb-amber-400/30 scrollbar-track-amber-100/20 dark:scrollbar-track-amber-900/20 pb-2">
                          {cuisine.data.city && cuisine.data.city.length > 0 && cuisine.data.city.map((cityName: string) => (
                            <div class="flex-shrink-0 flex items-center px-2 py-0.5 bg-amber-50/80 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-800 rounded-full">
                              <span class="text-amber-800 dark:text-amber-300 text-xs font-recipe-body">{cityName}</span>
                            </div>
                          ))}
                        </div>
                        
                        <!-- 食谱描述 -->
                        <p class="text-brown-700 dark:text-brown-300 text-sm line-clamp-3 mb-4 font-recipe-body">
                        {cuisine.data.description}
                      </p>
                      
                        <!-- 食谱标签 -->
                      <div class="flex overflow-x-auto gap-2 mb-4 scrollbar-thin scrollbar-thumb-brown-500/30 dark:scrollbar-thumb-brown-400/30 scrollbar-track-brown-100/20 dark:scrollbar-track-brown-900/20 pb-2">
                          {cuisine.data.tags.map((tag: string, i: number) => (
                            <span class="flex-shrink-0 px-2 py-0.5 text-xs font-recipe-body bg-brown-100/80 dark:bg-brown-900/30 text-brown-800 dark:text-brown-200 border border-brown-200 dark:border-brown-800 rounded-full">
                              {tag}
                            </span>
                          ))}
                      </div>
                        
                      <!-- 查看详情 -->
                      <div class="flex justify-between items-center">
                          <div class="text-sm text-amber-700 dark:text-amber-500 flex items-center group-hover:translate-x-1 transition-transform font-recipe-body">
                            查看详细食谱
                            <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
                            </svg>
                          </div>
                      </div>
                    </div>
                  </div>
                </a>
              </div>
              );
            })}
          </div>
          ) : (
            <!-- 无搜索结果提示 - 服务端渲染 -->
            <div class="bg-white dark:bg-slate-800 p-8 text-center rounded-sm border border-amber-200 dark:border-amber-700 shadow-md mb-10 relative transform rotate-1">
            <div class="absolute -top-3 right-5 w-12 h-12 bg-[url('/images/tape-piece.png')] bg-contain bg-no-repeat opacity-70"></div>
            
            <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
              <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
            
            <h3 class="mt-4 text-xl font-recipe text-brown-800 dark:text-brown-200">美食食谱缺失</h3>
              <p class="mt-2 font-recipe-body text-brown-600 dark:text-brown-400">
                {searchParam ? `抱歉，未找到与"${searchParam}"相关的美食食谱。` : '抱歉，未找到相关美食食谱。'}
                请尝试其他筛选条件或浏览所有食谱。
            </p>
            
            <div class="mt-6">
              <a href="/cuisine" class="inline-flex items-center text-amber-700 dark:text-amber-500 font-recipe-body hover:underline">
                查看所有美食食谱 &rarr;
              </a>
            </div>
          </div>
          )}
          
          <!-- 客户端筛选无结果提示 - 默认隐藏 -->
          <div id="no-results-message" class="hidden bg-white dark:bg-slate-800 p-8 text-center rounded-sm border border-amber-200 dark:border-amber-700 shadow-md mb-10 relative transform rotate-1">
            <div class="absolute -top-3 right-5 w-12 h-12 bg-[url('/images/tape-piece.png')] bg-contain bg-no-repeat opacity-70"></div>
            
            <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
              <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
            
            <h3 class="mt-4 text-xl font-recipe text-brown-800 dark:text-brown-200">未找到美食食谱</h3>
            <p class="mt-2 font-recipe-body text-brown-600 dark:text-brown-400">
              抱歉，未找到符合当前筛选条件的美食食谱。请尝试调整筛选条件或浏览所有食谱。
            </p>
            
            <div class="mt-6">
              <a href="/cuisine" class="inline-flex items-center text-amber-700 dark:text-amber-500 font-recipe-body hover:underline">
                查看所有美食食谱 &rarr;
              </a>
            </div>
          </div>
          
          <!-- 分页控件 - 食谱风格分页 -->
          <div class="flex justify-center items-center space-x-2 mt-12">
          {filteredCuisines.length > 0 && totalPages > 1 && (
              <div class="flex flex-wrap gap-2 items-center bg-recipe-paper-light dark:bg-recipe-paper-dark p-4 rounded-lg border border-amber-200 dark:border-amber-800 shadow-md">
                <!-- 上一页按钮 -->
                <a 
                  href={page > 1 ? `?page=${page - 1}${queryParams.replace(/^\?/, '&')}` : '#'} 
                  class={`flex items-center px-3 py-1.5 ${
                    page === 1 
                      ? 'text-brown-400 dark:text-brown-600 cursor-not-allowed' 
                      : 'text-amber-700 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-amber-900/30'
                  } rounded-md font-recipe-body transition-colors`}
                >
                  <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                  </svg>
                  上一页
                </a>
                
                <!-- 页码 -->
                {Array.from({ length: totalPages }, (_, i) => i + 1).map((pageNum) => (
                  <a 
                    href={`?page=${pageNum}${queryParams.replace(/^\?/, '&')}`} 
                    class={`px-3 py-1.5 font-recipe ${
                      page === pageNum 
                        ? 'bg-amber-600 text-white dark:bg-amber-700' 
                        : 'text-brown-700 dark:text-brown-300 hover:bg-amber-100 dark:hover:bg-amber-900/30'
                    } rounded-md transition-colors`}
                  >
                    {pageNum}
                  </a>
                ))}
                
                <!-- 下一页按钮 -->
                <a 
                  href={page < totalPages ? `?page=${page + 1}${queryParams.replace(/^\?/, '&')}` : '#'} 
                  class={`flex items-center px-3 py-1.5 ${
                    page === totalPages 
                      ? 'text-brown-400 dark:text-brown-600 cursor-not-allowed' 
                      : 'text-amber-700 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-amber-900/30'
                  } rounded-md font-recipe-body transition-colors`}
                >
                  下一页
                  <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                  </svg>
                </a>
              </div>
            )}
            </div>
          
          <!-- 食谱主题页脚 -->
          <div class="mt-16 text-center">
            <div class="flex flex-col items-center">
              <p class="text-brown-700 dark:text-brown-300 font-recipe max-w-2xl mx-auto">
                河北美食宝库收录了<span class="text-amber-600 dark:text-amber-400 mx-1">{cuisines.length}+</span>种传统佳肴与地方特色小吃。
                每一道食谱都承载着我们的文化记忆和烹饪智慧。尽情探索，找到属于你的美食灵感！
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</MainLayout>

<style>

  .bg-recipe-paper {
    background-color: var(--bg-recipe);
  }

  .bg-recipe-paper-dark {
    background-color: var(--bg-recipe);
  }

  .bg-recipe-paper-light {
    background-color: var(--color-primary-50);
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5z-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23f59e0b' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
  }

  .text-brown-900 {
    color: var(--color-secondary-900);
  }

  .text-brown-800 {
    color: var(--color-secondary-800);
  }

  .text-brown-700 {
    color: var(--color-secondary-700);
  }

  .text-brown-600 {
    color: var(--color-secondary-600);
  }

  .text-brown-500 {
    color: var(--color-secondary-500);
  }

  .text-brown-400 {
    color: var(--color-secondary-400);
  }

  .text-brown-300 {
    color: var(--color-secondary-300);
  }

  .text-brown-200 {
    color: var(--color-secondary-200);
  }

  .text-brown-100 {
    color: var(--color-secondary-100);
  }

  .recipe-card {
    position: relative;
    padding: 1.5rem;
    background-color: #f8f3e9;
    border-radius: 0.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  :root.dark .recipe-card {
    background-color: #2c2419;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  }

  .recipe-title {
    position: relative;
    display: inline-block;
  }

  .recipe-title::after {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 1rem;
    right: 1rem;
    height: 2px;
    background-color: #b08f77;
    transform: rotate(-0.5deg);
  }

  :root.dark .recipe-title::after {
    background-color: #7c604a;
  }

  /* 手写风格的下划线 */
  .handwritten-title p {
    position: relative;
  }

  .handwritten-title p::after {
    content: '';
    position: absolute;
    bottom: -0.25rem;
    left: 25%;
    right: 25%;
    height: 1px;
    background-color: #b08f77;
    transform: rotate(-0.25deg);
  }

  :root.dark .handwritten-title p::after {
    background-color: #7c604a;
  }

  /* 食谱卡片样式 */
  .recipe-card-item {
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    background-color: var(--recipe-card-bg, rgba(255, 251, 235, 0.9));
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .dark .recipe-card-item {
    background-color: var(--recipe-card-bg-dark, rgba(120, 53, 15, 0.1));
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  /* 卡片内容区域布局 */
  .recipe-card-item > div:last-child {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    min-height: 16rem;
  }

  /* 标题区域 */
  .recipe-card-item h3 {
    font-size: 1.25rem;
    line-height: 1.4;
    margin-bottom: 0.75rem;
    min-height: 2.8rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* 描述文本区域 */
  .recipe-card-item p.text-brown-700 {
    flex: 0 0 auto;
    margin-bottom: 1rem;
    min-height: 3.6rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* 标签区域 */
  .recipe-card-item .flex.overflow-x-auto.gap-2.mb-4 {
    flex: 0 0 auto;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    min-height: 2.5rem;
    max-height: 2.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(193, 154, 107, 0.3) rgba(193, 154, 107, 0.1);
  }

  /* 查看详情按钮区域 */
  .recipe-card-item .flex.justify-between.items-center {
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 0.5rem;
    min-height: 2rem;
  }

  /* 标签样式 */
  .recipe-card-item .flex.overflow-x-auto.gap-2.mb-4 span {
    display: inline-flex;
    align-items: center;
    height: 1.5rem;
    padding: 0 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 滚动条样式 */
  .recipe-card-item .flex.overflow-x-auto::-webkit-scrollbar {
    height: 4px;
    border-radius: 2px;
  }

  .recipe-card-item .flex.overflow-x-auto::-webkit-scrollbar-track {
    background: rgba(193, 154, 107, 0.1);
    border-radius: 2px;
  }

  .recipe-card-item .flex.overflow-x-auto::-webkit-scrollbar-thumb {
    background: rgba(193, 154, 107, 0.3);
    border-radius: 2px;
    transition: background-color 0.3s ease;
  }

  .recipe-card-item .flex.overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: rgba(193, 154, 107, 0.5);
  }

  /* 暗色模式下的滚动条样式 */
  .dark .recipe-card-item .flex.overflow-x-auto::-webkit-scrollbar-track {
    background: rgba(120, 53, 15, 0.1);
  }

  .dark .recipe-card-item .flex.overflow-x-auto::-webkit-scrollbar-thumb {
    background: rgba(193, 154, 107, 0.2);
  }

  .dark .recipe-card-item .flex.overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: rgba(193, 154, 107, 0.3);
  }

  /* Firefox 滚动条样式 */
  .recipe-card-item .flex.overflow-x-auto {
    scrollbar-width: thin;
    scrollbar-color: rgba(193, 154, 107, 0.3) rgba(193, 154, 107, 0.1);
  }

  .dark .recipe-card-item .flex.overflow-x-auto {
    scrollbar-color: rgba(193, 154, 107, 0.2) rgba(120, 53, 15, 0.1);
  }

  /* 隐藏滚动条但保留功能 */
  .hide-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  .hide-scrollbar::-webkit-scrollbar {
    display: none;  /* Chrome, Safari, Opera */
  }

  /* 食谱纸张纹理动画 */
  @keyframes textureFloat {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 1% 1%; }
  }

  .bg-recipe-paper, .bg-recipe-paper-dark {
    animation: textureFloat 10s ease-in-out infinite;
    background-size: 200px 200px;
  }

  /* 食谱卡片悬停效果 */
  .recipe-card-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }

  :root.dark .recipe-card-item:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  }

  /* 在现有的 <style> 标签内添加以下样式 */
  .recipe-card-item {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .recipe-card-item > div:last-child {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .recipe-card-item h3 {
    min-height: 3rem; /* 为标题预留固定高度 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .recipe-card-item p.text-brown-700 {
    flex-grow: 1;
    min-height: 4.5rem; /* 为描述文本预留固定高度 */
  }

  .recipe-card-item .flex.flex-wrap.gap-2.mb-4 {
    min-height: 2rem; /* 为标签区域预留固定高度 */
  }

  /* 修改标签区域的样式 */
  .recipe-card-item .flex.flex-wrap.gap-2.mb-4 {
    min-height: auto; /* 移除固定最小高度 */
    margin-top: auto; /* 将标签区域推到底部 */
    padding-top: 0.75rem; /* 添加上方间距 */
  }

  /* 优化标签样式 */
  .recipe-card-item .flex.flex-wrap.gap-2.mb-4 span {
    display: inline-flex;
    align-items: center;
    height: 1.5rem; /* 统一标签高度 */
    max-width: 100%; /* 防止标签溢出 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 确保卡片内容区域有足够的高度 */
  .recipe-card-item > div:last-child {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 更好地分配空间 */
    min-height: 14rem; /* 确保内容区域有最小高度 */
  }

  /* 优化描述文本区域 */
  .recipe-card-item p.text-brown-700 {
    flex-grow: 0; /* 不再自动扩展 */
    min-height: 3.6rem; /* 减小最小高度 */
    margin-bottom: 0.5rem; /* 添加下方间距 */
  }
  
  /* 为食谱小贴士添加专有样式，覆盖通用样式 */
  .recipe-tip.recipe-card-item {
    height: auto;
  }
  
  .recipe-tip.recipe-card-item > div {
    min-height: auto;
    height: auto; 
  }

  /* 自定义滚动条样式 */
  .recipe-card-item .flex.overflow-x-auto::-webkit-scrollbar {
    height: 4px;
    border-radius: 2px;
  }

  .recipe-card-item .flex.overflow-x-auto::-webkit-scrollbar-track {
    background: rgba(193, 154, 107, 0.1);
    border-radius: 2px;
  }

  .recipe-card-item .flex.overflow-x-auto::-webkit-scrollbar-thumb {
    background: rgba(193, 154, 107, 0.3);
    border-radius: 2px;
    transition: background-color 0.3s ease;
  }

  .recipe-card-item .flex.overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: rgba(193, 154, 107, 0.5);
  }

  /* 暗色模式下的滚动条样式 */
  .dark .recipe-card-item .flex.overflow-x-auto::-webkit-scrollbar-track {
    background: rgba(120, 53, 15, 0.1);
  }

  .dark .recipe-card-item .flex.overflow-x-auto::-webkit-scrollbar-thumb {
    background: rgba(193, 154, 107, 0.2);
  }

  .dark .recipe-card-item .flex.overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: rgba(193, 154, 107, 0.3);
  }

  /* Firefox 滚动条样式 */
  .recipe-card-item .flex.overflow-x-auto {
    scrollbar-width: thin;
    scrollbar-color: rgba(193, 154, 107, 0.3) rgba(193, 154, 107, 0.1);
  }

  .dark .recipe-card-item .flex.overflow-x-auto {
    scrollbar-color: rgba(193, 154, 107, 0.2) rgba(120, 53, 15, 0.1);
  }

  /* 确保滚动条在悬停时显示 */
  .recipe-card-item .flex.overflow-x-auto {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* 在iOS上实现平滑滚动 */
    scroll-behavior: smooth; /* 平滑滚动效果 */
    padding-bottom: 8px; /* 为滚动条预留空间 */
    margin-bottom: -8px; /* 补偿padding-bottom造成的空间 */
  }

  /* 在触摸设备上优化滚动体验 */
  @media (hover: none) {
    .recipe-card-item .flex.overflow-x-auto {
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x proximity;
    }

    .recipe-card-item .flex.overflow-x-auto > * {
      scroll-snap-align: start;
    }
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    // 搜索表单功能增强 - 允许按钮点击提交
    const searchButton = document.getElementById('search-button');
    const searchInput = document.getElementById('search-input') as HTMLInputElement;
    if (searchButton && searchInput && searchInput.form) {
      searchButton.addEventListener('click', (e) => {
          e.preventDefault();
        const form = searchInput.form;
        if (form) {
          form.submit();
        }
      });
    }
    
    // 食谱卡片悬停效果增强
    const recipeCards = document.querySelectorAll('.recipe-card-item');
    recipeCards.forEach(card => {
      card.addEventListener('mouseenter', () => {
        card.classList.add('shadow-lg');
      });
      card.addEventListener('mouseleave', () => {
        card.classList.remove('shadow-lg');
      });
    });
    
    // 筛选标签悬停效果增强 - 只对食谱标签和食材标签应用阴影
    const filterLabels = document.querySelectorAll('a[href*="?tag"], a[href*="?ingredient"]');
    filterLabels.forEach(label => {
      label.addEventListener('mouseenter', () => {
        label.classList.add('shadow-sm');
      });
      label.addEventListener('mouseleave', () => {
        label.classList.remove('shadow-sm');
      });
    });

    // ==== 以下是新增的客户端筛选功能 ====
    // 获取各种筛选项和展示元素
    const cuisineCards = document.querySelectorAll('.recipe-card-item');
    const cuisineGrid = document.getElementById('cuisine-list');
    const noResultsMessage = document.getElementById('no-results-message');

    // 从URL获取当前筛选参数 - 同时用于桌面端和移动端
    const urlParams = new URLSearchParams(window.location.search);
    
    // 移动端筛选抽屉处理
    const mobileFilterToggle = document.getElementById('mobile-filter-toggle');
    const mobileFilterDrawer = document.getElementById('mobile-filter-drawer');
    const mobileFilterBackdrop = document.getElementById('mobile-filter-backdrop');
    const mobileFilterClose = document.getElementById('mobile-filter-close');
    const mobileFilterApply = document.getElementById('mobile-filter-apply');
    const resetMobileFilters = document.getElementById('reset-mobile-filters');
    
    // 同步桌面端和移动端的搜索框
    const searchInputMobile = document.getElementById('search-input-mobile') as HTMLInputElement;
    if (searchInput && searchInputMobile) {
      // 同步两个搜索框的值
      searchInput.addEventListener('input', () => {
        searchInputMobile.value = searchInput.value;
      });
      
      searchInputMobile.addEventListener('input', () => {
        searchInput.value = searchInputMobile.value;
      });
    }
    
    // 从URL获取当前筛选参数 - 同时用于桌面端和客户端筛选
    const searchParamFromUrl = urlParams.get('search') || '';
    const categoryParamFromUrl = urlParams.get('category') || '';
    const cityParamFromUrl = urlParams.get('city') || '';
    const tasteParamFromUrl = urlParams.get('taste') || '';
    const tagParamFromUrl = urlParams.get('tag') || '';
    const ingredientParamFromUrl = urlParams.get('ingredient') || '';

    // 当前筛选状态 - 整合桌面端和移动端使用
    let currentSearch = searchParamFromUrl;
    let currentCategory = categoryParamFromUrl;
    let currentCity = cityParamFromUrl;
    let currentTaste = tasteParamFromUrl;
    let currentTag = tagParamFromUrl;
    let currentIngredient = ingredientParamFromUrl;

    // 打开移动端筛选抽屉
    if (mobileFilterToggle && mobileFilterDrawer) {
      mobileFilterToggle.addEventListener('click', () => {
        mobileFilterDrawer.classList.remove('translate-x-full');
        document.body.classList.add('overflow-hidden'); // 防止背景滚动
      });
    }
    
    // 关闭移动端筛选抽屉
    const closeFilterDrawer = () => {
      if (mobileFilterDrawer) {
        mobileFilterDrawer.classList.add('translate-x-full');
        document.body.classList.remove('overflow-hidden');
      }
    };
    
    // 点击背景关闭抽屉
    if (mobileFilterBackdrop) {
      mobileFilterBackdrop.addEventListener('click', closeFilterDrawer);
    }
    
    // 点击关闭按钮关闭抽屉
    if (mobileFilterClose) {
      mobileFilterClose.addEventListener('click', closeFilterDrawer);
    }
    
    // 处理移动端筛选项点击
    const addFilterItemClickHandlers = (selector: string, paramName: string) => {
      const items = document.querySelectorAll(selector);
      items.forEach(item => {
        item.addEventListener('click', () => {
          // 获取当前筛选值
          const value = item.getAttribute('data-value') || '';
          
          // 更新相应的当前筛选值变量
          if (paramName === 'category') currentCategory = (currentCategory === value) ? '' : value;
          if (paramName === 'city') currentCity = (currentCity === value) ? '' : value;
          if (paramName === 'taste') currentTaste = (currentTaste === value) ? '' : value;
          if (paramName === 'tag') currentTag = (currentTag === value) ? '' : value;
          if (paramName === 'ingredient') currentIngredient = (currentIngredient === value) ? '' : value;
          
          // 更新视觉选中状态
          updateMobileFilterUI();
          
          // 添加点击反馈
          item.classList.add('scale-95', 'opacity-80');
          setTimeout(() => {
            item.classList.remove('scale-95', 'opacity-80');
          }, 200);
        });
      });
    };
    
    // 添加各种筛选项的点击处理
    addFilterItemClickHandlers('.mobile-category-item', 'category');
    addFilterItemClickHandlers('.mobile-city-item', 'city');
    addFilterItemClickHandlers('.mobile-taste-item', 'taste');
    addFilterItemClickHandlers('.mobile-tag-item', 'tag');
    addFilterItemClickHandlers('.mobile-ingredient-item', 'ingredient');
    
    // 更新移动端筛选UI
    const updateMobileFilterUI = () => {
      // 更新分类筛选UI
      document.querySelectorAll('.mobile-category-item').forEach(item => {
        const value = item.getAttribute('data-value') || '';
        const checkbox = item.querySelector('div');
        if (checkbox) {
          if (value === currentCategory) {
            checkbox.className = 'w-3 h-3 mr-2 transition-colors bg-red-500 dark:bg-red-500';
          } else {
            checkbox.className = 'w-3 h-3 mr-2 transition-colors border border-red-400 dark:border-red-600';
          }
        }
      });
      
      // 更新城市筛选UI
      document.querySelectorAll('.mobile-city-item').forEach(item => {
        const value = item.getAttribute('data-value') || '';
        const checkbox = item.querySelector('div');
        if (checkbox) {
          if (value === currentCity) {
            checkbox.className = 'w-3 h-3 mr-2 transition-colors bg-green-500 dark:bg-green-500';
          } else {
            checkbox.className = 'w-3 h-3 mr-2 transition-colors border border-green-400 dark:border-green-600';
          }
        }
      });
      
      // 更新口味筛选UI
      document.querySelectorAll('.mobile-taste-item').forEach(item => {
        const value = item.getAttribute('data-value') || '';
        const checkbox = item.querySelector('div');
        if (checkbox) {
          if (value === currentTaste) {
            checkbox.className = 'w-3 h-3 mr-2 rounded-full transition-colors bg-orange-400 dark:bg-orange-500';
          } else {
            checkbox.className = 'w-3 h-3 mr-2 rounded-full transition-colors border border-orange-400 dark:border-orange-500';
          }
        }
      });
      
      // 更新标签筛选UI
      document.querySelectorAll('.mobile-tag-item').forEach(item => {
        const value = item.getAttribute('data-value') || '';
        if (value === currentTag) {
          item.classList.add('ring-2', 'ring-amber-500', 'dark:ring-amber-400', 'shadow-md');
        } else {
          item.classList.remove('ring-2', 'ring-amber-500', 'dark:ring-amber-400', 'shadow-md');
        }
      });
      
      // 更新食材筛选UI
      document.querySelectorAll('.mobile-ingredient-item').forEach(item => {
        const value = item.getAttribute('data-value') || '';
        const checkbox = item.querySelector('div');
        if (checkbox) {
          if (value === currentIngredient) {
            checkbox.className = 'w-3 h-3 mr-2 rounded-full transition-colors bg-green-400 dark:bg-green-500';
          } else {
            checkbox.className = 'w-3 h-3 mr-2 rounded-full transition-colors border border-green-400 dark:border-green-500';
          }
        }
      });
    };
    
    // 应用筛选
    if (mobileFilterApply) {
      mobileFilterApply.addEventListener('click', () => {
        // 构建URL参数
        const params = new URLSearchParams();
        
        // 获取搜索框的值
        const searchValue = searchInputMobile ? searchInputMobile.value : '';
        if (searchValue) params.set('search', searchValue);
        
        // 添加各种筛选参数
        if (currentCategory) params.set('category', currentCategory);
        if (currentCity) params.set('city', currentCity);
        if (currentTaste) params.set('taste', currentTaste);
        if (currentTag) params.set('tag', currentTag);
        if (currentIngredient) params.set('ingredient', currentIngredient);
        
        // 跳转到筛选结果页面
        window.location.href = `/cuisine?${params.toString()}`;
      });
    }
    
    // 重置筛选
    if (resetMobileFilters) {
      resetMobileFilters.addEventListener('click', () => {
        // 清空所有筛选值
        currentSearch = '';
        currentCategory = '';
        currentCity = '';
        currentTaste = '';
        currentTag = '';
        currentIngredient = '';
        
        // 清空搜索框
        if (searchInputMobile) searchInputMobile.value = '';
        
        // 更新UI
        updateMobileFilterUI();
      });
    }
    
    // 初始化：更新移动端筛选UI
    updateMobileFilterUI();

    // 更新浏览器历史记录但不刷新页面
    function updateHistory() {
      const params = new URLSearchParams();
      if (currentSearch) params.set('search', currentSearch);
      if (currentCategory) params.set('category', currentCategory);
      if (currentCity) params.set('city', currentCity);
      if (currentTaste) params.set('taste', currentTaste);
      if (currentTag) params.set('tag', currentTag);
      if (currentIngredient) params.set('ingredient', currentIngredient);
      
      const newUrl = `${window.location.pathname}${params.toString() ? '?' + params.toString() : ''}`;
      window.history.pushState({
        search: currentSearch,
        category: currentCategory,
        city: currentCity,
        taste: currentTaste,
        tag: currentTag,
        ingredient: currentIngredient
      }, '', newUrl);
    }
    
    // 客户端筛选函数
    function filterCuisines() {
      const searchValue = currentSearch.toLowerCase();
      const filterCategory = currentCategory.toLowerCase();
      const filterCity = currentCity.toLowerCase();
      const filterTaste = currentTaste.toLowerCase();
      const filterTag = currentTag.toLowerCase();
      const filterIngredient = currentIngredient.toLowerCase();
      
      let matchCount = 0;
      
      // 如果没有筛选条件，显示所有卡片
      if (!searchValue && !filterCategory && !filterCity && !filterTaste && !filterTag && !filterIngredient) {
        cuisineCards.forEach(card => {
          // 只获取卡片的直接父元素（ScrollReveal组件）
          const anchor = card.closest('a');
          if (anchor && anchor.parentElement) {
            (anchor.parentElement as HTMLElement).style.display = '';
          }
        });
        
        // 显示结果列表，隐藏无结果消息
        if (cuisineGrid) (cuisineGrid as HTMLElement).style.display = '';
        if (noResultsMessage) noResultsMessage.classList.add('hidden');
        
        return cuisineCards.length;
      }
      
      // 遍历所有美食卡片筛选
      cuisineCards.forEach(card => {
        const cardTitle = card.querySelector('h3')?.textContent?.toLowerCase() || '';
        const cardDesc = card.querySelector('p.text-brown-700.dark\\:text-brown-300')?.textContent?.toLowerCase() || '';
        
        // 标签匹配 - 从数据属性获取标签，而不是从DOM中获取
        let hasMatchingTag = !filterTag;
        // 使用自定义数据属性存储所有标签
        const tagsData = card.getAttribute('data-tags');
        if (tagsData && filterTag) {
          try {
            const tags = JSON.parse(tagsData) as string[];
            if (filterTag && tags.includes(filterTag.toLowerCase())) {
              hasMatchingTag = true;
            }
          } catch (e) {
            // 解析标签数据失败
          }
        }
        
        // 分类匹配
        let hasMatchingCategory = !filterCategory;
        const categoryElem = card.querySelector('.absolute.bottom-3.right-3');
        const cardCategory = categoryElem?.textContent?.trim().toLowerCase() || '';
        if (filterCategory && cardCategory === filterCategory) {
          hasMatchingCategory = true;
        }
        
        // 城市匹配
        let hasMatchingCity = !filterCity;
        const cityElems = card.querySelectorAll('.flex.items-center.px-2.py-0\\.5.bg-amber-50\\/80');
        const cityTexts = Array.from(cityElems).map(
          cityElem => cityElem.textContent?.trim().toLowerCase() || ''
        );
        if (filterCity && cityTexts.some(city => city === filterCity)) {
          hasMatchingCity = true;
        }
        
        // 口味匹配
        let hasMatchingTaste = !filterTaste;
        const tasteElems = card.querySelectorAll('.flex.items-center.px-2.py-0\\.5.bg-red-50\\/80');
        const tasteTexts = Array.from(tasteElems).map(
          tasteElem => tasteElem.textContent?.trim().toLowerCase() || ''
        );
        if (filterTaste && tasteTexts.some(taste => taste === filterTaste)) {
          hasMatchingTaste = true;
        }
        
        // 食材匹配
        let hasMatchingIngredient = !filterIngredient;
        // 获取食材数据（从data属性）
        const ingredientsData = card.getAttribute('data-ingredients');
        if (ingredientsData) {
          try {
            const ingredients = JSON.parse(ingredientsData);
            if (filterIngredient && ingredients.includes(filterIngredient.toLowerCase())) {
              hasMatchingIngredient = true;
            }
          } catch (e) {
            // 解析食材数据失败
          }
        }
        
        // 搜索词匹配
        let matchesSearch = !searchValue;
        if (searchValue) {
          const tagsData = card.getAttribute('data-tags');
          let tags: string[] = [];
          
          if (tagsData) {
            try {
              tags = JSON.parse(tagsData);
            } catch (e) {
              // 解析标签数据失败
            }
          }
          
          if (
            cardTitle.includes(searchValue) || 
            cardDesc.includes(searchValue) || 
            tags.some((tag: string) => tag.includes(searchValue)) ||
            cityTexts.some(city => city.includes(searchValue)) ||
            tasteTexts.some(taste => taste.includes(searchValue))
          ) {
            matchesSearch = true;
          }
        }
        
        // 所有条件匹配才显示
        const isMatch = matchesSearch && hasMatchingCategory && hasMatchingCity && hasMatchingTaste && hasMatchingTag && hasMatchingIngredient;
        
        // 更新卡片显示状态 - 只修改卡片容器，不影响筛选区域
        // 获取卡片的直接父元素（ScrollReveal组件）
        const anchor = card.closest('a');
        if (anchor && anchor.parentElement) {
        if (isMatch) {
          matchCount++;
            (anchor.parentElement as HTMLElement).style.display = '';
        } else {
            (anchor.parentElement as HTMLElement).style.display = 'none';
          }
        }
      });
      
      // 根据匹配结果更新UI
      if (matchCount === 0) {
        // 没有匹配结果，显示无结果消息
        if (cuisineGrid) (cuisineGrid as HTMLElement).style.display = 'none';
        if (noResultsMessage) {
          noResultsMessage.classList.remove('hidden');
          // 更新无结果消息的内容
          const messageText = noResultsMessage.querySelector('p.mt-2');
          if (messageText) {
            if (currentSearch) {
              messageText.textContent = `抱歉，未找到与"${currentSearch}"相关的美食食谱。请尝试其他筛选条件或浏览所有食谱。`;
            } else if (currentTag) {
              messageText.textContent = `抱歉，未找到标签为"${currentTag}"的美食食谱。请尝试其他筛选条件或浏览所有食谱。`;
            } else if (currentCategory) {
              messageText.textContent = `抱歉，未找到分类为"${currentCategory}"的美食食谱。请尝试其他筛选条件或浏览所有食谱。`;
            } else if (currentCity) {
              messageText.textContent = `抱歉，未找到地域为"${currentCity}"的美食食谱。请尝试其他筛选条件或浏览所有食谱。`;
            } else if (currentTaste) {
              messageText.textContent = `抱歉，未找到口味为"${currentTaste}"的美食食谱。请尝试其他筛选条件或浏览所有食谱。`;
            } else if (currentIngredient) {
              messageText.textContent = `抱歉，未找到含有"${currentIngredient}"的美食食谱。请尝试其他筛选条件或浏览所有食谱。`;
            } else {
              messageText.textContent = `抱歉，未找到符合当前筛选条件的美食食谱。请尝试调整筛选条件或浏览所有食谱。`;
            }
          }
        }
      } else {
        // 有匹配结果，显示结果列表
        if (cuisineGrid) (cuisineGrid as HTMLElement).style.display = '';
        if (noResultsMessage) noResultsMessage.classList.add('hidden');
      }
      
      return matchCount;
    }

    // 拦截所有筛选链接点击，实现不刷新页面的筛选
    document.querySelectorAll('a[href*="?category"], a[href*="?city"], a[href*="?taste"], a[href*="?tag"], a[href*="?ingredient"]').forEach(link => {
      link.addEventListener('click', (e) => {
        e.preventDefault();
        const href = (link as HTMLAnchorElement).href;
        const url = new URL(href);
        
        // 获取链接中的筛选参数
        const linkCategory = url.searchParams.get('category');
        const linkCity = url.searchParams.get('city');
        const linkTaste = url.searchParams.get('taste');
        const linkTag = url.searchParams.get('tag');
        const linkIngredient = url.searchParams.get('ingredient');
        
        // 如果点击的是重置链接
        if (href.includes('/cuisine') && !href.includes('?')) {
    // 重置所有筛选条件
      currentSearch = '';
      currentCategory = '';
      currentCity = '';
      currentTaste = '';
      currentTag = '';
          currentIngredient = '';
      
          // 清空搜索框
      if (searchInput) searchInput.value = '';
        } else {
          // 根据链接中的参数更新筛选状态
          if (linkCategory) {
            // 如果已经选中了这个分类，则取消选择
            if (currentCategory.toLowerCase() === linkCategory.toLowerCase()) {
              currentCategory = '';
            } else {
              currentCategory = linkCategory;
              // 不再清除其他筛选条件
            }
          } else if (linkCity) {
            if (currentCity.toLowerCase() === linkCity.toLowerCase()) {
              currentCity = '';
            } else {
              currentCity = linkCity;
              // 不再清除其他筛选条件
            }
          } else if (linkTaste) {
            if (currentTaste.toLowerCase() === linkTaste.toLowerCase()) {
              currentTaste = '';
            } else {
              currentTaste = linkTaste;
              // 不再清除其他筛选条件
            }
          } else if (linkTag) {
            if (currentTag.toLowerCase() === linkTag.toLowerCase()) {
              currentTag = '';
            } else {
              currentTag = linkTag;
              // 不再清除其他筛选条件
            }
          } else if (linkIngredient) {
            if (currentIngredient.toLowerCase() === linkIngredient.toLowerCase()) {
              currentIngredient = '';
            } else {
              currentIngredient = linkIngredient;
              // 不再清除其他筛选条件
            }
          }
        }
        
        // 更新UI标志当前选中的筛选项
        updateSelectedFiltersUI();
        
        // 执行筛选
        filterCuisines();
        
        // 更新URL但不刷新页面
        updateHistory();
      });
    });
    
    // 更新UI以显示当前选中的筛选项
    function updateSelectedFiltersUI() {
      // 更新分类筛选UI
      document.querySelectorAll('a[href*="?category"]').forEach(categoryLink => {
        const href = (categoryLink as HTMLAnchorElement).href;
        const url = new URL(href);
        const linkCategory = url.searchParams.get('category');
        const isSelected = linkCategory && currentCategory.toLowerCase() === linkCategory.toLowerCase();
        
        // 获取复选框元素
        const checkboxDiv = categoryLink.querySelector('div.w-4.h-4');
        if (checkboxDiv) {
          if (isSelected) {
            checkboxDiv.className = 'w-4 h-4 mr-3 transition-colors bg-red-500 dark:bg-red-500';
        } else {
            checkboxDiv.className = 'w-4 h-4 mr-3 transition-colors border border-red-400 dark:border-red-600';
          }
        }
      });
      
      // 更新城市筛选UI
      document.querySelectorAll('a[href*="?city"]').forEach(cityLink => {
        const href = (cityLink as HTMLAnchorElement).href;
        const url = new URL(href);
        const linkCity = url.searchParams.get('city');
        const isSelected = linkCity && currentCity.toLowerCase() === linkCity.toLowerCase();
        
        // 获取复选框元素
        const checkboxDiv = cityLink.querySelector('div.w-4.h-4');
        if (checkboxDiv) {
          if (isSelected) {
            checkboxDiv.className = 'w-4 h-4 mr-2 transition-colors bg-green-500 dark:bg-green-500';
        } else {
            checkboxDiv.className = 'w-4 h-4 mr-2 transition-colors border border-green-400 dark:border-green-600';
          }
        }
      });
      
      // 更新口味筛选UI
      document.querySelectorAll('a[href*="?taste"]').forEach(tasteLink => {
        const href = (tasteLink as HTMLAnchorElement).href;
        const url = new URL(href);
        const linkTaste = url.searchParams.get('taste');
        const isSelected = linkTaste && currentTaste.toLowerCase() === linkTaste.toLowerCase();
        
        // 获取小圆点元素
        const dotDiv = tasteLink.querySelector('div.w-3.h-3');
        if (dotDiv) {
          if (isSelected) {
            dotDiv.className = 'w-3 h-3 mr-2 rounded-full transition-colors bg-orange-400 dark:bg-orange-500';
        } else {
            dotDiv.className = 'w-3 h-3 mr-2 rounded-full transition-colors border border-orange-400 dark:border-orange-500';
          }
        }
      });
      
      // 更新标签筛选UI
      document.querySelectorAll('a[href*="?tag"]').forEach(tagLink => {
        const href = (tagLink as HTMLAnchorElement).href;
        const url = new URL(href);
        const linkTag = url.searchParams.get('tag');
        const isSelected = linkTag && currentTag.toLowerCase() === linkTag.toLowerCase();
        
        if (isSelected) {
          tagLink.classList.add('ring-2', 'ring-amber-500', 'dark:ring-amber-400', 'shadow-md');
        } else {
          tagLink.classList.remove('ring-2', 'ring-amber-500', 'dark:ring-amber-400', 'shadow-md');
        }
      });
      
      // 更新食材筛选UI
      document.querySelectorAll('a[href*="?ingredient"]').forEach(ingredientLink => {
        const href = (ingredientLink as HTMLAnchorElement).href;
        const url = new URL(href);
        const linkIngredient = url.searchParams.get('ingredient');
        const isSelected = linkIngredient && currentIngredient.toLowerCase() === linkIngredient.toLowerCase();
        
        // 获取小圆点元素
        const dotDiv = ingredientLink.querySelector('div.w-3.h-3');
        if (dotDiv) {
          if (isSelected) {
            dotDiv.className = 'w-3 h-3 mr-2 rounded-full transition-colors bg-green-400 dark:bg-green-500';
        } else {
            dotDiv.className = 'w-3 h-3 mr-2 rounded-full transition-colors border border-green-400 dark:border-green-500 group-hover:bg-green-400 dark:group-hover:bg-green-500';
          }
        }
      });
    }
    
    // 处理搜索表单提交
    if (searchInput && searchInput.form) {
      searchInput.form.addEventListener('submit', (e) => {
        e.preventDefault();
        currentSearch = searchInput.value;
        
        // 不再重置其他筛选条件，允许搜索词与其他筛选条件共存
        
        // 更新UI
        updateSelectedFiltersUI();
        
        // 执行筛选
        filterCuisines();
        
        // 更新URL但不刷新页面
        updateHistory();
      });
    }
    
    // 初始化：如果URL中有筛选参数，应用筛选
    if (currentSearch || currentCategory || currentCity || currentTaste || currentTag || currentIngredient) {
      // 更新UI
      updateSelectedFiltersUI();
      
      // 执行筛选
      setTimeout(filterCuisines, 100);
    }
  });
</script> 