<template>
  <div>
    <!-- 模板列表 -->
    <el-collapse-item title="模板列表" name="templates">
      <div class="template-actions">
        <el-button type="primary" size="small" @click="loadTemplates" :loading="isLoading">
          <el-icon><Refresh /></el-icon>
          刷新
        </el-button>
        <el-button 
          type="success" 
          size="small" 
          @click="showCreateDialog = true"
          :disabled="!editorStore.hasData"
        >
          <el-icon><Plus /></el-icon>
          保存为模板
        </el-button>
      </div>
      
      <el-empty v-if="!templateStore.hasTemplates" description="暂无模板" />
      
      <div v-else class="template-list">
        <div 
          v-for="template in templateStore.templates" 
          :key="template.name"
          class="template-item"
          :class="{ active: selectedTemplate === template.name }"
          @click="selectTemplate(template.name)"
        >
          <div class="template-info">
            <div class="template-name">{{ template.name }}</div>
            <div class="template-meta">
              {{ template.stats.row_count }} 行 × {{ template.stats.col_count }} 列
            </div>
            <div v-if="template.description" class="template-desc">
              {{ template.description }}
            </div>
          </div>
          <div class="template-actions-inline">
            <el-button 
              type="primary" 
              size="small" 
              text
              @click.stop="handlePreviewTemplate(template.name)"
              :disabled="!editorStore.hasData"
            >
              预览
            </el-button>
            <el-button 
              type="danger" 
              size="small" 
              text
              @click.stop="confirmDeleteTemplate(template.name)"
            >
              删除
            </el-button>
          </div>
        </div>
      </div>
    </el-collapse-item>
    
    <!-- 预览区域 -->
    <el-collapse-item v-if="templateStore.isPreviewMode" title="模板预览" name="preview">
      <div class="preview-info">
        <el-alert 
          type="info" 
          :closable="false"
          show-icon
        >
          <template #title>
            正在预览模板: <strong>{{ templateStore.previewTemplateName }}</strong>
          </template>
        </el-alert>
        
        <div class="preview-stats" v-if="templateStore.previewStructure">
          <span>横线: {{ templateStore.previewStructure.horizontal_lines?.length || 0 }}</span>
          <span>竖线: {{ templateStore.previewStructure.vertical_lines?.length || 0 }}</span>
        </div>
        
        <div class="preview-actions">
          <el-button type="success" @click="confirmApply">
            <el-icon><Check /></el-icon>
            确认应用
          </el-button>
          <el-button @click="cancelPreview">
            <el-icon><Close /></el-icon>
            取消
          </el-button>
        </div>
      </div>
    </el-collapse-item>
    
    <!-- 创建模板对话框 -->
    <el-dialog 
      v-model="showCreateDialog" 
      title="保存为模板"
      width="400px"
    >
      <el-form :model="createForm" label-width="80px">
        <el-form-item label="模板名称" required>
          <el-input v-model="createForm.name" placeholder="输入模板名称" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input 
            v-model="createForm.description" 
            type="textarea" 
            :rows="3"
            placeholder="可选的模板描述"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showCreateDialog = false">取消</el-button>
        <el-button type="primary" @click="createTemplate" :loading="isCreating">
          创建
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { Refresh, Plus, Check, Close } from '@element-plus/icons-vue'
import { useEditorStore, useTemplateStore } from '@/stores'
import { useTemplate } from './composables'

const editorStore = useEditorStore()
const templateStore = useTemplateStore()

const {
  isLoading,
  isCreating,
  selectedTemplate,
  showCreateDialog,
  createForm,
  loadTemplates,
  createTemplate,
  selectTemplate,
  previewTemplate,
  confirmApply,
  cancelPreview,
  deleteTemplate: confirmDeleteTemplate
} = useTemplate()

const emit = defineEmits<{
  templateApplied: []
}>()

async function handlePreviewTemplate(name: string) {
  await previewTemplate(name)
}
</script>

<style scoped>
.template-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.template-list {
  max-height: 300px;
  overflow-y: auto;
}

.template-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
  
  &:hover {
    border-color: #409eff;
    background: #f5f7fa;
  }
  
  &.active {
    border-color: #409eff;
    background: #ecf5ff;
  }
}

.template-info {
  flex: 1;
}

.template-name {
  font-weight: 600;
  color: #303133;
}

.template-meta {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

.template-desc {
  font-size: 12px;
  color: #606266;
  margin-top: 4px;
}

.template-actions-inline {
  display: flex;
  gap: 4px;
}

.preview-info {
  padding: 12px;
}

.preview-stats {
  display: flex;
  gap: 16px;
  margin: 12px 0;
  color: #606266;
}

.preview-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
</style>
