<template>
  <div class="fixed-grid has-12-cols pb-2">
    <div id="customer-selection" class="grid px-3 py-3 m-0 has-background-white">
      <!-- Product Selection -->
      <div v-if="!productId" class="cell is-col-span-5">
        <p class="is-size-6 has-text-weight-bold mb-2">Chọn sản phẩm</p>
        <SearchBox v-bind="{
          api: 'product',
          field: 'label',
          searchfield: ['code', 'trade_code', 'type__name', 'land_lot_size', 'zone_type__name'],
          column: ['code', 'trade_code', 'type__name', 'land_lot_size', 'zone_type__name'],
          first: true,
          filter: { status: 2, cart__dealer: store.dealer?.id },
          viewaddon: productViewAddon,
        }" @option="handleProductSelection" />
      </div>

      <!-- Customer Selection -->
      <div class="cell" :class="productId ? 'is-col-span-10' : 'is-col-span-5'">
        <p class="is-size-6 has-text-weight-bold mb-2">Chọn khách hàng</p>
        <SearchBox v-bind="{
          api: 'customer',
          field: 'label',
          searchfield: ['code', 'fullname', 'phone', 'legal_code'],
          column: ['code', 'fullname', 'phone', 'legal_code'],
          first: true,
          disabled: !productData,
          viewaddon: customerViewAddon,
          addon: $getEditRights('edit', { code: 'customer', category: 'topmenu' }) ? customerViewAdd : undefined,
        }" @option="handleCustomerSelection" />
      </div>

      <!-- Action Buttons -->
      <div class="cell is-col-span-2 is-flex is-align-items-flex-end">
        <button v-if="contractData" class="button is-info has-text-white is-fullwidth" @click="openContractModal">
          <span>Xem hợp đồng</span>
        </button>
        <button v-else-if="$getEditRights()" class="button is-success has-text-white is-fullwidth" :disabled="!canCreateTransaction"
          :class="{ 'is-loading': isCreatingTransaction }" @click="createTransaction" style="height: 2.5em;">
          Tạo giao dịch
        </button>
      </div>
    </div>

    <!-- Policy Selection -->
    <div v-if="productData && policies.length > 0" class="px-3 py-3 m-0 has-background-white mb-3">
      <p class="is-size-6 has-text-weight-bold mb-3">Chọn chính sách thanh toán</p>
      <div class="tabs is-toggle">
        <ul>
          <li v-for="policy in policies" :key="policy.id" :class="{ 'is-active': selectedPolicy?.id === policy.id }">
            <a @click="selectPolicy(policy)">
              <span>{{ policy.name }}</span>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <!-- Contract Date -->
    <div v-if="productData && selectedPolicy" class="px-3 mb-3">
      <div class="columns">
        <div class="column is-3">
          <div class="field">
            <label class="label">Ngày ký</label>
            <Datepicker :record="dateRecord" attr="contractDate" @date="updateContractDate" position="is-bottom-left" />
          </div>
        </div>
      </div>
    </div>

    <!-- Gift Selection -->
    <div v-if="productData && selectedPolicy" class="px-3 mb-3 has-background-white p-4">
      <p class="is-size-6 has-text-weight-bold mb-3">Chọn quà tặng</p>
      <div class="columns is-multiline">
        <div
          class="column is-12"
          v-for="(row, index) in giftRows"
          :key="row.key"
          style="border-bottom: 1px solid #204853;">

          <div class="is-flex is-align-items-center" style="gap: 8px;">
            <!-- Icon -->
            <SvgIcon v-bind="{ name: 'dot.svg', type: 'primary', size: 16 }"></SvgIcon>

            <!-- Chọn loại quà -->
            <div style="flex: 2; min-width: 0;">
              <SearchBox v-bind="{
                api: 'gift',
                field: 'label',
                searchfield: ['name'],
                column: ['code', 'name'],
                first: true,
                clearable: true,
                placeholder: 'Chọn loại quà tặng...'
              }" @option="(val) => handleGiftRowSelect(index, val)" />
            </div>

            <!-- Ngày bắt đầu -->
            <div style="flex: 1; min-width: 0;">
              <Datepicker
                :record="row.dateRecord"
                attr="startDate"
                @date="(val) => handleGiftStartDateChange(index, val)"
                position="is-bottom-left" />
            </div>

            <!-- Ngày kết thúc -->
            <div style="flex: 1; min-width: 0;">
              <Datepicker
                :record="row.dateRecord"
                attr="endDate"
                @date="(val) => handleGiftEndDateChange(index, val)"
                position="is-bottom-left" />
            </div>

            <!-- Xóa -->
            <button class="button is-warning" @click="removeGiftRow(index)">
              <span class="icon">
                <SvgIcon v-bind="{ name: 'bin1.svg', type: 'white', size: 16 }"></SvgIcon>
              </span>
            </button>
          </div>
        </div>

        <div class="column is-12">
          <button class="button is-text is-fullwidth" @click="addNewGiftRow">
            <SvgIcon v-bind="{ name: 'add4.svg', type: 'primary', size: 18 }" />
            <span class="ml-2">Thêm quà tặng</span>
          </button>
        </div>
      </div>
    </div>

    <!-- Discount Selection -->
    <div v-if="productData && selectedPolicy && selectedPolicy.contract_allocation_percentage == 100" class="px-3 mb-5">
      <p class="is-size-6 has-text-weight-bold mb-2">Chọn chiết khấu</p>
      <div class="columns is-multiline">
        <div class="column is-12" v-for="(row, index) in discountRows" :key="row.key" 
          draggable="true"
          @dragstart="dragStart" 
          @dragover="dragOver" 
          @drop="drop" 
          @dragend="dragEnd" 
          :data-index="index"
          style="cursor: move; border-bottom: 1px solid #204853;">
          
          <div class="columns is-mobile is-vcentered m-0 is-variable is-1">
            <div class="column is-narrow" style="display: flex; align-items: center; justify-content: center;">
              <SvgIcon v-bind="{ name: 'dot.svg', type: 'primary', size: 16 }"></SvgIcon>
            </div>
            
            <div class="column" :class="row.selectedData?.type === 1 ? 'is-4' : 'is-6'">
              <SearchBox v-bind="{
                api: 'discounttype',
                field: 'label',
                searchfield: ['code', 'name', 'value'],
                column: ['code', 'name', 'value'],
                first: true,
                clearable: true,
                placeholder: 'Chọn loại chiết khấu...'
              }" @option="(val) => handleRowSelect(index, val)" />
            </div>
            
            <!-- THÊM DROPDOWN CHỌ BASE PRICE TYPE -->
            <div v-if="row.selectedData?.type === 1" class="column is-3">
              <div class="select is-fullwidth">
                <select v-model="row.basePriceType" @change="recalculateDiscount(index)">
                  <option value="contract">Giá trị hợp đồng</option>
                  <option value="with_vat">Giá đã VAT</option>
                  <option value="without_vat">Giá chưa VAT</option>
                </select>
              </div>
            </div>
            
            <div class="column is-4" >
              <div class="control has-icons-right">
                <input 
                  class="input has-text-centered has-text-weight-bold" 
                  type="text"
                  placeholder="0"
                  :value="isDiscountInputFocused ? row.customValue : $numtoString(row.customValue)"
                  @input="(e) => validateRowValue(e, index)" 
                  @focus="isDiscountInputFocused = true"
                  @blur="isDiscountInputFocused = false"
                  :disabled="!row.selectedData"
                >
                <span v-if="row.selectedData" class="icon is-right has-text-grey is-size-7 h-full">
                  {{ row.selectedData.type === 1 ? '%' : 'đ' }}
                </span>
              </div>
            </div>
            
            <div class="column">
              <button class="button is-warning is-fullwidth" @click="removeDiscountRow(index)">
                <span class="icon">
                  <SvgIcon v-bind="{ name: 'bin1.svg', type: 'white', size: 16 }"></SvgIcon>
                </span>
              </button>
            </div>
          </div>
        </div>
        
        <div class="column is-12">
          <button class="button is-text is-fullwidth" @click="addNewDiscountRow">
            <SvgIcon v-bind="{ name: 'add4.svg', type: 'primary', size: 18 }" />
            <span class="ml-2">Thêm chiết khấu</span>
          </button>
        </div>
      </div>
    </div>

    <!-- Early Payment Section -->
    <div
      v-if="productData && selectedPolicy && selectedPolicy.contract_allocation_percentage == 100 && selectedPolicy.method === 1"
      class="px-3 has-background-white p-4">
      <div class="level is-mobile mb-3">
        <div class="level-left">
          <label class="checkbox">
            <input type="checkbox" v-model="enableEarlyPayment" @change="handleEarlyPaymentToggle">
            <span class="is-size-6 has-text-weight-semibold has-text-primary ml-2">
              Thanh toán sớm (2 - {{ maxEarlyCycles }}) đợt
            </span>
          </label>
        </div>
      </div>

      <transition name="fade">
        <div v-if="enableEarlyPayment && maxEarlyCycles >= 2" class="field">
          <label class="label">Số đợt thanh toán sớm</label>
          <div class="control" style="max-width: 200px;">
            <input class="input" type="number" v-model.number="earlyPaymentCycles" :min="2" :max="maxEarlyCycles"
              @input="validateEarlyCycles">
          </div>
        </div>
      </transition>
    </div>

    <!-- Payment Schedule Presentation Component -->
    <PaymentSchedulePresentation v-if="productData && policies.length > 0" :productData="productData"
      :selectedPolicy="selectedPolicy" :selectedCustomer="selectedCustomer" :calculatorData="calculatorOutputData"
      :isLoading="isCreatingTransaction" @print="printContent" />
  </div>

  <!-- Modals -->
  <Modal v-if="showPhaseModal" component="transaction/TransactionPhaseForm" title="Chọn loại giao dịch" width="40%"
    height="auto" @close="showPhaseModal = false" @phaseSelected="handlePhaseSelection"
    :vbind="{ filterPhases: phaseFilterOptions }" />
  <Modal v-if="showConfirmModal" @close="showConfirmModal = false" @confirm="executeTransactionCreation"
    v-bind="confirmModalConfig" />
  <Modal v-if="showContractModal" @close="showContractModal = false" @dataevent="handleContractUpdated"
    v-bind="contractModalConfig" />
</template>

<script>
import { useStore } from "@/stores/index";
import dayjs from 'dayjs';
import SearchBox from '~/components/SearchBox.vue';
import Modal from '~/components/Modal.vue';
import TransactionConfirmModal from '~/components/transaction/TransactionConfirmModal.vue';
import PaymentSchedulePresentation from './PaymentSchedulePresentation.vue';
import Datepicker from '~/components/datepicker/Datepicker.vue';
import SvgIcon from '~/components/SvgIcon.vue';
import { useAdvancedWorkflow } from '@/composables/useAdvancedWorkflow';
import { usePaymentCalculator } from '@/composables/usePaymentCalculator';

export default {
  components: {
    SearchBox,
    Modal,
    TransactionConfirmModal,
    PaymentSchedulePresentation,
    Datepicker,
    SvgIcon,
  },
  props: {
    productId: {
      type: [String, Number],
      default: null
    }
  },
  setup() {
    const store = useStore();
    const { $snackbar, $getdata, $dialog, $exportpdf } = useNuxtApp();
    const { isLoading, createWorkflowTransaction } = useAdvancedWorkflow();

    const calculator = usePaymentCalculator();

    return {
      store,
      $snackbar,
      $getdata,
      $dialog,
      $exportpdf,
      isCreatingTransaction: isLoading,
      createFullTransaction: createWorkflowTransaction,
      calculator
    };
  },
  data() {
    const initialContractDate = dayjs().format('YYYY-MM-DD');

    return {
      productData: null,
      selectedCustomer: null,
      policies: [],
      selectedPolicy: null,
      allPaymentPlans: [],
      paymentPlans: [],
      
      // Gift Selection
      giftRows: [],
      
      discountRows: [{ 
        key: Date.now(), 
        selectedData: null, 
        customValue: 0,
        basePriceType: 'contract', 
        calculatedAmount: 0 
      }],
      isDiscountInputFocused: false,
      draggedIndex: null,

      // Early Payment
      enableEarlyPayment: false,
      earlyPaymentCycles: 2,

      // Contract Date
      contractDate: initialContractDate,
      dateRecord: { contractDate: initialContractDate },

      productViewAddon: {
        component: "product/ProductView",
        width: "70%",
        height: "500px",
        title: "Thông tin sản phẩm",
      },
      customerViewAddon: {
        component: "customer/CustomerView",
        width: "70%",
        height: "500px",
        title: "Thông tin khách hàng",
      },
      customerViewAdd: {
        component: "customer/CustomerInfo2",
        width: "60%",
        height: "auto",
        title: this.store.lang === "en" ? "Edit Customer" : "Chỉnh sửa khách hàng",
      },
      showPhaseModal: false,
      selectedPhaseInfo: null,
      showConfirmModal: false,
      contractData: null,
      showContractModal: false,
    };
  },
  computed: {
    canCreateTransaction() {
      return this.productData && this.selectedCustomer && this.selectedPolicy;
    },

    maxEarlyCycles() {
      return this.paymentPlans?.length || 0;
    },

    calculatorOutputData() {
      return {
        originPrice: this.calculator.originalPrice.value,
        totalDiscount: this.calculator.totalDiscount.value,
        salePrice: this.calculator.finalTotal.value,
        allocatedPrice: this.calculator.finalTotal.value,
        originalPaymentSchedule: this.calculator.originalPaymentSchedule.value,
        finalPaymentSchedule: this.calculator.finalPaymentSchedule.value,
        earlyDiscountDetails: this.calculator.earlyDiscountDetails.value,
        totalRemaining: this.calculator.totalRemaining.value,
        detailedDiscounts: this.calculator.detailedDiscounts.value,
        baseDate: this.calculator.startDate.value
      };
    },

    phaseFilterOptions() {
      if (!this.selectedPolicy) {
        return ['reserved', 'deposit', 'fulfillwish'];
      }

      if (this.store.dealer) {
        return ['reserved', 'deposit'];
      }
      if (this.selectedPolicy.code === 'CS-TT-THNV') {
        return ['fulfillwish', 'reserved'];
      } else {
        return ['deposit', 'reserved'];
      }
    },

    confirmModalConfig() {
      if (!this.productData || !this.selectedPhaseInfo || !this.selectedPolicy || !this.selectedCustomer) return {};
      return {
        component: "transaction/TransactionConfirmModal",
        title: "Xác nhận Giao dịch",
        width: "60%",
        height: "auto",
        vbind: {
          productData: this.productData,
          phaseInfo: this.selectedPhaseInfo,
          selectedPolicy: this.selectedPolicy,
          originPrice: this.calculator.originalPrice.value,
          discountValueDisplay: this.calculator.totalDiscount.value,
          selectedCustomer: this.selectedCustomer,
          initialContractDate: this.contractDate
        }
      }
    },

    contractModalConfig() {
      if (!this.contractData) return {};
      return {
        component: "application/Contract",
        title: "Hợp đồng giao dịch",
        width: "95%",
        height: "95vh",
        vbind: {
          row: {
            id: this.contractData.id
          }
        },
        event: "contractUpdated",
        eventname: "dataevent",
      }
    },
  },

  watch: {
    // Watch discountRows để cập nhật vào calculator
    discountRows: {
      handler(newRows) {
        const validDiscounts = newRows
          .filter(r => r.selectedData)
          .map(r => {
            if (r.selectedData.type === 1) {
              // Phần trăm - tính toán dựa trên base price type
              let basePrice = 0;
              switch (r.basePriceType) {
                case 'with_vat':
                  basePrice = this.productData?.origin_price || 0;
                  break;
                case 'without_vat':
                  basePrice = this.productData?.price_excluding_vat || 
                             (this.productData?.origin_price || 0) / 1.1;
                  break;
                case 'contract':
                default:
                  return {
                    id: r.selectedData.id,
                    name: r.selectedData.name,
                    code: r.selectedData.code,
                    type: r.selectedData.type,
                    value: r.customValue || 0
                  };
              }
              
              const calculatedAmount = (basePrice * (r.customValue || 0)) / 100;
              r.calculatedAmount = calculatedAmount;
              
              return {
                id: r.selectedData.id,
                name: `${r.selectedData.name} (${r.basePriceType === 'with_vat' ? 'Giá đã VAT' : 'Giá chưa VAT'})`,
                code: r.selectedData.code,
                type: 2, // Chuyển sang type 2 (tiền mặt) sau khi tính toán
                value: Math.round(calculatedAmount)
              };
            } else {
              // Tiền mặt
              r.calculatedAmount = 0;
              return {
                id: r.selectedData.id,
                name: r.selectedData.name,
                code: r.selectedData.code,
                type: r.selectedData.type,
                value: r.customValue || 0
              };
            }
          });

        this.calculator.discounts.value = validDiscounts;
      },
      deep: true
    },

    earlyPaymentCycles(newVal) {
      if (this.enableEarlyPayment && newVal > 0) {
        this.calculator.earlyPaymentCycles.value = newVal;
      }
    },

    enableEarlyPayment(newVal) {
      if (!newVal) {
        this.calculator.earlyPaymentCycles.value = 0;
      } else {
        this.calculator.earlyPaymentCycles.value = this.earlyPaymentCycles;
      }
    },

    contractDate(newVal) {
      if (newVal) {
        this.calculator.startDate.value = new Date(newVal);
      }
    }
  },

  async created() {
    await this.loadAllData();
    if (this.productId) {
      await this.loadProductById(this.productId);
    }
  },

  methods: {
    async loadProductById(id) {
      const product = await this.$getdata('product', { id: id }, undefined, true);
      if (product) {
        await this.handleProductSelection(product);
      } else {
        this.$snackbar(`Không tìm thấy sản phẩm với ID: ${id}`, { type: 'is-danger' });
      }
    },

    updateContractDate(newDate) {
      this.contractDate = newDate;
      this.dateRecord.contractDate = newDate;
      this.calculator.startDate.value = new Date(newDate);
      // Sync gift rows that haven't been manually modified (start date == old contractDate)
      this.giftRows.forEach((row, index) => {
        this.handleGiftStartDateChange(index, newDate);
      });
    },

    handleEarlyPaymentToggle() {
      if (this.enableEarlyPayment) {
        this.earlyPaymentCycles = Math.min(2, this.maxEarlyCycles);
        this.calculator.earlyPaymentCycles.value = this.earlyPaymentCycles;
      } else {
        this.calculator.earlyPaymentCycles.value = 0;
      }
    },

    validateEarlyCycles() {
      if (this.earlyPaymentCycles < 2) {
        this.earlyPaymentCycles = 2;
      }
      if (this.earlyPaymentCycles > this.maxEarlyCycles) {
        this.earlyPaymentCycles = this.maxEarlyCycles;
      }
      this.calculator.earlyPaymentCycles.value = this.earlyPaymentCycles;
    },

    // Gift Row Methods
    _buildGiftDateRecord(startDate, endDate) {
      return { startDate, endDate };
    },

    _defaultGiftDates(gift) {
      const start = this.contractDate || dayjs().format('YYYY-MM-DD');
      let end;
      if (gift && gift.duration) {
        end = dayjs(start).add(gift.duration, 'month').format('YYYY-MM-DD');
      } else {
        end = dayjs(start).add(2, 'year').format('YYYY-MM-DD');
      }
      return { start, end };
    },

    addNewGiftRow() {
      const { start, end } = this._defaultGiftDates(null);
      this.giftRows.push({
        key: Date.now(),
        selectedData: null,
        startDate: start,
        endDate: end,
        dateRecord: this._buildGiftDateRecord(start, end),
      });
    },

    removeGiftRow(index) {
      this.giftRows.splice(index, 1);
    },

    handleGiftRowSelect(index, data) {
      const row = this.giftRows[index];
      if (!data) {
        row.selectedData = null;
        const { start, end } = this._defaultGiftDates(null);
        row.startDate = start;
        row.endDate = end;
        row.dateRecord = this._buildGiftDateRecord(start, end);
      } else {
        row.selectedData = data;
        const { start, end } = this._defaultGiftDates(data);
        row.startDate = start;
        row.endDate = end;
        row.dateRecord = this._buildGiftDateRecord(start, end);
      }
    },

    handleGiftStartDateChange(index, newStart) {
      const row = this.giftRows[index];
      row.startDate = newStart;
      // Recalculate end date based on duration
      let end;
      if (row.selectedData && row.selectedData.duration) {
        end = dayjs(newStart).add(row.selectedData.duration, 'month').format('YYYY-MM-DD');
      } else {
        end = dayjs(newStart).add(2, 'year').format('YYYY-MM-DD');
      }
      row.endDate = end;
      row.dateRecord = this._buildGiftDateRecord(newStart, end);
    },

    handleGiftEndDateChange(index, newEnd) {
      const row = this.giftRows[index];
      row.endDate = newEnd;
      row.dateRecord = this._buildGiftDateRecord(row.startDate, newEnd);
    },

    addNewDiscountRow() {
      this.discountRows.push({ 
        key: Date.now(), 
        selectedData: null, 
        customValue: 0,
        basePriceType: 'contract',
        calculatedAmount: 0
      });
    },

    removeDiscountRow(index) {
      this.discountRows.splice(index, 1);
      if (!this.discountRows.length) this.addNewDiscountRow();
    },

    handleRowSelect(index, data) {
      const row = this.discountRows[index];
      if (!data) {
        row.selectedData = null;
        row.customValue = 0;
        row.basePriceType = 'contract';
        row.calculatedAmount = 0;
      } else {
        row.selectedData = data;
        row.customValue = data.value;
        if (data.type === 1) {
          row.basePriceType = 'contract';
          this.recalculateDiscount(index);
        } else {
          row.calculatedAmount = 0;
        }
      }
    },

    recalculateDiscount(index) {
      const row = this.discountRows[index];
      if (!row.selectedData || row.selectedData.type !== 1) return;
      
      let basePrice = 0;
      switch (row.basePriceType) {
        case 'with_vat':
          basePrice = this.productData?.origin_price || 0;
          break;
        case 'without_vat':
          basePrice = this.productData?.price_excluding_vat || 
                     (this.productData?.origin_price || 0) / 1.1;
          break;
        case 'contract':
        default:
          row.calculatedAmount = 0;
          return;
      }
      
      row.calculatedAmount = (basePrice * (row.customValue || 0)) / 100;
    },

    validateRowValue(e, index) {
      const row = this.discountRows[index];
      const numValue = Number(e.target.value);

      if (isNaN(numValue)) {
        row.customValue = 0;
        e.target.value = 0;
        return;
      }

      row.customValue = numValue;
      if (!row.selectedData) return;
      
      if (row.selectedData.type === 1) {
        if (row.customValue > 100) row.customValue = 100;
        if (row.customValue < 0) row.customValue = 0;
        this.recalculateDiscount(index);
      } else {
        if (row.customValue < 0) row.customValue = 0;
      }
    },

    dragStart(e) {
      this.draggedIndex = parseInt(e.currentTarget.getAttribute('data-index'));
      e.currentTarget.style.opacity = '0.5';
    },

    dragOver(e) {
      e.preventDefault();
      const target = e.currentTarget;
      if (target.getAttribute('data-index') !== null) {
        target.style.borderTop = '2px solid #204853';
      }
    },

    drop(e) {
      e.preventDefault();
      const dropIndex = parseInt(e.currentTarget.getAttribute('data-index'));

      if (this.draggedIndex !== null && this.draggedIndex !== dropIndex) {
        const draggedRow = this.discountRows[this.draggedIndex];
        this.discountRows.splice(this.draggedIndex, 1);
        this.discountRows.splice(dropIndex, 0, draggedRow);
      }

      document.querySelectorAll('[data-index]').forEach(row => {
        row.style.borderTop = '';
        row.style.opacity = '1';
      });
    },

    dragEnd(e) {
      document.querySelectorAll('[data-index]').forEach(row => {
        row.style.borderTop = '';
        row.style.opacity = '1';
      });
      this.draggedIndex = null;
    },

    handleCustomerSelection(customer) {
      this.selectedCustomer = customer;
    },

    async handleProductSelection(product) {
      if (!product) {
        this.productData = null;
        this.selectedPolicy = null;
        this.paymentPlans = [];
        this.discountRows = [{ 
          key: Date.now(), 
          selectedData: null, 
          customValue: 0,
          basePriceType: 'contract',
          calculatedAmount: 0
        }];
        this.selectedCustomer = null;
        this.contractData = null;
        this.enableEarlyPayment = false;
        this.earlyPaymentCycles = 2;
        this.giftRows = [];

        this.calculator.originPrice.value = 0;
        this.calculator.discounts.value = [];
        this.calculator.paymentPlan.value = [];
        this.calculator.paidAmount.value = 0;
        this.calculator.earlyPaymentCycles.value = 0;
        return;
      }

      if (!product.trade_code && !product.code) {
        this.$snackbar('Không tìm thấy mã sản phẩm hợp lệ', { type: 'is-danger' });
        return;
      }

      this.productData = product;
      this.selectedPolicy = null;
      this.paymentPlans = [];
      this.discountRows = [{ 
        key: Date.now(), 
        selectedData: null, 
        customValue: 0,
        basePriceType: 'contract',
        calculatedAmount: 0
      }];
      this.contractData = null;
      this.enableEarlyPayment = false;
      this.earlyPaymentCycles = 2;
      this.giftRows = [];

      this.calculator.originPrice.value = product.origin_price || 0;
      this.calculator.discounts.value = [];
      this.calculator.startDate.value = new Date(this.contractDate);
      this.calculator.earlyPaymentCycles.value = 0;

      if (this.policies.length > 0) {
        this.selectPolicy(this.policies[0]);
      } else {
        this.$snackbar('Không có chính sách thanh toán cho sản phẩm này', { type: 'is-warning' });
      }
    },

    async loadAllData() {
      try {
        this.policies = await this.$getdata("salepolicy", { enable: "True" }, undefined, false);
        this.allPaymentPlans = await this.$getdata("paymentplan", { policy__enable: "True" }, undefined, false);
        if (this.allPaymentPlans) {
          this.allPaymentPlans.sort((a, b) => a.cycle - b.cycle);
        }
      } catch (error) {
        console.error('Error loading data:', error);
      }
    },

    selectPolicy(policy) {
      this.selectedPolicy = policy;
      this.loadPlansForPolicy(policy.id);

      this.calculator.contractAllocationPercentage.value = policy.contract_allocation_percentage || 100;

      this.enableEarlyPayment = false;
      this.earlyPaymentCycles = 2;
      this.calculator.earlyPaymentCycles.value = 0;

      if (policy.contract_allocation_percentage < 100) {
        this.discountRows = [{ 
          key: Date.now(), 
          selectedData: null, 
          customValue: 0,
          basePriceType: 'contract',
          calculatedAmount: 0
        }];
      }
    },

    loadPlansForPolicy(id) {
      const policy = this.policies.find(pol => pol.id === id);
      if (!policy) return;

      this.selectedPolicy = policy;
      this.paymentPlans = this.allPaymentPlans.filter(plan => plan.policy === id);

      if (this.paymentPlans.length > 0) {
        this.calculator.paymentPlan.value = this.paymentPlans.map(p => ({
          cycle: p.cycle,
          value: p.value,
          type: p.type,
          days: p.days,
          payment_note: p.payment_note,
          due_note: p.due_note
        }));
      }
    },

    createTransaction() {
      const invalidRow = this.discountRows.find(r => r.selectedData && r.selectedData.type !== 1 && r.customValue < 1000);
      if (invalidRow) {
        this.$snackbar('Giá trị tiền mặt phải >= 1.000', { type: 'is-warning' });
        return;
      }
      this.showPhaseModal = true;
    },

    handlePhaseSelection(phaseInfo) {
      this.showPhaseModal = false;
      this.selectedPhaseInfo = phaseInfo;
      this.showConfirmModal = true;
    },

    async executeTransactionCreation({ currentDate, dueDate, paymentAmount, depositReceived, people }) {
      this.showConfirmModal = false;

      this.calculator.startDate.value = new Date(currentDate);
      this.calculator.paidAmount.value = 0;

      const finalSchedule = this.calculator.finalPaymentSchedule.value;

      const paymentPlansForBackend = finalSchedule.map((plan, index) => ({
        amount: plan.amount,
        due_days: plan.days,
        cycle: plan.cycle,
        note: plan.payment_note,
        is_early_merged: plan.is_merged || false,
        merged_cycles: plan.is_merged ? (plan.original_cycles || []) : [],
        raw_amount: plan.amount,
        paid_amount: plan.paid_amount,
        remain_amount: plan.remain_amount,
        from_date: dayjs(plan.from_date).format('YYYY-MM-DD'),
        to_date: dayjs(plan.to_date).format('YYYY-MM-DD'),
        due_note: plan.due_note || ''
      }));

      if (paymentPlansForBackend.length > 0) {
        paymentPlansForBackend[0].remain_amount = Math.max(0, paymentPlansForBackend[0].remain_amount - paymentAmount);
        paymentPlansForBackend[0].amount = Math.max(0, paymentPlansForBackend[0].amount - paymentAmount);
      }

      const totalEarlyDiscount = this.enableEarlyPayment
        ? this.calculator.totalEarlyDiscount.value
        : 0;

      const params = {
        product: this.productData,
        customer: this.selectedCustomer,
        policy: this.selectedPolicy,
        phaseInfo: this.selectedPhaseInfo,
        priceAfterDiscount: this.calculator.finalTotal.value,
        discountValue: this.calculator.totalDiscount.value,
        detailedDiscounts: this.calculator.detailedDiscounts.value,
        paymentPlans: paymentPlansForBackend,
        currentDate,
        reservationDueDate: dueDate,
        reservationAmount: paymentAmount,
        depositReceived: depositReceived,
        people: people,
        earlyDiscountAmount: totalEarlyDiscount,
        gifts: this.giftRows.filter(r => r.selectedData).map(r => ({ id: r.selectedData.id, gift_start: r.startDate, gift_end: r.endDate }))  // Danh sách quà tặng
      };

      const result = await this.createFullTransaction(params);

      if (result && result.transaction) {
        this.contractData = result.transaction;
        this.showContractModal = true;
      } else {
        this.$snackbar('Tạo giao dịch thất bại. Vui lòng thử lại.', { type: 'is-danger' });
      }

      this.selectedPhaseInfo = null;
    },

    openContractModal() {
      if (!this.contractData) {
        this.$snackbar('Chưa có dữ liệu hợp đồng để xem.', { type: 'is-warning' });
        return;
      }
      this.showContractModal = true;
    },

    handleContractUpdated(eventData) {
      if (eventData?.data) {
        this.contractData = { ...this.contractData, ...eventData.data };
        this.$snackbar("Hợp đồng đã được cập nhật");
      }
    },

    printContent() {
      if (!this.productData || !this.selectedPolicy) {
        this.$snackbar('Vui lòng tìm sản phẩm và chọn chính sách', { type: 'is-warning' });
        return;
      }
      const docId = 'print-area';
      const fileName = `${this.selectedPolicy?.name || 'Payment Schedule'} - ${this.productData?.code}`;
      const printElement = document.getElementById(docId);
      if (!printElement) return;

      const scheduleContainers = printElement.querySelectorAll('.schedule-container');
      const stickyHeaders = printElement.querySelectorAll('.table-container.schedule-container thead th');
      const ignoreButtons = printElement.querySelectorAll('#ignore-print');
      scheduleContainers.forEach(container => {
        container.style.maxHeight = 'none';
        container.style.overflow = 'visible';
      });
      stickyHeaders.forEach(header => {
        header.style.position = 'static';
      });
      ignoreButtons.forEach(button => {
        button.style.display = 'none';
      });
      this.$exportpdf(docId, fileName, 'a3');
      setTimeout(() => {
        scheduleContainers.forEach(container => {
          container.style.maxHeight = '';
          container.style.overflow = '';
        });
        stickyHeaders.forEach(header => {
          header.style.position = '';
        });
        ignoreButtons.forEach(button => {
          button.style.display = '';
        });
      }, 1200);
      this.$snackbar('Đang xuất PDF...', { type: 'is-info' });
    }
  }
};
</script>

<style scoped>
#customer-selection {
  position: sticky;
  z-index: 5;
  top: 52px;
}

.modal-card-body #customer-selection {
  top: -16px;
}

.button.is-dashed-border {
  border: 1px dashed #b5b5b5;
  transition: all 0.2s;
}

.button.is-dashed-border:hover {
  border-color: #204853;
  color: #204853 !important;
  background-color: #f5f5f5;
}

.schedule-container {
  max-height: 400px;
  overflow-y: auto;
}

.table-container.schedule-container thead th {
  position: sticky;
  top: 0;
  background: white;
  z-index: 2;
  border-bottom: 1px solid #dbdbdb !important;
}

.table-container {
  max-height: 300px;
  overflow-y: auto;
}

li.is-active a,
li a:hover {
  color: white !important;
  background-color: #204853 !important;
  transition: all 0.3s ease;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

@media print {
  .schedule-container {
    max-height: none;
    overflow: visible;
  }

  .table-container.schedule-container thead th {
    position: static;
  }

  #ignore-print {
    display: none !important;
  }
}
</style>