<script setup lang="ts">
import { Mail, Save, Search, UploadCloud } from "lucide-vue-next";

defineProps<{ ctx: any }>();
</script>

<template>
  <section class="split">
    <section class="panel page-stack">
      <div class="toolbar">
        <label class="search-box">
          <Search :size="16" />
          <input v-model="ctx.feedbackFilters.q" placeholder="搜索编号、标题、联系方式" @keyup.enter="ctx.loadFeedbacks" />
        </label>
        <select v-model="ctx.feedbackFilters.status" @change="ctx.loadFeedbacks">
          <option value="">全部状态</option>
          <option value="new">新建</option>
          <option value="processing">处理中</option>
          <option value="closed">已关闭</option>
        </select>
        <select v-model="ctx.feedbackFilters.priority" @change="ctx.loadFeedbacks">
          <option value="">全部优先级</option>
          <option value="low">低</option>
          <option value="normal">普通</option>
          <option value="high">高</option>
          <option value="urgent">紧急</option>
        </select>
        <button class="btn ghost" @click="ctx.loadFeedbacks">查询</button>
        <a class="btn ghost" href="/api/admin/feedbacks/export" target="_blank"><UploadCloud :size="16" />CSV</a>
      </div>
      <table>
        <thead><tr><th>编号</th><th>标题</th><th>状态</th><th>优先级</th><th>邮件</th><th>最近活动</th></tr></thead>
        <tbody>
          <tr v-for="item in ctx.feedbackPage.items" :key="item.code" class="clickable" :class="{ selected: ctx.selectedFeedback?.code === item.code }" @click="ctx.openFeedback(item)">
            <td class="mono">{{ item.code }}</td>
            <td>{{ item.title || item.summaryText || "未命名反馈" }}</td>
            <td><span :class="['badge', ctx.statusTone(item.status)]">{{ ctx.labelStatus(item.status) }}</span></td>
            <td><span :class="['badge', ctx.statusTone(item.priority)]">{{ ctx.labelPriority(item.priority) }}</span></td>
            <td><span :class="['badge', item.mailSent ? 'good' : 'warn']">{{ item.mailSent ? "已发送" : "未发送" }}</span></td>
            <td>{{ item.lastActivityAt || item.createdAt }}</td>
          </tr>
          <tr v-if="!ctx.feedbackPage.items?.length"><td colspan="6">暂无反馈工单。</td></tr>
        </tbody>
      </table>
    </section>

    <aside class="panel detail-panel">
      <template v-if="ctx.selectedFeedback">
        <div class="section-head">
          <h2>{{ ctx.selectedFeedback.code }}</h2>
          <span :class="['badge', ctx.selectedFeedback.mailSent ? 'good' : 'warn']">{{ ctx.selectedFeedback.mailSent ? "邮件已发送" : "邮件未发送" }}</span>
        </div>
        <p class="muted">{{ ctx.selectedFeedback.title || ctx.selectedFeedback.body }}</p>
        <div class="kv-grid">
          <span>联系方式</span><strong>{{ ctx.selectedFeedback.contact || "-" }}</strong>
          <span>来源</span><strong>{{ ctx.selectedFeedback.sourceChannel || "-" }}</strong>
          <span>接收时间</span><strong>{{ ctx.selectedFeedback.createdAt || "-" }}</strong>
        </div>

        <label>状态
          <select v-model="ctx.feedbackUpdate.status">
            <option value="new">新建</option>
            <option value="processing">处理中</option>
            <option value="closed">已关闭</option>
          </select>
        </label>
        <label>优先级
          <select v-model="ctx.feedbackUpdate.priority">
            <option value="low">低</option>
            <option value="normal">普通</option>
            <option value="high">高</option>
            <option value="urgent">紧急</option>
          </select>
        </label>
        <label>状态说明<input v-model="ctx.feedbackUpdate.statusDetail" /></label>
        <label>公开回复<textarea v-model="ctx.feedbackUpdate.publicReply" rows="3"></textarea></label>
        <div class="button-row">
          <button class="btn primary" @click="ctx.saveFeedbackUpdate"><Save :size="16" />保存工单</button>
          <button class="btn ghost" @click="ctx.retryFeedbackMail"><Mail :size="16" />重试邮件</button>
        </div>

        <hr />
        <h3>评论</h3>
        <div class="comment-list">
          <div v-for="item in ctx.selectedFeedback.comments || []" :key="item.id" class="comment">
            <strong>{{ item.author }}</strong>
            <p>{{ item.body }}</p>
          </div>
        </div>
        <label>新增评论<textarea v-model="ctx.commentDraft.body" rows="3"></textarea></label>
        <label class="checkbox"><input v-model="ctx.commentDraft.internal" type="checkbox" />内部备注</label>
        <button class="btn ghost" @click="ctx.addFeedbackComment">添加评论</button>

        <details>
          <summary>邮件记录</summary>
          <table>
            <thead><tr><th>状态</th><th>收件人</th><th>主题</th><th>错误</th></tr></thead>
            <tbody>
              <tr v-for="item in ctx.selectedFeedback.mailRecords || []" :key="item.id">
                <td><span :class="['badge', ctx.statusTone(item.status)]">{{ ctx.labelStatus(item.status) }}</span></td>
                <td>{{ item.toAddress || "-" }}</td>
                <td>{{ item.subject || "-" }}</td>
                <td>{{ item.errorMessage || "-" }}</td>
              </tr>
              <tr v-if="!(ctx.selectedFeedback.mailRecords || []).length"><td colspan="4">暂无邮件记录。</td></tr>
            </tbody>
          </table>
        </details>
        <details>
          <summary>旧反馈事件</summary>
          <pre class="json-preview small">{{ ctx.pretty({ events: ctx.selectedFeedback.legacyEvents }) }}</pre>
        </details>
      </template>
      <div v-else class="empty-state">选择一条工单查看详情。</div>
    </aside>
  </section>
</template>
