<template>
  <section class="success-card">
    <div class="success-icon">
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--accent-light)" stroke-width="2.2">
        <polyline points="20,6 9,17 4,12" />
      </svg>
    </div>
    <div class="success-title">挂号成功</div>
    <div class="success-subtitle">联调演示</div>

    <div class="appt-grid">
      <div class="appt-cell" v-if="patientName">
        <div class="lb">患者</div>
        <div class="vl">{{ patientName }}</div>
      </div>
      <div class="appt-cell" v-if="departmentName">
        <div class="lb">科室</div>
        <div class="vl">{{ departmentName }}</div>
      </div>
      <div class="appt-cell" v-if="doctorDisplay">
        <div class="lb">医生</div>
        <div class="vl">{{ doctorDisplay }}</div>
      </div>
      <div class="appt-cell" v-if="visitDate">
        <div class="lb">就诊日期</div>
        <div class="vl hl">{{ visitDate }}</div>
      </div>
      <div class="appt-cell" v-if="visitTime">
        <div class="lb">时段</div>
        <div class="vl">{{ visitTime }}</div>
      </div>
      <div class="appt-cell" v-if="room">
        <div class="lb">诊室</div>
        <div class="vl">{{ room }}</div>
      </div>
      <div class="appt-cell full" v-if="queueNo">
        <div class="lb">就诊序号</div>
        <div class="vl queue-no">{{ queueNo }}</div>
      </div>
    </div>

    <div v-if="appointmentNo" class="appt-no-line">预约号 <span class="apt-no">{{ appointmentNo }}</span></div>

    <div class="tips-box">
      <div class="tl">温馨提示</div>
      <div class="tt">请提前 <strong>15 分钟</strong>到达候诊区签到。就诊时请出示二维码凭证。</div>
    </div>

    <button class="btn-accent" @click="$emit('finish')">完成</button>
  </section>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import type { CardInstance } from '../api/types';
import { useTerminalStore } from '../state/terminalStore';

const props = defineProps<{ card: CardInstance }>();
defineEmits<{ finish: [] }>();

const store = useTerminalStore();
const data = computed(() => props.card.cardData);

const patientName = computed(() => (data.value.patientName as string) || '');
const departmentName = computed(() => (data.value.departmentName as string) || store.selection.departmentName || '');
const doctorDisplay = computed(() => {
  const name = (data.value.doctorName as string) || store.selection.doctorName || '';
  const title = (data.value.doctorTitle as string) || store.selection.doctorTitle || '';
  return name ? (name + (title ? ` ${title}` : '')) : '';
});
const visitDate = computed(() => (data.value.visitDate as string) || (data.value.visitTime as string) || '');
const visitTime = computed(() => (data.value.timePeriod as string) || store.selection.timePeriod || '');
const room = computed(() => (data.value.room as string) || '');
const queueNo = computed(() => (data.value.queueNo as string) || (data.value.appointmentNo as string) || '');
const appointmentNo = computed(() => (data.value.appointmentNo as string) || (data.value.appointmentNoStr as string) || '');
</script>

<style scoped>
.success-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 18px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.success-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
}

.success-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--accent-light) 25%, transparent);
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
}

.success-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.success-subtitle {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-mono);
  margin-bottom: 14px;
}

.appt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-align: left;
}

.appt-cell {
  background: var(--surface);
  padding: 10px 14px;
}

.appt-cell .lb {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 1px;
}

.appt-cell .vl {
  font-size: var(--fs-sm);
  font-weight: 500;
}

.appt-cell .vl.hl {
  font-family: var(--font-display);
  color: var(--accent);
  font-size: 18px;
}

.appt-cell .vl.queue-no {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent);
}

.appt-cell.full {
  grid-column: 1 / -1;
}

.appt-no-line {
  margin-top: 14px;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.apt-no {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--fg);
}

.tips-box {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--accent-faint);
  border-radius: var(--radius-sm);
  text-align: left;
}

.tips-box .tl {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 2px;
}

.tips-box .tt {
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.5;
}

.btn-accent {
  display: block;
  width: 100%;
  padding: 12px;
  background: var(--accent);
  color: var(--surface);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  font-weight: 500;
  text-align: center;
  margin-top: 14px;
  transition: background 0.15s ease;
}

.btn-accent:hover {
  background: color-mix(in oklch, var(--accent) 85%, black);
}
</style>
