export function renderScannerModal({
  title = 'Scan barcode',
  subtitle = 'Point your camera at the barcode.',
  optionsMarkup = '',
  manualCodeModel = 'scannerManualCode',
  manualSubmitAction = 'processScannerManualCode()',
  manualPlaceholder = 'Scan with hardware reader or paste code',
  manualHelp = 'Manual entry works with keyboard-style barcode scanners.',
  manualButtonLabel = 'Run',
  manualDisabledExpression = 'scannerState.isLoading',
}) {
  return `
      <div
        class="scanner-modal-backdrop"
        x-show="scannerState.isOpen"
        @click.self="closeScanner()"
        @keydown.escape.window="closeScanner()"
      >
        <div class="scanner-modal card border-0 shadow-lg">
          <div class="card-body p-3 p-md-4">
            <div class="d-flex align-items-center justify-content-between gap-3 mb-3">
              <div>
                <h2 class="h5 mb-1">${title}</h2>
                <p class="text-body-secondary small mb-0">${subtitle}</p>
              </div>
              <button class="btn btn-sm btn-outline-secondary" type="button" @click="closeScanner()">Close</button>
            </div>

            ${optionsMarkup}

            <form class="mb-3" @submit.prevent="${manualSubmitAction}">
              <label class="form-label">Manual scan code</label>
              <div class="input-group">
                <input
                  class="form-control"
                  type="text"
                  x-model="${manualCodeModel}"
                  placeholder="${manualPlaceholder}"
                  autocomplete="off"
                />
                <button class="btn btn-outline-primary" type="submit" :disabled="${manualDisabledExpression}">
                  ${manualButtonLabel}
                </button>
              </div>
              <div class="form-text">${manualHelp}</div>
            </form>

            <div class="scanner-video-shell mb-3">
              <video class="scanner-video" x-ref="scannerVideo" autoplay muted playsinline></video>
            </div>

            <div class="d-flex flex-wrap align-items-center gap-2">
              <div class="small text-body-secondary" x-show="scannerState.isLoading">Starting camera...</div>
              <div class="small text-success" x-show="scannerState.lastDetectedCode" x-text="'Detected: ' + scannerState.lastDetectedCode"></div>
              <button class="btn btn-outline-secondary btn-sm" type="button" @click="startScanner()" :disabled="scannerState.isLoading">Retry</button>
            </div>

            <template x-if="scannerState.error">
              <div class="alert alert-warning py-2 mt-3 mb-0" x-text="scannerState.error"></div>
            </template>
          </div>
        </div>
      </div>
  `;
}