<template>
  <section class="approval-page">
    <!-- ───── Detail Modal Overlay ───── -->
    <Teleport to="body">
      <Transition name="detail-modal">
        <div v-if="false && selectedRow" class="detail-overlay" @click.self="selectedRow = null">
          <div class="detail-modal">
            <!-- Modal Header -->
            <header class="modal-header">
              <div class="header-left">
                <div class="req-badge">{{ selectedRow.id }}</div>
                <div class="header-title-group">
                  <h2>{{ selectedRow.type }}审批详情</h2>
                  <p>申请人：{{ selectedRow.applicant }} · {{ selectedRow.department }} · {{ selectedRow.time }}</p>
                </div>
              </div>
              <div class="header-right">
                <div class="header-indicator" :class="selectedRow.riskTone">
                  <i class="mdi" :class="selectedRow.riskTone === 'high' ? 'mdi-alert-circle' : selectedRow.riskTone === 'medium' ? 'mdi-alert' : 'mdi-shield-check'"></i>
                  <span>{{ selectedRow.risk }}</span>
                </div>
                <div class="header-indicator status" :class="selectedRow.statusTone">
                  <span>{{ selectedRow.node }}</span>
                </div>
                <button class="close-btn" type="button" aria-label="关闭" @click="selectedRow = null">
                  <i class="mdi mdi-close"></i>
                </button>
              </div>
            </header>

            <!-- Progress Bar -->
            <div class="modal-progress">
              <div class="progress-track">
                <div v-for="(step, idx) in approvalSteps" :key="step.label" class="progress-node" :class="{ done: step.done, active: step.active, current: step.current }">
                  <span class="node-dot">
                    <i v-if="step.done" class="mdi mdi-check"></i>
                    <template v-else>{{ step.index }}</template>
                  </span>
                  <div class="node-label">
                    <strong>{{ step.label }}</strong>
                    <small>{{ step.time }}</small>
                  </div>
                  <span v-if="idx < approvalSteps.length - 1" class="node-line" :class="{ filled: step.done || step.active }"></span>
                </div>
              </div>
            </div>

            <!-- Modal Body -->
            <div class="modal-body">
              <div class="body-grid">
                <!-- Left Column -->
                <div class="body-main">
                  <!-- 费用摘要 -->
                  <article class="content-card">
                    <div class="card-header">
                      <div class="card-title">
                        <i class="mdi mdi-clipboard-text-outline"></i>
                        <h3>费用摘要</h3>
                      </div>
                    </div>
                    <div class="metrics-strip">
                      <div class="metric-block amount">
                        <span class="metric-label">报销金额</span>
                        <strong class="metric-value">{{ selectedRow.amount }}</strong>
                      </div>
                      <div class="metric-block">
                        <span class="metric-label">SLA 剩余</span>
                        <strong class="metric-value sla" :class="selectedRow.slaTone">
                          <i class="mdi mdi-clock-outline"></i>
                          {{ selectedRow.sla }}
                        </strong>
                      </div>
                      <div class="metric-block">
                        <span class="metric-label">费用明细</span>
                        <strong class="metric-value">5 项</strong>
                      </div>
                      <div class="metric-block">
                        <span class="metric-label">附件材料</span>
                        <strong class="metric-value">6 份</strong>
                      </div>
                    </div>
                    <div class="summary-grid">
                      <div v-for="item in summaryItems" :key="item.label" class="summary-cell">
                        <div class="cell-icon"><i :class="item.icon"></i></div>
                        <div class="cell-content">
                          <span>{{ item.label }}</span>
                          <strong>{{ item.value }}</strong>
                        </div>
                      </div>
                    </div>
                  </article>

                  <!-- 费用明细 -->
                  <article class="content-card">
                    <div class="card-header">
                      <div class="card-title">
                        <i class="mdi mdi-receipt-text-outline"></i>
                        <h3>费用明细</h3>
                      </div>
                      <span class="card-badge">合计 ￥6,920</span>
                    </div>
                    <div class="expense-table-wrap">
                      <table class="expense-table">
                        <thead>
                          <tr>
                            <th>费用项目</th>
                            <th>说明</th>
                            <th class="right">金额</th>
                            <th class="center">是否超标</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr v-for="item in expenseItems" :key="item.name">
                            <td><strong>{{ item.name }}</strong></td>
                            <td>{{ item.desc }}</td>
                            <td class="right">{{ item.amount }}</td>
                            <td class="center">
                              <span class="over-badge" :class="item.tone">
                                <i class="mdi" :class="item.tone === 'ok' ? 'mdi-check-circle' : 'mdi-alert-circle'"></i>
                                {{ item.status }}
                              </span>
                            </td>
                          </tr>
                        </tbody>
                        <tfoot>
                          <tr>
                            <td colspan="2"><strong>合计</strong></td>
                            <td class="right"><strong class="total-amount">￥6,920</strong></td>
                            <td></td>
                          </tr>
                        </tfoot>
                      </table>
                    </div>
                  </article>

                  <!-- 审批意见 -->
                  <article class="content-card">
                    <div class="card-header">
                      <div class="card-title">
                        <i class="mdi mdi-comment-text-outline"></i>
                        <h3>审批意见</h3>
                      </div>
                    </div>
                    <div class="opinion-wrap">
                      <textarea rows="4" placeholder="请输入审批意见..."></textarea>
                    </div>
                  </article>
                </div>

                <!-- Right Column -->
                <aside class="body-side">
                  <!-- AI 风险识别 -->
                  <article class="side-card risk-card">
                    <div class="card-header">
                      <div class="card-title">
                        <i class="mdi mdi-robot-outline"></i>
                        <h3>AI 风险识别</h3>
                      </div>
                      <div class="risk-total high">
                        <span>综合风险</span>
                        <strong>高</strong>
                      </div>
                    </div>
                    <div class="risk-items">
                      <div v-for="risk in riskItems" :key="risk.text" class="risk-row" :class="risk.tone">
                        <div class="risk-icon">
                          <i :class="risk.icon"></i>
                        </div>
                        <span class="risk-text">{{ risk.text }}</span>
                        <span class="risk-level" :class="risk.tone">{{ risk.level }}</span>
                      </div>
                    </div>
                    <div class="risk-note">
                      <strong>AI 审核建议</strong>
                      <p>优先补齐酒店入住清单，并复核出租车发票抬头与超标费用说明；完成后可继续流转。</p>
                    </div>
                  </article>

                  <!-- 附件材料 -->
                  <article class="side-card">
                    <div class="card-header">
                      <div class="card-title">
                        <i class="mdi mdi-paperclip"></i>
                        <h3>附件材料</h3>
                      </div>
                      <span class="card-badge warn">1 份缺失</span>
                    </div>
                    <div class="attachment-list-side">
                      <div v-for="file in attachments" :key="file.name" class="attachment-row" :class="{ missing: file.missing }">
                        <div class="file-icon-sm" :class="file.iconClass">
                          <i :class="file.icon"></i>
                        </div>
                        <div class="file-detail">
                          <strong>{{ file.name }}</strong>
                          <span>{{ file.size }}</span>
                        </div>
                      </div>
                    </div>
                  </article>

                </aside>
              </div>
            </div>

            <!-- Modal Footer -->
            <footer class="modal-footer">
              <div class="footer-left">
                <button class="action-btn back" type="button" @click="selectedRow = null">
                  <i class="mdi mdi-arrow-left"></i>
                  <span>返回列表</span>
                </button>
              </div>
              <div class="footer-right">
                <button class="action-btn supplement" type="button">
                  <i class="mdi mdi-undo"></i>
                  <span>补充材料</span>
                </button>
                <button class="action-btn reject" type="button">
                  <i class="mdi mdi-close-circle-outline"></i>
                  <span>驳回</span>
                </button>
                <button class="action-btn approve" type="button">
                  <i class="mdi mdi-check-circle-outline"></i>
                  <span>通过</span>
                </button>
              </div>
            </footer>
          </div>
        </div>
      </Transition>
    </Teleport>

    <div v-if="selectedRow" class="approval-detail">
      <div class="detail-scroll">
        <article class="detail-hero panel">
          <div class="applicant-card">
            <div class="portrait">{{ selectedRow.avatar }}</div>
            <div>
              <h2>{{ selectedRow.applicant }} <span>{{ selectedRow.department }}</span></h2>
              <p>提交时间 <strong>{{ selectedRow.time }}</strong></p>
            </div>
          </div>

          <div class="hero-stat">
            <span>金额</span>
            <strong>{{ selectedRow.amount }}</strong>
          </div>
          <div class="hero-stat">
            <span>风险等级</span>
            <b :class="['risk-pill', selectedRow.riskTone]">{{ selectedRow.risk }}</b>
          </div>
          <div class="hero-stat">
            <span>当前状态</span>
            <b class="state-pill">{{ selectedRow.node }}</b>
          </div>
          <div class="hero-stat">
            <span>SLA 剩余时间</span>
            <strong class="countdown"><i class="mdi mdi-clock-outline"></i> 剩余 {{ selectedRow.sla }}</strong>
          </div>

          <div class="hero-summary-panel">
            <div v-for="item in heroSummaryItems" :key="item.label" class="hero-summary-item">
              <div class="hero-summary-label">
                <span class="hero-summary-icon"><i :class="item.icon"></i></span>
                <span>{{ item.label }}</span>
              </div>
              <strong>{{ item.value }}</strong>
            </div>
          </div>

          <div class="progress-block">
            <div class="progress-head">
              <h3>当前进度</h3>
            </div>
            <div class="progress-line">
              <div v-for="step in approvalSteps" :key="step.label" class="progress-step" :class="{ active: step.active, current: step.current }">
                <span>
                  <i
                    v-if="step.current"
                    v-motion
                    class="current-progress-ring"
                    :initial="currentProgressRingMotion.initial"
                    :enter="currentProgressRingMotion.enter"
                    aria-hidden="true"
                  ></i>
                  <i v-if="step.done" class="mdi mdi-check"></i>
                  <template v-else>{{ step.index }}</template>
                </span>
                <strong>{{ step.label }}</strong>
                <small>{{ step.time }}</small>
              </div>
            </div>
          </div>
        </article>

        <div class="detail-grid">
          <section class="detail-left">
            <article class="detail-card panel">
              <div class="detail-card-head">
                <div>
                  <h3>费用明细</h3>
                  <p>按发生时间逐笔展示，附件与 AI 风险直接在表内完成核对。</p>
                </div>
                <span class="detail-total">{{ expenseTotal }}</span>
              </div>
              <div class="detail-expense-table">
                <table>
                  <thead>
                    <tr>
                      <th>时间</th>
                      <th>费用项目</th>
                      <th>说明</th>
                      <th>金额</th>
                      <th>附件材料</th>
                      <th>AI 风险识别</th>
                    </tr>
                  </thead>
                  <tbody>
                    <template v-for="item in expenseItems" :key="item.id">
                      <tr>
                        <td class="expense-time">
                          <strong>{{ item.time }}</strong>
                          <span>{{ item.dayLabel }}</span>
                        </td>
                        <td class="expense-type">
                          <strong>{{ item.name }}</strong>
                          <span>{{ item.category }}</span>
                        </td>
                        <td class="expense-desc">
                          <strong>{{ item.desc }}</strong>
                          <span>{{ item.detail }}</span>
                        </td>
                        <td class="expense-amount">
                          <strong>{{ item.amount }}</strong>
                          <span v-if="item.tone !== 'ok'" :class="['over-tag', item.tone]">{{ item.status }}</span>
                        </td>
                        <td class="expense-attachment">
                          <div class="expense-attachment-main">
                            <span :class="['attachment-pill', item.attachmentTone]">{{ item.attachmentStatus }}</span>
                            <button
                              v-if="item.attachments.length"
                              class="inline-action"
                              type="button"
                              @click="toggleExpenseAttachments(item.id)"
                            >
                              {{ expandedExpenseId === item.id ? '收起附件' : '查看附件' }}
                            </button>
                          </div>
                          <span class="attachment-hint">{{ item.attachmentHint }}</span>
                        </td>
                        <td class="expense-risk">
                          <template v-if="showExpenseRisk(item)">
                            <span :class="['risk-inline-tag', item.riskTone]">{{ item.riskLabel }}</span>
                            <p>{{ item.riskText }}</p>
                          </template>
                        </td>
                      </tr>
                      <tr v-if="expandedExpenseId === item.id" class="expense-expand-row">
                        <td colspan="6">
                          <div class="expense-files">
                            <span v-for="file in item.attachments" :key="file" class="expense-file-chip">
                              <i class="mdi mdi-paperclip"></i>
                              {{ file }}
                            </span>
                          </div>
                        </td>
                      </tr>
                    </template>
                    <tr class="total-row">
                      <td colspan="3">合计</td>
                      <td>{{ expenseTotal }}</td>
                      <td>{{ uploadedExpenseCount }} 项已上传票据</td>
                      <td>1 项待补材料，1 项需补充超标说明</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </article>

            <article class="detail-card panel">
              <h3>审批意见</h3>
              <textarea rows="3" placeholder="输入审批意见..."></textarea>
            </article>
          </section>
        </div>
      </div>

      <footer class="detail-actions">
        <button class="back-action" type="button" @click="selectedRow = null">
          <i class="mdi mdi-arrow-left"></i>
          <span>退回列表</span>
        </button>
        <div class="approval-action-group" aria-label="审批操作">
          <button class="approve-action" type="button"><i class="mdi mdi-check-circle-outline"></i> 通过</button>
          <button class="reject-action" type="button"><i class="mdi mdi-close-circle-outline"></i> 驳回</button>
          <button class="supplement-action" type="button"><i class="mdi mdi-undo"></i> 补充</button>
        </div>
      </footer>
    </div>

    <!-- ───── Approval List ───── -->
    <article v-else class="approval-list panel">
      <nav class="status-tabs" aria-label="审批状态">
        <button
          v-for="tab in tabs"
          :key="tab"
          type="button"
          :class="{ active: activeTab === tab }"
          @click="activeTab = tab"
        >
          {{ tab }}
        </button>
      </nav>

      <div class="list-toolbar">
        <div class="filter-set">
          <button v-for="filter in filters" :key="filter" type="button" class="filter-btn">
            <span>{{ filter }}</span>
            <i class="mdi mdi-chevron-down"></i>
          </button>
        </div>
      </div>

      <p class="hint"><i class="mdi mdi-information-outline"></i> 点击单据行查看审批详情</p>

      <div class="table-wrap">
        <table>
          <colgroup>
            <col><col><col><col><col><col><col><col><col><col><col>
          </colgroup>
          <thead>
            <tr>
              <th>单号</th>
              <th>申请人</th>
              <th>申请部门</th>
              <th>报销类型</th>
              <th>金额</th>
              <th>提交时间 <i class="mdi mdi-sort"></i></th>
              <th>风险等级</th>
              <th>SLA剩余</th>
              <th>当前节点</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="row in visibleRows" :key="row.id" :class="{ spotlight: row.spotlight }" @click="selectedRow = row">
              <td><strong class="doc-id">{{ row.id }}</strong></td>
              <td>
                <span class="person">
                  <span class="avatar">{{ row.avatar }}</span>
                  {{ row.applicant }}
                </span>
              </td>
              <td>{{ row.department }}</td>
              <td>{{ row.type }}</td>
              <td>{{ row.amount }}</td>
              <td>{{ row.time }}</td>
              <td><span class="risk-tag" :class="row.riskTone">{{ row.risk }}</span></td>
              <td><strong class="sla" :class="row.slaTone">{{ row.sla }}</strong></td>
              <td>{{ row.node }}</td>
              <td><span class="status-tag" :class="row.statusTone">{{ row.status }}</span></td>
              <td>
                <button class="more-btn" type="button" aria-label="查看审批详情" @click.stop="selectedRow = row">
                  <i class="mdi mdi-dots-horizontal"></i>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <footer class="list-foot">
        <span class="page-summary">共 126 条，当前第 1 页</span>
        <div class="pager" aria-label="分页">
          <button class="page-nav" type="button" aria-label="上一页"><i class="mdi mdi-chevron-left"></i></button>
          <button class="page-number active" type="button" aria-current="page">1</button>
          <button class="page-number" type="button">2</button>
          <button class="page-number" type="button">3</button>
          <button class="page-number" type="button">4</button>
          <button class="page-number" type="button">5</button>
          <span>...</span>
          <button class="page-number" type="button">13</button>
          <button class="page-nav" type="button" aria-label="下一页"><i class="mdi mdi-chevron-right"></i></button>
        </div>
        <button class="page-size" type="button">10 条/页 <i class="mdi mdi-chevron-down"></i></button>
      </footer>
    </article>
  </section>
</template>

<script src="./scripts/ApprovalCenterView.js"></script>

<style scoped src="../assets/styles/views/approval-center-view.css"></style>
