<template>
  <div class="file-system">
    <a-space direction="vertical" style="width: 100%" :size="16">

      <!-- 路径输入 -->
      <a-card title="📂 文件浏览">
        <a-space direction="vertical" :size="12" style="width: 100%">
          <a-input-group>
            <a-auto-complete
              v-model="filePath"
              :data="pathHistory"
              placeholder="输入文件或目录路径 (如: C:\Users 或 /home/user)"
              style="flex: 1"
              @select="onPathSelect"
            />
            <a-button @click="browseDirectory">
              <template #icon>
                <icon-folder />
              </template>
              浏览
            </a-button>
            <a-button type="primary" @click="listDirectory" :loading="fileLoading">
              <template #icon>
                <icon-list />
              </template>
              列出目录
            </a-button>
          </a-input-group>

          <!-- 常用路径快捷按钮 -->
          <a-space wrap>
            <a-tag
              v-for="shortcut in commonPaths"
              :key="shortcut.path"
              @click="openPath(shortcut.path)"
              style="cursor: pointer"
            >
              <template #icon>
                <icon-forward />
              </template>
              {{ shortcut.name }}
            </a-tag>
          </a-space>
        </a-space>
      </a-card>

      <!-- 收藏的文件 -->
      <a-card title="⭐ 收藏夹" v-if="favoriteFiles.length > 0">
        <a-space wrap>
          <a-tag
            v-for="fav in favoriteFiles"
            :key="fav.path"
            closable
            @close="removeFavorite(fav.path)"
            @click="openFavoriteFile(fav.path)"
            style="cursor: pointer; margin-bottom: 4px; padding: 4px 8px"
          >
            <template #icon>
              <span style="font-size: 16px">{{ fav.is_dir ? '📁' : '📄' }}</span>
            </template>
            {{ fav.name }}
          </a-tag>
        </a-space>
      </a-card>

      <!-- 文件列表和编辑器 -->
      <a-row :gutter="16">
        <a-col :span="12">
          <a-card title="📋 文件列表" style="height: 100%">
            <a-list
              :data="fileList"
              :loading="fileLoading"
              :bordered="false"
              style="max-height: 500px; overflow-y: auto"
              :pagination="false"
            >
              <template #item="{ item }">
                <a-list-item class="file-item-compact">
                  <a-list-item-meta>
                    <template #title>
                      <div class="file-item-content">
                        <span class="file-icon">{{ getFileIcon(item) }}</span>
                        <a @click="selectFile(item.path)" class="file-name-compact">{{ item.name }}</a>
                        <span class="file-info-inline">
                          <span v-if="!item.is_dir" class="file-size">{{ formatBytes(item.size) }}</span>
                          <span class="file-time">{{ item.mod_time }}</span>
                        </span>
                        <a-button
                          type="text"
                          size="mini"
                          @click.stop="toggleFavorite(item)"
                          class="favorite-btn"
                        >
                          <template #icon>
                            <icon-star-fill v-if="isFavorite(item.path)" />
                            <icon-star v-else />
                          </template>
                        </a-button>
                      </div>
                    </template>
                  </a-list-item-meta>
                </a-list-item>
              </template>
            </a-list>
          </a-card>
        </a-col>

        <a-col :span="12">
          <a-card title="📝 文件内容">
            <a-space direction="vertical" :size="8" style="width: 100%">
              <div
                class="file-content-wrapper"
                :style="{ height: fileContentHeight + 'px' }"
              >
                <a-textarea
                  v-model="fileContent"
                  class="file-content-textarea"
                  placeholder="文件内容将显示在这里，点击文件列表中的文件即可查看"
                />
              </div>
              <div
                class="resize-handle"
                @mousedown="startResize"
                title="拖拽调整高度"
              >
                <div class="resize-handle-bar"></div>
              </div>
              <a-space>
                <a-button type="primary" @click="readFile" :loading="fileLoading">
                  <template #icon>
                    <icon-file />
                  </template>
                  读取
                </a-button>
                <a-button @click="writeFile" :loading="fileLoading">
                  <template #icon>
                    <icon-save />
                  </template>
                  保存
                </a-button>
                <a-button status="danger" @click="deleteFile" :loading="fileLoading">
                  <template #icon>
                    <icon-delete />
                  </template>
                  删除
                </a-button>
                <a-button @click="clearContent">
                  <template #icon>
                    <icon-eraser />
                  </template>
                  清空
                </a-button>
              </a-space>
            </a-space>
          </a-card>
        </a-col>
      </a-row>
    </a-space>
  </div>
</template>

<script setup>
import { computed, onMounted, ref, watch } from 'vue'
import { Message, Modal } from '@arco-design/web-vue'
import {
  IconFolder,
  IconList,
  IconForward,
  IconStarFill,
  IconStar,
  IconFile,
  IconSave,
  IconDelete,
  IconEraser
} from '@arco-design/web-vue/es/icon'
import {
  listDir,
  readFile as readFileApi,
  writeFile as writeFileApi,
  deletePath
} from '@/api'

// localStorage 键名
const STORAGE_KEYS = {
  FILE_PATH: 'filesystem-file-path',
  FILE_LIST: 'filesystem-file-list',
  FILE_CONTENT: 'filesystem-file-content',
  PATH_HISTORY: 'filesystem-path-history',
  FILE_CONTENT_HEIGHT: 'filesystem-file-content-height',
  FAVORITE_FILES: 'filesystem-favorite-files'
}

// 常用路径快捷方式
const commonPaths = ref([])
const systemPaths = ref({})

// 加载常用系统路径
const loadCommonPaths = async () => {
  try {
    const paths = await window.go.main.App.GetCommonPaths()
    systemPaths.value = paths

    const platform = window.navigator.platform
    if (platform.includes('Win')) {
      // 基础路径
      const pathList = [
        { name: '🖥️ 桌面', path: paths.desktop },
        { name: '📁 文档', path: paths.documents },
        { name: '📥 下载', path: paths.downloads },
        { name: '💾 用户目录', path: paths.home }
      ]

      // 动态添加所有盘符（按字母顺序）
      const drives = []
      for (const key in paths) {
        if (key.startsWith('root_')) {
          const driveLetter = key.substring(5)
          drives.push({
            letter: driveLetter,
            path: paths[key]
          })
        }
      }
      drives.sort((a, b) => a.letter.localeCompare(b.letter))

      // 添加盘符到路径列表
      drives.forEach(drive => {
        pathList.push({
          name: `💿 ${drive.letter}盘`,
          path: drive.path
        })
      })

      commonPaths.value = pathList
    } else {
      commonPaths.value = [
        { name: '🖥️ 桌面', path: paths.desktop },
        { name: '📁 文档', path: paths.documents },
        { name: '📥 下载', path: paths.downloads },
        { name: '🏠 主目录', path: paths.home },
        { name: '📂 根目录', path: '/' }
      ]
    }
  } catch (error) {
    console.error('加载常用路径失败:', error)
    // 降级方案：使用默认路径
    commonPaths.value = [
      { name: '💿 C盘', path: 'C:\\' },
      { name: '💿 D盘', path: 'D:\\' }
    ]
  }
}

// 状态
const filePath = ref('')
const fileContent = ref('')
const fileList = ref([])
const fileLoading = ref(false)
const pathHistory = ref([])
const fileContentHeight = ref(250)
const favoriteFiles = ref([])

// 格式化文件大小
const formatBytes = (bytes) => {
  if (!bytes) return '0 B'
  const unit = 1024
  if (bytes < unit) return bytes + ' B'
  const exp = Math.floor(Math.log(bytes) / Math.log(unit))
  return (bytes / Math.pow(unit, exp)).toFixed(2) + ' ' + 'KMGTPE'[exp - 1] + 'B'
}

// 获取文件图标（根据文件类型）
const getFileIcon = (item) => {
  if (item.is_dir) {
    return '📁'
  }

  const ext = item.name.split('.').pop()?.toLowerCase() || ''

  // 图片文件
  const imageExts = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp', 'ico', 'heic', 'heif']
  if (imageExts.includes(ext)) return '🖼️'

  // 视频文件
  const videoExts = ['mp4', 'avi', 'mkv', 'mov', 'wmv', 'flv', 'webm', 'm4v', 'rmvb', '3gp']
  if (videoExts.includes(ext)) return '🎬'

  // 音频文件
  const audioExts = ['mp3', 'wav', 'flac', 'aac', 'ogg', 'wma', 'm4a', 'opus']
  if (audioExts.includes(ext)) return '🎵'

  // 文档文件
  const docExts = ['doc', 'docx', 'pdf', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'rtf', 'odt', 'ods', 'odp']
  if (docExts.includes(ext)) {
    if (ext === 'pdf') return '📕'
    if (['doc', 'docx'].includes(ext)) return '📘'
    if (['xls', 'xlsx'].includes(ext)) return '📗'
    if (['ppt', 'pptx'].includes(ext)) return '📙'
    if (ext === 'txt') return '📃'
    return '📄'
  }

  // 压缩文件
  const archiveExts = ['zip', 'rar', '7z', 'tar', 'gz', 'bz2', 'xz', 'z', 'cab', 'iso']
  if (archiveExts.includes(ext)) return '📦'

  // 代码文件
  const codeExts = ['js', 'ts', 'jsx', 'tsx', 'vue', 'py', 'java', 'c', 'cpp', 'h', 'go', 'rs', 'php', 'rb', 'cs', 'swift', 'kt', 'scala', 'html', 'css', 'scss', 'less', 'json', 'xml', 'yaml', 'yml', 'sql', 'sh', 'bat', 'ps1']
  if (codeExts.includes(ext)) return '💻'

  // 数据库文件
  const dbExts = ['db', 'sqlite', 'mdb', 'accdb']
  if (dbExts.includes(ext)) return '🗄️'

  // 可执行文件
  const exeExts = ['exe', 'msi', 'app', 'dmg', 'deb', 'rpm']
  if (exeExts.includes(ext)) return '⚙️'

  // 字体文件
  const fontExts = ['ttf', 'otf', 'woff', 'woff2', 'eot']
  if (fontExts.includes(ext)) return '🔤'

  // 默认文件图标
  return '📄'
}

// 列出目录
const listDirectory = async () => {
  if (!filePath.value) {
    Message.error('请输入目录路径')
    return
  }

  addToHistory(filePath.value)
  fileLoading.value = true
  try {
    fileList.value = await listDir(filePath.value)
  } catch (error) {
    console.error('列出目录失败:', error)
    Message.error('列出目录失败: ' + (error.message || error))
  } finally {
    fileLoading.value = false
  }
}

// 路径选择
const onPathSelect = (value) => {
  filePath.value = value
  listDirectory()
}

// 打开路径
const openPath = (path) => {
  filePath.value = path
  listDirectory()
}

// 浏览目录
const browseDirectory = () => {
  const path = prompt('请输入目录路径（例如: C:\\Users 或 /home/user）')
  if (path) {
    filePath.value = path
    listDirectory()
  }
}

// 选择文件
const selectFile = (path) => {
  filePath.value = path
  addToHistory(path)
}

// 读取文件
const readFile = async () => {
  if (!filePath.value) {
    Message.error('请输入文件路径')
    return
  }

  addToHistory(filePath.value)
  fileLoading.value = true
  try {
    fileContent.value = await readFileApi(filePath.value)
    Message.success('文件读取成功')
  } catch (error) {
    console.error('读取文件失败:', error)
    Message.error('读取文件失败: ' + (error.message || error))
  } finally {
    fileLoading.value = false
  }
}

// 写入文件
const writeFile = async () => {
  if (!filePath.value) {
    Message.error('请输入文件路径')
    return
  }

  fileLoading.value = true
  try {
    await writeFileApi(filePath.value, fileContent.value)
    Message.success('文件保存成功')
  } catch (error) {
    console.error('写入文件失败:', error)
    Message.error('写入文件失败: ' + (error.message || error))
  } finally {
    fileLoading.value = false
  }
}

// 删除文件
const deleteFile = async () => {
  if (!filePath.value) {
    Message.error('请输入文件路径')
    return
  }

  Modal.confirm({
    title: '确认删除',
    content: `确定要删除 ${filePath.value} 吗？此操作不可恢复！`,
    onOk: async () => {
      fileLoading.value = true
      try {
        await deletePath(filePath.value)
        Message.success('删除成功')
        // 清空状态
        filePath.value = ''
        fileContent.value = ''
        fileList.value = []
        // 重新列出目录
        if (pathHistory.value.length > 0) {
          filePath.value = pathHistory.value[0]
          listDirectory()
        }
      } catch (error) {
        console.error('删除失败:', error)
        Message.error('删除失败: ' + (error.message || error))
      } finally {
        fileLoading.value = false
      }
    }
  })
}

// 清空内容
const clearContent = () => {
  fileContent.value = ''
  Message.info('内容已清空')
}

// 拖拽调整高度
const startResize = (e) => {
  const startY = e.clientY
  const startHeight = fileContentHeight.value

  const onMouseMove = (moveEvent) => {
    const deltaY = moveEvent.clientY - startY
    const newHeight = startHeight + deltaY
    if (newHeight >= 150 && newHeight <= 800) {
      fileContentHeight.value = newHeight
    }
  }

  const onMouseUp = () => {
    document.removeEventListener('mousemove', onMouseMove)
    document.removeEventListener('mouseup', onMouseUp)
    saveToStorage(STORAGE_KEYS.FILE_CONTENT_HEIGHT, fileContentHeight.value.toString())
  }

  document.addEventListener('mousemove', onMouseMove)
  document.addEventListener('mouseup', onMouseUp)
}

// 历史记录
const addToHistory = (path) => {
  if (!path || path.trim() === '') return

  const index = pathHistory.value.indexOf(path)
  if (index > -1) {
    pathHistory.value.splice(index, 1)
  }

  pathHistory.value.unshift(path)
  if (pathHistory.value.length > 20) {
    pathHistory.value = pathHistory.value.slice(0, 20)
  }

  saveToStorage(STORAGE_KEYS.PATH_HISTORY, pathHistory.value)
}

// 收藏功能
const isFavorite = (path) => {
  return favoriteFiles.value.some(fav => fav.path === path)
}

const toggleFavorite = (item) => {
  const index = favoriteFiles.value.findIndex(fav => fav.path === item.path)

  if (index > -1) {
    favoriteFiles.value.splice(index, 1)
    Message.info('已取消收藏: ' + item.name)
  } else {
    favoriteFiles.value.push({
      path: item.path,
      name: item.name,
      is_dir: item.is_dir
    })
    Message.success('已收藏: ' + item.name)
  }

  saveToStorage(STORAGE_KEYS.FAVORITE_FILES, favoriteFiles.value)
}

const removeFavorite = (path) => {
  const index = favoriteFiles.value.findIndex(fav => fav.path === path)
  if (index > -1) {
    const name = favoriteFiles.value[index].name
    favoriteFiles.value.splice(index, 1)
    saveToStorage(STORAGE_KEYS.FAVORITE_FILES, favoriteFiles.value)
    Message.info('已取消收藏: ' + name)
  }
}

const openFavoriteFile = (path) => {
  filePath.value = path
  addToHistory(path)

  const fav = favoriteFiles.value.find(f => f.path === path)
  if (fav && fav.is_dir) {
    listDirectory()
  } else {
    readFile()
  }
}

// localStorage 操作
const loadFromStorage = () => {
  try {
    const savedPath = localStorage.getItem(STORAGE_KEYS.FILE_PATH)
    const savedFileList = localStorage.getItem(STORAGE_KEYS.FILE_LIST)
    const savedFileContent = localStorage.getItem(STORAGE_KEYS.FILE_CONTENT)
    const savedHistory = localStorage.getItem(STORAGE_KEYS.PATH_HISTORY)
    const savedHeight = localStorage.getItem(STORAGE_KEYS.FILE_CONTENT_HEIGHT)
    const savedFavorites = localStorage.getItem(STORAGE_KEYS.FAVORITE_FILES)

    if (savedPath) filePath.value = savedPath
    if (savedFileList) fileList.value = JSON.parse(savedFileList)
    if (savedFileContent) fileContent.value = savedFileContent
    if (savedHistory) pathHistory.value = JSON.parse(savedHistory)
    if (savedFavorites) favoriteFiles.value = JSON.parse(savedFavorites)
    if (savedHeight) {
      const height = parseInt(savedHeight)
      if (!isNaN(height) && height >= 150 && height <= 800) {
        fileContentHeight.value = height
      }
    }
  } catch (error) {
    console.error('从 localStorage 加载数据失败:', error)
  }
}

const saveToStorage = (key, value) => {
  try {
    if (typeof value === 'string') {
      localStorage.setItem(key, value)
    } else {
      localStorage.setItem(key, JSON.stringify(value))
    }
  } catch (error) {
    console.error('保存到 localStorage 失败:', error)
  }
}

// 监听数据变化自动保存
watch(filePath, (newPath) => {
  saveToStorage(STORAGE_KEYS.FILE_PATH, newPath)
})

watch(fileContent, (newContent) => {
  saveToStorage(STORAGE_KEYS.FILE_CONTENT, newContent)
})

watch(fileList, (newList) => {
  saveToStorage(STORAGE_KEYS.FILE_LIST, newList)
}, { deep: true })

onMounted(() => {
  loadFromStorage()
  loadCommonPaths()
})
</script>

<style scoped>
.file-system {
  padding: 16px;
}

/* 紧凑型文件列表项 */
.file-item-compact {
  padding: 4px 0 !important;
  margin: 0 !important;
}

.file-item-content {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.2s;
}

.file-item-content:hover {
  background: var(--color-fill-2);
}

.file-icon {
  font-size: 18px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.file-name-compact {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-info-inline {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--color-text-3);
  flex-shrink: 0;
}

.file-size {
  color: var(--color-text-3);
}

.file-time {
  color: var(--color-text-3);
}

.favorite-btn {
  flex-shrink: 0;
  padding: 0 4px;
  font-size: 14px;
}

/* 移除列表项的默认边距和内边距 */
.file-item-compact :deep(.arco-list-item-meta) {
  padding: 0;
  margin: 0;
}

.file-item-compact :deep(.arco-list-item-meta-title) {
  margin: 0;
}

.file-item-compact :deep(.arco-list-item) {
  padding: 0;
  margin: 0;
  border: none;
}

.file-content-wrapper {
  position: relative;
  overflow: hidden;
  transition: height 0.1s ease;
  border: 1px solid var(--color-border-2);
  border-radius: 4px;
}

.file-content-textarea {
  width: 100%;
  height: 100%;
  resize: none;
  border: none;
}

.resize-handle {
  height: 8px;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-fill-2);
  border-radius: 4px;
  margin: 4px 0;
  transition: background 0.2s;
}

.resize-handle:hover {
  background: var(--color-fill-3);
}

.resize-handle-bar {
  width: 40px;
  height: 3px;
  background: var(--color-border-3);
  border-radius: 2px;
}

.resize-handle:hover .resize-handle-bar {
  background: rgb(var(--primary-6));
}
</style>
