<script setup lang="ts">
import type { SectionBlock, SpecGroup } from '~/types/site';

const props = defineProps<{ section: SectionBlock }>();

const { overline, title, subtitle, isEn, isDark, overlineStyle, titleStyle, bodyStyle } = useSectionContent(props.section);

const specGroups = computed<SpecGroup[]>(() => props.section.spec_groups ?? []);

// 每个分组的展开状态（默认收起，仅显示前 default_visible 项）
const expandedMap = ref<Record<number, boolean>>({});

function isExpanded(group: SpecGroup): boolean {
  return !!expandedMap.value[group.id];
}

function toggle(group: SpecGroup) {
  expandedMap.value[group.id] = !expandedMap.value[group.id];
}

// 分组内可见的参数项：展开时全部，收起时前 default_visible 项
function visibleItems(group: SpecGroup) {
  const items = group.items ?? [];
  if (isExpanded(group)) return items;
  return items.slice(0, group.default_visible || 5);
}

// 是否需要显示展开按钮（参数项 > 默认显示数量）
function needToggle(group: SpecGroup): boolean {
  return (group.items?.length ?? 0) > (group.default_visible || 5);
}
</script>

<template>
  <div class="section-container py-96px">
    <!-- 标题区 -->
    <div class="text-center max-w-640px mx-auto mb-56px">
      <p v-if="overline" class="text-14px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
        {{ overline }}
      </p>
      <h2 class="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
        {{ title }}
      </h2>
      <p v-if="subtitle" class="mt-16px text-base" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'" :style="bodyStyle">
        {{ subtitle }}
      </p>
    </div>

    <!-- 参数分组卡片 -->
    <div class="flex flex-col gap-24px max-w-960px mx-auto">
      <div
        v-for="group in specGroups"
        :key="group.id"
        class="rounded-16px overflow-hidden"
        :class="isDark ? 'bg-white/5 border border-white/10' : 'bg-white border border-gray-100 shadow-sm dark:bg-dark-800 dark:border-dark-700'"
      >
        <!-- 分组标题 -->
        <div class="px-32px py-20px border-b" :class="isDark ? 'border-white/10' : 'border-gray-100 dark:border-dark-700'">
          <h3 class="text-lg font-semibold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
            {{ isEn ? group.title_en : group.title_zh }}
          </h3>
        </div>

        <!-- 参数项列表 -->
        <div class="px-32px">
          <div
            v-for="item in visibleItems(group)"
            :key="item.id"
            class="flex items-start justify-between gap-24px py-14px border-b last:border-b-0"
            :class="isDark ? 'border-white/5' : 'border-gray-50 dark:border-dark-700/50'"
          >
            <span class="text-sm shrink-0" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'">
              {{ isEn ? item.name_en : item.name_zh }}
            </span>
            <span class="text-sm text-right font-medium" :class="isDark ? 'text-gray-200' : 'text-gray-800 dark:text-gray-200'">
              {{ isEn ? item.value_en : item.value_zh }}
            </span>
          </div>
        </div>

        <!-- 展开/收起按钮 -->
        <div v-if="needToggle(group)" class="px-32px py-16px">
          <button
            class="text-sm font-medium transition-colors"
            :class="isDark ? 'text-primary-300 hover:text-primary-200' : 'text-primary hover:opacity-80'"
            @click="toggle(group)"
          >
            {{ isExpanded(group) ? '收起参数 ∧' : `查看全部参数（${group.items?.length ?? 0} 项）∨` }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
