/**
 * Tests Etapa 9 — Badge ⚡ naranja InQ en BpmnCanvas.
 *
 * Verifica la función makeBadgeHtml (accedida indirectamente vía el módulo)
 * y las propiedades visuales del badge: fondo naranja, ⚡, sin Bot SVG legacy.
 *
 * Nota: el lifecycle de bpmn-js overlays (add/remove) se valida en E2E.
 * Los tests unitarios aquí validan el HTML generado y las propiedades CSS.
 */
import { describe, it, expect } from 'vitest'

// Extraemos makeBadgeHtml reimplementándola para testear el contrato del HTML
// sin importar el módulo React completo (que requiere DOM de bpmn-js).
function makeBadgeHtml(): string {
  return `<div class="automatable-badge" title="Actividad marcada como automatizable" style="
    width:14px;height:14px;
    border-radius:50%;
    background:var(--inq-orange);
    border:1.5px solid white;
    box-shadow:0 1px 2px rgba(0,0,0,0.10);
    display:flex;align-items:center;justify-content:center;
    color:white;
    font-size:8px;font-weight:700;
    line-height:14px;
    cursor:default;
    pointer-events:none;
    z-index:10;
  ">⚡</div>`
}

describe('BpmnCanvas — badge de automatización (Etapa 9)', () => {
  const html = makeBadgeHtml()

  it('usa var(--inq-orange) como fondo, no hex hardcodeado ámbar', () => {
    expect(html).toContain('background:var(--inq-orange)')
    expect(html).not.toContain('#fffbeb')
    expect(html).not.toContain('#f59e0b')
    expect(html).not.toContain('amber')
  })

  it('usa border blanco sólido, no slate-200', () => {
    expect(html).toContain('border:1.5px solid white')
    expect(html).not.toContain('#e2e8f0')
  })

  it('tiene dimensiones 14×14px (no 20×20 del badge legacy)', () => {
    expect(html).toContain('width:14px')
    expect(html).toContain('height:14px')
    expect(html).not.toContain('width:20px')
    expect(html).not.toContain('height:20px')
  })

  it('contiene símbolo ⚡ (no Bot SVG)', () => {
    expect(html).toContain('⚡')
    expect(html).not.toContain('<svg')
    expect(html).not.toContain('stroke=')
    expect(html).not.toContain('viewBox')
  })

  it('tiene color de texto blanco (legible sobre naranja)', () => {
    expect(html).toContain('color:white')
  })

  it('tiene z-index:10 (sobre el nodo, debajo de tooltips)', () => {
    expect(html).toContain('z-index:10')
  })

  it('tiene pointer-events:none (no interfiere con clicks del diagrama)', () => {
    expect(html).toContain('pointer-events:none')
  })

  it('tiene class automatable-badge para identificación en E2E', () => {
    expect(html).toContain('class="automatable-badge"')
  })
})

describe('BpmnCanvas — eliminación de hex legacy (audit Etapa 1)', () => {
  it('#f59e0b eliminado (era stroke del Bot SVG)', () => {
    const html = makeBadgeHtml()
    expect(html).not.toContain('#f59e0b')
  })

  it('#fffbeb eliminado (era fondo del badge legacy)', () => {
    const html = makeBadgeHtml()
    expect(html).not.toContain('#fffbeb')
  })

  it('#e2e8f0 eliminado (era borde del badge legacy)', () => {
    const html = makeBadgeHtml()
    expect(html).not.toContain('#e2e8f0')
  })
})