<template>
  <div class="payment-fixed-fields">
    <div class="payment-grid">
      <!-- CARD -->
      <div class="payment-field" :class="{ 'has-value': modelValue.CARD > 0 }">
        <label class="payment-label">
          <i class="pi pi-credit-card"></i>
          CARD
        </label>
        <InputNumber
          v-model="modelValue.CARD"
          :minFractionDigits="2"
          :maxFractionDigits="2"
          :disabled="disabled"
          placeholder="0.00"
          class="amount-input"
          @input="emitUpdate"
        />
      </div>

      <!-- NUMERAR -->
      <div class="payment-field" :class="{ 'has-value': modelValue.NUMERAR > 0 }">
        <label class="payment-label">
          <i class="pi pi-wallet"></i>
          NUMERAR
        </label>
        <InputNumber
          v-model="modelValue.NUMERAR"
          :minFractionDigits="2"
          :maxFractionDigits="2"
          :disabled="disabled"
          placeholder="0.00"
          class="amount-input"
          @input="emitUpdate"
        />
      </div>

      <!-- ALTE (with type dropdown) -->
      <div class="payment-field payment-field-other" :class="{ 'has-value': modelValue.ALTE.amount > 0 }">
        <div class="payment-header">
          <label class="payment-label">
            <i class="pi pi-ticket"></i>
            ALTE
          </label>
          <Dropdown
            v-model="modelValue.ALTE.type"
            :options="otherPaymentTypes"
            optionLabel="label"
            optionValue="value"
            :disabled="disabled"
            placeholder="Tip"
            class="type-dropdown dropdown-borderless"
            @change="emitUpdate"
          />
        </div>
        <InputNumber
          v-model="modelValue.ALTE.amount"
          :minFractionDigits="2"
          :maxFractionDigits="2"
          :disabled="disabled"
          placeholder="0.00"
          class="amount-input"
          @input="emitUpdate"
        />
      </div>
    </div>

    <!-- Validation warning: sum vs total -->
    <div class="validation-row" v-if="showMismatchWarning">
      <div class="warning-box">
        <i class="pi pi-exclamation-triangle"></i>
        <span>
          Suma plati ({{ formatAmount(computedTotal) }}) {{ computedTotal > total ? '>' : '<' }} Total ({{ formatAmount(total) }})
        </span>
      </div>
    </div>
  </div>
</template>

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

const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
    // Expected structure:
    // { CARD: 0, NUMERAR: 0, ALTE: { amount: 0, type: null } }
  },
  total: { type: Number, default: null }, // Total amount for validation
  disabled: { type: Boolean, default: false },
})

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

const otherPaymentTypes = [
  { value: 'tichete_masa', label: 'Tichete masa' },
  { value: 'voucher', label: 'Voucher' },
  { value: 'credit_magazin', label: 'Credit magazin' },
]

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

const showMismatchWarning = computed(() => {
  if (!props.total || props.total === 0) return false
  if (computedTotal.value === 0) return false
  return Math.abs(computedTotal.value - props.total) > 0.02 // 2 bani tolerance
})

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-fixed-fields {
  width: 100%;
}

.payment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  gap: 0.75rem;
}

.payment-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem;
  border-radius: 6px;
  background: var(--surface-ground);
  border: 1px solid var(--surface-border);
  transition: all 0.2s;
}

.payment-field.has-value {
  background: var(--blue-50);
  border-color: var(--blue-200);
}

.payment-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-color);
}

.payment-label i {
  font-size: 0.9rem;
  color: var(--text-color-secondary);
}

.payment-field.has-value .payment-label i {
  color: var(--blue-500);
}

/* Other payment type with dropdown */
.payment-field-other .payment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.type-dropdown {
  max-width: 120px;
}

.type-dropdown :deep(.p-dropdown) {
  padding: 0.2rem 0.35rem;
  font-size: 0.75rem;
}

.amount-input {
  width: 100%;
}

.amount-input :deep(.p-inputnumber-input) {
  padding: 0.35rem 0.5rem;
  font-size: 0.9rem;
  text-align: right;
}

/* Validation warning */
.validation-row {
  margin-top: 0.5rem;
}

.warning-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--yellow-100);
  border: 1px solid var(--yellow-300);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--yellow-800);
}

.warning-box i {
  color: var(--yellow-500);
}

/* Responsive - stack on mobile */
@media (max-width: 640px) {
  .payment-grid {
    grid-template-columns: 1fr 1fr;
  }

  .payment-field-other {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .payment-grid {
    grid-template-columns: 1fr;
  }
}

/* Dark mode adjustments */
[data-theme="dark"] .payment-field.has-value {
  background: rgba(59, 130, 246, 0.1);
  border-color: var(--blue-700);
}

[data-theme="dark"] .warning-box {
  background: rgba(234, 179, 8, 0.1);
  border-color: var(--yellow-700);
  color: var(--yellow-200);
}
</style>
