<template>
  <!-- Vue GANTT (HyVueGantt) : planning temporel + flèches de DÉPENDANCE + couleur Terrain(🚚)/Bureau(🏢). Mêmes tâches que le DAG. -->
  <div class="tg-wrap">
    <div class="tg-legend">
      <span class="tg-lg"><span class="tg-dot" style="background:#ea580c"></span>🚚 Terrain (déplacement)</span>
      <span class="tg-lg"><span class="tg-dot" style="background:#2563eb"></span>🏢 Bureau (à distance)</span>
      <span class="tg-lg"><span class="tg-arrow">⤳</span> dépendance (Fin → Début)</span>
    </div>
    <div class="tg-chart">
      <g-gantt-chart :chart-start="chartStart" :chart-end="chartEnd" precision="day" bar-start="start" bar-end="end"
        :row-height="38" color-scheme="vue" grid :width="'100%'">
        <g-gantt-row v-for="r in rows" :key="r.id" :label="r.label" :bars="r.bars" />
      </g-gantt-chart>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { GGanttChart, GGanttRow, extendDayjs } from 'hy-vue-gantt'

extendDayjs() // HyVueGantt a besoin des plugins dayjs (axe de temps) — sinon GGanttTimeaxis/Grid plantent au rendu sans app.use(hyvuegantt).

// tasks: [{ id, subject, dependsOn:[ids], requiresDispatch, assignee, status, start:'YYYY-MM-DD', end:'YYYY-MM-DD' }]
const props = defineProps({ tasks: { type: Array, default: () => [] } })

const addDay = (iso, n) => { const d = new Date(iso + 'T00:00:00'); d.setDate(d.getDate() + n); return d.toISOString().slice(0, 10) }

const chartStart = computed(() => { const ds = props.tasks.map(t => t.start).filter(Boolean).sort(); return ds.length ? addDay(ds[0], -1) : '2026-06-21' })
const chartEnd = computed(() => { const de = props.tasks.map(t => t.end).filter(Boolean).sort(); return de.length ? addDay(de[de.length - 1], 1) : '2026-06-30' })

const rows = computed(() => {
  // Connexions définies sur la barre SOURCE (la dépendance) → cible (la tâche qui en dépend).
  const conn = {}
  for (const t of props.tasks) for (const dep of (t.dependsOn || [])) {
    (conn[dep] = conn[dep] || []).push({ targetId: String(t.id), type: 'bezier', relation: 'FS', animated: !!t.requiresDispatch, color: t.requiresDispatch ? '#ea580c' : '#94a3b8' })
  }
  return props.tasks.map(t => ({
    id: t.id,
    label: (t.requiresDispatch ? '🚚 ' : '🏢 ') + t.subject,
    bars: [{
      start: t.start, end: t.end,
      ganttBarConfig: {
        id: String(t.id),
        label: t.assignee || '',
        hasHandles: true,
        style: { background: t.requiresDispatch ? '#ea580c' : '#2563eb', color: '#fff', borderRadius: '5px', fontSize: '11px' },
        connections: conn[t.id] || [],
      },
    }],
  }))
})
</script>

<style scoped>
.tg-wrap { display: flex; flex-direction: column; gap: 8px; }
.tg-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: #475569; padding: 0 4px; }
.tg-lg { display: inline-flex; align-items: center; gap: 5px; }
.tg-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.tg-arrow { color: #94a3b8; font-weight: 700; }
.tg-chart { border: 1px solid #e2e8f0; border-radius: 10px; overflow: auto; background: #fff; }
</style>
