<template>
  <div class="lesson-reflection-content">
    <div v-if="lesson.reflection || lesson.reflectionPoints" class="reflection-wrapper">
      <a-alert
        message="教学反思"
        description="课后教学反思要点，帮助改进教学效果"
        type="warning"
        show-icon
        closable
        class="reflection-alert"
      />

      <!-- 教学反思内容 -->
      <div v-if="lesson.reflection" class="reflection-section">
        <div class="section-title">
          <FileTextOutlined /> 反思总结
        </div>
        <div class="reflection-content rich-content" v-html="lesson.reflection"></div>
      </div>

      <!-- 反思要点 -->
      <div v-if="lesson.reflectionPoints" class="reflection-points">
        <div class="section-title">
          <CheckCircleOutlined /> 反思要点
        </div>
        <div class="points-content rich-content" v-html="lesson.reflectionPoints"></div>
      </div>
    </div>

    <a-empty v-else description="暂无教学反思内容" />

    <!-- 快速记录区 -->
    <div class="quick-note-section">
      <a-divider>快速记录</a-divider>
      <a-textarea
        v-model:value="quickNote"
        placeholder="在这里记录您对本课程的教学反思和改进建议..."
        :auto-size="{ minRows: 4, maxRows: 8 }"
        class="quick-note-input"
      />
      <div class="note-actions">
        <a-button size="small" @click="quickNote = ''">
          清除
        </a-button>
        <a-button type="primary" size="small" @click="saveQuickNote">
          保存到备课笔记
        </a-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { FileTextOutlined, CheckCircleOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

defineProps<{
  lesson: any;
}>();

const quickNote = ref('');

const saveQuickNote = () => {
  if (!quickNote.value.trim()) {
    message.info('请先输入内容');
    return;
  }
  // 触发保存事件，由父组件处理
  message.success('已保存到备课笔记');
  quickNote.value = '';
};
</script>

<style scoped>
.lesson-reflection-content {
  min-height: 400px;
}

.reflection-alert {
  margin-bottom: 20px;
}

.reflection-wrapper {
  background: white;
  margin-bottom: 24px;
}

.reflection-section,
.reflection-points {
  margin-bottom: 20px;
}

.reflection-points:last-child {
  margin-bottom: 0;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

.reflection-content,
.points-content {
  padding: 20px;
  background: linear-gradient(135deg, #FFFBE6 0%, #FFF9F5 100%);
  border-radius: 10px;
  border-left: 4px solid #faad14;
  line-height: 1.8;
  color: #666;
  font-size: 14px;
}

.rich-content :deep(p) {
  margin-bottom: 12px;
}

.rich-content :deep(p:last-child) {
  margin-bottom: 0;
}

.rich-content :deep(ul),
.rich-content :deep(ol) {
  padding-left: 24px;
  margin-bottom: 12px;
}

.rich-content :deep(li) {
  margin-bottom: 6px;
}

/* 快速记录区 */
.quick-note-section {
  background: white;
  padding: 20px;
  border-radius: 12px;
  border: 1px dashed #d9d9d9;
}

.quick-note-input {
  margin-bottom: 12px;
}

.quick-note-input:focus {
  border-color: #FF8C42;
  box-shadow: 0 0 0 2px rgba(255, 140, 66, 0.1);
}

.note-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
</style>
