<template>
  <div class="timeline">
    <div
      v-for="step in steps"
      :key="step.key"
      :class="['tl-item', step.state]"
    >
      {{ step.label }}
    </div>
  </div>
</template>

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

const store = useTerminalStore();

interface TimelineStep {
  key: string;
  label: string;
  state: 'done' | 'selected' | 'inactive';
}

const cardOrder = ['department-selection', 'doctor-selection', 'time-slot-selection', 'confirm-appointment', 'payment-qrcode', 'appointment-success'];
const labels = ['科室推荐', '医生选择', '就诊时间', '确认预约', '支付', '挂号成功'];

const steps = computed<TimelineStep[]>(() => {
  const activeKey = store.displayedCard?.cardKey ?? '';
  const activeIdx = cardOrder.indexOf(activeKey);

  return cardOrder.map((key, i) => {
    let state: TimelineStep['state'];
    if (i < activeIdx) state = 'done';
    else if (i === activeIdx) state = 'selected';
    else state = 'inactive';
    return { key, label: labels[i], state };
  });
});
</script>

<style scoped>
.timeline {
  position: relative;
  padding-left: 28px;
  margin-bottom: 20px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 8px;
  bottom: 8px;
  width: 0;
  border-left: 2px dotted var(--border);
}

.tl-item {
  position: relative;
  padding: 8px 0 8px 14px;
  font-size: 13px;
  color: var(--muted);
  cursor: default;
  user-select: none;
  line-height: 1.3;
  transition: color 0.15s ease;
}

.tl-item::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.2s ease, box-shadow 0.2s ease;
  border: 2px solid var(--surface);
  z-index: 1;
}

.tl-item.done {
  color: var(--fg);
}

.tl-item.done::before {
  background: var(--accent-light);
}

.tl-item.selected {
  color: var(--accent);
  font-weight: 600;
}

.tl-item.selected::before {
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.tl-item.inactive {
  color: var(--muted);
  opacity: 0.5;
}

.tl-item.inactive::before {
  background: var(--border);
}
</style>
