<template>
  <div class="file-toolbar">
    <!-- 搜索 -->
    <n-input
      v-model:value="searchQueryModel"
      :placeholder="t('Search files...')"
      clearable
      style="width: 200px"
    />

    <!-- 文件类型过滤 -->
    <n-select
      v-model:value="fileTypeFilterModel"
      :options="fileTypeOptions"
      :placeholder="t('All Categories')"
      clearable
      style="width: 130px"
    />

    <div class="toolbar-divider"></div>

    <!-- 视图模式切换 -->
    <div class="view-toggle">
      <button
        v-for="v in viewModes"
        :key="v.mode"
        class="toggle-btn"
        :class="{ active: viewModeModel === v.mode }"
        @click="viewModeModel = v.mode"
        :title="v.label"
      >
        <Icon :icon="v.icon" :size="18" />
      </button>
    </div>

    <!-- 预览开关 -->
    <button
      class="toggle-btn preview-toggle"
      :class="{ active: previewOnModel }"
      @click="previewOnModel = !previewOnModel"
      :title="previewOnModel ? t('Close Preview') : t('Open Preview')"
    >
      <Icon icon="tabler:layout-sidebar-right" :size="18" />
    </button>

    <!-- 卡片尺寸（仅 Card 视图） -->
    <div v-if="viewModeModel === 'card'" class="size-toggle">
      <button
        v-for="s in cardSizes"
        :key="s.size"
        class="size-btn"
        :class="{ active: cardSizeModel === s.size }"
        @click="cardSizeModel = s.size"
        :title="s.label"
      >
        {{ s.label }}
      </button>
    </div>

    <div class="toolbar-divider"></div>

    <!-- 刷新 -->
    <button class="icon-btn" @click="$emit('reload')" :disabled="loadingModel" :title="t('Refresh')">
      <Icon :icon="loadingModel ? 'tabler:loader-2' : 'tabler:refresh'" :size="18" :class="{ 'spin-icon': loadingModel }" />
    </button>

    <!-- 新建文件夹 / 上传 / 删除 -->
    <button
      v-if="selectedKeysModel.length === 0 && canEditModel"
      class="folder-btn"
      @click="$emit('create-folder')"
      :disabled="loadingModel"
      :title="t('New Folder')"
    >
      <Icon icon="tabler:folder-plus" :size="18" />
    </button>
    <div v-if="selectedKeysModel.length === 0 && canEditModel" class="toolbar-divider"></div>
    <button
      v-if="selectedKeysModel.length === 0 && canEditModel"
      class="upload-btn"
      @click="$emit('create')"
      :disabled="loadingModel"
      :title="t('Upload Files')"
    >
      <Icon icon="tabler:cloud-upload" :size="18" />
      <span>{{ t('Add') }}</span>
    </button>
    <button
      v-else-if="selectedKeysModel.length > 0"
      class="delete-btn"
      @click="$emit('delete-selected')"
      :disabled="loadingModel"
    >
      <Icon icon="tabler:trash" :size="18" />
      <span>{{ selectedKeysModel.length }}</span>
    </button>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { NInput, NSelect } from 'naive-ui'
import { Icon } from '@iconify/vue'
import { t } from '@/shared/i18n'

type ViewMode = 'list' | 'card' | 'masonry'
type CardSize = 'S' | 'M' | 'L'

const props = defineProps<{
  entity: string
  searchQuery: string
  viewMode: ViewMode
  previewOn?: boolean
  selectedKeys: string[]
  loading: boolean
  canEdit?: boolean
  cardSize?: CardSize
  fileTypeFilter?: string
}>()

const emit = defineEmits<{
  'update:searchQuery': [value: string]
  'update:viewMode': [value: ViewMode]
  'update:previewOn': [value: boolean]
  'update:cardSize': [value: CardSize]
  'update:fileTypeFilter': [value: string]
  'reload': []
  'create': []
  'create-folder': []
  'delete-selected': []
}>()

const searchQueryModel = computed({ get: () => props.searchQuery, set: v => emit('update:searchQuery', v) })
const viewModeModel = computed({ get: () => props.viewMode, set: v => emit('update:viewMode', v) })
const previewOnModel = computed({ get: () => props.previewOn ?? false, set: v => emit('update:previewOn', v) })
const cardSizeModel = computed({ get: () => props.cardSize ?? 'M', set: v => emit('update:cardSize', v) })
const fileTypeFilterModel = computed({ get: () => props.fileTypeFilter ?? '', set: v => emit('update:fileTypeFilter', v) })
const loadingModel = computed(() => props.loading)
const selectedKeysModel = computed(() => props.selectedKeys)
const canEditModel = computed(() => props.canEdit ?? true)

const viewModes = [
  { mode: 'list' as ViewMode, icon: 'tabler:layout-list', label: t('List') },
  { mode: 'card' as ViewMode, icon: 'tabler:layout-grid', label: t('Card') },
  { mode: 'masonry' as ViewMode, icon: 'tabler:layout-dashboard', label: t('Masonry') },
]

const cardSizes = [
  { size: 'S' as CardSize, label: 'S' },
  { size: 'M' as CardSize, label: 'M' },
  { size: 'L' as CardSize, label: 'L' },
]

const fileTypeOptions = [
  { label: t('All Categories'), value: '' },
  { label: t('Images'), value: 'image' },
  { label: t('Documents'), value: 'document' },
  { label: t('Videos'), value: 'video' },
  { label: t('Audio'), value: 'audio' },
  { label: t('Archives'), value: 'archive' },
  { label: t('Folders'), value: 'folder' },
]
</script>

<style scoped>
.file-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolbar-divider {
  width: 1px;
  height: 24px;
  background: #e5e7eb;
  margin: 0 4px;
}

.view-toggle, .size-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: #f3f4f6;
  border-radius: 6px;
  padding: 2px;
}

.toggle-btn, .size-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 30px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 600;
}

.toggle-btn:hover, .size-btn:hover { color: #374151; background: #e5e7eb; }
.toggle-btn.active { background: #fff; color: #1f2937; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.size-btn.active { background: #fff; color: #1f2937; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }

.preview-toggle.active { color: #3b82f6; background: #dbeafe; }
.preview-toggle.active:hover { background: #bfdbfe; }

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s;
}

.icon-btn:hover { background: #f3f4f6; color: #374151; }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.upload-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid #1fc76f;
  border-radius: 6px;
  background: #e6f8f0;
  color: #0d684b;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.upload-btn:hover {
  background: #dcfce7;
  border-color: #1fc76f;
  color: #166534;
  box-shadow: 0 2px 8px rgba(31, 199, 111, 0.15);
}

.upload-btn:disabled {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #94a3b8;
  opacity: 0.6;
  cursor: not-allowed;
}

.folder-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s;
}

.folder-btn:hover { background: #f3f4f6; color: #374151; }
.folder-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.delete-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px solid #1fc76f;
  border-radius: 6px;
  background: #e6f8f0;
  color: #0d684b;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.delete-btn:hover {
  background: #dcfce7;
  border-color: #1fc76f;
  color: #166534;
  box-shadow: 0 2px 8px rgba(31, 199, 111, 0.15);
}

.spin-icon {
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }
</style>
