<template>
  <div class="tool-panel">
    <div class="panel-title">工具栏</div>
    
    <!-- 撤销/重做 -->
    <div class="button-group">
      <el-tooltip content="撤销 (Ctrl+Z)" placement="bottom">
        <el-button 
          :disabled="!historyStore.canUndo" 
          @click="handleUndo"
        >
          <el-icon><RefreshLeft /></el-icon>
          撤销 ({{ historyStore.undoCount }})
        </el-button>
      </el-tooltip>
      
      <el-tooltip content="重做 (Ctrl+Y)" placement="bottom">
        <el-button 
          :disabled="!historyStore.canRedo"
          @click="handleRedo"
        >
          <el-icon><RefreshRight /></el-icon>
          重做 ({{ historyStore.redoCount }})
        </el-button>
      </el-tooltip>
    </div>
    
    <!-- 倾斜角度调整 -->
    <div class="panel-title">倾斜调整</div>
    <div class="skew-control">
      <div class="skew-label">
        <span>旋转角度</span>
        <span class="skew-value">{{ skewAngleValue.toFixed(2) }}°</span>
      </div>
      <el-slider
        v-model="skewAngleValue"
        :min="-5"
        :max="5"
        :step="0.01"
        :show-tooltip="false"
        @change="handleSkewChange"
      />
      <div class="skew-buttons">
        <el-button size="small" @click="adjustSkew(-0.1)">
          <el-icon><Minus /></el-icon> 0.1°
        </el-button>
        <el-button size="small" @click="resetSkew">
          重置
        </el-button>
        <el-button size="small" @click="adjustSkew(0.1)">
          <el-icon><Plus /></el-icon> 0.1°
        </el-button>
      </div>
    </div>
    
    <!-- 添加线条 -->
    <div class="panel-title">添加线条</div>
    <div class="button-group">
      <el-button @click="showAddHorizontalDialog">
        <el-icon><Minus /></el-icon>
        添加横线
      </el-button>
      <el-button @click="showAddVerticalDialog">
        <el-icon><More /></el-icon>
        添加竖线
      </el-button>
    </div>
    
    <!-- 选中线条操作 -->
    <template v-if="editorStore.selectedLine">
      <div class="panel-title">选中线条</div>
      <div class="selected-info">
        <span class="line-label">
          {{ editorStore.selectedLine.type === 'h' ? 'R' : 'C' }}{{ editorStore.selectedLine.index + 1 }}
        </span>
        <span class="line-value">
          {{ getCurrentLineValue() }} px
        </span>
      </div>
      
      <div class="coordinate-input">
        <el-input-number 
          v-model="adjustValue"
          :min="0"
          :max="maxValue"
          @change="handleAdjustChange"
        />
      </div>
      
      <div class="button-group">
        <el-button type="danger" @click="handleDelete">
          <el-icon><Delete /></el-icon>
          删除 (Del)
        </el-button>
      </div>
      
      <div class="nudge-hint">
        提示: 使用方向键微调 (Shift+方向键 微调10px)
      </div>
    </template>
    
    <!-- 添加横线对话框 -->
    <el-dialog v-model="showHDialog" title="添加横线" width="300px">
      <el-form>
        <el-form-item label="Y 坐标 (px)">
          <el-input-number 
            v-model="newHLineValue" 
            :min="0" 
            :max="editorStore.imageSize.height"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showHDialog = false">取消</el-button>
        <el-button type="primary" @click="addHorizontalLine">确定</el-button>
      </template>
    </el-dialog>
    
    <!-- 添加竖线对话框 -->
    <el-dialog v-model="showVDialog" title="添加竖线" width="300px">
      <el-form>
        <el-form-item label="X 坐标 (px)">
          <el-input-number 
            v-model="newVLineValue" 
            :min="0" 
            :max="editorStore.imageSize.width"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showVDialog = false">取消</el-button>
        <el-button type="primary" @click="addVerticalLine">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  RefreshLeft, 
  RefreshRight, 
  Minus, 
  More, 
  Delete,
  Plus
} from '@element-plus/icons-vue'
import { useEditorStore, useHistoryStore } from '@/stores'
import { useKeyboardShortcuts } from '@/composables'

const editorStore = useEditorStore()
const historyStore = useHistoryStore()
const { performUndo, performRedo } = useKeyboardShortcuts()

// 添加线条对话框
const showHDialog = ref(false)
const showVDialog = ref(false)
const newHLineValue = ref(0)
const newVLineValue = ref(0)

// 精确调整值
const adjustValue = ref(0)

// 倾斜角度
const skewAngleValue = ref(0)

// 监听 store 中的 skewAngle 变化
watch(() => editorStore.skewAngle, (newVal) => {
  skewAngleValue.value = newVal
}, { immediate: true })

// 最大值
const maxValue = computed(() => {
  if (!editorStore.selectedLine) return 0
  return editorStore.selectedLine.type === 'h' 
    ? editorStore.imageSize.height 
    : editorStore.imageSize.width
})

// 监听选中变化，更新调整值
watch(() => editorStore.selectedLine, (selected) => {
  if (selected) {
    adjustValue.value = getCurrentLineValue()
  }
}, { immediate: true })

function getCurrentLineValue(): number {
  const selected = editorStore.selectedLine
  if (!selected) return 0
  
  if (selected.type === 'h') {
    return editorStore.structure.horizontal_lines[selected.index] || 0
  } else {
    return editorStore.structure.vertical_lines[selected.index] || 0
  }
}

function handleAdjustChange(value: number | undefined) {
  if (value === undefined || !editorStore.selectedLine) return
  
  const { type, index } = editorStore.selectedLine
  editorStore.updateLinePosition(type, index, value)
}

function handleUndo() {
  performUndo()
}

function handleRedo() {
  performRedo()
}

function handleDelete() {
  editorStore.deleteSelectedLine()
  ElMessage.success('已删除线条')
}

function showAddHorizontalDialog() {
  // 默认在中间位置
  newHLineValue.value = Math.round(editorStore.imageSize.height / 2)
  showHDialog.value = true
}

function showAddVerticalDialog() {
  newVLineValue.value = Math.round(editorStore.imageSize.width / 2)
  showVDialog.value = true
}

function addHorizontalLine() {
  editorStore.addLine('h', newHLineValue.value)
  showHDialog.value = false
  ElMessage.success(`已添加横线 Y=${newHLineValue.value}`)
}

function addVerticalLine() {
  editorStore.addLine('v', newVLineValue.value)
  showVDialog.value = false
  ElMessage.success(`已添加竖线 X=${newVLineValue.value}`)
}

// 倾斜角度调整
function handleSkewChange(value: number) {
  editorStore.updateSkewAngle(value)
}

function adjustSkew(delta: number) {
  const newAngle = Math.max(-5, Math.min(5, skewAngleValue.value + delta))
  skewAngleValue.value = newAngle
  editorStore.updateSkewAngle(newAngle)
}

function resetSkew() {
  skewAngleValue.value = 0
  editorStore.updateSkewAngle(0)
}
</script>

<style scoped>
.tool-panel {
  padding: 16px;
  border-bottom: 1px solid #e4e7ed;
}

.panel-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #303133;
}

.button-group {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.selected-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: #f5f7fa;
  border-radius: 4px;
}

.line-label {
  font-weight: 600;
  color: #409eff;
}

.line-value {
  color: #606266;
}

.coordinate-input {
  margin-bottom: 12px;
}

.coordinate-input :deep(.el-input-number) {
  width: 100%;
}

.nudge-hint {
  font-size: 12px;
  color: #909399;
  margin-top: 8px;
}

.skew-control {
  margin-bottom: 16px;
}

.skew-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px;
}

.skew-value {
  color: #409eff;
  font-weight: 500;
}

.skew-buttons {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
</style>
