<script setup lang="ts">
import { computed } from 'vue';
import type { Folder } from '@/store/useFoldersStore';

type FolderChild =
  | { type: 'icon'; id: string; icon?: { name: string; img?: string; text?: string; bgColor?: string } }
  | { type: 'widget'; id: string; widget?: { component: string } };

const props = defineProps<{
  folder: Folder;
  children: FolderChild[];
}>();

const emit = defineEmits<{
  (e: 'open'): void;
}>();

const previewChildren = computed(() => props.children.slice(0, 4));

const initialText = (child: FolderChild) => {
  if (child.type === 'icon') {
    const label = child.icon?.text?.trim() || child.icon?.name || '';
    return label ? label.charAt(0) : 'I';
  }
  return 'W';
};
</script>

<template>
  <div class="folder-card-wrapper">
    <div class="folder-card" @click.stop="emit('open')">
      <div class="folder-preview">
        <div
          v-for="child in previewChildren"
          :key="`${child.type}-${child.id}`"
          class="folder-chip"
          :data-type="child.type"
          :style="child.type === 'icon' && child.icon?.bgColor ? { backgroundColor: child.icon.bgColor } : {}"
        >
          <img v-if="child.type === 'icon' && child.icon?.img" :src="child.icon.img" :alt="child.icon?.name" />
          <span v-else>{{ initialText(child) }}</span>
        </div>
        <div v-if="!previewChildren.length" class="folder-empty">空</div>
      </div>
    </div>
    <div class="folder-label">{{ props.folder.name || '文件夹' }}</div>
  </div>
</template>

<style scoped lang="scss">
@import '@/styles/tokens.scss';

.folder-card-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.folder-card {
  width: 100%;
  height: 100%;
  border-radius: var(--icon-radius, #{$border-radius-small});
  background: linear-gradient(145deg, rgba(0, 122, 255, 0.12), rgba(0, 122, 255, 0.04));
  position: relative;
  padding: 10px;
  box-sizing: border-box;
  cursor: pointer;
  transition: transform $motion-duration-sm $motion-easing-standard, box-shadow $motion-duration-sm $motion-easing-standard;
  box-shadow: $shadow-md;

  &:hover {
    transform: translateY(-2px);
    box-shadow: $shadow-lg;
  }
}

.folder-preview {
  --folder-chip-size: min(20px, calc(var(--icon-size, 72px) * 0.28));
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, var(--folder-chip-size));
  grid-template-rows: repeat(2, var(--folder-chip-size));
  gap: 6px;
  padding: 4px;
  place-content: center;
  box-sizing: border-box;
}

.folder-chip {
  width: var(--folder-chip-size);
  height: var(--folder-chip-size);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  color: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);

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

  &[data-type='widget'] {
    background: rgba(0, 0, 0, 0.06);
  }
}

.folder-empty {
  grid-column: 1 / -1;
  border-radius: 8px;
  border: 1px dashed rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.folder-label {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: var(--icon-label-margin-top);
  transform: translateX(-50%);
  font-size: var(--icon-label-font-size);
  color: $color-text-primary;
  text-align: center;
  width: 100%;
  max-width: 100%;
  visibility: var(--icon-label-visibility, visible);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
</style>
