<script setup lang="ts">
import { computed, onMounted, reactive, ref } from "vue";

import {
  emptyListingPublishOptions,
  type ListingPublishOptions,
} from "@/features/listings/api/listingOptions";
import { fetchListings, type Listing } from "@/features/listings/api/listings";
import {
  defaultHomeAnnouncements,
  defaultHomeBanners,
  fetchMobileHomeConfig,
  type HomeBannerSlide,
} from "@/features/listings/api/homeConfig";
import {
  assetRegions,
  formatHafCoinM,
  getCoinM,
  getCoinWan,
  getListingChips,
  getListingDisplayPrice,
  getListingSubtitle,
  getListingTitle,
  getLoginMethod,
  getResourceQuantity,
  getServerRegion,
  getSkinGroup,
  hasAcceleratedSaleRatio,
  hasGiftResources,
  readAssetNumber,
  readAssetString,
} from "@/utils/listingDisplay";
import { listingStatusLabel } from "@/utils/statusLabels";

/* ------------------------------------------------------------------ */
/*  数据加载                                                            */
/* ------------------------------------------------------------------ */
const loading = ref(false);
const loadFailed = ref(false);
const listings = ref<Listing[]>([]);
const publishOptions = ref<ListingPublishOptions>(emptyListingPublishOptions);
const announcements = ref<string[]>(defaultHomeAnnouncements);
const bannerSlides = ref<HomeBannerSlide[]>(defaultHomeBanners);

onMounted(() => {
  loadListings();
  loadHomeConfig();
});

async function loadListings() {
  loading.value = true;
  loadFailed.value = false;
  try {
    listings.value = await fetchListings();
  } catch {
    loadFailed.value = true;
  } finally {
    loading.value = false;
  }
}

async function loadHomeConfig() {
  try {
    const config = await fetchMobileHomeConfig();
    announcements.value = config.announcements;
    bannerSlides.value = config.banners;
    publishOptions.value = config.publish_options;
  } catch {
    announcements.value = defaultHomeAnnouncements;
    bannerSlides.value = defaultHomeBanners;
    publishOptions.value = emptyListingPublishOptions;
  }
}

/* ------------------------------------------------------------------ */
/*  排序                                                                */
/* ------------------------------------------------------------------ */
const sortBy = ref("comprehensive");

const sortOptions = [
  { key: "comprehensive", label: "综合排序" },
  { key: "published", label: "发布时间" },
  { key: "awmDesc", label: "AWM数量" },
  { key: "priceAsc", label: "价格最低" },
  { key: "priceDesc", label: "价格最高" },
];

const activeSortLabel = computed(
  () => sortOptions.find((o) => o.key === sortBy.value)?.label || "综合排序"
);

function selectSort(key: string) {
  sortBy.value = key;
  sortOpen.value = false;
}

/* ------------------------------------------------------------------ */
/*  筛选 — 复用移动端 FilterSection 体系                                  */
/* ------------------------------------------------------------------ */
type SelectedFilters = Record<string, string[]>;
type RangeFilters = Record<string, { min: string; max: string }>;
type RangePresets = Record<
  string,
  Array<{ label: string; min: string; max: string }>
>;

const selectedFilters = ref<SelectedFilters>({});
const rangeFilters = ref<RangeFilters>({});
const searchValue = ref("");
const sortOpen = ref(false);
const filterOpen = ref(false);

const rangePresets: RangePresets = {
  coin: [
    { label: "50-100", min: "50", max: "100" },
    { label: "100-200", min: "100", max: "200" },
    { label: "200-300", min: "200", max: "300" },
    { label: "300-500", min: "300", max: "500" },
    { label: "500以上", min: "500", max: "" },
  ],
  resource_awmAmmo: [
    { label: "0-20", min: "0", max: "20" },
    { label: "20-50", min: "20", max: "50" },
    { label: "50-100", min: "50", max: "100" },
    { label: "100-200", min: "100", max: "200" },
    { label: "200以上", min: "200", max: "" },
  ],
};

const serverFilterOptions = computed(() =>
  uniqueOptions(
    publishOptions.value.server_options
      .map((item) => item.trim())
      .filter(Boolean)
  )
);

const loginMethodFilterOptions = computed(() =>
  uniqueOptions(
    publishOptions.value.login_method_options
      .map((item) => item.trim())
      .filter(Boolean)
  )
);

type FilterSection =
  | {
      key: string;
      title: string;
      type: "range";
      unit?: string;
      minPlaceholder?: string;
      maxPlaceholder?: string;
    }
  | { key: string; title: string; type: "chips"; options: string[] };

const filterSections = computed<FilterSection[]>(() => [
  {
    key: "price",
    title: "价格区间",
    type: "range",
    unit: "元",
    minPlaceholder: "最低价",
    maxPlaceholder: "最高价",
  },
  {
    key: "coin",
    title: "哈夫币数量",
    type: "range",
    unit: "M",
    minPlaceholder: "最低",
    maxPlaceholder: "最高",
  },
  {
    key: "server",
    title: "区服",
    type: "chips",
    options: serverFilterOptions.value,
  },
  {
    key: "login",
    title: "上号方式",
    type: "chips",
    options: loginMethodFilterOptions.value,
  },
  {
    key: "insurance",
    title: "保险",
    type: "chips",
    options: publishOptions.value.insurance_options,
  },
  {
    key: "stamina",
    title: "体力",
    type: "chips",
    options: publishOptions.value.level_options,
  },
  {
    key: "load",
    title: "负重",
    type: "chips",
    options: publishOptions.value.level_options,
  },
  ...publishOptions.value.quantity_items.map((item) => ({
    key: `resource_${item.key}`,
    title: item.label,
    type: "range" as const,
    unit: parseQuantityUnit(item.price),
    minPlaceholder: "最低",
    maxPlaceholder: "最高",
  })),
  ...publishOptions.value.skin_groups.map((group) => ({
    key: group.key,
    title: group.title,
    type: "chips" as const,
    options: group.options,
  })),
  {
    key: "secretKd",
    title: "绝密KD",
    type: "range",
    minPlaceholder: "最低",
    maxPlaceholder: "最高",
  },
  {
    key: "rank",
    title: "段位",
    type: "chips",
    options: publishOptions.value.rank_options,
  },
  {
    key: "deposit",
    title: "押金",
    type: "range",
    unit: "元",
    minPlaceholder: "最低",
    maxPlaceholder: "最高",
  },
]);

/* 筛选交互 */
const activeFilterSection = ref("price");
const filterContentRef = ref<HTMLElement | null>(null);
const filterSectionRefs = new Map<string, HTMLElement>();
const filterTabRefs = new Map<string, HTMLElement>();

function toggleChip(sectionKey: string, value: string) {
  const selected = selectedFilters.value[sectionKey] || [];
  const next = selected.includes(value)
    ? selected.filter((item) => item !== value)
    : [...selected, value];
  selectedFilters.value = { ...selectedFilters.value, [sectionKey]: next };
}

function updateRange(sectionKey: string, side: "min" | "max", value: string) {
  const current = rangeFilters.value[sectionKey] || { min: "", max: "" };
  rangeFilters.value = {
    ...rangeFilters.value,
    [sectionKey]: { ...current, [side]: value },
  };
}

function applyRangePreset(sectionKey: string, min: string, max: string) {
  rangeFilters.value = {
    ...rangeFilters.value,
    [sectionKey]: { min, max },
  };
}

function isRangePresetActive(sectionKey: string, min: string, max: string) {
  const range = rangeFilters.value[sectionKey];
  return range?.min === min && range?.max === max;
}

function isSkinGroupKey(key: string) {
  return publishOptions.value.skin_groups.some((group) => group.key === key);
}

function setFilterSectionRef(key: string, el: Element | null) {
  if (el instanceof HTMLElement) filterSectionRefs.set(key, el);
  else filterSectionRefs.delete(key);
}

function setFilterTabRef(key: string, el: Element | null) {
  if (el instanceof HTMLElement) filterTabRefs.set(key, el);
  else filterTabRefs.delete(key);
}

function scrollToFilterSection(key: string) {
  const container = filterContentRef.value;
  const target = filterSectionRefs.get(key);
  if (!container || !target) return;
  activeFilterSection.value = key;
  container.scrollTo({
    top: Math.max(target.offsetTop - 8, 0),
    behavior: "smooth",
  });
}

function handleFilterScroll() {
  const container = filterContentRef.value;
  if (!container) return;
  const anchorTop = container.scrollTop + 16;
  let activeKey = filterSections.value[0]?.key || "";
  for (const section of filterSections.value) {
    const el = filterSectionRefs.get(section.key);
    if (el && el.offsetTop <= anchorTop) activeKey = section.key;
  }
  if (activeKey && activeKey !== activeFilterSection.value) {
    activeFilterSection.value = activeKey;
  }
}

function toggleSortPanel() {
  sortOpen.value = !sortOpen.value;
}

function clearFilters() {
  selectedFilters.value = {};
  rangeFilters.value = {};
  searchValue.value = "";
}

/* ------------------------------------------------------------------ */
/*  筛选 + 排序后的列表                                                  */
/* ------------------------------------------------------------------ */
const activeFilterCount = computed(() => {
  const chipCount = Object.values(selectedFilters.value).reduce(
    (sum, values) => sum + values.length,
    0
  );
  const rangeCount = Object.values(rangeFilters.value).filter(
    (range) => range.min || range.max
  ).length;
  return chipCount + rangeCount;
});

const filteredListings = computed(() => {
  const keyword = searchValue.value.trim().toLowerCase();
  const filtered = listings.value.filter((item) => {
    if (!matchesFilters(item)) return false;
    if (!keyword) return true;
    return searchText(item).includes(keyword);
  });
  return sortListings(filtered);
});

function matchesFilters(item: Listing) {
  const chipOk = Object.entries(selectedFilters.value).every(
    ([key, values]) => {
      if (!values.length) return true;
      if (key === "server") return values.includes(getServerRegion(item));
      if (key === "login") return values.includes(getLoginMethod(item));
      if (key === "insurance")
        return values.includes(readAssetString(item, "season_insurance"));
      if (key === "stamina")
        return values.includes(readAssetString(item, "stamina_level"));
      if (key === "load")
        return values.includes(readAssetString(item, "load_level"));
      if (key === "rank") return values.includes(item.rank_level);
      if (isSkinGroupKey(key)) {
        return getSkinGroup(item, key).some((skin) => values.includes(skin));
      }
      return true;
    }
  );
  if (!chipOk) return false;

  return Object.entries(rangeFilters.value).every(([key, range]) => {
    if (!range.min && !range.max) return true;
    let value = 0;
    if (key === "price") value = getListingDisplayPrice(item);
    if (key === "coin") value = getCoinM(item);
    if (key === "secretKd") value = readAssetNumber(item, "secret_kd");
    if (key === "deposit") value = Number(item.deposit_amount || 0);
    if (key.startsWith("resource_")) {
      value = getResourceQuantity(item, key.replace("resource_", ""));
    }
    return inRange(value, range);
  });
}

function inRange(value: number, range: { min: string; max: string }) {
  const min = range.min === "" ? undefined : Number(range.min);
  const max = range.max === "" ? undefined : Number(range.max);
  if (min !== undefined && Number.isFinite(min) && value < min) return false;
  if (max !== undefined && Number.isFinite(max) && value > max) return false;
  return true;
}

function searchText(item: Listing) {
  return [
    item.title,
    item.description,
    getServerRegion(item),
    getLoginMethod(item),
    item.rank_level,
    readAssetString(item, "season_insurance"),
    readAssetString(item, "stamina_level"),
    readAssetString(item, "load_level"),
    formatHafCoinM(getCoinWan(item)),
    assetRegions(item).join(" "),
    ...publishOptions.value.skin_groups.map((group) =>
      getSkinGroup(item, group.key).join(" ")
    ),
  ]
    .join(" ")
    .toLowerCase();
}

function sortListings(items: Listing[]) {
  const sorted = [...items];
  if (sortBy.value === "comprehensive") return sorted;
  if (sortBy.value === "priceAsc") {
    return sorted.sort(
      (a, b) => getListingDisplayPrice(a) - getListingDisplayPrice(b)
    );
  }
  if (sortBy.value === "priceDesc") {
    return sorted.sort(
      (a, b) => getListingDisplayPrice(b) - getListingDisplayPrice(a)
    );
  }
  if (sortBy.value === "awmDesc") {
    return sorted.sort(
      (a, b) =>
        getResourceQuantity(b, "awmAmmo") - getResourceQuantity(a, "awmAmmo") ||
        getCoinWan(b) - getCoinWan(a)
    );
  }
  return sorted.sort((a, b) => {
    const bTime = Date.parse(b.published_at || b.created_at || "") || 0;
    const aTime = Date.parse(a.published_at || a.created_at || "") || 0;
    return bTime - aTime || b.id - a.id;
  });
}

function uniqueOptions(values: string[]) {
  return [...new Set(values.map((item) => item.trim()).filter(Boolean))];
}

function parseQuantityUnit(price: string) {
  const unit = price.split("/")[1]?.trim();
  return unit || undefined;
}
</script>

<template>
  <section class="pc-listings">
    <!-- 防骗提示 -->
    <div class="fraud-tip">
      <span class="fraud-dot"></span>
      <span
        v-for="(text, idx) in announcements"
        :key="idx"
        class="fraud-text"
        >{{ text }}</span
      >
    </div>

    <!-- 页头 -->
    <div class="listings-header">
      <h1>租号大厅</h1>
      <span class="result-count">
        <strong>{{ filteredListings.length }}</strong> 个可租账号
      </span>
    </div>

    <!-- 搜索 + 排序 + 筛选入口 -->
    <div class="toolbar">
      <div class="search-box">
        <svg class="search-icon" viewBox="0 0 20 20" fill="currentColor">
          <path
            fill-rule="evenodd"
            d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
            clip-rule="evenodd"
          />
        </svg>
        <input v-model="searchValue" placeholder="搜区服 / 段位 / 哈夫币数量" />
      </div>

      <button
        type="button"
        class="toolbar-btn sort-btn"
        @click="toggleSortPanel"
      >
        <span>{{ activeSortLabel }}</span>
        <svg
          :class="{ rotated: sortOpen }"
          viewBox="0 0 20 20"
          fill="currentColor"
          width="14"
          height="14"
        >
          <path
            fill-rule="evenodd"
            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
            clip-rule="evenodd"
          />
        </svg>
      </button>

      <button
        type="button"
        class="toolbar-btn filter-btn"
        @click="filterOpen = !filterOpen"
      >
        <svg viewBox="0 0 20 20" fill="currentColor" width="16" height="16">
          <path
            fill-rule="evenodd"
            d="M3 3a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-.293.707L12 10.414V15a1 1 0 01-.553.894l-2 1A1 1 0 018 16v-5.586L3.293 5.707A1 1 0 013 5V3z"
            clip-rule="evenodd"
          />
        </svg>
        <span>筛选</span>
        <em v-if="activeFilterCount">{{ activeFilterCount }}</em>
      </button>
    </div>

    <!-- 排序下拉 -->
    <Transition name="sort-panel">
      <div v-if="sortOpen" class="sort-panel">
        <button
          v-for="option in sortOptions"
          :key="option.key"
          type="button"
          :class="{ active: sortBy === option.key }"
          @click="selectSort(option.key)"
        >
          <span>{{ option.label }}</span>
          <svg
            v-if="sortBy === option.key"
            viewBox="0 0 20 20"
            fill="currentColor"
            width="16"
            height="16"
          >
            <path
              fill-rule="evenodd"
              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
              clip-rule="evenodd"
            />
          </svg>
        </button>
      </div>
    </Transition>

    <!-- ================== 筛选侧栏 ================== -->
    <Transition name="filter-sidebar">
      <aside v-if="filterOpen" class="filter-sidebar">
        <header class="filter-sidebar-header">
          <h2>筛选</h2>
          <button
            type="button"
            class="filter-close-btn"
            @click="filterOpen = false"
          >
            ✕
          </button>
        </header>

        <div class="filter-sidebar-body">
          <nav class="filter-tabs">
            <button
              v-for="section in filterSections"
              :key="section.key"
              :ref="(el) => setFilterTabRef(section.key, el as Element | null)"
              type="button"
              :class="{ active: activeFilterSection === section.key }"
              @click="scrollToFilterSection(section.key)"
            >
              {{ section.title }}
            </button>
          </nav>

          <section
            ref="filterContentRef"
            class="filter-content"
            @scroll.passive="handleFilterScroll"
          >
            <div
              v-for="section in filterSections"
              :key="section.key"
              :ref="(el) => setFilterSectionRef(section.key, el as Element | null)"
              class="filter-block"
            >
              <h3>{{ section.title }}</h3>
              <p
                v-if="section.type === 'range' && section.unit"
                class="filter-unit"
              >
                单位：{{ section.unit }}
              </p>

              <template v-if="section.type === 'range'">
                <div class="range-editor">
                  <input
                    :value="rangeFilters[section.key]?.min || ''"
                    type="number"
                    inputmode="decimal"
                    :placeholder="section.minPlaceholder || '最低'"
                    @input="
                      updateRange(
                        section.key,
                        'min',
                        ($event.target as HTMLInputElement).value
                      )
                    "
                  />
                  <span class="range-sep">—</span>
                  <input
                    :value="rangeFilters[section.key]?.max || ''"
                    type="number"
                    inputmode="decimal"
                    :placeholder="section.maxPlaceholder || '最高'"
                    @input="
                      updateRange(
                        section.key,
                        'max',
                        ($event.target as HTMLInputElement).value
                      )
                    "
                  />
                </div>
                <div
                  v-if="rangePresets[section.key]?.length"
                  class="chip-grid range-preset-grid"
                >
                  <button
                    v-for="preset in rangePresets[section.key]"
                    :key="`${section.key}-${preset.label}`"
                    type="button"
                    :class="{
                      active: isRangePresetActive(
                        section.key,
                        preset.min,
                        preset.max
                      ),
                    }"
                    @click="
                      applyRangePreset(section.key, preset.min, preset.max)
                    "
                  >
                    {{ preset.label }}
                  </button>
                </div>
              </template>

              <div v-else class="chip-grid">
                <button
                  v-for="option in section.options"
                  :key="`${section.key}-${option}`"
                  type="button"
                  :class="{
                    active: selectedFilters[section.key]?.includes(option),
                  }"
                  @click="toggleChip(section.key, option)"
                >
                  {{ option }}
                </button>
              </div>
            </div>
          </section>
        </div>

        <footer class="filter-sidebar-footer">
          <button type="button" class="reset-btn" @click="clearFilters">
            重置
          </button>
          <button type="button" class="confirm-btn" @click="filterOpen = false">
            确定
          </button>
        </footer>
      </aside>
    </Transition>

    <!-- 筛选遮罩 -->
    <Transition name="overlay">
      <div
        v-if="filterOpen"
        class="filter-overlay"
        @click="filterOpen = false"
      ></div>
    </Transition>

    <!-- 加载 / 错误 / 空状态 -->
    <div v-if="loading" class="state-loading">正在加载优质账号...</div>
    <div v-else-if="loadFailed" class="state-error">
      接口暂不可用，请稍后刷新。
    </div>
    <div v-else-if="filteredListings.length === 0" class="state-empty">
      <p>没有符合条件的账号</p>
      <button type="button" class="reset-btn" @click="clearFilters">
        重置条件
      </button>
    </div>

    <!-- 列表 -->
    <div v-else class="pc-resource-list">
      <RouterLink
        v-for="item in filteredListings"
        :key="item.id"
        class="resource-card"
        :to="`/listings/${item.id}`"
      >
        <div class="resource-cover">
          <img
            v-if="item.cover_url"
            :src="item.cover_url"
            :alt="getListingTitle(item)"
            loading="lazy"
            decoding="async"
          />
          <span v-else>图</span>
          <div
            v-if="hasGiftResources(item) || hasAcceleratedSaleRatio(item)"
            class="cover-labels"
          >
            <em v-if="hasGiftResources(item)">有赠送</em>
            <em v-if="hasAcceleratedSaleRatio(item)">特惠</em>
          </div>
        </div>
        <div class="resource-main">
          <h2 class="card-title">{{ getListingTitle(item) }}</h2>
          <p class="card-subtitle">{{ getListingSubtitle(item) }}</p>
          <div class="resource-badge-row">
            <span class="trust-badge">押金秒退</span>
            <span class="server-badge">{{ getServerRegion(item) }}</span>
            <span v-if="getLoginMethod(item)" class="server-badge">{{
              getLoginMethod(item)
            }}</span>
          </div>
          <div class="card-chip-row">
            <span
              v-for="chip in getListingChips(item)"
              :key="`${item.id}-${chip.label}`"
              >{{ chip.label }}:{{ chip.value }}</span
            >
          </div>
        </div>
        <div class="resource-price-box">
          <strong>¥{{ getListingDisplayPrice(item) }}</strong>
          <span class="rent-sub">押金¥{{ item.deposit_amount }}</span>
        </div>
      </RouterLink>
    </div>
  </section>
</template>

<style scoped>
/* ================================================================== */
/*  页面容器                                                            */
/* ================================================================== */
.pc-listings {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 40px;
  color: #1a202c;
}

/* ================================================================== */
/*  防骗提示                                                            */
/* ================================================================== */
.fraud-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: #fffdf0;
  border: 1px solid #f5e6a3;
  font-size: 13px;
  color: #8a6d1b;
  overflow: hidden;
  white-space: nowrap;
}

.fraud-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f5a623;
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

.fraud-text + .fraud-text::before {
  content: "  |  ";
  color: #d4c47a;
}

/* ================================================================== */
/*  页头                                                                */
/* ================================================================== */
.listings-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
}

.listings-header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  color: #17233d;
}

.result-count {
  color: #8b9cb5;
  font-size: 14px;
}

.result-count strong {
  color: #1477ff;
  font-weight: 800;
}

/* ================================================================== */
/*  工具栏：搜索 + 排序 + 筛选                                           */
/* ================================================================== */
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 360px;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  background: #f4f6f8;
  border: 1px solid transparent;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.search-box:focus-within {
  border-color: #1477ff;
  box-shadow: 0 0 0 3px rgba(20, 119, 255, 0.1);
  background: #fff;
}

.search-icon {
  width: 16px;
  height: 16px;
  color: #a0aab6;
  flex-shrink: 0;
}

.search-box input {
  border: none;
  outline: none;
  background: transparent;
  color: #17233d;
  font-size: 13px;
  width: 100%;
}

.search-box input::placeholder {
  color: #a0aab6;
}

.toolbar-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  height: 38px;
  border: 1px solid #e1e7ef;
  border-radius: 10px;
  background: #fff;
  color: #3d4e63;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.toolbar-btn:hover {
  border-color: #1477ff;
}

.sort-btn svg {
  transition: transform 0.2s;
}

.sort-btn svg.rotated {
  transform: rotate(180deg);
}

.filter-btn {
  position: relative;
}

.filter-btn em {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: #1477ff;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  font-style: normal;
}

/* ================================================================== */
/*  排序面板                                                            */
/* ================================================================== */
.sort-panel {
  display: flex;
  gap: 4px;
  padding: 8px 0;
  margin-bottom: 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e1e7ef;
}

.sort-panel button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: none;
  color: #5a6577;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.sort-panel button:hover {
  background: #f0f5ff;
}

.sort-panel button.active {
  background: #1477ff;
  color: #fff;
}

.sort-panel button.active svg {
  color: #fff;
}

.sort-panel svg {
  color: #1477ff;
}

.sort-panel-enter-active,
.sort-panel-leave-active {
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.sort-panel-enter-from,
.sort-panel-leave-to {
  opacity: 0;
  transform: translateY(-4px);
}

/* ================================================================== */
/*  筛选侧栏                                                            */
/* ================================================================== */
.filter-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 300;
  display: grid;
  grid-template-rows: 52px minmax(0, 1fr) 60px;
  width: min(480px, 90vw);
  height: 100vh;
  background: #fff;
  border-left: 1px solid #eef1f5;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.1);
}

.filter-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border-bottom: 1px solid #eef1f5;
}

.filter-sidebar-header h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #17233d;
}

.filter-close-btn {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: none;
  border-radius: 10px;
  background: #f4f6f8;
  color: #64748b;
  font-size: 16px;
  cursor: pointer;
}

.filter-sidebar-body {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  min-height: 0;
}

/* ---- 左侧 Tab 导航 ---- */
.filter-tabs {
  overflow-y: auto;
  background: #f6f7f9;
  border-right: 1px solid #eef1f5;
}

.filter-tabs button {
  display: block;
  width: 100%;
  min-height: 44px;
  border: none;
  background: transparent;
  color: #3d4e63;
  padding: 8px 12px;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.filter-tabs button:hover {
  background: #edf1f7;
}

.filter-tabs button.active {
  background: #fff;
  color: #ff7a00;
  font-weight: 800;
}

/* ---- 右侧内容 ---- */
.filter-content {
  overflow-y: auto;
  padding: 20px 18px 32px;
}

.filter-block {
  scroll-margin-top: 8px;
}

.filter-block + .filter-block {
  margin-top: 28px;
}

.filter-block h3 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 800;
  color: #17233d;
}

.filter-unit {
  margin: -6px 0 10px;
  color: #8a96a8;
  font-size: 12px;
}

/* ---- Range 编辑器 ---- */
.range-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.range-sep {
  color: #cfd6df;
  font-size: 14px;
}

.range-editor input {
  height: 40px;
  border: 1px solid #e1e7ef;
  border-radius: 8px;
  background: #fff;
  color: #17233d;
  padding: 0 12px;
  text-align: center;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.range-editor input:focus {
  border-color: #1477ff;
  box-shadow: 0 0 0 3px rgba(20, 119, 255, 0.08);
}

/* ---- Chip 网格 ---- */
.chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip-grid button {
  min-width: 0;
  padding: 7px 14px;
  border: none;
  border-radius: 8px;
  background: #f4f5f7;
  color: #2d3748;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}

.chip-grid button:hover {
  background: #eaeff5;
}

.chip-grid button.active {
  background: #fff3d1;
  color: #cc7a00;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px #ffd15c;
}

.range-preset-grid {
  margin-top: 10px;
}

/* ---- Footer ---- */
.filter-sidebar-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 18px;
  border-top: 1px solid #eef1f5;
}

.filter-sidebar-footer button {
  height: 42px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.reset-btn {
  border: 1px solid #e1e7ef;
  background: #fff;
  color: #2d3748;
}

.confirm-btn {
  border: none;
  background: #1477ff;
  color: #fff;
}

.confirm-btn:hover {
  background: #0d5fd4;
}

/* ---- 侧栏动画 ---- */
.filter-sidebar-enter-active,
.filter-sidebar-leave-active {
  transition: transform 0.25s ease;
}

.filter-sidebar-enter-from,
.filter-sidebar-leave-to {
  transform: translateX(100%);
}

/* ---- 遮罩 ---- */
.filter-overlay {
  position: fixed;
  inset: 0;
  z-index: 299;
  background: rgba(0, 0, 0, 0.3);
}

.overlay-enter-active,
.overlay-leave-active {
  transition: opacity 0.2s ease;
}

.overlay-enter-from,
.overlay-leave-to {
  opacity: 0;
}

/* ================================================================== */
/*  状态提示                                                            */
/* ================================================================== */
.state-loading,
.state-error,
.state-empty {
  text-align: center;
  padding: 48px 20px;
  color: #8b9cb5;
  font-size: 14px;
}

.state-empty button {
  margin-top: 12px;
}

/* ================================================================== */
/*  列表卡片                                                            */
/* ================================================================== */
.pc-resource-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.resource-card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #eef1f5;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.resource-card:hover {
  border-color: #c5d5ea;
  box-shadow: 0 4px 16px rgba(23, 35, 61, 0.08);
}

.resource-cover {
  position: relative;
  width: 120px;
  height: 90px;
  border-radius: 10px;
  overflow: hidden;
  background: #f0f5ff;
}

.resource-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.resource-cover span {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: #1477ff;
  font-size: 20px;
  font-weight: 900;
}

.cover-labels {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  gap: 4px;
}

.cover-labels em {
  font-style: normal;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: #ff6a00;
}

.cover-labels em + em {
  background: #e74c3c;
}

.resource-main {
  min-width: 0;
}

.card-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: #17233d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-subtitle {
  margin: 0 0 8px;
  font-size: 13px;
  color: #1477ff;
  font-weight: 600;
}

.resource-badge-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.trust-badge,
.server-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.trust-badge {
  background: #e8faf0;
  color: #0d9a5f;
}

.server-badge {
  background: #f0f5ff;
  color: #3d6fcc;
}

.card-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.card-chip-row span {
  color: #8b9cb5;
  font-size: 11px;
}

.resource-price-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  white-space: nowrap;
}

.resource-price-box strong {
  font-size: 20px;
  font-weight: 900;
  color: #e74c3c;
}

.rent-sub {
  color: #8b9cb5;
  font-size: 11px;
}
</style>
