<template>
  <div class="tk-card clickable-row" @click="$emit('open', ticket)">
    <div class="tk-row">
      <q-icon v-if="ticket.is_important" name="star" color="warning" size="16px" class="tk-star" />
      <div class="tk-subject">{{ ticket.subject || '(sans sujet)' }}</div>
      <span class="tk-badge-wrap" @click.stop @dblclick.stop>
        <InlineField :value="ticket.status" field="status" doctype="Issue" :docname="ticket.name"
          type="select" :options="['Open', 'Replied', 'On Hold', 'Resolved', 'Closed']"
          @saved="v => ticket.status = v.value">
          <template #display>
            <span class="ops-badge tk-badge" :class="ticketStatusClass(ticket.status)">{{ ticket.status }}</span>
          </template>
        </InlineField>
      </span>
    </div>
    <div class="tk-meta">
      <span class="tk-badge-wrap" @click.stop @dblclick.stop>
        <InlineField :value="ticket.priority" field="priority" doctype="Issue" :docname="ticket.name"
          type="select" :options="['Low', 'Medium', 'High', 'Urgent']"
          @saved="v => ticket.priority = v.value">
          <template #display>
            <span class="ops-badge tk-badge" :class="priorityClass(ticket.priority)">{{ ticket.priority }}</span>
          </template>
        </InlineField>
      </span>
      <span v-if="ticket.issue_type" class="ops-badge tk-dept"><q-icon name="apartment" size="11px" class="q-mr-xs" />{{ ticket.issue_type }}</span>
      <span v-if="ticket.assigned_staff" class="tk-assignee"><q-icon name="person" size="12px" /> {{ ticket.assigned_staff }}</span>
      <span class="tk-id">#{{ ticket.legacy_ticket_id || ticket.name }}</span>
      <span v-if="ticket.opening_date" class="tk-date"><q-icon name="event" size="12px" /> {{ ticket.opening_date }}</span>
      <q-space />
      <div v-if="ticket.assigned_staff || ticket.opened_by_staff" class="avatar-stack">
        <q-avatar v-if="ticket.opened_by_staff && ticket.opened_by_staff !== ticket.assigned_staff"
          size="22px" class="avatar-chip" :style="{ background: staffColor(ticket.opened_by_staff), zIndex: 1 }">
          {{ staffInitials(ticket.opened_by_staff) }}
          <q-tooltip>Ouvert par {{ ticket.opened_by_staff }}</q-tooltip>
        </q-avatar>
        <q-avatar v-if="ticket.assigned_staff"
          size="22px" class="avatar-chip" :style="{ background: staffColor(ticket.assigned_staff), zIndex: 2 }">
          {{ staffInitials(ticket.assigned_staff) }}
          <q-tooltip>Assigné à {{ ticket.assigned_staff }}</q-tooltip>
        </q-avatar>
      </div>
    </div>
  </div>
</template>

<script setup>
// TicketCard — rangée de ticket lisible et responsive (remplace le mode carte
// archaïque du q-table sur mobile). Sujet en évidence + badges statut/priorité
// colorés (édition inline conservée) + n° + date + avatars ouvreur/assigné.
import InlineField from 'src/components/shared/InlineField.vue'
import { ticketStatusClass, priorityClass } from 'src/composables/useStatusClasses'
import { staffColor, staffInitials } from 'src/composables/useFormatters'

defineProps({ ticket: { type: Object, required: true } })
defineEmits(['open'])
</script>

<style lang="scss" scoped>
.tk-card { padding: 9px 8px; border-radius: 8px; margin: 0 -4px; }
.tk-card:not(:last-child) { border-bottom: 1px solid #eef1f5; }
.tk-row { display: flex; align-items: flex-start; gap: 8px; }
.tk-star { flex-shrink: 0; margin-top: 1px; }
.tk-subject { flex: 1; min-width: 0; font-size: 0.9rem; font-weight: 600; color: #1e293b; line-height: 1.3; word-break: break-word; }
.tk-badge-wrap { flex-shrink: 0; }
.tk-badge { font-size: 10px; padding: 1px 8px; }
.tk-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; padding-left: 0; }
.tk-id { font-size: 11px; color: #94a3b8; font-variant-numeric: tabular-nums; }
.tk-dept { background: #eef2ff; color: #4338ca; font-size: 10px; padding: 1px 8px; display: inline-flex; align-items: center; }
.tk-assignee { font-size: 11px; color: #64748b; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.tk-date { font-size: 11px; color: #94a3b8; white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; }
.avatar-stack { display: flex; align-items: center; }
.avatar-stack .avatar-chip { color: #fff; font-size: 9px; font-weight: 600; border: 1.5px solid #fff; margin-left: -8px; }
.avatar-stack .avatar-chip:first-child { margin-left: 0; }
/* clickable-row (hover) est global (app.scss) */
</style>
