<template>
  <article class="tg-card tg-card--tap job-card" :class="{ 'tg-card--done': done }" @click="$emit('click')">
    <!-- Top row: ID + time -->
    <header class="card-top">
      <div class="card-top-left">
        <span v-if="index" class="card-order">{{ index }}</span>
        <span v-else-if="status === 'work'" class="card-pulse"><i /></span>
        <span v-else-if="done" class="material-icons card-done-ic">check_circle</span>
        <span class="card-id">{{ job.name }}</span>
      </div>
      <span v-if="job.scheduled_time" class="card-time">{{ fmtTime(job.scheduled_time) }}</span>
    </header>

    <!-- Title -->
    <h3 class="card-title">{{ job.subject || 'Sans titre' }}</h3>

    <!-- Location -->
    <div v-if="job.service_location_name" class="card-location">
      <span class="material-icons">place</span>
      <span>{{ job.service_location_name }}</span>
    </div>

    <!-- Bottom row: chips -->
    <footer class="card-bottom">
      <span class="tg-chip" :class="chipClass">
        <span class="tg-chip-dot" />
        {{ chipLabel }}
      </span>
      <span v-if="job.duration_h" class="tg-chip is-tg" style="margin-left:auto">
        <span class="material-icons" style="font-size:12px">schedule</span>
        {{ job.duration_h }}h
      </span>
    </footer>
  </article>
</template>

<script setup>
import { computed } from 'vue'
import { fmtClock as fmtTime } from 'src/composables/useFormatters' // « 8:30 »→« 8h30 » (source unique)

const props = defineProps({
  job: { type: Object, required: true },
  // Card visual status: 'tg' | 'work' | 'stop' | 'go' | 'info'
  status: { type: String, default: 'tg' },
  // Ordinal shown in the corner badge (for route order in upcoming)
  index: { type: Number, default: 0 },
  // Renders card in muted "completed" state
  done: { type: Boolean, default: false },
})

defineEmits(['click'])

const chipClass = computed(() => {
  if (props.done) return 'is-go'
  if (props.status === 'work') return 'is-work'
  if (props.status === 'stop') return 'is-stop'
  if (props.job.priority === 'urgent') return 'is-stop'
  if (props.job.priority === 'high') return 'is-work'
  return 'is-tg'
})

const chipLabel = computed(() => {
  if (props.done) return 'Terminée'
  if (props.status === 'work') return 'En cours'
  if (props.job.priority === 'urgent') return 'Urgent'
  if (props.job.priority === 'high') return 'Haute priorité'
  return 'À venir'
})

// fmtTime → composables/useFormatters (fmtClock)
</script>

<style lang="scss" scoped>
.job-card {
  margin-bottom: 12px;
  padding: 16px 18px;
}

.card-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.card-top-left { display: flex; align-items: center; gap: 8px; }
.card-order {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--tg-700); color: #fff;
  font: 700 0.72rem/1 system-ui;
}
.card-pulse {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--sig-work);
  position: relative;
  i {
    position: absolute; inset: -4px;
    border-radius: 50%;
    background: var(--sig-work);
    opacity: 0.35;
    animation: pulse 1.6s ease-out infinite;
  }
}
@keyframes pulse {
  0%   { transform: scale(0.5); opacity: 0.5; }
  100% { transform: scale(1.8); opacity: 0; }
}
.card-done-ic { font-size: 18px; color: var(--sig-go); }

.card-id {
  font: 600 0.78rem/1 system-ui;
  color: var(--tg-700);
  letter-spacing: 0.01em;
}
.card-time {
  font: 700 0.9rem/1 system-ui;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

.card-title {
  font: 700 1.0625rem/1.3 system-ui, -apple-system, sans-serif;
  color: var(--ink-900);
  letter-spacing: -0.005em;
  margin: 0 0 6px;
}

.card-location {
  display: flex; align-items: center; gap: 4px;
  font: 500 0.8125rem/1.3 system-ui;
  color: var(--ink-500);
  margin-bottom: 12px;
  .material-icons { font-size: 14px; }
}

.card-bottom {
  display: flex; align-items: center;
  gap: 6px;
}
</style>
