<template>
  <div class="tva-fixed-fields">
    <div class="tva-grid">
      <!-- TVA A -->
      <div class="tva-field" :class="{ 'has-value': modelValue.A.amount > 0 }">
        <div class="tva-header">
          <span class="tva-code">A</span>
          <Dropdown
            v-model="modelValue.A.percent"
            :options="percentOptions"
            optionLabel="label"
            optionValue="value"
            :disabled="disabled"
            class="percent-dropdown dropdown-borderless"
            @change="emitUpdate"
          />
        </div>
        <InputNumber
          v-model="modelValue.A.amount"
          :minFractionDigits="2"
          :maxFractionDigits="2"
          :disabled="disabled"
          placeholder="0.00"
          class="amount-input"
          @input="emitUpdate"
        />
      </div>

      <!-- TVA B -->
      <div class="tva-field" :class="{ 'has-value': modelValue.B.amount > 0 }">
        <div class="tva-header">
          <span class="tva-code">B</span>
          <Dropdown
            v-model="modelValue.B.percent"
            :options="percentOptions"
            optionLabel="label"
            optionValue="value"
            :disabled="disabled"
            class="percent-dropdown dropdown-borderless"
            @change="emitUpdate"
          />
        </div>
        <InputNumber
          v-model="modelValue.B.amount"
          :minFractionDigits="2"
          :maxFractionDigits="2"
          :disabled="disabled"
          placeholder="0.00"
          class="amount-input"
          @input="emitUpdate"
        />
      </div>

      <!-- TVA C -->
      <div class="tva-field" :class="{ 'has-value': modelValue.C.amount > 0 }">
        <div class="tva-header">
          <span class="tva-code">C</span>
          <Dropdown
            v-model="modelValue.C.percent"
            :options="percentOptions"
            optionLabel="label"
            optionValue="value"
            :disabled="disabled"
            class="percent-dropdown dropdown-borderless"
            @change="emitUpdate"
          />
        </div>
        <InputNumber
          v-model="modelValue.C.amount"
          :minFractionDigits="2"
          :maxFractionDigits="2"
          :disabled="disabled"
          placeholder="0.00"
          class="amount-input"
          @input="emitUpdate"
        />
      </div>

      <!-- TVA D -->
      <div class="tva-field" :class="{ 'has-value': modelValue.D.amount > 0 }">
        <div class="tva-header">
          <span class="tva-code">D</span>
          <Dropdown
            v-model="modelValue.D.percent"
            :options="percentOptions"
            optionLabel="label"
            optionValue="value"
            :disabled="disabled"
            class="percent-dropdown dropdown-borderless"
            @change="emitUpdate"
          />
        </div>
        <InputNumber
          v-model="modelValue.D.amount"
          :minFractionDigits="2"
          :maxFractionDigits="2"
          :disabled="disabled"
          placeholder="0.00"
          class="amount-input"
          @input="emitUpdate"
        />
      </div>

      <!-- TVA E (custom percent) -->
      <div class="tva-field" :class="{ 'has-value': modelValue.E.amount > 0 }">
        <div class="tva-header">
          <span class="tva-code">E</span>
          <Dropdown
            v-model="modelValue.E.percent"
            :options="percentOptionsWithCustom"
            optionLabel="label"
            optionValue="value"
            :disabled="disabled"
            class="percent-dropdown dropdown-borderless"
            @change="emitUpdate"
          />
        </div>
        <InputNumber
          v-model="modelValue.E.amount"
          :minFractionDigits="2"
          :maxFractionDigits="2"
          :disabled="disabled"
          placeholder="0.00"
          class="amount-input"
          @input="emitUpdate"
        />
      </div>

      <!-- TOTAL TVA -->
      <div class="tva-total">
        <span class="total-label">TOTAL TVA</span>
        <span class="total-value">{{ formatAmount(computedTotal) }} LEI</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:
    // { A: { percent: 19, amount: 0 }, B: {...}, C: {...}, D: {...}, E: {...} }
  },
  disabled: { type: Boolean, default: false },
})

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

// Standard VAT percentages in Romania
const percentOptions = [
  { value: 19, label: '19%' },
  { value: 9, label: '9%' },
  { value: 5, label: '5%' },
  { value: 0, label: '0%' },
]

// E field can have null (disabled) or custom values
const percentOptionsWithCustom = [
  { value: null, label: '--' },
  ...percentOptions,
]

const computedTotal = computed(() => {
  const tva = props.modelValue
  return (
    (tva.A?.amount || 0) +
    (tva.B?.amount || 0) +
    (tva.C?.amount || 0) +
    (tva.D?.amount || 0) +
    (tva.E?.amount || 0)
  )
})

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

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

<style scoped>
.tva-fixed-fields {
  width: 100%;
}

.tva-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.tva-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;
}

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

.tva-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tva-code {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-color);
  min-width: 20px;
}

.percent-dropdown {
  flex: 1;
  max-width: 70px;
}

.percent-dropdown :deep(.p-dropdown) {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
}

.amount-input {
  width: 100%;
}

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

/* Total row spans full width */
.tva-total {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  margin-top: 0.25rem;
  border-top: 2px dashed var(--surface-border);
}

.total-label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-color);
}

.total-value {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-color);
}

/* Responsive - 3 columns on wider screens */
@media (min-width: 768px) {
  .tva-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Stack on mobile */
@media (max-width: 480px) {
  .tva-grid {
    grid-template-columns: 1fr;
  }
}

/* Dark mode adjustments */
[data-theme="dark"] .tva-field.has-value {
  background: rgba(34, 197, 94, 0.1);
  border-color: var(--green-700);
}
</style>
