<script setup lang="ts">
defineProps<{
  data: {
    flight_id: string
    status: string
    delay_minutes: number
    notification_text: string
    data_sources: string[]
    generated_at: string
    human_approved: boolean
    duration_ms: number
  }
}>()

const causeColor: Record<string, string> = {
  DELAYED: 'var(--status-warning)',
  CANCELLED: 'var(--status-error)',
  DIVERTED: 'var(--status-error)',
}
</script>

<template>
  <div class="notification-card">
    <div class="card-header">
      <span class="flight-id">{{ data.flight_id }}</span>
      <span class="status-badge" :style="{ background: causeColor[data.status] || 'var(--status-idle)' }">
        {{ data.status }}
        <template v-if="data.delay_minutes"> {{ data.delay_minutes }}min</template>
      </span>
    </div>
    <div class="card-body">
      <pre class="notification-text">{{ data.notification_text }}</pre>
    </div>
    <div class="card-footer">
      <span class="sources">
        <template v-for="(s, i) in data.data_sources" :key="s">
          <span :class="['source-tag', s.includes('live') ? 'live' : 'mock']">{{ s }}</span>
        </template>
      </span>
      <span class="meta">
        {{ data.duration_ms }}ms
        <span v-if="data.human_approved" class="approved">approved</span>
      </span>
    </div>
  </div>
</template>

<style scoped>
.notification-card {
  background: var(--surface-1);
  border: var(--panel-border);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: var(--panel-border);
}

.flight-id {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
}

.status-badge {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 2px 8px;
  color: var(--surface-0);
  font-weight: 600;
}

.card-body {
  padding: 16px;
}

.notification-text {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  color: var(--text-primary);
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-top: var(--panel-border);
  font-size: 11px;
  color: var(--text-dim);
}

.sources {
  display: flex;
  gap: 4px;
}

.source-tag {
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--surface-2);
  border: 1px solid var(--surface-3);
}

.source-tag.live {
  border-color: var(--status-live);
  color: var(--status-live);
}

.meta {
  font-family: var(--font-mono);
}

.approved {
  color: var(--status-live);
  margin-left: 8px;
}
</style>
