<template>
  <div class="model-management">
    <div class="section-header">
      <h3 class="section-title">模型管理</h3>
      <div class="section-subtitle">管理您的CAD模型文件</div>
    </div>
    
    <div class="model-actions">
      <div 
        class="action-card"
        :class="{ 
          'active': selectedAction === 'open',
          'disabled': !hasCADConnection
        }"
        @click="selectAction('open')"
      >
        <div class="action-card-inner">
          <div class="action-icon-wrapper">
            <div class="action-icon">
              <i class="fas fa-folder-open"></i>
            </div>
            <div class="action-badge" v-if="recentFiles.length > 0">
              {{ recentFiles.length }}
            </div>
          </div>
          <div class="action-content">
            <div class="action-title">打开模型</div>
            <div class="action-desc">选择并打开本地模型文件</div>
            <div class="action-hint" v-if="!hasCADConnection">
              请先连接CAD软件
            </div>
          </div>
        </div>
      </div>
      
      <div 
        class="action-card"
        :class="{ 
          'active': selectedAction === 'view',
          'disabled': openedModelsCount === 0
        }"
        @click="selectAction('view')"
      >
        <div class="action-card-inner">
          <div class="action-icon-wrapper">
            <div class="action-icon">
              <i class="fas fa-eye"></i>
            </div>
            <div class="action-badge" v-if="openedModelsCount > 0">
              {{ openedModelsCount }}
            </div>
          </div>
          <div class="action-content">
            <div class="action-title">查看已打开模型</div>
            <div class="action-desc">浏览CAD中已打开的模型</div>
            <div class="action-hint" v-if="openedModelsCount === 0">
              暂无打开的模型
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="action-preview" v-if="selectedAction">
      <div class="preview-header">
        <i class="fas fa-info-circle"></i>
        <span>{{ getPreviewText() }}</span>
      </div>
    </div>
    
    <div class="action-buttons">
      <BaseButton 
        type="primary" 
        @click="handleConfirm"
        :disabled="!selectedAction"
        :loading="isProcessing"
      >
        {{ getConfirmText() }}
      </BaseButton>
      <BaseButton 
        type="secondary" 
        @click="handleClose"
      >
        取消
      </BaseButton>
    </div>
    
    <!-- 文件选择对话框 (精致版本) -->
    <transition name="dialog-fade">
      <div v-if="showFileDialog" class="file-dialog-overlay" @click="closeFileDialog">
        <div class="file-dialog" @click.stop>
          <div class="file-dialog-header">
            <div class="dialog-title-section">
              <i class="fas fa-folder-open"></i>
              <h4>选择模型文件</h4>
            </div>
            <button class="close-btn" @click="closeFileDialog">
              <i class="fas fa-times"></i>
            </button>
          </div>
          <div class="file-dialog-body">
            <div class="file-path-breadcrumb">
              <span class="breadcrumb-item">模型文件夹</span>
              <i class="fas fa-chevron-right"></i>
              <span class="breadcrumb-item current">CAD Files</span>
            </div>
            <div class="file-list">
              <div 
                v-for="file in modelFiles" 
                :key="file.name"
                class="file-item"
                :class="{ 
                  'selected': selectedFile === file,
                  'recent': file.isRecent
                }"
                @click="selectedFile = file"
              >
                <div class="file-icon">
                  <i class="fas fa-file-cad"></i>
                </div>
                <div class="file-info">
                  <div class="file-name">{{ file.name }}</div>
                  <div class="file-meta">
                    <span class="file-size">{{ file.size }}</span>
                    <span class="file-date">{{ file.modifiedDate }}</span>
                  </div>
                </div>
                <div class="file-indicator" v-if="selectedFile === file">
                  <i class="fas fa-check"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="file-dialog-footer">
            <div class="dialog-info">
              <span v-if="selectedFile">
                已选择: <strong>{{ selectedFile.name }}</strong>
              </span>
              <span v-else>请选择要打开的模型文件</span>
            </div>
            <div class="dialog-actions">
              <BaseButton type="secondary" @click="closeFileDialog">取消</BaseButton>
              <BaseButton 
                type="primary" 
                @click="openSelectedFile"
                :disabled="!selectedFile"
                :loading="isOpening"
              >
                打开模型
              </BaseButton>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import BaseButton from '@/components/ui/BaseButton.vue'
import { useCADStore } from '@/stores/cad'

const emit = defineEmits(['action', 'close'])

const cadStore = useCADStore()

const selectedAction = ref('')
const showFileDialog = ref(false)
const selectedFile = ref(null)
const isProcessing = ref(false)
const isOpening = ref(false)

// 计算属性
const hasCADConnection = computed(() => !!cadStore.currentCAD)
const openedModelsCount = computed(() => cadStore.openedModels.length)
const recentFiles = computed(() => {
  // 模拟最近文件列表
  return modelFiles.value.slice(0, 2)
})

const modelFiles = ref([
  { 
    name: 'assembly.prt', 
    size: '2.5MB',
    modifiedDate: '2024-01-15',
    isRecent: true
  },
  { 
    name: 'part1.prt', 
    size: '1.2MB',
    modifiedDate: '2024-01-14',
    isRecent: false
  },
  { 
    name: 'part2.prt', 
    size: '800KB',
    modifiedDate: '2024-01-13',
    isRecent: false
  },
  { 
    name: 'mechanism.asm', 
    size: '5.1MB',
    modifiedDate: '2024-01-12',
    isRecent: true
  }
])

const selectAction = (action) => {
  if (action === 'open' && !hasCADConnection.value) {
    return
  }
  if (action === 'view' && openedModelsCount.value === 0) {
    return
  }
  
  selectedAction.value = action
  
  if (action === 'open') {
    showFileDialog.value = true
  } else if (action === 'view') {
    emit('action', { type: 'view' })
  }
}

const getPreviewText = () => {
  if (selectedAction.value === 'open') {
    return '将打开文件选择器，选择CAD模型文件'
  } else if (selectedAction.value === 'view') {
    return '将显示当前已打开的模型列表'
  }
  return ''
}

const getConfirmText = () => {
  if (selectedAction.value === 'open') {
    return selectedFile.value ? '打开选中文件' : '选择文件'
  } else if (selectedAction.value === 'view') {
    return '查看模型'
  }
  return '确定'
}

const handleConfirm = async () => {
  if (!selectedAction.value) return
  
  isProcessing.value = true
  
  try {
    if (selectedAction.value === 'open' && selectedFile.value) {
      const result = await cadStore.openModel({
        title: selectedFile.value.name,
        name: selectedFile.value.name,
        source: cadStore.currentCAD?.name || 'Unknown',
        size: selectedFile.value.size,
        modifiedDate: selectedFile.value.modifiedDate
      })
      
      if (result.success) {
        emit('action', { 
          type: 'open', 
          file: result.model 
        })
        closeFileDialog()
        selectedAction.value = ''
      } else {
        // 处理打开失败
      }
    } else if (selectedAction.value === 'view') {
      emit('action', { type: 'view' })
      selectedAction.value = ''
    }
  } finally {
    isProcessing.value = false
  }
}

const handleClose = () => {
  selectedAction.value = ''
  selectedFile.value = null
  emit('close')
}

const closeFileDialog = () => {
  showFileDialog.value = false
  selectedFile.value = null
}

const openSelectedFile = async () => {
  if (!selectedFile.value) return
  
  isOpening.value = true
  
  try {
    const result = await cadStore.openModel({
      title: selectedFile.value.name,
      name: selectedFile.value.name,
      source: cadStore.currentCAD?.name || 'Unknown',
      size: selectedFile.value.size,
      modifiedDate: selectedFile.value.modifiedDate
    })
    
    if (result.success) {
      emit('action', { 
        type: 'open', 
        file: result.model 
      })
      closeFileDialog()
      selectedAction.value = ''
    } else {
      // 处理打开失败
    }
  } finally {
    isOpening.value = false
  }
}
</script>

<style scoped>
.model-management {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
  padding: var(--spacing-xl);
}

.section-header {
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.section-title {
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-sm) 0;
  letter-spacing: 0.5px;
}

.section-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  font-weight: var(--font-weight-medium);
}

.model-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
}

.action-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-duration) var(--transition-timing);
}

.action-card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-3xl);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--size-border-radius-card);
  transition: all var(--transition-duration) var(--transition-timing);
  position: relative;
  z-index: 1;
  min-height: 180px;
}

.action-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  opacity: 0;
  transition: opacity var(--transition-duration) var(--transition-timing);
  z-index: 0;
}

.action-card:hover::before {
  opacity: 0.05;
}

.action-card:hover .action-card-inner {
  background: var(--color-white-rgb-05);
  border-color: var(--color-white-rgb-2);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px var(--color-black-rgb-2);
}

.action-card.active .action-card-inner {
  background: var(--color-primary-rgb);
  border-color: var(--color-primary);
  box-shadow: 0 0 20px var(--color-primary-rgb-2);
}

.action-card.active::before {
  opacity: 0.1;
}

.action-card.disabled .action-card-inner {
  opacity: 0.5;
  cursor: not-allowed;
}

.action-card.disabled:hover .action-card-inner {
  transform: none;
  box-shadow: none;
}

.action-card.disabled::before {
  display: none;
}

.action-icon-wrapper {
  position: relative;
  margin-bottom: var(--spacing-sm);
}

.action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--color-primary-rgb) 0%, var(--color-primary-light-rgb-05) 100%);
  border-radius: var(--size-border-radius);
  font-size: 32px;
  color: var(--color-primary);
  transition: all var(--transition-duration) var(--transition-timing);
  position: relative;
  overflow: hidden;
}

.action-icon::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, var(--color-white-rgb-1), transparent);
  transform: rotate(45deg);
  transition: all 0.6s ease;
}

.action-card:hover .action-icon::before {
  animation: shine 0.6s ease;
}

@keyframes shine {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

.action-card.active .action-icon {
  background: linear-gradient(135deg, var(--color-primary-rgb-2) 0%, var(--color-primary-light-rgb-1) 100%);
  color: var(--color-primary);
  box-shadow: 0 0 20px var(--color-primary-rgb-3);
}

.action-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  background: var(--color-primary-gradient);
  color: var(--color-text-primary);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  box-shadow: 0 2px 8px var(--color-primary-rgb-3);
  z-index: 2;
}

.action-content {
  text-align: center;
  z-index: 1;
}

.action-title {
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
  letter-spacing: 0.5px;
}

.action-desc {
  font-size: 16px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: var(--spacing-sm);
}

.action-hint {
  font-size: var(--font-size-xs);
  color: var(--color-error);
  font-weight: var(--font-weight-medium);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-error-rgb-1);
  border-radius: var(--size-border-radius);
  border: 1px solid var(--color-error-rgb-1);
}

.action-preview {
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-white-rgb-05);
  border: 1px solid var(--color-white-rgb-1);
  border-radius: var(--size-border-radius);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  transition: all var(--transition-duration) var(--transition-timing);
}

.action-preview i {
  color: var(--color-primary);
}

.action-buttons {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

/* 文件对话框精致样式 */
.dialog-fade-enter-active,
.dialog-fade-leave-active {
  transition: all var(--transition-duration) var(--transition-timing);
}

.dialog-fade-enter-from {
  opacity: 0;
  transform: scale(0.95);
}

.dialog-fade-leave-to {
  opacity: 0;
  transform: scale(0.95);
}

.file-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-black-rgb-6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-index-modal);
  backdrop-filter: blur(4px);
}

.file-dialog {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--size-border-radius-card);
  width: 90%;
  max-width: 600px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px var(--color-black-rgb-4);
  overflow: hidden;
  transform: scale(1);
  transition: all var(--transition-duration) var(--transition-timing);
}

.file-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-xl);
  border-bottom: 1px solid var(--color-border-primary);
  background: var(--color-white-rgb-05);
}

.dialog-title-section {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.dialog-title-section i {
  color: var(--color-primary);
  font-size: var(--font-size-lg);
}

.dialog-title-section h4 {
  margin: 0;
  font-size: var(--font-size-xl);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.close-btn {
  background: none;
  border: none;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-lg);
  cursor: pointer;
  padding: var(--spacing-sm);
  border-radius: var(--size-border-radius);
  transition: all var(--transition-duration) var(--transition-timing);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-hover);
  transform: rotate(90deg);
}

.file-dialog-body {
  flex: 1;
  padding: var(--spacing-xl);
  overflow-y: auto;
}

.file-path-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-white-rgb-05);
  border-radius: var(--size-border-radius);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.file-path-breadcrumb i {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
}

.breadcrumb-item {
  font-weight: var(--font-weight-medium);
}

.breadcrumb-item.current {
  color: var(--color-text-primary);
}

.file-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.file-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--size-border-radius);
  cursor: pointer;
  transition: all var(--transition-duration) var(--transition-timing);
  position: relative;
  border: 2px solid transparent;
}

.file-item:hover {
  background: var(--color-white-rgb-05);
  border-color: var(--color-white-rgb-1);
}

.file-item.selected {
  background: var(--color-primary-rgb);
  border-color: var(--color-primary);
  box-shadow: 0 0 15px var(--color-primary-rgb-2);
}

.file-item.recent {
  border-left: 3px solid var(--color-warning);
}

.file-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-primary-rgb);
  border-radius: var(--size-border-radius);
  color: var(--color-primary);
  font-size: var(--font-size-lg);
}

.file-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.file-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.file-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

.file-size {
  font-weight: var(--font-weight-medium);
}

.file-date {
  font-style: italic;
}

.file-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--color-primary-gradient);
  border-radius: 50%;
  color: var(--color-text-primary);
  font-size: var(--font-size-xs);
  opacity: 0;
  transform: scale(0.8);
  transition: all var(--transition-duration) var(--transition-timing);
}

.file-item.selected .file-indicator {
  opacity: 1;
  transform: scale(1);
}

.file-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-xl);
  border-top: 1px solid var(--color-border-primary);
  background: var(--color-white-rgb-05);
}

.dialog-info {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.dialog-info strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.dialog-actions {
  display: flex;
  gap: var(--spacing-md);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .model-actions {
    gap: var(--spacing-lg);
  }
  
  .action-card-inner {
    padding: var(--spacing-2xl);
    min-height: 160px;
  }
  
  .action-icon {
    width: 72px;
    height: 72px;
    font-size: 28px;
  }
  
  .action-title {
    font-size: 18px;
  }
  
  .action-desc {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .model-actions {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  
  .action-card-inner {
    padding: var(--spacing-xl);
    min-height: 150px;
  }
  
  .action-icon {
    width: 64px;
    height: 64px;
    font-size: 24px;
  }
  
  .action-title {
    font-size: 16px;
  }
  
  .action-desc {
    font-size: 13px;
  }
  
  .file-dialog {
    width: 95%;
    margin: var(--spacing-md);
  }
  
  .file-dialog-footer {
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: stretch;
  }
  
  .dialog-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 480px) {
  .model-management {
    padding: var(--spacing-lg);
  }
  
  .action-card-inner {
    padding: var(--spacing-lg);
    min-height: 130px;
    gap: var(--spacing-md);
  }
  
  .action-icon {
    width: 56px;
    height: 56px;
    font-size: 20px;
  }
  
  .action-title {
    font-size: 15px;
  }
  
  .action-desc {
    font-size: 12px;
  }
}
</style>