<template>
  <div class="rpt-gen-page">
    <div class="page-header">
      <h1>报告生成与审核</h1>
    </div>

    <el-tabs v-model="activeTab" type="border-card">
      <!-- Tab1: 四部分核对 -->
      <el-tab-pane name="review">
        <template #label>
          <span class="tab-label">
            <el-icon><Tickets /></el-icon> 报告核对
            <el-badge :value="pendingReviews.length" :hidden="!pendingReviews.length" type="warning" />
          </span>
        </template>
        <div class="tab-content">
          <!-- 选择报告 -->
          <div class="report-selector">
            <el-select v-model="selectedOrderId" placeholder="选择需要核对的申请单" style="width:400px">
              <el-option
                v-for="o in reportableOrders"
                :key="o.id"
                :label="o.orderNo + ' - ' + o.patientName + ' (' + o.productType + ')'"
                :value="o.id"
              />
            </el-select>
          </div>

          <div v-if="selectedOrder" class="four-panel">
            <!-- ① 临床信息 -->
            <div class="panel-block" :class="{ confirmed: panels.clinical }">
              <div class="panel-header">
                <span class="panel-num">①</span>
                <span class="panel-title">临床信息</span>
                <el-checkbox v-model="panels.clinical" label="已确认" />
              </div>
              <div class="panel-body">
                <div class="info-row"><label>患者姓名：</label><span>{{ selectedOrder.patientName }}</span></div>
                <div class="info-row"><label>检测项目：</label><span>{{ selectedOrder.productType }}</span></div>
                <div class="info-row"><label>送检医院：</label><span>{{ selectedOrder.hospitalName }}</span></div>
                <div class="info-row" v-if="selectedOrder.disease"><label>检测疾病：</label><span>{{ selectedOrder.disease }}</span></div>
                <div class="info-row" v-if="selectedOrder.gene"><label>致病基因：</label><span>{{ selectedOrder.gene }}</span></div>
                <div class="info-row" v-if="selectedOrder.inheritMode"><label>遗传模式：</label><span>{{ selectedOrder.inheritMode }}</span></div>
                <div class="info-row" v-if="selectedOrder.femaleAge"><label>女方年龄：</label><span>{{ selectedOrder.femaleAge }}岁</span></div>
                <div class="info-row" v-if="selectedOrder.embryoCount"><label>活检胚胎数：</label><span>{{ selectedOrder.embryoCount }}个</span></div>
              </div>
            </div>

            <!-- ② 客户特殊需求 -->
            <div class="panel-block" :class="{ confirmed: panels.specialNeeds }">
              <div class="panel-header">
                <span class="panel-num">②</span>
                <span class="panel-title">客户特殊需求</span>
                <el-checkbox v-model="panels.specialNeeds" label="已确认" />
              </div>
              <div class="panel-body">
                <div v-if="selectedOrder.urgency" class="need-tag urgent">🔴 加急处理</div>
                <div v-if="selectedOrder.specialNeeds" class="need-desc">{{ selectedOrder.specialNeeds }}</div>
                <div v-else class="need-desc muted">无特殊需求</div>
              </div>
            </div>

            <!-- ③ 检测/分析结果 -->
            <div class="panel-block" :class="{ confirmed: panels.results }">
              <div class="panel-header">
                <span class="panel-num">③</span>
                <span class="panel-title">检测 / 分析结果</span>
                <el-checkbox v-model="panels.results" label="已确认" />
              </div>
              <div class="panel-body">
                <div v-if="bioResult">
                  <div class="info-row"><label>Q30：</label><span :style="{ color: bioResult.q30 >= 85 ? '#52c41a' : '#ff4d4f' }">{{ bioResult.q30 }}%</span></div>
                  <div class="info-row"><label>CNV结论：</label><span>{{ bioResult.cnvConclusion }}</span></div>
                </div>
                <div v-else class="need-desc muted">暂无生信分析结果</div>
                <div class="sample-results">
                  <div v-for="s in selectedOrder.samples.slice(0,4)" :key="s.id" class="sr-row">
                    <span class="sr-label">{{ s.relation }}</span>
                    <span v-if="s.q30"><el-tag size="small" :type="s.q30 >= 85 ? 'success' : 'danger'" effect="light">Q30: {{ s.q30 }}%</el-tag></span>
                    <span v-else><el-tag size="small" type="info" effect="light">待检测</el-tag></span>
                  </div>
                </div>
              </div>
            </div>

            <!-- ④ 医院定制要求 -->
            <div class="panel-block" :class="{ confirmed: panels.hospitalReq }">
              <div class="panel-header">
                <span class="panel-num">④</span>
                <span class="panel-title">医院定制要求</span>
                <el-checkbox v-model="panels.hospitalReq" label="已确认" />
              </div>
              <div class="panel-body">
                <div class="info-row"><label>报告模板：</label><span>{{ selectedOrder.hospitalName }}标准模板</span></div>
                <div class="info-row"><label>报告语言：</label><span>简体中文</span></div>
                <div class="info-row"><label>格式要求：</label><span>PDF + 纸质版</span></div>
                <div class="info-row"><label>签发方式：</label><span>双人审核</span></div>
              </div>
            </div>
          </div>

          <div v-if="selectedOrder" class="review-action">
            <el-alert
              v-if="!allPanelsConfirmed"
              title="请逐项勾选确认以上四部分内容，全部确认后方可进入遗传解读环节"
              type="warning"
              :closable="false"
              style="margin-bottom:12px"
            />
            <el-button
              type="primary"
              size="large"
              :disabled="!allPanelsConfirmed"
              @click="goToGeneticReview"
            >
              全部确认 → 进入遗传解读
            </el-button>
            <el-button size="large" plain @click="returnForRevision">标注意见，退回修正</el-button>
          </div>
        </div>
      </el-tab-pane>

      <!-- Tab2: 遗传解读 -->
      <el-tab-pane name="genetic">
        <template #label>
          <span class="tab-label"><el-icon><Share /></el-icon> 遗传解读 <el-badge :value="pendingGenetics.length" :hidden="!pendingGenetics.length" type="primary" /></span>
        </template>
        <div class="tab-content">
          <div v-for="item in geneticList" :key="item.id" class="genetic-card">
            <div class="gc-header">
              <span class="gc-order">{{ item.orderNo }}</span>
              <span class="gc-patient">{{ item.patientName }}</span>
              <el-tag size="small" effect="light">{{ item.productType }}</el-tag>
              <el-tag :type="item.geneticStatus === 'done' ? 'success' : 'warning'" size="small">{{ item.geneticStatus === 'done' ? '解读完成' : '待解读' }}</el-tag>
            </div>
            <div class="gc-body">
              <el-form label-width="100px" size="small">
                <el-form-item label="遗传解读意见">
                  <el-input
                    v-model="item.geneticNote"
                    type="textarea"
                    :rows="4"
                    placeholder="请填写专业遗传解读意见（必填）..."
                    :disabled="item.geneticStatus === 'done'"
                  />
                </el-form-item>
              </el-form>
              <el-button
                v-if="item.geneticStatus !== 'done'"
                type="primary"
                size="small"
                :disabled="!item.geneticNote"
                @click="submitGenetic(item)"
              >提交遗传解读 → 转终审</el-button>
              <el-tag v-else type="success" effect="plain" size="small">✓ 已提交至终审</el-tag>
            </div>
          </div>
          <div v-if="geneticList.length === 0" class="empty-tip">暂无待遗传解读报告</div>
        </div>
      </el-tab-pane>

      <!-- Tab3: 终审签发 -->
      <el-tab-pane name="final">
        <template #label>
          <span class="tab-label"><el-icon><EditPen /></el-icon> 终审签发 <el-badge :value="pendingFinals.length" :hidden="!pendingFinals.length" type="danger" /></span>
        </template>
        <div class="tab-content">
          <div v-for="item in finalList" :key="item.id" class="final-card">
            <div class="fc-header">
              <span class="fc-order">{{ item.orderNo }}</span>
              <span class="fc-patient">{{ item.patientName }}</span>
              <el-tag size="small" effect="light">{{ item.productType }}</el-tag>
              <el-tag type="warning" size="small">待终审</el-tag>
            </div>
            <div class="fc-review">
              <div class="review-box">
                <div class="rb-label">遗传解读意见：</div>
                <div class="rb-content">{{ item.geneticNote }}</div>
              </div>
            </div>
            <el-form label-width="90px" size="small">
              <el-form-item label="终审意见">
                <el-input v-model="item.finalNote" type="textarea" :rows="2" placeholder="填写终审意见（可为空，直接签发）" />
              </el-form-item>
            </el-form>
            <div class="fc-actions">
              <el-button type="success" size="large" @click="signReport(item)">✅ 终审通过，签发报告</el-button>
              <el-button type="danger" plain size="large" @click="rejectReport(item)">驳回，退回遗传解读</el-button>
            </div>
          </div>
          <div v-if="finalList.length === 0" class="empty-tip">暂无待终审报告</div>
        </div>
      </el-tab-pane>

      <!-- Tab4: 已签发 -->
      <el-tab-pane name="signed">
        <template #label>
          <span class="tab-label"><el-icon><DocumentChecked /></el-icon> 已签发（{{ signedList.length }}）</span>
        </template>
        <div class="tab-content">
          <div v-if="signedList.length === 0" class="empty-tip">暂无已签发报告</div>
          <el-table v-else :data="signedList" border>
            <el-table-column label="申请单号" prop="orderNo" width="160" />
            <el-table-column label="患者" prop="patientName" width="100" />
            <el-table-column label="项目" prop="productType" width="100" />
            <el-table-column label="签发时间" prop="signTime" width="160" />
            <el-table-column label="Seafile归档">
              <template #default="{ row }">
                <span v-if="row.archived" style="color:#52c41a; font-size:12px">📁 已归档</span>
                <el-button v-else size="small" plain @click="archiveReport(row)">归档至Seafile</el-button>
              </template>
            </el-table-column>
            <el-table-column label="邮件通知">
              <template #default="{ row }">
                <el-tag v-if="row.emailSent" type="success" size="small" effect="plain">📧 已发送</el-tag>
                <el-button v-else size="small" type="primary" plain @click="sendEmail(row)">发送邮件</el-button>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80">
              <template #default>
                <el-button size="small" text type="primary" @click="ElMessage.success('PDF下载中...')">下载</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { usePGXStore, type Order } from '@/stores/pgx'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Tickets, Share, EditPen, DocumentChecked } from '@element-plus/icons-vue'

const pgxStore = usePGXStore()
const activeTab = ref('review')
const selectedOrderId = ref('')

const reportableOrders = computed(() =>
  pgxStore.orders.filter(o => o.samples.length > 0 && o.status !== 'draft')
)

const selectedOrder = computed(() =>
  selectedOrderId.value ? pgxStore.getOrderById(selectedOrderId.value) : null
)

const bioResult = computed(() => {
  if (!selectedOrderId.value) return null
  const run = pgxStore.bioinfoRuns.find(r => r.orderId === selectedOrderId.value && r.status === 'success')
  return run?.results || null
})

const panels = ref({ clinical: false, specialNeeds: false, results: false, hospitalReq: false })
const allPanelsConfirmed = computed(() => Object.values(panels.value).every(v => v))

watch(selectedOrderId, () => {
  panels.value = { clinical: false, specialNeeds: false, results: false, hospitalReq: false }
})

// 遗传解读队列
interface ReviewItem {
  id: string; orderNo: string; patientName: string; productType: string;
  geneticNote: string; geneticStatus: 'pending' | 'done';
  finalNote: string; finalStatus: 'pending' | 'signed';
  signTime?: string; archived?: boolean; emailSent?: boolean;
}

const allReviews = ref<ReviewItem[]>([
  { id: 'rv1', orderNo: 'JB2026030001', patientName: '张晓华', productType: 'PGT-M', geneticNote: '胚胎1号携带SMN1基因正常拷贝，胚胎2号携带杂合致病变异，建议优先选择胚胎1号进行移植。遗传风险分析：该家庭再发风险为25%。', geneticStatus: 'done', finalNote: '', finalStatus: 'pending', signTime: undefined },
])

const pendingReviews = computed(() => [])
const geneticList = computed(() => allReviews.value.filter(r => r.geneticStatus === 'pending' || r.finalStatus === 'pending'))
const pendingGenetics = computed(() => allReviews.value.filter(r => r.geneticStatus === 'pending'))
const finalList = computed(() => allReviews.value.filter(r => r.geneticStatus === 'done' && r.finalStatus === 'pending'))
const pendingFinals = computed(() => finalList.value)
const signedList = computed(() => allReviews.value.filter(r => r.finalStatus === 'signed'))

function goToGeneticReview() {
  if (!selectedOrder.value) return
  const exists = allReviews.value.find(r => r.orderNo === selectedOrder.value!.orderNo)
  if (!exists) {
    allReviews.value.push({
      id: 'rv' + Date.now(),
      orderNo: selectedOrder.value.orderNo,
      patientName: selectedOrder.value.patientName,
      productType: selectedOrder.value.productType,
      geneticNote: '', geneticStatus: 'pending',
      finalNote: '', finalStatus: 'pending',
    })
  }
  activeTab.value = 'genetic'
  ElMessage.success('已进入遗传解读队列')
}

function returnForRevision() {
  ElMessageBox.prompt('请填写退回原因和意见', '退回修正', { inputPlaceholder: '请填写具体意见...', confirmButtonText: '提交意见', cancelButtonText: '取消' }).then(({ value }) => {
    ElMessage.warning('已退回：' + value)
  })
}

function submitGenetic(item: ReviewItem) {
  if (!item.geneticNote) { ElMessage.warning('请填写遗传解读意见'); return }
  item.geneticStatus = 'done'
  activeTab.value = 'final'
  ElMessage.success('遗传解读已提交，已转至终审')
}

function signReport(item: ReviewItem) {
  item.finalStatus = 'signed'
  item.signTime = new Date().toLocaleString('zh-CN')
  pgxStore.addReportFile(pgxStore.orders.find(o => o.orderNo === item.orderNo)?.id || '', {
    id: 'r' + Date.now(),
    name: `${item.productType}报告_${item.patientName}_终审版.pdf`,
    url: '#',
    date: new Date().toISOString().split('T')[0],
    reviewStatus: 'approved',
    geneticNote: item.geneticNote,
    finalNote: item.finalNote,
  })
  activeTab.value = 'signed'
  ElMessage.success(`报告已签发！申请单 ${item.orderNo} 状态已更新为「已出报告」`)
}

function rejectReport(item: ReviewItem) {
  ElMessageBox.prompt('请填写驳回原因', '驳回报告', { inputPlaceholder: '请填写具体原因...', type: 'warning' }).then(({ value }) => {
    item.geneticStatus = 'pending'
    item.geneticNote = ''
    ElMessage.warning('已驳回，已退回至遗传解读：' + value)
    activeTab.value = 'genetic'
  })
}

function archiveReport(row: ReviewItem) {
  row.archived = true
  ElMessage.success(`报告已归档至 Seafile: /reports/2026/03/${row.orderNo}.pdf`)
}

function sendEmail(row: ReviewItem) {
  row.emailSent = true
  ElMessage.success(`报告邮件已发送至对应医院联系人`)
}
</script>

<style scoped>
/* 覆盖 Element Plus Tab 激活色 */
:deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active) {
  color: #00B5C8;
  border-top: 2px solid #00B5C8;
}
:deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item:hover) {
  color: #00B5C8;
}
:deep(.el-tabs--border-card > .el-tabs__header) {
  background: #f4fafb;
  border-bottom-color: #e0f5f8;
}

.tab-label { display: inline-flex; align-items: center; gap: 5px; }

.rpt-gen-page { padding: 24px; }
.page-header { display: flex; align-items: center; margin-bottom: 20px; }
.page-header h1 { font-size: 20px; font-weight: 600; margin: 0; color: #1a1f2e; }

.tab-content { padding: 20px 0; }
.report-selector { margin-bottom: 20px; }

.four-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.panel-block {
  border: 2px solid #e8ecf0;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.panel-block.confirmed { border-color: #52c41a; }

.panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8faff;
  padding: 10px 14px;
  border-bottom: 1px solid #e8ecf0;
}
.panel-block.confirmed .panel-header { background: #f6ffed; }
.panel-num { background: #00B5C8; color: #fff; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.panel-block.confirmed .panel-num { background: #52c41a; }
.panel-title { flex: 1; font-weight: 600; font-size: 14px; color: #1a1f2e; }

.panel-body { padding: 14px; }
.info-row { display: flex; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.info-row label { color: #888; width: 80px; flex-shrink: 0; }
.info-row span { color: #1a1f2e; }
.need-tag.urgent { background: #fff1f0; color: #ff4d4f; padding: 4px 8px; border-radius: 4px; font-size: 13px; display: inline-block; margin-bottom: 8px; }
.need-desc { font-size: 13px; color: #555; }
.need-desc.muted { color: #aaa; }
.sample-results { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sr-row { display: flex; align-items: center; gap: 6px; }
.sr-label { font-size: 12px; color: #888; }

.review-action { display: flex; gap: 12px; align-items: center; padding-top: 16px; border-top: 1px solid #f0f2f5; }

.genetic-card, .final-card {
  background: #fff;
  border: 1px solid #e8ecf0;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
}
.gc-header, .fc-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.gc-order, .fc-order { font-size: 14px; font-weight: 600; color: #1a1f2e; }
.gc-patient, .fc-patient { font-size: 13px; color: #666; }
.gc-body { }
.fc-review { margin-bottom: 12px; }
.review-box { background: #f8faff; border-radius: 6px; padding: 12px; margin-bottom: 10px; }
.rb-label { font-size: 12px; color: #888; margin-bottom: 6px; }
.rb-content { font-size: 13px; color: #334155; line-height: 1.6; }
.fc-actions { display: flex; gap: 12px; padding-top: 12px; border-top: 1px solid #f0f2f5; }

.empty-tip { text-align: center; color: #aaa; padding: 60px; }
</style>