<template>
  <v-card elevation="0" border rounded="lg" class="mb-4">
    <v-card-title class="d-flex align-center text-subtitle-1 flex-wrap ga-2">
      暂存文件
      <v-spacer />
      <v-btn
        v-if="selectedCount > 0"
        size="small"
        variant="tonal"
        color="error"
        prepend-icon="mdi-delete"
        :loading="deleteLoading"
        @click="$emit('batch-delete')"
      >
        删除选中 ({{ selectedCount }})
      </v-btn>
      <v-btn size="small" variant="text" prepend-icon="mdi-refresh" :loading="loading" @click="$emit('refresh')">
        刷新
      </v-btn>
    </v-card-title>
    <v-card-subtitle class="text-caption pb-2">
      {{ rootPath }}
      <span v-if="relativePath"> / {{ relativePath }}</span>
    </v-card-subtitle>
    <v-divider />
    <v-card-text class="pa-0">
      <v-progress-linear v-if="loading" indeterminate />
      <v-table v-else density="compact" hover>
        <thead>
          <tr>
            <th style="width: 44px">
              <v-checkbox-btn
                :model-value="allSelected"
                :indeterminate="someSelected"
                :disabled="!entries.length"
                density="compact"
                hide-details
                @update:model-value="$emit('toggle-select-all', $event)"
              />
            </th>
            <th>名称</th>
            <th class="text-end" style="width: 100px">大小</th>
            <th class="text-end" style="width: 160px">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="relativePath">
            <td colspan="4">
              <v-btn size="small" variant="text" prepend-icon="mdi-arrow-up" @click="$emit('go-root')">
                返回根目录
              </v-btn>
            </td>
          </tr>
          <tr v-if="!entries.length">
            <td colspan="4" class="text-medium-emphasis text-center py-4">目录为空</td>
          </tr>
          <tr v-for="entry in entries" :key="entry.name">
            <td @click.stop>
              <v-checkbox-btn
                :model-value="isSelected(entry.name)"
                density="compact"
                hide-details
                @update:model-value="$emit('toggle-select', entry.name, $event)"
              />
            </td>
            <td>
              <div
                class="d-flex align-center"
                :class="{ 'cursor-pointer': entry.is_dir }"
                @click="entry.is_dir ? $emit('open-dir', entry) : undefined"
              >
                <v-icon size="small" class="mr-2" :color="entry.is_dir ? 'primary' : undefined">
                  {{ entry.is_dir ? 'mdi-folder' : 'mdi-file-outline' }}
                </v-icon>
                <span>{{ entry.name }}</span>
              </div>
            </td>
            <td class="text-end text-caption text-medium-emphasis">
              {{ entry.is_dir ? '—' : formatSize(entry.size) }}
            </td>
            <td class="text-end">
              <v-btn
                v-if="!entry.is_dir"
                size="x-small"
                variant="text"
                @click="$emit('preview', entry)"
              >
                预览
              </v-btn>
              <v-btn size="x-small" variant="text" @click="$emit('rename', entry)">重命名</v-btn>
              <v-btn size="x-small" variant="text" color="error" @click="$emit('delete', entry)">删除</v-btn>
            </td>
          </tr>
        </tbody>
      </v-table>
    </v-card-text>
  </v-card>

  <v-dialog :model-value="renameOpen" max-width="420" @update:model-value="$emit('update:renameOpen', $event)">
    <v-card border>
      <v-card-title>重命名</v-card-title>
      <v-card-text>
        <v-text-field
          :model-value="renameValue"
          label="新名称"
          variant="outlined"
          density="compact"
          hide-details
          autofocus
          @update:model-value="$emit('update:renameValue', $event)"
          @keydown.enter.prevent="$emit('confirm-rename')"
        />
      </v-card-text>
      <v-card-actions>
        <v-spacer />
        <v-btn variant="text" @click="$emit('update:renameOpen', false)">取消</v-btn>
        <v-btn color="primary" variant="flat" :loading="renameLoading" @click="$emit('confirm-rename')">确定</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>

  <v-dialog :model-value="deleteOpen" max-width="480" @update:model-value="$emit('update:deleteOpen', $event)">
    <v-card border>
      <v-card-title>确认删除</v-card-title>
      <v-card-text>
        <template v-if="deleteTargets.length === 1">
          确定删除「{{ deleteTargets[0].name }}」？{{ deleteTargets[0].is_dir ? '将删除整个目录及其内容。' : '' }}
        </template>
        <template v-else>
          <div class="mb-2">确定删除以下 {{ deleteTargets.length }} 项？</div>
          <ul class="delete-target-list pl-4 mb-0">
            <li v-for="item in deleteTargets.slice(0, 8)" :key="item.name">
              {{ item.name }}{{ item.is_dir ? '（目录）' : '' }}
            </li>
            <li v-if="deleteTargets.length > 8">… 等共 {{ deleteTargets.length }} 项</li>
          </ul>
        </template>
      </v-card-text>
      <v-card-actions>
        <v-spacer />
        <v-btn variant="text" @click="$emit('update:deleteOpen', false)">取消</v-btn>
        <v-btn color="error" variant="flat" :loading="deleteLoading" @click="$emit('confirm-delete')">
          {{ deleteTargets.length > 1 ? `删除 ${deleteTargets.length} 项` : '删除' }}
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
import { formatSize } from '@/composables/push/labels'
import type { StagingEntry } from '@/composables/push/types'

defineProps<{
  rootPath: string
  relativePath: string
  entries: StagingEntry[]
  loading: boolean
  selectedCount: number
  allSelected: boolean
  someSelected: boolean
  isSelected: (name: string) => boolean
  renameOpen: boolean
  renameValue: string
  renameLoading: boolean
  deleteOpen: boolean
  deleteTargets: StagingEntry[]
  deleteLoading: boolean
}>()

defineEmits<{
  refresh: []
  'go-root': []
  'open-dir': [entry: StagingEntry]
  preview: [entry: StagingEntry]
  rename: [entry: StagingEntry]
  delete: [entry: StagingEntry]
  'batch-delete': []
  'toggle-select': [name: string, selected: boolean]
  'toggle-select-all': [selected: boolean]
  'confirm-rename': []
  'confirm-delete': []
  'update:renameOpen': [value: boolean]
  'update:renameValue': [value: string]
  'update:deleteOpen': [value: boolean]
}>()
</script>

<style scoped>
.cursor-pointer {
  cursor: pointer;
}

.delete-target-list {
  max-height: 200px;
  overflow-y: auto;
}
</style>
