<template>
  <div class="production-diagnosis h-full flex flex-col p-4 box-border gap-4 overflow-y-auto">
    <!-- 输入区 -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 flex flex-col gap-3">
      <div class="flex items-center justify-between">
        <h2 class="text-sm lg:text-base font-semibold text-gray-900 flex items-center">
          <svg class="w-4 h-4 text-blue-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
          进产诊断
        </h2>
        <span class="text-xs text-gray-500">输入病例 / 业务单据 / 销售单据编号，查找无法进产的原因</span>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-[160px_1fr_auto] gap-3">
        <div>
          <label class="block text-xs font-medium text-gray-600 mb-1">单据类型</label>
          <select
            v-model="type"
            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm bg-white"
          >
            <option v-for="opt in typeOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
          </select>
        </div>
        <div>
          <label class="block text-xs font-medium text-gray-600 mb-1">单据编号</label>
          <input
            v-model.trim="code"
            type="text"
            :placeholder="currentPlaceholder"
            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm font-mono"
            @keyup.enter="diagnose"
          />
        </div>
        <div class="flex items-end gap-2">
          <button
            type="button"
            @click="clearAll"
            class="px-3 py-2 text-xs text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50"
          >
            清空
          </button>
          <button
            type="button"
            @click="diagnose"
            :disabled="loading || !code"
            class="px-3 py-2 text-xs text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-60"
          >
            <span v-if="loading">诊断中...</span>
            <span v-else>开始诊断</span>
          </button>
        </div>
      </div>

      <p class="text-xs text-gray-500">
        进产逻辑参考 agent-be:
        <code class="font-mono">AgentCase\\ConfirmProduction::canProduction</code> /
        <code class="font-mono">AgentBusinessDocument\\ConfirmProduction::canProduction</code> /
        <code class="font-mono">AgentSaleDocument\\ConfirmPermit::canPermit</code>
      </p>
    </div>

    <!-- 错误 -->
    <div v-if="errorMessage" class="bg-red-50 border border-red-200 rounded-lg p-3 text-sm text-red-700">
      {{ errorMessage }}
    </div>

    <!-- 结果 -->
    <div v-if="result" class="flex flex-col gap-4">
      <!-- 概览 -->
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
        <div class="flex items-center justify-between flex-wrap gap-2">
          <div class="flex items-center gap-3">
            <span
              class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border"
              :class="overallBadgeClass"
            >
              {{ overallBadge }}
            </span>
            <span class="text-sm font-semibold text-gray-900">
              {{ result.type_label }} · {{ result.code }}
            </span>
          </div>
          <span v-if="result.found && result.entity" class="text-xs text-gray-500">
            状态: {{ result.entity.status_label }} ({{ result.entity.status }})
            <span class="mx-2 text-gray-300">|</span>
            归属代理: {{ result.entity.agent_code || '-' }}
            <span class="mx-2 text-gray-300">|</span>
            产品: {{ result.entity.product_code || '-' }}
          </span>
        </div>

        <div v-if="!result.found" class="mt-3 text-sm text-gray-600">
          {{ result.message }}
        </div>

        <div v-else-if="result.entity" class="mt-3 grid grid-cols-2 md:grid-cols-4 gap-3 text-xs">
          <div v-for="field in entityFields" :key="field.key" class="bg-gray-50 rounded-lg p-2">
            <div class="text-gray-500">{{ field.label }}</div>
            <div class="font-mono text-gray-900 break-all">{{ field.value || '-' }}</div>
          </div>
        </div>
      </div>

      <!-- 检查项列表 -->
      <div v-if="result.found && result.checks" class="space-y-3">
        <div
          v-for="check in result.checks"
          :key="check.key"
          class="bg-white rounded-xl shadow-sm border p-4"
          :class="check.pass ? 'border-emerald-200' : 'border-red-200'"
        >
          <div class="flex items-start justify-between gap-3">
            <div class="flex items-start gap-3 min-w-0">
              <span
                class="mt-0.5 inline-flex items-center justify-center w-6 h-6 rounded-full flex-shrink-0 text-xs font-bold"
                :class="check.pass ? 'bg-emerald-100 text-emerald-700' : 'bg-red-100 text-red-700'"
              >
                {{ check.pass ? '✓' : '✗' }}
              </span>
              <div class="min-w-0">
                <div class="text-sm font-semibold text-gray-900">{{ check.label }}</div>
                <div class="text-xs text-gray-600 mt-1">{{ check.detail }}</div>
              </div>
            </div>
            <span
              class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium flex-shrink-0"
              :class="check.pass ? 'bg-emerald-50 text-emerald-700' : 'bg-red-50 text-red-700'"
            >
              {{ check.pass ? '通过' : '未通过' }}
            </span>
          </div>

          <div class="mt-3 grid grid-cols-1 md:grid-cols-2 gap-2 text-xs">
            <div class="bg-gray-50 rounded p-2">
              <div class="text-gray-500">期望</div>
              <div class="font-mono text-gray-900 break-all">{{ check.expected }}</div>
            </div>
            <div class="bg-gray-50 rounded p-2">
              <div class="text-gray-500">实际</div>
              <div class="font-mono text-gray-900 break-all">{{ check.actual }}</div>
            </div>
          </div>

          <div v-if="!check.pass && check.hint" class="mt-2 text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded p-2">
            提示：{{ check.hint }}
          </div>

          <!-- 账期链路展示 -->
          <div v-if="check.key === 'credit' && check.chain && check.chain.length" class="mt-3">
            <div class="text-xs text-gray-500 mb-1">
              代理账期链路 (产品 {{ check.product_code || '-' }})
              <span v-if="!check.crm_configured" class="ml-2 text-amber-700">
                · CRM 未配置，一级账期视为未知
              </span>
              <span v-else-if="!check.first_agent_credit_resolved" class="ml-2 text-amber-700">
                · CRM 调用失败
              </span>
            </div>
            <div class="border border-gray-200 rounded-lg overflow-hidden">
              <table class="w-full text-xs">
                <thead class="bg-gray-50 text-gray-600">
                  <tr>
                    <th class="px-2 py-1 text-left font-medium">层级</th>
                    <th class="px-2 py-1 text-left font-medium">代理编号</th>
                    <th class="px-2 py-1 text-left font-medium">代理名称</th>
                    <th class="px-2 py-1 text-left font-medium">是否有账期</th>
                    <th class="px-2 py-1 text-left font-medium">来源</th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="(node, idx) in check.chain"
                    :key="idx"
                    :class="[
                      node.broken ? 'bg-gray-50 text-gray-400' : '',
                      idx === check.chain.length - 1 ? 'border-t border-gray-100' : 'border-t border-gray-100'
                    ]"
                  >
                    <td class="px-2 py-1 font-mono">
                      {{ node.is_root ? '一级' : (node.level != null ? node.level + '级' : '-') }}
                    </td>
                    <td class="px-2 py-1 font-mono">{{ node.agent_code }}</td>
                    <td class="px-2 py-1">{{ node.agent_name || '-' }}</td>
                    <td class="px-2 py-1">
                      <span
                        class="inline-flex items-center px-1.5 py-0.5 rounded text-[11px]"
                        :class="node.has_credit ? 'bg-emerald-100 text-emerald-700' : 'bg-red-100 text-red-700'"
                      >
                        {{ node.has_credit ? '有' : '无' }}
                      </span>
                      <span v-if="node.broken" class="ml-2 text-gray-400">(链路已中断)</span>
                    </td>
                    <td class="px-2 py-1 font-mono text-gray-500">{{ node.credit_source }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProductionDiagnosis',
  data() {
    return {
      type: 'case',
      code: '',
      loading: false,
      errorMessage: '',
      result: null,
      typeOptions: [
        { value: 'case', label: '病例', placeholder: '示例: C01008446046 / X0X60F' },
        { value: 'business_document', label: '业务单据', placeholder: '示例: B12345678 / LX5KP3' },
        { value: 'sale_document', label: '销售单据', placeholder: '示例: 销售单据 code' }
      ]
    };
  },
  computed: {
    currentPlaceholder() {
      const opt = this.typeOptions.find((o) => o.value === this.type);
      return opt ? opt.placeholder : '';
    },
    overallBadge() {
      if (!this.result) return '';
      if (!this.result.found) return '未找到';
      return this.result.can_production ? '可以进产' : '不能进产';
    },
    overallBadgeClass() {
      if (!this.result) return '';
      if (!this.result.found) return 'bg-gray-50 text-gray-600 border-gray-200';
      return this.result.can_production
        ? 'bg-emerald-50 text-emerald-700 border-emerald-200'
        : 'bg-red-50 text-red-700 border-red-200';
    },
    entityFields() {
      if (!this.result || !this.result.entity) return [];
      const e = this.result.entity;
      const base = [
        { key: 'code', label: '编号', value: e.code },
        { key: 'agent_code', label: '归属代理 (agent_code)', value: e.agent_code },
        { key: 'settlement_agent_code', label: '结算代理', value: e.settlement_agent_code },
        { key: 'product_code', label: '产品编号', value: e.product_code }
      ];
      if (this.result.type === 'case') {
        base.push(
          { key: 'hospital_code', label: '机构编号', value: e.hospital_code },
          { key: 'doctor_code', label: '医生编号', value: e.doctor_code },
          { key: 'patient_name', label: '患者姓名', value: e.patient_name },
          { key: 'is_need_pfp', label: 'is_need_pfp', value: e.is_need_pfp },
          { key: 'is_pfp', label: 'is_pfp', value: e.is_pfp }
        );
      } else {
        base.push({ key: 'hospital_code', label: '机构编号', value: e.hospital_code });
      }
      return base;
    }
  },
  methods: {
    clearAll() {
      this.code = '';
      this.result = null;
      this.errorMessage = '';
    },
    async diagnose() {
      if (!this.code) {
        this.errorMessage = '请输入单据编号';
        return;
      }
      this.loading = true;
      this.errorMessage = '';
      this.result = null;

      try {
        const csrfMeta = document.querySelector('meta[name="csrf-token"]');
        const response = await fetch('/api/production-diagnosis/diagnose', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            Accept: 'application/json',
            'X-CSRF-TOKEN': csrfMeta ? csrfMeta.getAttribute('content') : ''
          },
          body: JSON.stringify({ type: this.type, code: this.code })
        });

        const data = await response.json();

        if (!response.ok || !data.success) {
          this.errorMessage = data.message || '诊断失败，请稍后重试';
          return;
        }

        this.result = data.data;
      } catch (err) {
        this.errorMessage = '网络请求失败: ' + err.message;
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

<style scoped>
.production-diagnosis {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
</style>
