<script setup>
import { inject, computed } from 'vue'
import { fmtDur, shortAddr } from 'src/composables/useHelpers'
import { PRICING_PRESETS } from 'src/composables/useJobOffers'

const props = defineProps({
  offers: Array,
  loading: Boolean,
})
const emit = defineEmits(['accept', 'decline', 'cancel', 'offer-job', 'refresh', 'close'])

const store = inject('store')
const TECH_COLORS = inject('TECH_COLORS')

function techName (id) {
  const t = store.technicians.find(t => t.id === id)
  return t ? t.fullName : id
}

function statusColor (status) {
  return { open: '#4ade80', pending: '#facc15', accepted: '#60a5fa', expired: '#6b7280', cancelled: '#ef4444' }[status] || '#6b7280'
}

function statusLabel (status) {
  return { open: 'Ouverte', pending: 'En attente', accepted: 'Acceptée', expired: 'Expirée', cancelled: 'Annulée' }[status] || status
}

const activeOffers = computed(() => props.offers.filter(o => o.status === 'open' || o.status === 'pending'))
const pastOffers = computed(() => props.offers.filter(o => o.status !== 'open' && o.status !== 'pending'))
</script>

<template>
<div class="offer-pool-panel">
  <div class="offer-pool-header">
    <h3>
      <span class="offer-icon">📡</span> Offres de travail
      <span v-if="activeOffers.length" class="offer-badge">{{ activeOffers.length }}</span>
    </h3>
    <div class="offer-pool-actions">
      <button class="offer-btn offer-btn-sm" @click="emit('refresh')" title="Rafraîchir">🔄</button>
      <button class="offer-btn offer-btn-sm" @click="emit('close')" title="Fermer">✕</button>
    </div>
  </div>

  <div v-if="loading" class="offer-loading">Chargement des offres…</div>

  <!-- Active offers -->
  <div v-if="activeOffers.length" class="offer-section">
    <div class="offer-section-label">Actives</div>
    <div v-for="offer in activeOffers" :key="offer.id" class="offer-card" :class="'offer-card-' + offer.priority">
      <div class="offer-card-header">
        <span class="offer-status-dot" :style="'background:'+statusColor(offer.status)"></span>
        <span class="offer-subject">{{ offer.subject }}</span>
        <span v-if="offer.priority === 'high'" class="offer-urgent">URGENT</span>
        <span class="offer-mode-tag">{{ offer.offerMode === 'broadcast' ? '📡' : offer.offerMode === 'targeted' ? '🎯' : '📋' }}</span>
      </div>

      <div class="offer-card-details">
        <div v-if="offer.address" class="offer-detail">📍 {{ shortAddr(offer.address) }}</div>
        <div v-if="offer.scheduledDate" class="offer-detail">📅 {{ offer.scheduledDate }}{{ offer.startTime ? ' à ' + offer.startTime : '' }}</div>
        <div class="offer-detail">⏱ {{ fmtDur(offer.duration) }}</div>
        <div v-if="offer.customer" class="offer-detail">👤 {{ offer.customer }}</div>
      </div>

      <!-- Pricing -->
      <div v-if="offer.displacement > 0 || offer.hourlyRate > 0" class="offer-pricing">
        <span class="offer-price-tag">💰</span>
        <span v-if="offer.displacement > 0">{{ offer.displacement }}$ déplacement</span>
        <span v-if="offer.displacement > 0 && offer.hourlyRate > 0"> + </span>
        <span v-if="offer.hourlyRate > 0">{{ offer.hourlyRate }}$/h</span>
        <span class="offer-total">= {{ offer.displacement + Math.round(offer.duration * offer.hourlyRate) }}$</span>
      </div>

      <!-- Target techs -->
      <div v-if="offer.targetTechs.length" class="offer-targets">
        <span class="offer-targets-label">Ciblés:</span>
        <span v-for="tid in offer.targetTechs" :key="tid" class="offer-tech-chip"
              :class="{ 'offer-tech-declined': offer.declinedTechs.some(d => d.techId === tid) }">
          {{ techName(tid) }}
          <span v-if="offer.declinedTechs.some(d => d.techId === tid)" class="offer-declined-x">✗</span>
        </span>
      </div>

      <!-- Declined list -->
      <div v-if="offer.declinedTechs.length" class="offer-declined-info">
        {{ offer.declinedTechs.length }} décliné{{ offer.declinedTechs.length > 1 ? 's' : '' }}
      </div>

      <!-- Actions -->
      <div class="offer-card-actions">
        <button class="offer-btn offer-btn-accept" @click="emit('accept', offer)" title="Assigner manuellement">✓ Assigner</button>
        <button class="offer-btn offer-btn-cancel" @click="emit('cancel', offer)" title="Annuler l'offre">✕ Annuler</button>
      </div>
    </div>
  </div>

  <!-- Empty state -->
  <div v-if="!loading && !activeOffers.length" class="offer-empty">
    <div class="offer-empty-icon">📡</div>
    <div>Aucune offre active</div>
    <div class="offer-empty-hint">Créez une offre depuis un travail non-assigné ou le bouton ci-dessous</div>
    <button class="offer-btn offer-btn-primary" @click="emit('offer-job')">+ Nouvelle offre</button>
  </div>

  <!-- Past offers (collapsed) -->
  <details v-if="pastOffers.length" class="offer-section offer-past">
    <summary class="offer-section-label">Historique ({{ pastOffers.length }})</summary>
    <div v-for="offer in pastOffers.slice(0, 20)" :key="offer.id" class="offer-card offer-card-past">
      <div class="offer-card-header">
        <span class="offer-status-dot" :style="'background:'+statusColor(offer.status)"></span>
        <span class="offer-subject">{{ offer.subject }}</span>
        <span class="offer-status-label">{{ statusLabel(offer.status) }}</span>
        <span v-if="offer.acceptedBy" class="offer-accepted-by">→ {{ techName(offer.acceptedBy) }}</span>
      </div>
    </div>
  </details>
</div>
</template>

<style lang="scss">
.offer-pool-panel {
  display: flex; flex-direction: column; gap: 0;
  height: 100%; overflow-y: auto;
  background: var(--sb-panel-bg, #0e1117);
  color: #e2e4ef;
  font-size: 0.82rem;
}
.offer-pool-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 8px; border-bottom: 1px solid rgba(255,255,255,0.06);
  h3 { margin: 0; font-size: 0.95rem; font-weight: 600; display: flex; align-items: center; gap: 6px; }
  .offer-icon { font-size: 1.1rem; }
  .offer-badge {
    background: #4ade80; color: #000; font-size: 0.65rem; font-weight: 700;
    padding: 1px 6px; border-radius: 10px; min-width: 18px; text-align: center;
  }
}
.offer-pool-actions { display: flex; gap: 4px; }
.offer-btn {
  border: none; border-radius: 6px; cursor: pointer; font-size: 0.78rem;
  padding: 5px 10px; transition: all 0.15s; font-weight: 500;
  background: rgba(255,255,255,0.06); color: #c8cad6;
  &:hover { background: rgba(255,255,255,0.12); }
}
.offer-btn-sm { padding: 3px 7px; font-size: 0.72rem; }
.offer-btn-primary { background: #3b82f6; color: #fff; &:hover { background: #2563eb; } }
.offer-btn-accept { background: rgba(74,222,128,0.15); color: #4ade80; &:hover { background: rgba(74,222,128,0.25); } }
.offer-btn-cancel { background: rgba(239,68,68,0.1); color: #f87171; &:hover { background: rgba(239,68,68,0.2); } }

.offer-loading { padding: 24px; text-align: center; color: #6b7280; }
.offer-section { padding: 8px 14px; }
.offer-section-label {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: #6b7280; margin-bottom: 6px; font-weight: 600;
}
.offer-card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 8px;
  border-left: 3px solid #3b82f6;
  &.offer-card-high { border-left-color: #ef4444; }
  &.offer-card-past { opacity: 0.55; border-left-color: #4b5563; }
}
.offer-card-header {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
}
.offer-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.offer-subject { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.offer-urgent {
  font-size: 0.6rem; font-weight: 700; color: #ef4444;
  background: rgba(239,68,68,0.15); padding: 1px 5px; border-radius: 3px;
}
.offer-mode-tag { font-size: 0.85rem; }
.offer-card-details {
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 6px;
  .offer-detail { font-size: 0.75rem; color: #9ca3af; white-space: nowrap; }
}
.offer-pricing {
  background: rgba(250,204,21,0.08); border: 1px solid rgba(250,204,21,0.15);
  border-radius: 5px; padding: 4px 8px; margin-bottom: 6px;
  font-size: 0.75rem; color: #fbbf24; display: flex; align-items: center; gap: 4px;
  .offer-total { margin-left: auto; font-weight: 700; color: #fcd34d; }
}
.offer-targets {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 6px;
  .offer-targets-label { font-size: 0.7rem; color: #6b7280; }
}
.offer-tech-chip {
  font-size: 0.7rem; padding: 1px 6px; border-radius: 4px;
  background: rgba(59,130,246,0.15); color: #93c5fd;
  &.offer-tech-declined { background: rgba(239,68,68,0.1); color: #f87171; text-decoration: line-through; }
  .offer-declined-x { color: #ef4444; margin-left: 2px; }
}
.offer-declined-info { font-size: 0.7rem; color: #f87171; margin-bottom: 4px; }
.offer-card-actions { display: flex; gap: 6px; justify-content: flex-end; }
.offer-status-label { font-size: 0.68rem; color: #6b7280; }
.offer-accepted-by { font-size: 0.72rem; color: #4ade80; }

.offer-empty {
  padding: 32px 20px; text-align: center; color: #6b7280;
  .offer-empty-icon { font-size: 2rem; margin-bottom: 8px; opacity: 0.4; }
  .offer-empty-hint { font-size: 0.72rem; margin: 6px 0 14px; color: #4b5563; }
}
.offer-past { summary { cursor: pointer; } }
</style>
