<template>
  <div class="pay-section">
    <!-- Payment fields - NO HEADER -->
    <div class="pay-grid">
      <!-- CARD -->
      <div class="pay-item" :class="{ active: modelValue.CARD > 0 }">
        <label class="pay-label">Card</label>
        <InputNumber
          v-model="modelValue.CARD"
          :minFractionDigits="2"
          :maxFractionDigits="2"
          :disabled="disabled"
          placeholder="0.00"
          class="pay-input"
          @input="emitUpdate"
        />
      </div>

      <!-- NUMERAR -->
      <div class="pay-item" :class="{ active: modelValue.NUMERAR > 0 }">
        <label class="pay-label">Cash</label>
        <InputNumber
          v-model="modelValue.NUMERAR"
          :minFractionDigits="2"
          :maxFractionDigits="2"
          :disabled="disabled"
          placeholder="0.00"
          class="pay-input"
          @input="emitUpdate"
        />
      </div>

      <!-- ALTE (simple label + input, no dropdown) -->
      <div class="pay-item" :class="{ active: modelValue.ALTE?.amount > 0 }">
        <label class="pay-label">Alte</label>
        <InputNumber
          v-model="modelValue.ALTE.amount"
          :minFractionDigits="2"
          :maxFractionDigits="2"
          :disabled="disabled"
          placeholder="0.00"
          class="pay-input"
          @input="emitUpdate"
        />
      </div>
    </div>

    <!-- Mismatch warning message -->
    <div v-if="showMismatch" class="mismatch-msg">
      <i class="pi pi-exclamation-triangle"></i>
      Plati ({{ formatAmount(computedTotal) }}) ≠ Total ({{ formatAmount(total) }})
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import InputNumber from 'primevue/inputnumber'

const props = defineProps({
  modelValue: { type: Object, required: true },
  total: { type: Number, default: null },
  disabled: { type: Boolean, default: false },
})

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

const computedTotal = computed(() => {
  return (props.modelValue.CARD || 0) +
         (props.modelValue.NUMERAR || 0) +
         (props.modelValue.ALTE?.amount || 0)
})

const showMismatch = computed(() => {
  if (!props.total || props.total === 0) return false
  if (computedTotal.value === 0) return false
  return Math.abs(computedTotal.value - props.total) > 0.02
})

const formatAmount = (amount) => {
  return parseFloat(amount || 0).toLocaleString('ro-RO', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  })
}

const emitUpdate = () => {
  emit('update:modelValue', { ...props.modelValue })
}
</script>

<style scoped>
/* === PAYMENT SECTION - simple grid === */
.pay-section {
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--surface-border);
}

/* Payment grid - horizontal */
.pay-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.pay-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.pay-item.active .pay-input :deep(.p-inputnumber-input) {
  background: color-mix(in srgb, var(--blue-500) 8%, var(--surface-ground));
}

/* Label above input */
.pay-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-color-secondary);
}

/* Payment input */
.pay-input {
  width: 80px;
}

.pay-input :deep(.p-inputnumber-input) {
  width: 100%;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-sm);
  text-align: right;
  height: 28px;
  background: var(--surface-ground);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  color: var(--text-color);
}

.pay-input :deep(.p-inputnumber-input:focus) {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--primary-color);
}

/* Mismatch warning message */
.mismatch-msg {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: color-mix(in srgb, var(--yellow-500) 15%, var(--surface-card));
  border: 1px solid var(--yellow-500);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--yellow-600);
}

.mismatch-msg i {
  font-size: var(--text-xs);
}

/* Responsive: stack on mobile */
@media (max-width: 400px) {
  .pay-grid {
    flex-direction: column;
    gap: var(--space-sm);
  }
  .pay-item {
    width: 100%;
  }
  .pay-input {
    width: 100%;
  }
}
</style>

<!-- NON-SCOPED: Force dark mode styling -->
<style>
[data-theme="dark"] .pay-section .p-inputnumber-input {
  background: var(--surface-ground) !important;
  color: var(--text-color) !important;
  border-color: var(--surface-border) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pay-section .p-inputnumber-input {
    background: var(--surface-ground) !important;
    color: var(--text-color) !important;
    border-color: var(--surface-border) !important;
  }
}
</style>
