<div class="graph-page">

  <div class="page-header">
    <div>
      <h1>{{ chapter?.name || 'Chapitre' }} — Carte</h1>
      <p class="subtitle">Organigramme des scènes et de leurs branches narratives</p>
    </div>
    <button type="button" class="btn-secondary" (click)="back()">
      <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
      Retour au chapitre
    </button>
  </div>

  @if (scenes.length === 0) {
    <div class="graph-empty">
      <p>Ce chapitre n'a aucune scène. Créez-en pour voir apparaître la carte.</p>
    </div>
  }

  @if (scenes.length > 0) {
    <div class="graph-container">
      <svg #svgEl
        [attr.width]="svgWidth" [attr.height]="svgHeight"
        class="graph-svg"
        (pointermove)="onPointerMove($event)"
        (pointerup)="onPointerUp($event)"
        (pointercancel)="onPointerUp($event)">
        <defs>
          <marker id="arrowhead" viewBox="0 0 10 10" refX="9" refY="5"
            markerWidth="7" markerHeight="7" orient="auto-start-reverse">
            <path d="M 0 0 L 10 5 L 0 10 z" fill="#b8c0cc" />
          </marker>
        </defs>
        <g class="edges">
          @for (edge of edges; track edge) {
            <g class="edge">
              <line [attr.x1]="edge.x1" [attr.y1]="edge.y1"
                [attr.x2]="edge.x2" [attr.y2]="edge.y2"
                stroke="#b8c0cc" stroke-width="2"
                marker-end="url(#arrowhead)" />
              @if (edge.label) {
                <text
                  [attr.x]="edge.labelX"
                  [attr.y]="edge.labelY"
                  text-anchor="middle"
                  class="edge-label"
                  [class.dragging]="draggingLabelKey === edge.key"
                  (pointerdown)="onLabelPointerDown($event, edge)">
                  {{ edge.label }}
                </text>
              }
            </g>
          }
        </g>
        <g class="nodes">
          @for (node of nodes; track node) {
            <g class="node"
              [class.dragging]="draggingId === node.id"
              (pointerdown)="onPointerDown($event, node)">
              <title>{{ node.name }}</title>
              <rect [attr.x]="node.x" [attr.y]="node.y"
                [attr.width]="NODE_WIDTH" [attr.height]="NODE_HEIGHT"
                rx="8" ry="8" class="node-box" />
              <text [attr.x]="node.x + NODE_WIDTH / 2"
                [attr.y]="node.y + NODE_HEIGHT / 2 + 5"
                text-anchor="middle"
                class="node-label">
                {{ node.displayName }}
              </text>
            </g>
          }
        </g>
      </svg>
      <small class="graph-hint">
        💡 Cliquez sur une scène pour l'ouvrir, ou glissez-la pour réorganiser la carte. Les scènes non reliées au point d'entrée (scène d'ordre 1) apparaissent en bas.
      </small>
    </div>
  }

</div>
