<script setup>
/**
 * FBA relabel completion confirmation.
 *
 * Shown right before a relabel order (C_Order.isRelabelByFulfillmentProvider)
 * is completed: lists every article with its SKU, the entered printLabelCode
 * and the quantity. The user must explicitly confirm before the 'CO'
 * doc-action fires (the caller awaits a Promise resolved via @confirm/@cancel).
 */
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  rows: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:modelValue', 'confirm', 'cancel'])

const { t } = useTranslation()

const totalQty = computed(() => props.rows.reduce((acc, r) => acc + Number(r.qty || 0), 0))

const confirm = () => {
  emit('confirm')
  emit('update:modelValue', false)
}
const cancel = () => {
  emit('cancel')
  emit('update:modelValue', false)
}
</script>

<template>
  <Teleport to="body">
    <div v-if="modelValue" class="rlc-overlay" @click.self="cancel">
      <div class="rlc-dialog">
        <h3 class="rlc-title">
          <span class="tf-icon ti ti-barcode ti-sm me-1"></span>
          {{ t?.relabel_confirm_title || 'FBA-Umetikettierung bestätigen' }}
        </h3>
        <p class="rlc-text">{{ t?.relabel_confirm_text || 'Bitte alle Etiketten-Codes vor Abschluss prüfen. Diese Codes werden für die Umetikettierung der Artikel verwendet.' }}</p>
        <div class="rlc-table-wrap">
          <table class="rlc-table">
            <thead>
              <tr>
                <th>Pos.</th>
                <th>SKU</th>
                <th>{{ t?.product || 'Artikel' }}</th>
                <th>{{ t?.print_label_code || 'Etiketten-Code (FBA)' }}</th>
                <th class="rlc-num">{{ t?.quantity || 'Menge' }}</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(row, index) in rows" :key="index">
                <td>{{ row.line }}</td>
                <td>{{ row.sku }}</td>
                <td class="rlc-product">{{ row.product }}</td>
                <td><code class="rlc-code">{{ row.code }}</code></td>
                <td class="rlc-num">{{ row.qty }}</td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <td colspan="4"></td>
                <td class="rlc-num rlc-total">{{ totalQty }}</td>
              </tr>
            </tfoot>
          </table>
        </div>
        <div class="rlc-actions">
          <button type="button" class="button" @click="cancel">{{ t?.cancel || 'Abbrechen' }}</button>
          <button type="button" class="button is-success" @click="confirm">
            <span class="tf-icon ti ti-check ti-xs me-1"></span>
            {{ t?.relabel_confirm_button || 'Bestätigen & abschließen' }}
          </button>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<!-- Teleported markup — styles must be non-scoped (teleport + scoped CSS is unreliable) -->
<style>
.rlc-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.rlc-dialog {
  background: var(--theme-bg-primary, #fff);
  color: var(--theme-text-primary, #0f172a);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: min(720px, 100%);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
}
.rlc-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
}
.rlc-text {
  font-size: 0.85rem;
  color: var(--theme-text-secondary, #64748b);
  margin-bottom: 12px;
}
.rlc-table-wrap {
  overflow-y: auto;
  border: 1px solid var(--theme-border, #e2e8f0);
  border-radius: 8px;
}
.rlc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.rlc-table th, .rlc-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--theme-border, #e2e8f0);
  text-align: left;
}
.rlc-table thead th {
  position: sticky;
  top: 0;
  background: var(--theme-bg-secondary, #f8fafc);
  font-weight: 700;
  z-index: 1;
}
.rlc-product { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rlc-code {
  font-weight: 700;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 5px;
  padding: 2px 6px;
}
.rlc-num { text-align: right !important; font-variant-numeric: tabular-nums; }
.rlc-total { font-weight: 700; }
.rlc-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
[data-mode="dark"] .rlc-dialog { background: var(--theme-bg-primary, #1e293b); }
</style>
