<template>
  <a-modal
    :open="open"
    title="生成输出文档"
    @cancel="$emit('close')"
    @ok="handleGenerate"
    :ok-button-props="{ disabled: !selectedType }"
    ok-text="开始生成"
  >
    <div class="format-grid">
      <div
        v-for="opt in formatOptions"
        :key="opt.value"
        class="format-card"
        :class="{ selected: selectedType === opt.value }"
        @click="selectedType = opt.value"
      >
        <div class="format-icon">{{ opt.icon }}</div>
        <div class="format-label">{{ opt.label }}</div>
        <div class="format-desc">{{ opt.description }}</div>
      </div>
    </div>

    <a-form-item label="文档标题（可选）" style="margin-top: 16px">
      <a-input v-model:value="title" placeholder="自动生成" />
    </a-form-item>

    <a-form-item v-if="selectedType === 'custom'" label="自定义要求">
      <a-textarea
        v-model:value="customInstructions"
        placeholder="描述你想要的文档格式和内容要求…"
        :rows="3"
      />
    </a-form-item>
  </a-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { OutputTypeOption } from '@/types/notebook'

defineProps<{
  open: boolean
  notebookId: string
}>()

const emit = defineEmits<{
  close: []
  generate: [params: { output_type: string; title: string; custom_instructions: string }]
}>()

const selectedType = ref('')
const title = ref('')
const customInstructions = ref('')

const formatOptions: OutputTypeOption[] = [
  { value: 'briefing', label: '简报', description: '关键要点和建议的摘要简报', icon: '📋' },
  { value: 'study_guide', label: '学习指南', description: '章节式问答学习材料', icon: '📖' },
  { value: 'blog_post', label: '博文', description: '博客风格的分析文章', icon: '✍️' },
  { value: 'science_handbook', label: '科普手册', description: '通俗易懂的技术参考', icon: '🔬' },
  { value: 'implementation_plan', label: '实施方案', description: '含步骤和时间线的行动计划', icon: '📐' },
  { value: 'speech_draft', label: '讲话稿', description: '演讲要点和口语化内容', icon: '🎤' },
  { value: 'policy_brief', label: '政策简报', description: '政策分析与建议', icon: '📜' },
  { value: 'summary_report', label: '综合报告', description: '全面分析报告', icon: '📊' },
  { value: 'custom', label: '自定义', description: '按你的要求生成', icon: '⚙️' },
]

function handleGenerate() {
  if (!selectedType.value) return
  emit('generate', {
    output_type: selectedType.value,
    title: title.value,
    custom_instructions: customInstructions.value,
  })
  // Reset
  selectedType.value = ''
  title.value = ''
  customInstructions.value = ''
}
</script>

<style scoped lang="less">
.format-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.format-card {
  padding: 12px;
  border: 2px solid #f0f0f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;

  &:hover {
    border-color: #91caff;
    background: #f0f7ff;
  }

  &.selected {
    border-color: #1890ff;
    background: #e6f4ff;
  }

  .format-icon {
    font-size: 24px;
    margin-bottom: 6px;
  }

  .format-label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
  }

  .format-desc {
    font-size: 11px;
    color: #8c8c8c;
    line-height: 1.3;
  }
}
</style>
