<template>
  <div class="image-list-container">
    <a-card class="glass-card">
      <template #title>
        <span>镜像列表</span>
      </template>
      <template #extra>
        <a-button type="primary" @click="handleCreate">
          <plus-outlined />
          创建镜像
        </a-button>
      </template>

      <div class="search-bar">
        <a-input-search
          v-model:value="searchKey"
          placeholder="搜索镜像名称"
          style="width: 300px"
          @search="handleSearch"
          allow-clear
        />
        <a-select
          v-model:value="filterOsType"
          placeholder="操作系统类型"
          style="width: 150px"
          allow-clear
          @change="handleSearch"
        >
          <a-select-option value="linux">Linux</a-select-option>
          <a-select-option value="windows">Windows</a-select-option>
        </a-select>
        <a-button @click="handleRefresh">
          <reload-outlined />
          刷新
        </a-button>
      </div>

      <a-table
        :columns="columns"
        :data-source="imageList"
        :loading="loading"
        :pagination="pagination"
        @change="handleTableChange"
        row-key="id"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'os_type'">
            <a-tag :color="record.os_type === 'linux' ? 'blue' : 'purple'">
              {{ record.os_type }}
            </a-tag>
          </template>
          <template v-if="column.key === 'status'">
            <a-tag :color="getStatusColor(record.status)">
              {{ record.status }}
            </a-tag>
          </template>
          <template v-if="column.key === 'actions'">
            <a-space>
              <a-button type="link" size="small" @click="handleView(record)">
                查看
              </a-button>
              <a-button type="link" size="small" @click="handleEdit(record)">
                编辑
              </a-button>
              <a-button type="link" size="small" @click="handleReload(record)">
                重新下载
              </a-button>
              <a-button type="link" size="small" danger @click="handleDelete(record)">
                删除
              </a-button>
            </a-space>
          </template>
        </template>
      </a-table>

      <!-- 查看镜像详情 -->
      <a-modal
        v-model:open="detailVisible"
        title="镜像详情"
        :footer="null"
        width="560px"
      >
        <a-spin :spinning="detailLoading">
          <a-descriptions
            v-if="detailData"
            :column="1"
            bordered
            size="small"
          >
            <a-descriptions-item label="ID">{{ detailData.id }}</a-descriptions-item>
            <a-descriptions-item label="名称">{{ detailData.name }}</a-descriptions-item>
            <a-descriptions-item label="大小">{{ detailData.size != null ? detailData.size : '—' }}</a-descriptions-item>
            <a-descriptions-item label="操作系统类型">
              <a-tag :color="detailData.os_type === 'linux' ? 'blue' : 'purple'">
                {{ detailData.os_type }}
              </a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="类型">{{ detailData.type }}</a-descriptions-item>
            <a-descriptions-item label="来源">{{ detailData.source ?? '—' }}</a-descriptions-item>
            <a-descriptions-item label="源路径">{{ detailData.source_path ?? '—' }}</a-descriptions-item>
            <a-descriptions-item label="存储路径">{{ detailData.path ?? '—' }}</a-descriptions-item>
            <a-descriptions-item label="状态">
              <a-tag :color="getStatusColor(detailData.status)">
                {{ detailData.status }}
              </a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="创建时间">{{ detailData.created_at ?? '—' }}</a-descriptions-item>
            <a-descriptions-item label="更新时间">{{ detailData.updated_at ?? '—' }}</a-descriptions-item>
            <a-descriptions-item v-if="detailData.deleted_at" label="删除时间">
              {{ detailData.deleted_at }}
            </a-descriptions-item>
          </a-descriptions>
        </a-spin>
      </a-modal>

      <!-- 创建镜像 -->
      <a-modal
        v-model:open="createVisible"
        title="创建镜像"
        ok-text="创建"
        :confirm-loading="createSubmitting"
        @ok="submitCreate"
        @cancel="resetCreateForm"
      >
        <a-form
          ref="createFormRef"
          :model="createForm"
          :rules="createRules"
          layout="vertical"
        >
          <a-form-item label="镜像名称" name="name" required>
            <a-input v-model:value="createForm.name" placeholder="请输入镜像名称" />
          </a-form-item>
          <a-form-item label="下载地址" name="url" required>
            <a-input v-model:value="createForm.url" placeholder="镜像文件 URL（如 http(s) 或 file 路径）" />
          </a-form-item>
          <a-form-item label="操作系统类型" name="os_type">
            <a-select v-model:value="createForm.os_type" placeholder="选择操作系统类型">
              <a-select-option value="linux">Linux</a-select-option>
              <a-select-option value="windows">Windows</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="镜像类型" name="type">
            <a-select v-model:value="createForm.type" placeholder="选择镜像类型">
              <a-select-option value="system">system系统</a-select-option>
              <a-select-option value="data">data数据</a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </a-modal>

      <!-- 编辑镜像 -->
      <a-modal
        v-model:open="editVisible"
        title="编辑镜像"
        ok-text="保存"
        :confirm-loading="editSubmitting"
        @ok="submitEdit"
        @cancel="resetEditForm"
      >
        <a-spin :spinning="editLoading">
          <a-form
            ref="editFormRef"
            :model="editForm"
            :rules="editRules"
            layout="vertical"
          >
            <a-form-item label="ID">
              <a-input v-model:value="editForm.id" disabled />
            </a-form-item>
            <a-form-item label="镜像名称" name="name" required>
              <a-input v-model:value="editForm.name" placeholder="请输入镜像名称" />
            </a-form-item>
            <a-form-item label="路径" name="path" required>
              <a-input v-model:value="editForm.path" placeholder="镜像存储路径" />
            </a-form-item>
            <a-form-item label="操作系统类型" name="os_type">
              <a-select v-model:value="editForm.os_type" placeholder="选择操作系统类型">
                <a-select-option value="linux">Linux</a-select-option>
                <a-select-option value="windows">Windows</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="类型" name="type">
              <a-select v-model:value="editForm.type" placeholder="选择类型">
                <a-select-option value="system">system系统</a-select-option>
                <a-select-option value="data">data数据</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="状态" name="status">
              <a-select v-model:value="editForm.status" placeholder="选择状态">
                <a-select-option value="ready">ready</a-select-option>
                <a-select-option value="downloading">downloading</a-select-option>
                <a-select-option value="error">error</a-select-option>
              </a-select>
            </a-form-item>
          </a-form>
        </a-spin>
      </a-modal>
    </a-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { PlusOutlined, ReloadOutlined } from '@ant-design/icons-vue'
import * as imageApi from '@/api/imageApi'
import { Modal, message } from 'ant-design-vue'

const searchKey = ref('')
const filterOsType = ref(undefined)
const imageList = ref([])
const loading = ref(false)
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showTotal: (total) => `共 ${total} 条`
})

const columns = [
  { title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
  { title: '名称', dataIndex: 'name', key: 'name' },
  { title: '操作系统', key: 'os_type', width: 120 },
  { title: '类型', dataIndex: 'type', key: 'type', width: 120 },
  { title: '状态', key: 'status', width: 100 },
  { title: '路径', dataIndex: 'path', key: 'path' },
  { title: '操作', key: 'actions', width: 300, fixed: 'right' }
]

const getStatusColor = (status) => {
  const colorMap = {
    ready: 'green',
    downloading: 'blue',
    error: 'red'
  }
  return colorMap[status] || 'default'
}

const fetchList = async () => {
  loading.value = true
  try {
    const params = {
      page: pagination.value.current,
      count: pagination.value.pageSize,
      key: searchKey.value || undefined,
      os_type: filterOsType.value
    }
    const data = await imageApi.getImageList(params)
    // 处理API返回的数据格式
    const responseData = data.data || data
    imageList.value = responseData.data || []
    pagination.value.total = responseData.count || 0
  } catch (error) {
    console.error('获取列表失败:', error)
  } finally {
    loading.value = false
  }
}

const handleSearch = () => {
  pagination.value.current = 1
  fetchList()
}

const handleRefresh = () => {
  fetchList()
}

const handleTableChange = (pag) => {
  pagination.value.current = pag.current
  pagination.value.pageSize = pag.pageSize
  fetchList()
}

// 创建镜像
const createVisible = ref(false)
const createFormRef = ref(null)
const createSubmitting = ref(false)
const createForm = reactive({
  name: '',
  url: '',
  os_type: 'linux',
  type: 'qcow2'
})
const createRules = {
  name: [{ required: true, message: '请输入镜像名称', trigger: 'blur' }],
  url: [{ required: true, message: '请输入下载地址', trigger: 'blur' }]
}

const resetCreateForm = () => {
  createForm.name = ''
  createForm.url = ''
  createForm.os_type = 'linux'
  createForm.type = 'qcow2'
  createFormRef.value?.resetFields()
}

const handleCreate = () => {
  resetCreateForm()
  createVisible.value = true
}

const submitCreate = async () => {
  try {
    await createFormRef.value?.validate()
  } catch (e) {
    return
  }
  createSubmitting.value = true
  try {
    await imageApi.createImage({
      name: createForm.name.trim(),
      path: createForm.url.trim(),
      os_type: createForm.os_type,
      type: createForm.type
    })
    message.success('创建成功')
    createVisible.value = false
    fetchList()
  } catch (error) {
    console.error('创建镜像失败:', error)
  } finally {
    createSubmitting.value = false
  }
}

// 查看镜像详情
const detailVisible = ref(false)
const detailLoading = ref(false)
const detailData = ref(null)

const handleView = async (record) => {
  detailVisible.value = true
  detailData.value = null
  detailLoading.value = true
  try {
    const res = await imageApi.getImageDetail({ image_id: record.id })
    // 后端可能返回双层 data（源头 API 被原样包在 data 里），取内层为实际镜像对象
    detailData.value = res?.data != null ? res.data : res
  } catch (error) {
    console.error('获取镜像详情失败:', error)
    detailVisible.value = false
  } finally {
    detailLoading.value = false
  }
}

// 编辑镜像
const editVisible = ref(false)
const editFormRef = ref(null)
const editSubmitting = ref(false)
const editLoading = ref(false)
const editForm = reactive({
  id: undefined,
  name: '',
  path: '',
  os_type: '',
  type: '',
  status: ''
})
const editRules = {
  name: [{ required: true, message: '请输入镜像名称', trigger: 'blur' }],
  path: [{ required: true, message: '请输入路径', trigger: 'blur' }]
}

const resetEditForm = () => {
  editForm.id = undefined
  editForm.name = ''
  editForm.path = ''
  editForm.os_type = ''
  editForm.type = ''
  editForm.status = ''
  editFormRef.value?.resetFields()
}

const handleEdit = async (record) => {
  editVisible.value = true
  resetEditForm()
  editLoading.value = true
  try {
    const res = await imageApi.getImageDetail({ image_id: record.id })
    const detail = res?.data != null ? res.data : res
    if (detail) {
      editForm.id = detail.id
      editForm.name = detail.name ?? ''
      editForm.path = detail.path ?? ''
      editForm.os_type = detail.os_type ?? ''
      editForm.type = detail.type ?? ''
      editForm.status = detail.status ?? ''
    }
  } catch (error) {
    console.error('获取镜像详情失败:', error)
    editVisible.value = false
  } finally {
    editLoading.value = false
  }
}

const submitEdit = async () => {
  try {
    await editFormRef.value?.validate()
  } catch (e) {
    return
  }
  editSubmitting.value = true
  try {
    await imageApi.updateImage({
      id: editForm.id,
      name: editForm.name.trim(),
      path: editForm.path.trim(),
      os_type: editForm.os_type,
      type: editForm.type,
      status: editForm.status
    })
    message.success('更新成功')
    editVisible.value = false
    fetchList()
  } catch (error) {
    console.error('更新镜像失败:', error)
  } finally {
    editSubmitting.value = false
  }
}

const handleReload = async (record) => {
  Modal.confirm({
    title: '确认重新下载',
    content: `确定要重新下载镜像 "${record.name}" 吗？`,
    onOk: async () => {
      try {
        await imageApi.reloadImage({ image_id: record.id })
        message.success('开始重新下载')
        fetchList()
      } catch (error) {
        console.error('重新下载失败:', error)
      }
    }
  })
}

const handleDelete = async (record) => {
  Modal.confirm({
    title: '确认删除',
    content: `确定要删除镜像 "${record.name}" 吗？此操作不可恢复！`,
    okType: 'danger',
    onOk: async () => {
      try {
        await imageApi.deleteImage({ image_id: record.id })
        message.success('删除成功')
        fetchList()
      } catch (error) {
        console.error('删除失败:', error)
      }
    }
  })
}

onMounted(() => {
  fetchList()
})
</script>

<style scoped>
.image-list-container {
  padding: 0;
}

.search-bar {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}
</style>
