<template>
  <div class="tips-report-container">
    <div class="left-sidebar">
      <div class="sidebar-header">
        <h3>历史记录</h3>
        <button class="new-task-btn">+ 新建任务</button>
      </div>
      <div class="task-list">
        <div
          v-for="task in taskList"
          :key="task.id"
          :class="['task-item', { active: currentTaskId === task.id }]"
          @click="selectTask(task)"
        >
          <div class="task-image">
            <img :src="task.image" alt="任务图片" />
          </div>
          <div class="task-info">
            <span class="task-title">{{ task.title }}</span>
            <span class="task-time">{{ task.time }}</span>
          </div>
          <span :class="['task-status', task.status]">{{ task.statusText }}</span>
        </div>
      </div>
    </div>

    <div class="main-content">
      <div class="content-header">
        <h2>隐患提示</h2>
        <div class="header-right">
          <button class="btn-add-tag">+ 添加站</button>
          <span class="current-time">6月12日 15:52</span>
        </div>
      </div>

      <div class="content-body">
        <div class="center-panel">
          <div :class="['image-section', { collapsed: isImageCollapsed }]">
            <div class="image-toolbar">
              <span>图片</span>
              <button type="button" @click="isImageCollapsed = !isImageCollapsed">
                {{ isImageCollapsed ? '展开' : '收起' }}
              </button>
            </div>
            <img v-show="!isImageCollapsed" :src="currentTask.image" alt="现场图片" class="main-image" />
            <div v-show="isImageCollapsed" class="image-collapsed-summary">
              <img :src="currentTask.image" alt="现场缩略图" />
              <span>图片已收起</span>
            </div>
          </div>

          <div class="ai-section">
            <div class="section-header">
              <span class="section-title">隐患提示说明</span>
            </div>
            <div class="ai-content">
              <div class="report-overview">
                <h4>一、报告概述</h4>
                <p>本报告基于提供的当前附件内容，对识别到的关键场景要素（加油机、加油机输油软管、防撞栏、加油枪）及关联的潜在安全隐患进行了系统梳理。报告旨在从隐患识别的视角，提供一份结构化的核查汇总，以便快速定位和对照整改。</p>
              </div>
              <div class="report-hazards">
                <h4>二、识别的要素及隐患汇总</h4>
                <div class="hazard-item">
                  <div class="hazard-title">
                    <span class="hazard-icon">⛽</span>
                    <span>加油机</span>
                  </div>
                  <ul>
                    <li>加油机外观不整洁，有明显油污</li>
                    <li>机座地脚螺栓/紧固件连接明显松动</li>
                    <li>底部填沙潮湿或明显油迹</li>
                    <li>油品管线连接处有明显渗漏</li>
                    <li>过滤器有明显油污和渗漏</li>
                    <li>加油机底部未设置截断阀</li>
                    <li>加油枪密封不良，工作时渗漏</li>
                    <li>加油机静电接地失效</li>
                    <li>防爆挠性管连接松动，接线盒静电接地不合规</li>
                  </ul>
                  <div class="risk-tag high">风险：设备稳定性不足、油品泄漏风险、火灾爆炸风险</div>
                </div>
                <div class="hazard-item">
                  <div class="hazard-title">
                    <span class="hazard-icon">🔧</span>
                    <span>加油机输油软管</span>
                  </div>
                  <ul>
                    <li>加油软管上未设置安全拉断阀</li>
                    <li>存在油污、渗漏、连接松动等问题</li>
                  </ul>
                  <div class="risk-tag medium">风险：车辆误拉扯导致软管断裂，引发泄漏</div>
                </div>
                <div class="hazard-item">
                  <div class="hazard-title">
                    <span class="hazard-icon">🛡️</span>
                    <span>防撞栏及周边设施</span>
                  </div>
                  <ul>
                    <li>靠近岛端部的加油机未设置防撞柱或防撞柱松动破损</li>
                    <li>加油站进口/进站口减速带缺失、破损失效</li>
                    <li>地面破损、凹陷，或环保沟盖板破损凸起</li>
                    <li>地面未按规范划线</li>
                    <li>雨水排水设施破损或堵塞</li>
                  </ul>
                  <div class="risk-tag medium">风险：车辆撞击风险、交通秩序混乱、通行障碍</div>
                </div>
                <div class="hazard-item">
                  <div class="hazard-title">
                    <span class="hazard-icon">🔫</span>
                    <span>加油枪</span>
                  </div>
                  <ul>
                    <li>加油枪密封不良，工作时渗漏</li>
                    <li>汽油加油枪无集气罩或集气罩破损</li>
                  </ul>
                  <div class="risk-tag high">风险：操作点直接泄漏风险、火灾危险</div>
                </div>
              </div>
              <div class="report-suggestions">
                <h4>三、优先整改建议</h4>
                <div class="suggestion-list">
                  <div class="suggestion-item high">
                    <span class="priority">高</span>
                    <span>泄漏风险：立即核查加油枪、管线连接处、油气回收系统的任何渗漏迹象</span>
                  </div>
                  <div class="suggestion-item high">
                    <span class="priority">高</span>
                    <span>静电与火源管控：确保加油机静电接地有效、作业人员规范穿戴防静电装备</span>
                  </div>
                  <div class="suggestion-item medium">
                    <span class="priority">中</span>
                    <span>结构/机械完整性：紧固松动的螺栓、修复或安装防撞柱</span>
                  </div>
                  <div class="suggestion-item medium">
                    <span class="priority">中</span>
                    <span>交通与现场秩序：修复损坏的减速带、地面和划线</span>
                  </div>
                  <div class="suggestion-item base">
                    <span class="priority">基</span>
                    <span>标识与可视化：清洁加油机、涂刷警示色、确保铭牌清晰</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="right-panel">
          <div class="panel-section">
            <div class="section-header">
              <span class="section-title">检测要素</span>
              <span class="section-count">5</span>
            </div>
            <div class="checklist">
              <div
                v-for="group in detectionGroups"
                :key="group.id"
                :class="['check-group', { expanded: expandedGroupId === group.id }]"
              >
                <button class="check-group-header" type="button" @click="toggleGroup(group.id)">
                  <div class="check-group-title">
                    <span class="group-index">{{ group.id }}</span>
                    <span>{{ group.title }}</span>
                  </div>
                  <div class="group-meta">
                    <span>{{ group.items.length }} 项</span>
                    <span class="group-caret">▶</span>
                  </div>
                </button>
                <div
                  v-for="(item, index) in group.items"
                  v-show="expandedGroupId === group.id"
                  :key="`${group.id}-${index}`"
                  class="checklist-row"
                >
                  <button
                    type="button"
                    :class="['checklist-item', { collapsed: isCaseCollapsed(group.id, index) }]"
                    @click="toggleCase(group.id, index)"
                  >
                    <span class="item-index">{{ index + 1 }}</span>
                    <span class="item-text">{{ item.text }}</span>
                    <span class="item-caret">▼</span>
                  </button>
                  <div v-show="!isCaseCollapsed(group.id, index)" class="case-examples">
                    <button class="case-view-btn" type="button" @click="openCaseViewer">
                      查看大图
                    </button>
                    <div class="case-card positive">
                      <div class="case-title">正确示例</div>
                      <img :src="casePositiveImg" alt="正确示例" />
                    </div>
                    <div class="case-card negative">
                      <div class="case-title">错误示例</div>
                      <img :src="caseNegativeImg" alt="错误示例" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="showCaseViewer" class="case-viewer" @click.self="closeCaseViewer">
      <div class="case-viewer-panel">
        <div class="case-viewer-header">
          <span>正反案例对比</span>
          <button type="button" class="case-viewer-close" @click="closeCaseViewer">×</button>
        </div>
        <div class="case-viewer-body">
          <div class="case-viewer-card positive">
            <div class="case-viewer-title">正确示例</div>
            <img :src="casePositiveImg" alt="正确示例" />
          </div>
          <div class="case-viewer-card negative">
            <div class="case-viewer-title">错误示例</div>
            <img :src="caseNegativeImg" alt="错误示例" />
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import casePositiveImg from '../assets/case-positive.png'
import caseNegativeImg from '../assets/case-negative.png'

const taskList = ref([
  {
    id: 1,
    title: '加油站',
    time: '6月12日 17:12',
    status: 'completed',
    statusText: '已完成',
    image: '/demo1.png',
    aiWarning: '综合安全风险提示：图中出现加油机、加油枪、防撞柱、加油机输油管、配电箱、灭火器等关键设备设施。经AI图像智能分析，识别出以下安全隐患风险点：加油机周边地面存在疑似油污痕迹，需及时清理以防人员滑倒；配电箱外部存在轻微破损，建议检查内部线路防护状况；消防灭火器放置位置虽符合规范，但需确认压力值是否在正常范围；防撞柱反光标识存在局部褪色，建议定期更换以保障夜间警示效果。综合评估当前场景整体安全状况为中等风险，建议立即安排专业人员对上述隐患点进行逐一排查整改，确保加油站运营安全。',
    tags: [
      { label: '加油机', top: '55%', left: '32%' },
      { label: '加油机', top: '55%', left: '45%' },
      { label: '加油机', top: '55%', left: '52%' },
      { label: '防撞柱', top: '75%', left: '28%' },
      { label: '防撞柱', top: '75%', left: '62%' },
      { label: '防撞柱', top: '75%', left: '68%' },
      { label: '配电箱', top: '45%', left: '18%' },
    ],
    checklist: [
      { text: '加油机外观不整洁，有明显油污' },
      { text: '机座地脚螺栓明显松动' },
      { text: '加油机紧固件连接明显松动' },
      { text: '加油机底部填沙潮湿' },
      { text: '加油机底部填沙有明显油迹' },
      { text: '进油管与紧急截断阀连接处未露出沙外' },
      { text: '油品管线连接处有明显渗漏' },
      { text: '过滤器有明显油污和渗漏' },
      { text: '加油机底部未设置截断阀' },
      { text: '加油软管上未设置安全拉断阀' },
      { text: '加油枪密封不良，工作时出现明显渗漏' },
      { text: '汽油加油枪无集气罩' },
      { text: '加油枪集气罩破损' },
      { text: '油气回收检测口的丝堵松动' },
      { text: '油气回收管路渗油' },
      { text: '加油机静电接地失效' },
      { text: '加油机铭牌不清晰' },
      { text: '加油机工艺仓与电气仓之间隔板上的孔洞未密封' },
      { text: '加油机内防爆挠性管连接明显松动' },
      { text: '防爆接线盒未在专用接地端子处进行静电接地连接' },
    ]
  },
  {
    id: 2,
    title: '隧道工程',
    time: '6月12日 15:53',
    status: 'processing',
    statusText: '处理中',
    image: '/demo1.png',
    aiWarning: '隧道施工风险提示：检测到隧道内存在施工设备、临时支护结构等，建议关注支护稳定性、通风系统运行状态及照明设施完好情况。',
    tags: [],
    checklist: []
  },
  {
    id: 3,
    title: '加油站',
    time: '6月12日 15:52',
    status: 'processing',
    statusText: '处理中',
    image: '/demo1.png',
    aiWarning: '综合安全风险提示：检测到多个加油机位、消防设施及电气设备，建议全面检查设备运行状态及安全防护措施。',
    tags: [],
    checklist: []
  },
  {
    id: 4,
    title: '加油站',
    time: '6月12日 15:49',
    status: 'pending',
    statusText: '待处理',
    image: '/demo1.png',
    aiWarning: '',
    tags: [],
    checklist: []
  },
  {
    id: 5,
    title: '加油站',
    time: '6月12日 15:48',
    status: 'pending',
    statusText: '待处理',
    image: '/demo1.png',
    aiWarning: '',
    tags: [],
    checklist: []
  },
  {
    id: 6,
    title: '桥梁工程',
    time: '6月12日 15:48',
    status: 'pending',
    statusText: '待处理',
    image: '/demo1.png',
    aiWarning: '',
    tags: [],
    checklist: []
  },
])

const currentTaskId = ref(1)

const currentTask = computed(() => {
  return taskList.value.find(t => t.id === currentTaskId.value) || taskList.value[0]
})

const detectionGroups = computed(() => [
  {
    id: 1,
    title: '加油机',
    items: currentTask.value.checklist
  },
  {
    id: 2,
    title: '加油机输油软管',
    items: [
      { text: '输油软管外观存在老化、开裂或磨损' },
      { text: '软管连接接头有明显松动' },
      { text: '软管与加油枪连接处存在渗漏' },
      { text: '软管与加油机连接处存在渗漏' },
      { text: '软管未设置安全拉断阀' },
      { text: '安全拉断阀安装方向不符合要求' },
      { text: '安全拉断阀外观破损或锈蚀' },
      { text: '软管拖地或受车辆碾压风险明显' },
      { text: '软管长度不符合现场使用要求' },
      { text: '软管表面有明显油污' },
      { text: '软管弯折半径过小' },
      { text: '软管固定支架缺失或损坏' },
      { text: '软管回位装置失效' },
      { text: '软管标识不清晰' },
      { text: '软管未按要求定期检查' },
      { text: '软管耐压等级标识缺失' },
      { text: '软管附近存在明火或高温风险' },
      { text: '软管连接密封件老化' },
      { text: '软管防静电连接失效' },
      { text: '软管收纳区域通行受阻' },
    ]
  },
  {
    id: 3,
    title: '防撞栏',
    items: [
      { text: '防撞栏缺失或设置位置不合理' },
      { text: '防撞栏固定螺栓松动' },
      { text: '防撞栏立柱变形或倾斜' },
      { text: '防撞栏表面反光标识不清晰' },
      { text: '防撞栏警示颜色脱落' },
      { text: '防撞栏高度不符合要求' },
      { text: '防撞栏基础破损' },
      { text: '防撞栏与设备间距不足' },
      { text: '车辆通行区域防护不足' },
      { text: '防撞设施周边存在杂物堆放' },
      { text: '防撞栏夜间可视性不足' },
      { text: '防撞栏维修记录缺失' },
      { text: '防撞栏端部未做安全处理' },
    ]
  },
  {
    id: 4,
    title: '支撑柱/立柱',
    items: [
      { text: '支撑柱外观存在明显裂缝' },
      { text: '支撑柱表面防腐层脱落' },
      { text: '立柱底座固定件松动' },
      { text: '立柱根部存在积水或锈蚀' },
      { text: '立柱附近防撞措施不足' },
      { text: '立柱警示标识不清晰' },
      { text: '立柱垂直度异常' },
      { text: '立柱与棚体连接处异常' },
      { text: '支撑结构存在明显变形' },
      { text: '立柱周边通行空间不足' },
      { text: '立柱维护检查记录缺失' },
    ]
  },
  {
    id: 5,
    title: '加油枪',
    items: [
      { text: '加油枪外观破损或变形' },
      { text: '加油枪密封不良' },
      { text: '加油枪工作时出现明显渗漏' },
      { text: '汽油加油枪无集气罩' },
      { text: '加油枪集气罩破损' },
      { text: '枪嘴磨损或变形' },
      { text: '加油枪开关回位不灵活' },
      { text: '加油枪自封功能异常' },
      { text: '加油枪挂枪座损坏' },
      { text: '加油枪与软管连接处松动' },
      { text: '加油枪标识不清晰' },
      { text: '加油枪存在油污堆积' },
      { text: '油气回收接口松动' },
      { text: '油气回收通道堵塞' },
      { text: '加油枪防静电连接异常' },
      { text: '加油枪使用区域照明不足' },
      { text: '加油枪放置位置不规范' },
      { text: '加油枪附近存在杂物' },
      { text: '加油枪未按要求定期维护' },
      { text: '加油枪维修更换记录缺失' },
    ]
  },
])

const expandedGroupId = ref(null)
const collapsedCaseKeys = ref([])
const showCaseViewer = ref(false)
const isImageCollapsed = ref(false)

const selectTask = (task) => {
  currentTaskId.value = task.id
  expandedGroupId.value = null
  collapsedCaseKeys.value = []
}

const selectTag = (tag) => {
  console.log('Selected tag:', tag)
}

const toggleCheck = (index) => {
  if (currentTask.value.checklist[index]) {
    currentTask.value.checklist[index].checked = !currentTask.value.checklist[index].checked
  }
}

const toggleGroup = (groupId) => {
  expandedGroupId.value = expandedGroupId.value === groupId ? null : groupId
  collapsedCaseKeys.value = []
}

const getCaseKey = (groupId, itemIndex) => `${groupId}-${itemIndex}`

const isCaseCollapsed = (groupId, itemIndex) => {
  return collapsedCaseKeys.value.includes(getCaseKey(groupId, itemIndex))
}

const toggleCase = (groupId, itemIndex) => {
  const key = getCaseKey(groupId, itemIndex)
  if (collapsedCaseKeys.value.includes(key)) {
    collapsedCaseKeys.value = collapsedCaseKeys.value.filter(item => item !== key)
  } else {
    collapsedCaseKeys.value = [...collapsedCaseKeys.value, key]
  }
}

const openCaseViewer = () => {
  showCaseViewer.value = true
}

const closeCaseViewer = () => {
  showCaseViewer.value = false
}
</script>

<style scoped lang="scss">
.tips-report-container {
  display: flex;
  height: 100%;
  background: #f5f7fa;
}

.left-sidebar {
  width: 280px;
  background: #fff;
  border-right: 1px solid #e8e8e8;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e8e8e8;

  h3 {
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }

  .new-task-btn {
    padding: 6px 16px;
    background: #1890ff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
  }
}

.task-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

.task-item {
  display: flex;
  align-items: center;
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;

  &:hover {
    background: #f5f7fa;
  }

  &.active {
    background: #e6f7ff;
    border-color: #1890ff;
  }

  .task-image {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    overflow: hidden;
    margin-right: 12px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .task-info {
    flex: 1;
    display: flex;
    flex-direction: column;

    .task-title {
      font-size: 14px;
      color: #333;
      margin-bottom: 4px;
    }

    .task-time {
      font-size: 12px;
      color: #999;
    }
  }

  .task-status {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;

    &.completed {
      background: #f6ffed;
      color: #52c41a;
    }

    &.processing {
      background: #fffbe6;
      color: #faad14;
    }

    &.pending {
      background: #f5f5f5;
      color: #666;
    }
  }
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow: hidden;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-shrink: 0;

  h2 {
    font-size: 20px;
    color: #333;
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 16px;

    .btn-add-tag {
      padding: 6px 16px;
      background: #1890ff;
      color: #fff;
      border: none;
      border-radius: 4px;
      font-size: 13px;
      cursor: pointer;
    }

    .current-time {
      font-size: 14px;
      color: #999;
    }
  }
}

.content-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 20px;
  flex: 1;
  overflow: hidden;
}

.center-panel {
  display: contents;
}

.image-section {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  min-height: 400px;
  background: #f5f5f5 url('/demo1.png') center center no-repeat;
  background-size: contain;

  &.collapsed {
    min-height: 72px;
    background: #fff;
  }

  .image-toolbar {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);

    span {
      font-size: 12px;
      color: #4b5568;
    }

    button {
      border: 0;
      border-radius: 4px;
      background: #3f7cff;
      color: #fff;
      font-size: 12px;
      padding: 3px 8px;
      cursor: pointer;
    }
  }

  .image-collapsed-summary {
    height: 72px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;

    img {
      width: 64px;
      height: 48px;
      border-radius: 5px;
      object-fit: cover;
    }

    span {
      font-size: 14px;
      color: #4b5568;
      font-weight: 600;
    }
  }

  .main-image {
    width: 100%;
    height: auto;
    display: block;
    max-height: 600px;
    object-fit: contain;
  }

  .image-nav {
    position: absolute;
    bottom: 16px;
    right: 16px;
    padding: 4px 12px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border-radius: 4px;
    font-size: 12px;

    .nav-info {
      margin-right: 12px;
    }
  }

  .tag-box {
    position: absolute;
    padding: 4px 10px;
    background: #1890ff;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transform: translate(-50%, -50%);

    &:hover {
      background: #40a9ff;
    }
  }
}

.ai-section {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: stretch;
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  min-height: 0;
  height: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-shrink: 0;

    .section-title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }
  }

  .ai-content {
    flex: 1;
    overflow-y: auto;

    h4 {
      font-size: 14px;
      font-weight: 600;
      color: #333;
      margin: 0 0 10px 0;
      padding-bottom: 8px;
      border-bottom: 1px solid #f0f0f0;

      &:first-child {
        margin-top: 0;
      }
    }

    p {
      font-size: 13px;
      color: #666;
      line-height: 1.6;
      margin: 0 0 12px 0;
    }

    .report-overview {
      background: #f6ffed;
      padding: 12px;
      border-radius: 8px;
      margin-bottom: 16px;

      p {
        margin: 0;
        color: #52c41a;
      }
    }

    .hazard-item {
      background: #fffbf0;
      padding: 12px;
      border-radius: 8px;
      margin-bottom: 12px;
      border-left: 3px solid #faad14;

      .hazard-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 500;
        color: #333;
        margin-bottom: 8px;

        .hazard-icon {
          font-size: 16px;
        }
      }

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

        li {
          font-size: 12px;
          color: #666;
          line-height: 1.8;
        }
      }

      .risk-tag {
        display: inline-block;
        margin-top: 8px;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 11px;

        &.high {
          background: #fff1f0;
          color: #ff4d4f;
        }

        &.medium {
          background: #fffbe6;
          color: #faad14;
        }

        &.low {
          background: #f6ffed;
          color: #52c41a;
        }
      }
    }

    .suggestion-list {
      .suggestion-item {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 10px;
        background: #f5f5f5;
        border-radius: 6px;
        margin-bottom: 8px;

        .priority {
          padding: 2px 6px;
          border-radius: 4px;
          font-size: 11px;
          font-weight: 500;
          flex-shrink: 0;
        }

        span:last-child {
          font-size: 12px;
          color: #666;
          line-height: 1.5;
        }

        &.high {
          background: #fff1f0;

          .priority {
            background: #ff4d4f;
            color: #fff;
          }
        }

        &.medium {
          background: #fffbe6;

          .priority {
            background: #faad14;
            color: #fff;
          }
        }

        &.base {
          background: #f6ffed;

          .priority {
            background: #52c41a;
            color: #fff;
          }
        }
      }
    }
  }
}

.right-panel {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.panel-section {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-shrink: 0;

    .section-title {
      font-size: 18px;
      font-weight: 700;
      color: #333;
    }

    .section-count {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #3f7cff;
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 700;
    }

  }

  .checklist {
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;

    .check-group {
      border: 1px solid #d9dee8;
      border-radius: 8px;
      overflow: hidden;
      background: #f8fafc;
      margin-bottom: 10px;

      &.expanded {
        border-color: #6c79ff;
        background: #fff;

        .check-group-header {
          background: #efedff;
        }

        .group-caret {
          transform: rotate(90deg);
        }
      }
    }

    .check-group-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      min-height: 48px;
      padding: 0 14px;
      border: 0;
      background: #f8fafc;
      color: #26324d;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
    }

    .check-group-title,
    .group-meta {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .group-index {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #2d5ac5;
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
    }

    .group-meta {
      color: #7a8494;
      font-size: 14px;
      font-weight: 500;
    }

    .group-caret {
      font-size: 12px;
      color: #a6afbd;
      transition: transform 0.2s ease;
    }

    .checklist-row {
      &:first-of-type {
        .checklist-item {
          margin-top: 10px;
        }
      }
    }

    .checklist-item {
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr) 14px;
      gap: 10px;
      align-items: flex-start;
      width: calc(100% - 28px);
      margin: 0 14px;
      padding: 9px 14px;
      border: 0;
      border-radius: 7px;
      background: #fff;
      text-align: left;
      cursor: pointer;

      &:focus,
      &:focus-visible,
      &:active {
        outline: none;
        box-shadow: none;
      }

      &.collapsed {
        .item-caret {
          transform: rotate(-90deg);
        }
      }

      .item-index {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #e2e7ef;
        color: #7f8da3;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        margin-top: 1px;
      }

      .item-text {
        font-size: 14px;
        color: #4b5568;
        line-height: 1.55;
      }

      .item-caret {
        color: #a6afbd;
        font-size: 12px;
        line-height: 22px;
        transition: transform 0.2s ease;
      }
    }

    .case-examples {
      position: relative;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin: 4px 14px 12px 46px;
      padding: 12px;
      border-radius: 8px;
      background: #f8fafc;
      border: 1px solid #e7ecf3;
    }

    .case-view-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 1;
      padding: 4px 10px;
      border: 1px solid #3f7cff;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.92);
      color: #3f7cff;
      font-size: 12px;
      cursor: pointer;

      &:focus,
      &:focus-visible,
      &:active {
        outline: none;
        box-shadow: none;
      }
    }

    .case-card {
      min-width: 0;

      .case-title {
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 8px;
      }

      img {
        width: 100%;
        height: 220px;
        display: block;
        object-fit: contain;
        border-radius: 6px;
        border: 1px solid #e5eaf0;
        background: #f6f8fb;
      }

      &.positive .case-title {
        color: #16a34a;
      }

      &.negative .case-title {
        color: #dc2626;
      }
    }

    @media (max-width: 1200px) {
      .case-examples {
        grid-template-columns: 1fr;
      }
    }
  }
}

.case-viewer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(12, 20, 38, 0.72);
}

.case-viewer-panel {
  width: min(1500px, 96vw);
  height: min(860px, 92vh);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.case-viewer-header {
  height: 54px;
  padding: 0 18px 0 22px;
  border-bottom: 1px solid #edf0f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  flex-shrink: 0;
}

.case-viewer-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #f3f6fb;
  color: #4b5568;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;

  &:hover {
    background: #e7ecf3;
  }

  &:focus,
  &:focus-visible,
  &:active {
    outline: none;
    box-shadow: none;
  }
}

.case-viewer-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 18px;
  background: #f6f8fb;
}

.case-viewer-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;

  .case-viewer-title {
    font-size: 16px;
    font-weight: 700;
  }

  img {
    flex: 1;
    min-height: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
  }

  &.positive .case-viewer-title {
    color: #16a34a;
  }

  &.negative .case-viewer-title {
    color: #dc2626;
  }
}

@media (max-width: 900px) {
  .case-viewer-body {
    grid-template-columns: 1fr;
  }
}

</style>
