<template>
  <div class="result-announcement-panel">
    <!-- 结果类型选择器(仅用于演示) -->
    <el-card class="section-card">
      <el-radio-group v-model="resultType" size="large">
        <el-radio-button label="won">✅ 已中标</el-radio-button>
        <el-radio-button label="lost">❌ 未中标</el-radio-button>
        <el-radio-button label="failed">⚠️ 流标</el-radio-button>
      </el-radio-group>
    </el-card>

    <!-- 已中标情况 -->
    <div v-if="resultType === 'won'">
      <!-- 公示信息 -->
      <el-card class="section-card">
        <template #header>
          <div class="card-header">
            <h3>
              <el-icon><Document /></el-icon>
              公示信息
            </h3>
          </div>
        </template>

        <div class="info-grid">
          <div class="info-item">
            <span class="label">公示时间:</span>
            <span class="value">{{ wonInfo.announcement.publishTime }}</span>
          </div>
          <div class="info-item">
            <span class="label">公示期限:</span>
            <span class="value">{{ wonInfo.announcement.publicityPeriod.description }}</span>
          </div>
          <div class="info-item">
            <span class="label">公示网站:</span>
            <el-button link type="primary" @click="viewPublicityPage">
              查看公示页面
            </el-button>
          </div>
          <div class="info-item">
            <span class="label">公示文件:</span>
            <el-button link type="primary" @click="downloadNotice">
              下载中标通知书
            </el-button>
          </div>
        </div>
      </el-card>

      <!-- 中标详情 -->
      <el-card class="section-card">
        <template #header>
          <div class="card-header">
            <h3>
              <el-icon><Trophy /></el-icon>
              中标详情
            </h3>
          </div>
        </template>

        <div class="winning-details">
          <div class="detail-row highlight">
            <span class="label">中标单位:</span>
            <span class="value">{{ wonInfo.winningDetails.winningCompany }}</span>
          </div>
          <div class="detail-row highlight">
            <span class="label">中标金额:</span>
            <span class="value price">{{ wonInfo.winningDetails.winningAmountText }}</span>
          </div>
          <div class="detail-row">
            <span class="label">中标日期:</span>
            <span class="value">{{ wonInfo.winningDetails.winningDate }}</span>
          </div>
          <div class="detail-row">
            <span class="label">中标排名:</span>
            <span class="value">第{{ wonInfo.winningDetails.ranking }}名 / 共{{ wonInfo.winningDetails.totalBidders }}家投标单位</span>
          </div>
        </div>

        <div class="score-section">
          <h4>综合得分</h4>
          <div class="score-grid">
            <div class="score-item total">
              <span class="score-label">总分</span>
              <span class="score-value">{{ wonInfo.winningDetails.comprehensiveScore.total }}分</span>
            </div>
            <div class="score-item">
              <span class="score-label">商务标</span>
              <span class="score-value">{{ wonInfo.winningDetails.comprehensiveScore.businessScore }}/{{ wonInfo.winningDetails.comprehensiveScore.businessMaxScore }}分</span>
            </div>
            <div class="score-item">
              <span class="score-label">技术标</span>
              <span class="score-value">{{ wonInfo.winningDetails.comprehensiveScore.technicalScore }}/{{ wonInfo.winningDetails.comprehensiveScore.technicalMaxScore }}分</span>
            </div>
            <div class="score-item">
              <span class="score-label">报价</span>
              <span class="score-value">{{ wonInfo.winningDetails.comprehensiveScore.priceScore }}/{{ wonInfo.winningDetails.comprehensiveScore.priceMaxScore }}分</span>
            </div>
          </div>
        </div>

        <div class="requirements-section">
          <h4>项目要求</h4>
          <div class="req-grid">
            <div class="req-item">
              <span class="req-label">工期要求:</span>
              <span class="req-value">{{ wonInfo.winningDetails.requirements.workDaysText }}</span>
            </div>
            <div class="req-item">
              <span class="req-label">质保期:</span>
              <span class="req-value">{{ wonInfo.winningDetails.requirements.warrantyPeriodText }}</span>
            </div>
            <div class="req-item">
              <span class="req-label">履约保证金:</span>
              <span class="req-value">{{ wonInfo.winningDetails.requirements.performanceBondText }}</span>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 合同签订 -->
      <el-card class="section-card">
        <template #header>
          <div class="card-header">
            <h3>
              <el-icon><Document /></el-icon>
              合同签订
            </h3>
          </div>
        </template>

        <div class="contract-info">
          <div class="info-row">
            <span class="label">合同签订时间:</span>
            <span class="value">{{ wonInfo.contract.signingTime }}</span>
          </div>
          <div class="info-row">
            <span class="label">合同编号:</span>
            <span class="value">{{ wonInfo.contract.contractNumber }}</span>
          </div>
          <div class="info-row">
            <span class="label">合同金额:</span>
            <span class="value price">{{ wonInfo.contract.contractAmountText }}</span>
          </div>
          <div class="info-row">
            <span class="label">合同期限:</span>
            <span class="value">{{ wonInfo.contract.contractPeriod.startDate }} 至 {{ wonInfo.contract.contractPeriod.endDate }} ({{ wonInfo.contract.contractPeriod.days }}天)</span>
          </div>
          <div class="info-row">
            <span class="label">合同状态:</span>
            <el-tag type="success">🟢 {{ wonInfo.contract.contractStatusText }}</el-tag>
          </div>
        </div>

        <div class="payment-terms">
          <h4>付款方式</h4>
          <el-timeline>
            <el-timeline-item
              v-for="(term, index) in wonInfo.contract.paymentTerms"
              :key="index"
              :timestamp="term.description"
            >
              <div class="payment-item">
                <span class="payment-stage">{{ term.stage }}</span>
                <span class="payment-amount">{{ term.percentage }}% ({{ formatPrice(term.amount) }})</span>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>

        <el-button type="primary" @click="uploadContract">
          <el-icon><Upload /></el-icon>
          上传合同扫描件
        </el-button>
      </el-card>

      <!-- 项目执行 -->
      <el-card class="section-card">
        <template #header>
          <div class="card-header">
            <h3>
              <el-icon><Briefcase /></el-icon>
              项目执行
            </h3>
          </div>
        </template>

        <div class="execution-info">
          <div class="info-row">
            <span class="label">项目经理:</span>
            <span class="value">{{ wonInfo.projectExecution.projectManager }}</span>
          </div>
          <div class="info-row">
            <span class="label">开工日期:</span>
            <span class="value">{{ wonInfo.projectExecution.startDate }}</span>
          </div>
          <div class="info-row">
            <span class="label">预计完工:</span>
            <span class="value">{{ wonInfo.projectExecution.expectedEndDate }}</span>
          </div>
          <div class="info-row">
            <span class="label">执行进度:</span>
            <el-progress :percentage="wonInfo.projectExecution.progress" />
          </div>
        </div>

        <div class="milestones">
          <h4>项目里程碑</h4>
          <el-steps :active="1" align-center>
            <el-step 
              v-for="(milestone, index) in wonInfo.projectExecution.milestones" 
              :key="index"
              :title="milestone.name"
              :description="milestone.date"
              :status="milestone.status === 'completed' ? 'finish' : milestone.status === 'ongoing' ? 'process' : 'wait'"
            />
          </el-steps>
        </div>
      </el-card>
    </div>

    <!-- 未中标情况 -->
    <div v-if="resultType === 'lost'">
      <el-card class="section-card">
        <template #header>
          <div class="card-header">
            <h3>
              <el-icon><WarningFilled /></el-icon>
              未中标信息
            </h3>
          </div>
        </template>

        <div class="lost-details">
          <div class="detail-row">
            <span class="label">中标状态:</span>
            <el-tag type="info" size="large">❌ 未中标</el-tag>
          </div>
          <div class="detail-row">
            <span class="label">公示时间:</span>
            <span class="value">{{ lostInfo.announcement.publishTime }}</span>
          </div>
          <div class="detail-row">
            <span class="label">我方排名:</span>
            <span class="value">第{{ lostInfo.lostDetails.ourRanking }}名 / 共{{ lostInfo.lostDetails.totalBidders }}家投标单位</span>
          </div>
          <div class="detail-row">
            <span class="label">我方得分:</span>
            <span class="value">{{ lostInfo.lostDetails.ourScore }}分</span>
          </div>
          <div class="detail-row">
            <span class="label">中标单位:</span>
            <span class="value">{{ lostInfo.lostDetails.winningCompany }}</span>
          </div>
          <div class="detail-row">
            <span class="label">中标金额:</span>
            <span class="value">{{ lostInfo.lostDetails.winningAmountText }}</span>
          </div>
          <div class="detail-row">
            <span class="label">中标得分:</span>
            <span class="value">{{ lostInfo.lostDetails.winningScore }}分</span>
          </div>
        </div>

        <div class="gap-analysis">
          <h4>得分差距分析</h4>
          <div class="gap-grid">
            <div class="gap-item">
              <span class="gap-label">商务标</span>
              <div class="gap-compare">
                <span class="our-score">我方: {{ lostInfo.lostDetails.scoreGap.businessOur }}分</span>
                <span class="gap-value negative">{{ lostInfo.lostDetails.scoreGap.businessGap }}分</span>
                <span class="winner-score">中标方: {{ lostInfo.lostDetails.scoreGap.businessWinner }}分</span>
              </div>
            </div>
            <div class="gap-item">
              <span class="gap-label">技术标</span>
              <div class="gap-compare">
                <span class="our-score">我方: {{ lostInfo.lostDetails.scoreGap.technicalOur }}分</span>
                <span class="gap-value negative">{{ lostInfo.lostDetails.scoreGap.technicalGap }}分</span>
                <span class="winner-score">中标方: {{ lostInfo.lostDetails.scoreGap.technicalWinner }}分</span>
              </div>
            </div>
            <div class="gap-item">
              <span class="gap-label">报价</span>
              <div class="gap-compare">
                <span class="our-score">我方: {{ lostInfo.lostDetails.scoreGap.priceOur }}分</span>
                <span class="gap-value negative">{{ lostInfo.lostDetails.scoreGap.priceGap }}分</span>
                <span class="winner-score">中标方: {{ lostInfo.lostDetails.scoreGap.priceWinner }}分</span>
              </div>
            </div>
          </div>
        </div>

        <div class="failure-analysis">
          <h4>失败原因分析</h4>
          <div class="reasons-section">
            <h5>主要原因</h5>
            <ul>
              <li v-for="(reason, index) in lostInfo.failureAnalysis.mainReasons" :key="index">
                {{ reason }}
              </li>
            </ul>
          </div>
          <div class="reasons-section">
            <h5>次要原因</h5>
            <ul>
              <li v-for="(reason, index) in lostInfo.failureAnalysis.secondaryReasons" :key="index">
                {{ reason }}
              </li>
            </ul>
          </div>
          <div class="reasons-section">
            <h5>改进建议</h5>
            <ul class="improvements">
              <li v-for="(improvement, index) in lostInfo.failureAnalysis.improvements" :key="index">
                {{ improvement }}
              </li>
            </ul>
          </div>
        </div>

        <div class="action-buttons">
          <el-button @click="submitObjection">
            <el-icon><Warning /></el-icon>
            质疑投诉
          </el-button>
          <el-button type="primary" @click="addExperience">
            <el-icon><Edit /></el-icon>
            经验总结
          </el-button>
        </div>
      </el-card>
    </div>

    <!-- 流标情况 -->
    <div v-if="resultType === 'failed'">
      <el-card class="section-card">
        <template #header>
          <div class="card-header">
            <h3>
              <el-icon><WarningFilled /></el-icon>
              流标信息
            </h3>
          </div>
        </template>

        <div class="failed-details">
          <div class="detail-row">
            <span class="label">项目状态:</span>
            <el-tag type="danger" size="large">⚠️ 流标</el-tag>
          </div>
          <div class="detail-row">
            <span class="label">流标公告时间:</span>
            <span class="value">{{ failedInfo.announcement.publishTime }}</span>
          </div>
          <div class="detail-row">
            <span class="label">流标类型:</span>
            <span class="value">{{ failedInfo.failedDetails.failedTypeText }}</span>
          </div>
          <div class="detail-row">
            <span class="label">报名单位:</span>
            <span class="value">{{ failedInfo.failedDetails.registeredBidders }}家</span>
          </div>
          <div class="detail-row">
            <span class="label">实际投标:</span>
            <span class="value">{{ failedInfo.failedDetails.actualBidders }}家</span>
          </div>
        </div>

        <div class="failed-reasons">
          <h4>流标原因</h4>
          <div class="reason-main">
            <strong>主要原因:</strong> {{ failedInfo.failedReasons.mainReason }}
          </div>
          <div class="reason-details">
            <h5>具体说明:</h5>
            <ul>
              <li v-for="(detail, index) in failedInfo.failedReasons.details" :key="index">
                {{ detail }}
              </li>
            </ul>
          </div>
          <div class="reason-factors">
            <h5>其他因素:</h5>
            <ul>
              <li v-for="(factor, index) in failedInfo.failedReasons.otherFactors" :key="index">
                {{ factor }}
              </li>
            </ul>
          </div>
        </div>

        <div class="follow-up">
          <h4>后续处理</h4>
          <div class="follow-info">
            <div class="info-row">
              <span class="label">处理方式:</span>
              <span class="value">{{ failedInfo.followUp.handleMethodText }}</span>
            </div>
            <div class="info-row">
              <span class="label">预计重新招标时间:</span>
              <span class="value">{{ failedInfo.followUp.expectedRebidDate }}</span>
            </div>
          </div>
          <div class="adjustments">
            <h5>调整内容:</h5>
            <ul>
              <li v-for="(adj, index) in failedInfo.followUp.adjustments" :key="index">
                {{ adj }}
              </li>
            </ul>
          </div>
          <div class="strategy">
            <h5>我方策略:</h5>
            <ul>
              <li v-for="(strategy, index) in failedInfo.followUp.ourStrategy" :key="index">
                {{ strategy }}
              </li>
            </ul>
          </div>
        </div>

        <div class="deposit-refund">
          <h4>保证金退还</h4>
          <div class="refund-info">
            <div class="info-row">
              <span class="label">保证金金额:</span>
              <span class="value">{{ failedInfo.depositRefund.depositAmountText }}</span>
            </div>
            <div class="info-row">
              <span class="label">退还状态:</span>
              <el-tag type="success">{{ failedInfo.depositRefund.refundStatusText }}</el-tag>
            </div>
            <div class="info-row">
              <span class="label">退还时间:</span>
              <span class="value">{{ failedInfo.depositRefund.refundTime }}</span>
            </div>
            <div class="info-row">
              <span class="label">到账时间:</span>
              <span class="value">{{ failedInfo.depositRefund.receivedTime }}</span>
            </div>
          </div>
        </div>

        <div class="action-buttons">
          <el-button type="primary" @click="followRebid">
            <el-icon><Refresh /></el-icon>
            跟进重新招标
          </el-button>
          <el-button @click="addExperience">
            <el-icon><Edit /></el-icon>
            经验总结
          </el-button>
        </div>
      </el-card>
    </div>

    <!-- 通用操作按钮 -->
    <div class="common-actions">
      <el-button size="large" @click="editResult">
        <el-icon><Edit /></el-icon>
        编辑结果信息
      </el-button>
      <el-button size="large" type="primary" @click="exportReport">
        <el-icon><Download /></el-icon>
        导出报告
      </el-button>
      <el-button size="large" @click="archiveProject">
        <el-icon><FolderAdd /></el-icon>
        归档项目
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Document, Trophy, WarningFilled, Warning, Edit, Download, 
  FolderAdd, Upload, Briefcase, Refresh 
} from '@element-plus/icons-vue'

const props = defineProps({
  project: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['update'])

// 结果类型
const resultType = ref('won') // won / lost / failed

// 中标信息
const wonInfo = ref({
  announcement: {
    publishTime: '2024-12-18 10:00:00',
    publicityPeriod: {
      description: '3个工作日 (2024-12-18 至 2024-12-21)'
    }
  },
  winningDetails: {
    winningCompany: '我方(XX电力设备有限公司)',
    winningAmountText: '¥2,850,000.00',
    winningDate: '2024-12-18',
    ranking: 1,
    totalBidders: 8,
    comprehensiveScore: {
      total: 92.5,
      businessScore: 28.5,
      businessMaxScore: 30,
      technicalScore: 45.0,
      technicalMaxScore: 50,
      priceScore: 19.0,
      priceMaxScore: 20
    },
    requirements: {
      workDaysText: '60天',
      warrantyPeriodText: '3年',
      performanceBondText: '¥285,000.00 (合同金额的10%)'
    }
  },
  contract: {
    signingTime: '2024-12-22 14:00:00',
    contractNumber: 'XXDC-2024-1215-001',
    contractAmountText: '¥2,850,000.00',
    contractPeriod: {
      startDate: '2024-12-22',
      endDate: '2025-02-20',
      days: 60
    },
    contractStatusText: '已签订',
    paymentTerms: [
      { stage: '预付款', percentage: 30, amount: 855000.00, description: '合同签订后7日内' },
      { stage: '到货验收', percentage: 50, amount: 1425000.00, description: '设备到货验收合格后' },
      { stage: '质保期满', percentage: 20, amount: 570000.00, description: '质保期满无质量问题' }
    ]
  },
  projectExecution: {
    projectManager: '张三',
    startDate: '2024-12-25',
    expectedEndDate: '2025-02-23',
    progress: 5,
    milestones: [
      { name: '项目启动', date: '2024-12-25', status: 'completed' },
      { name: '设备采购', date: '2025-01-05', status: 'ongoing' },
      { name: '设备到货', date: '2025-01-20', status: 'pending' },
      { name: '安装调试', date: '2025-02-01', status: 'pending' },
      { name: '验收交付', date: '2025-02-23', status: 'pending' }
    ]
  }
})

// 未中标信息
const lostInfo = ref({
  announcement: {
    publishTime: '2024-12-18 10:00:00'
  },
  lostDetails: {
    ourRanking: 3,
    totalBidders: 8,
    ourScore: 88.5,
    winningCompany: 'XX机电设备有限公司',
    winningAmountText: '¥2,750,000.00',
    winningScore: 93.2,
    scoreGap: {
      businessOur: 27.5,
      businessWinner: 28.8,
      businessGap: -1.3,
      technicalOur: 43.0,
      technicalWinner: 45.5,
      technicalGap: -2.5,
      priceOur: 18.0,
      priceWinner: 18.9,
      priceGap: -0.9
    }
  },
  failureAnalysis: {
    mainReasons: [
      '技术方案深度不够,缺少创新点',
      '项目经理资质略低于中标方',
      '类似业绩数量少于中标方'
    ],
    secondaryReasons: [
      '报价略高,性价比不够突出',
      '本地服务网点未充分体现'
    ],
    improvements: [
      '加强技术方案的创新性和深度',
      '培养高级项目管理人才',
      '积累更多类似项目业绩',
      '优化报价策略,提升性价比'
    ]
  }
})

// 流标信息
const failedInfo = ref({
  announcement: {
    publishTime: '2024-12-18 10:00:00'
  },
  failedDetails: {
    failedTypeText: '投标人不足3家',
    registeredBidders: 8,
    actualBidders: 2
  },
  failedReasons: {
    mainReason: '投标人数量不足法定要求',
    details: [
      '报名单位8家,实际投标2家',
      '6家单位未按时提交投标文件',
      '技术要求过高,部分企业无法满足',
      '工期要求紧张,影响投标意愿'
    ],
    otherFactors: [
      '项目预算偏低,利润空间有限',
      '同期竞争项目较多'
    ]
  },
  followUp: {
    handleMethodText: '重新招标',
    expectedRebidDate: '2024-12-25',
    adjustments: [
      '适当放宽技术要求',
      '延长工期至90天',
      '提高项目预算5%'
    ],
    ourStrategy: [
      '继续跟进重新招标',
      '优化技术方案',
      '调整报价策略'
    ]
  },
  depositRefund: {
    depositAmountText: '¥50,000.00',
    refundStatusText: '已退还',
    refundTime: '2024-12-20 15:30:00',
    receivedTime: '2024-12-21 10:15:00'
  }
})

// 格式化价格
const formatPrice = (price) => {
  return '¥' + price.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
}

// 方法
const viewPublicityPage = () => {
  ElMessage.info('打开公示页面')
}

const downloadNotice = () => {
  ElMessage.success('中标通知书已下载')
}

const uploadContract = () => {
  ElMessage.info('打开合同上传对话框')
}

const submitObjection = () => {
  ElMessage.info('打开质疑投诉对话框')
}

const addExperience = () => {
  ElMessage.info('打开经验总结对话框')
}

const followRebid = () => {
  ElMessage.info('跟进重新招标项目')
}

const editResult = () => {
  ElMessage.info('进入编辑模式')
  emit('update')
}

const exportReport = () => {
  ElMessage.success('报告已导出')
}

const archiveProject = () => {
  ElMessage.success('项目已归档')
}
</script>

<style lang="scss" scoped>
.result-announcement-panel {
  .section-card {
    margin-bottom: 24px;

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      h3 {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 18px;
        font-weight: 600;
        color: #1f2937;
        margin: 0;
      }
    }
  }

  .info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;

    .info-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px;
      background: #f9fafb;
      border-radius: 8px;

      .label {
        font-size: 14px;
        color: #6b7280;
        min-width: 100px;
      }

      .value {
        font-size: 14px;
        color: #1f2937;
        font-weight: 500;
      }
    }
  }

  .winning-details {
    margin-bottom: 24px;

    .detail-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid #f3f4f6;

      &.highlight {
        background: #fef3c7;
        padding: 16px;
        border-radius: 8px;
        border: none;
        margin-bottom: 8px;
      }

      .label {
        font-size: 14px;
        color: #6b7280;
        min-width: 100px;
      }

      .value {
        font-size: 14px;
        color: #1f2937;
        font-weight: 500;

        &.price {
          color: #ef4444;
          font-size: 18px;
          font-weight: 600;
        }
      }
    }
  }

  .score-section {
    margin: 24px 0;
    padding: 20px;
    background: #f9fafb;
    border-radius: 12px;

    h4 {
      font-size: 16px;
      font-weight: 600;
      color: #1f2937;
      margin: 0 0 16px 0;
    }

    .score-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;

      .score-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 16px;
        background: #fff;
        border-radius: 8px;
        border: 2px solid #e5e7eb;

        &.total {
          border-color: #10b981;
          background: #f0fdf4;

          .score-value {
            color: #10b981;
            font-size: 32px;
          }
        }

        .score-label {
          font-size: 13px;
          color: #6b7280;
        }

        .score-value {
          font-size: 24px;
          font-weight: 600;
          color: #1f2937;
        }
      }
    }
  }

  .requirements-section {
    h4 {
      font-size: 16px;
      font-weight: 600;
      color: #1f2937;
      margin: 0 0 16px 0;
    }

    .req-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;

      .req-item {
        display: flex;
        flex-direction: column;
        gap: 4px;

        .req-label {
          font-size: 13px;
          color: #6b7280;
        }

        .req-value {
          font-size: 14px;
          color: #1f2937;
          font-weight: 500;
        }
      }
    }
  }

  .contract-info,
  .execution-info,
  .lost-details,
  .failed-details {
    margin-bottom: 24px;

    .info-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid #f3f4f6;

      .label {
        font-size: 14px;
        color: #6b7280;
        min-width: 120px;
      }

      .value {
        font-size: 14px;
        color: #1f2937;
        font-weight: 500;

        &.price {
          color: #ef4444;
          font-size: 16px;
          font-weight: 600;
        }
      }
    }
  }

  .payment-terms,
  .milestones {
    margin: 24px 0;

    h4 {
      font-size: 16px;
      font-weight: 600;
      color: #1f2937;
      margin: 0 0 16px 0;
    }

    .payment-item {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .payment-stage {
        font-weight: 500;
      }

      .payment-amount {
        color: #ef4444;
        font-weight: 600;
      }
    }
  }

  .gap-analysis {
    margin: 24px 0;
    padding: 20px;
    background: #fef2f2;
    border-radius: 12px;

    h4 {
      font-size: 16px;
      font-weight: 600;
      color: #1f2937;
      margin: 0 0 16px 0;
    }

    .gap-grid {
      display: grid;
      gap: 16px;

      .gap-item {
        padding: 16px;
        background: #fff;
        border-radius: 8px;

        .gap-label {
          font-size: 14px;
          font-weight: 600;
          color: #1f2937;
          display: block;
          margin-bottom: 12px;
        }

        .gap-compare {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;

          .our-score {
            color: #6b7280;
          }

          .gap-value {
            font-weight: 600;
            padding: 4px 12px;
            border-radius: 4px;

            &.negative {
              color: #ef4444;
              background: #fee2e2;
            }
          }

          .winner-score {
            color: #10b981;
            font-weight: 600;
          }
        }
      }
    }
  }

  .failure-analysis,
  .failed-reasons,
  .follow-up,
  .deposit-refund {
    margin: 24px 0;

    h4, h5 {
      font-size: 16px;
      font-weight: 600;
      color: #1f2937;
      margin: 0 0 12px 0;
    }

    h5 {
      font-size: 14px;
      margin-top: 16px;
    }

    ul {
      margin: 0;
      padding-left: 24px;

      li {
        margin: 8px 0;
        color: #4b5563;
      }

      &.improvements li {
        color: #10b981;
      }
    }

    .reason-main {
      padding: 12px;
      background: #fef2f2;
      border-radius: 8px;
      margin-bottom: 16px;
    }
  }

  .action-buttons,
  .common-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
  }
}
</style>
