<template>
  <div class="fixed-grid has-12-cols px-3 pb-2">
    <div class="grid m-0">
      <div class="cell is-col-span-8">
        <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', 'zone_type__name'],
          column: ['code', 'trade_code', 'type__name', 'land_lot_size', 'status__name'],
          first: true,
          filter: {
            prdbk__transaction__txncurrent__detail__phase__id: filterStatus,
            prdbk__transaction__txncurrent__detail__status__id: 3
          },
          viewaddon: productViewAddon,
        }" @option="handleProductSelection" />
      </div>
      <div class="cell is-col-span-4 is-flex is-align-items-flex-end">
        <div class="w-full is-flex is-gap-2">
          <button v-if="success" class="button is-info has-text-white" style="flex: 1;" @click="openContractModal">
            <span>Xem hợp đồng</span>
          </button>
          <button v-if="!success && $getEditRights()" class="button is-primary has-text-white" style="flex: 1;"
            :class="{ 'is-loading': isAdvancing }" @click="confirmAdvancePhase" :disabled="!transactionData">
            Chuyển tiếp
          </button>
        </div>
      </div>
    </div>

    <div v-if="transactionData" class="mt-4">
      <div class="columns is-multiline ">
        <div class="column is-6">
          <div class="box p-0 has-background-white">
            <div class="p-4 has-background-primary">
              <p class="title is-5 has-text-white">Thông tin Sản phẩm</p>
            </div>
            <div class="content p-4">
              <div class="columns is-multiline is-mobile">
                <div class="column is-6">
                  <p class="has-text-primary is-size-7 mb-1">Mã sản phẩm</p>
                  <p class="has-text-weight-bold has-text-primary is-clickable is-size-6 icon-text"
                    @click="$copyToClipboard(selectedProduct.trade_code)">
                    <span>{{ selectedProduct.trade_code }}</span>
                    <span class="icon is-small ml-1">
                      <SvgIcon name="copy.svg" type="primary" :size="14" />
                    </span>
                  </p>
                </div>
                <div class="column is-6">
                  <p class="has-text-primary is-size-7 mb-1">Loại</p>
                  <p class="has-text-weight-semibold is-size-6">{{ selectedProduct.type__name }}</p>
                </div>
                <div class="column is-6">
                  <p class="has-text-primary is-size-7 mb-1">Diện tích đất</p>
                  <p class="has-text-weight-semibold is-size-6">{{ $numtoString(selectedProduct.lot_area) }} m²</p>
                </div>
                <div class="column is-6">
                  <p class="has-text-primary is-size-7 mb-1">Phân khu</p>
                  <p class="has-text-weight-semibold is-size-6">{{ selectedProduct.zone_type__name }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="column is-6">
          <div class="box p-0 has-background-white">
            <div class="p-4 has-background-primary is-flex is-justify-content-space-between is-align-items-center">
              <p class="title is-5 has-text-white m-0">Thông tin Khách hàng</p>
              <button 
                v-if="!isEditingCustomer && currentPhaseType!='dowill' && $getEditRights()" 
                class="button is-light py-1 px-2" 
                @click="isEditingCustomer = true" 
                :disabled="!transactionData || isUpdatingCustomer"
              >
                <span class="fs-16">Đổi khách hàng</span>
              </button>
            </div>
            <div class="content p-4">
              <div v-if="!isEditingCustomer">
                <div class="columns is-multiline is-mobile">
                  <div class="column is-6">
                    <p class="has-text-primary is-size-7 mb-1">Mã khách hàng</p>
                    <p class="has-text-weight-bold has-text-primary is-clickable is-size-6" @click="showCustomerDetails">{{ transactionData.customer__code }}</p>
                  </div>
                  <div class="column is-6">
                    <p class="has-text-primary is-size-7 mb-1">Số điện thoại</p>
                    <p class="has-text-weight-bold has-text-primary is-clickable is-size-6" @click="$copyToClipboard(transactionData.customer__phone)">{{ transactionData.customer__phone }}</p>
                  </div>
                  <div class="column is-6">
                    <p class="has-text-primary is-size-7 mb-1">Họ và tên</p>
                    <p class="has-text-weight-bold">{{ transactionData.customer__fullname }}</p>
                  </div>
                  <div class="column is-6">
                    <p class="has-text-primary is-size-7 mb-1">{{ transactionData.customer__legal_type__name }}</p>
                    <p class="has-text-weight-bold has-text-primary is-clickable is-size-6" @click="$copyToClipboard(transactionData.customer__legal_code)">{{ transactionData.customer__legal_code }}</p>
                  </div>
                </div>
                <div v-if="coOwner" class="mt-4 pt-4" style="border-top: 1px solid #dbdbdb;">
                  <p class="has-text-weight-bold">Người đồng sở hữu</p>
                  <div class="columns is-multiline is-mobile">
                    <div class="column is-6">
                      <p class="has-text-primary is-size-7 mb-1">Họ và tên</p>
                      <p class="has-text-weight-bold">{{ coOwner.people__fullname }}</p>
                    </div>
                    <div class="column is-6">
                      <p class="has-text-primary is-size-7 mb-1">Số điện thoại</p>
                      <p class="has-text-weight-bold has-text-primary">{{ coOwner.people__phone }}</p>
                    </div>
                  </div>
                </div>
              </div>

              <div v-else>
                <p class="has-text-weight-bold mb-2">Chọn khách hàng mới để thay thế</p>
                <SearchBox v-bind="{
                  api: 'customer',
                  field: 'label',
                  searchfield: ['code', 'fullname', 'phone', 'legal_code'],
                  column: ['code', 'fullname', 'phone', 'legal_code'],
                  first: true,
                  clearable: true,
                  viewaddon: customerViewAddon,
                  addon: customerViewAdd
                }" @option="handleNewCustomerSelected" />
                
                <hr>

                <div v-if="transactionData">
                  <p class="has-text-weight-bold mb-2">Quản lý đồng sở hữu</p>
                  
                  <div v-if="(pendingCoOwner?.action === 'add') || (coOwner && pendingCoOwner?.action !== 'remove')" class="mt-2 pt-2">
                      <div class="level is-mobile mb-2">
                          <div class="level-left">
                              <p class="has-text-weight-semibold">
                                {{ pendingCoOwner?.action === 'add' ? pendingCoOwner.data.people__fullname : coOwner.people__fullname }}
                              </p>
                          </div>
                          <div class="level-right">
                              <button class="delete is-small" @click="confirmRemoveCoOwner" title="Xóa người đồng sở hữu"></button>
                          </div>
                      </div>
                  </div>

                  <div v-if="(!coOwner && !pendingCoOwner) || (pendingCoOwner?.action === 'remove')" class="mt-2">
                      <div v-if="newCustomer ? newCustomer.type === 1 : transactionData.customer__type === 1">
                        <SearchBox
                            :key="coOwnerSearchBoxKey"
                            :vdata="relatedPeople"
                            field="people__fullname"
                            :column="['people__code', 'people__fullname']"
                            first="true"
                            clearable="true"
                            :placeholder="'Thêm đồng sở hữu...'"
                            @option="handleCoOwnerPersonSelected"
                        />
                      </div>
                       <p v-else class="is-size-7 has-text-grey">Chỉ khách hàng cá nhân mới có thể thêm đồng sở hữu.</p>
                  </div>
                </div>

                <div class="buttons is-right mt-5">
                  <button class="button is-light" @click="cancelCustomerEdit">Hủy</button>
                  <button class="button is-primary" @click="executeCustomerUpdate" :disabled="!newCustomer || isUpdatingCustomer" :class="{'is-loading': isUpdatingCustomer}">Xác nhận</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="has-background-white p-5">
        <div class="level is-mobile mb-4">
          <div class="level-left">
            <p class="title is-5 has-text-primary">
              <span class="icon-text"><span>Thông tin Giao dịch & Giá</span></span>
            </p>
          </div>
          <div class="level-right">
            <button v-if="canEditPolicy && !isEditingPolicy && !success && $getEditRights()" class="button is-info"
              @click="enablePolicyEdit" :disabled="isUpdatingPolicy">
              <span class="icon"><SvgIcon name="pen1.svg" type="white" :size="16" /></span>
              <span>Sửa chính sách</span>
            </button>
            <div v-if="isEditingPolicy" class="buttons">
              <button class="button is-light" @click="cancelPolicyEdit">Hủy</button>
            </div>
          </div>
        </div>

        <div v-if="isEditingPolicy" class="has-background-white p-5 mb-5">
          <div v-if="['purchase', 'dowill', 'deposit'].includes(currentPhaseType)" class="mb-5">
            <p class="is-size-6 has-text-weight-bold mb-2">Chọn chính sách bán hàng</p>
            <div class="tabs is-toggle">
              <ul>
                <li v-for="policy in filteredPolicies" :key="policy.id"
                  :class="{ 'is-primary': selectedNewPolicy?.id === policy.id }">
                  <a @click="handlePolicySelect(policy)">
                    <span>{{ policy.name }}</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>

          <div v-if="currentPhaseType !== 'deposit'" class="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>
                  
                  <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" :class="row.selectedData?.type === 1 ? 'is-4' : 'is-5'">
                    <div class="control has-icons-right">
                      <input 
                        class="input has-text-centered has-text-weight-bold" 
                        type="text"
                        :value="isDiscountInputFocused ? row.customValue : $numtoString(row.customValue)"
                        @input="(e) => validateRowValue(e, index)" 
                        @focus="isDiscountInputFocused = true"
                        @blur="isDiscountInputFocused = false"
                        placeholder="0"
                        :disabled="!row.selectedData">
                      <span v-if="row.selectedData" class="icon is-right has-text-grey is-size-7">
                        {{ row.selectedData.type === 1 ? '%' : 'đ' }}
                      </span>
                    </div>
                  </div>
                  
                  <button class="column is-auto button is-warning" @click="removeDiscountRow(index)">
                    <SvgIcon v-bind="{ name: 'bin1.svg', type: 'white', size: 16 }"></SvgIcon>
                  </button>
                </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>

          <div class="px-3 mb-3">
            <div class="columns">
              <div class="column is-3">
                <div class="field">
                  <label class="label">Ngày ký hợp đồng mới</label>
                  <Datepicker :record="dateRecord" attr="contractDate" @date="updateContractDate" position="is-top-right" />
                </div>
              </div>
            </div>
          </div>

          <div v-if="selectedNewPolicy && selectedNewPolicy.contract_allocation_percentage == 100 && selectedNewPolicy.method === 1" class="px-3 mb-5 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 }}) kỳ
                  </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>
                <p class="help">Gộp {{ earlyPaymentCycles }} đợt đầu thành 1 với chiết khấu 0.019%/ngày</p>
              </div>
            </transition>
          </div>

          <PaymentSchedulePresentation
            ref="schedulePresentationRef"
            v-if="selectedNewPolicy"
            :productData="productDataForSchedule"
            :selectedPolicy="selectedNewPolicy"
            :selectedCustomer="selectedCustomer"
            :calculatorData="calculationResult"
            :baseDate="transactionData.create_time"
            :isLoading="isUpdatingPolicy"
            @print="printContent"
          />
        </div>

        <div class="columns is-multiline">
          <div class="column is-3">
            <p class="has-text-primary is-size-7 mb-1">Mã giao dịch</p>
            <p class="has-text-weight-bold has-text-primary is-clickable is-size-6 icon-text"
              @click="$copyToClipboard(transactionData.code)">
              <span>{{ transactionData.code }}</span>
              <span class="icon is-small ml-1"><SvgIcon name="copy.svg" type="primary" :size="14" /></span>
            </p>
          </div>
          <div class="column is-3">
            <p class="has-text-primary is-size-7 mb-1">Giai đoạn hiện tại</p>
            <p><span class="tag is-primary is-medium is-rounded">{{ transactionData.phase__name }}</span></p>
          </div>
          <div class="column is-3">
            <p class="has-text-primary is-size-7 mb-1">Chính sách bán hàng</p>
            <p class="has-text-weight-semibold is-size-6">{{ currentPolicyName }}</p>
          </div>
          <div class="column is-3">
            <p class="has-text-primary is-size-7 mb-1">Ngày ký văn bản</p>
            <p class="has-text-weight-semibold is-size-6">{{ formatDate(transactionData.date) }}</p>
          </div>
        </div>
        <hr class="has-background-primary">
        <div class="columns is-multiline">
          <div class="column is-3">
            <p class="has-text-primary mb-1">Giá gốc</p>
            <p class="title is-5 has-text-primary-dark">{{ $numtoString(transactionData.origin_price) }} đ</p>
          </div>
          <div class="column is-3">
            <p class="has-text-primary mb-1">Chiết khấu</p>
            <p class="title is-5 has-text-danger" v-if="calculationResult? calculationResult.totalDiscount>0 : false">
              -{{ $numtoString(isEditingPolicy ? calculationResult.totalDiscount : transactionData.discount_amount) }} đ
            </p>
          </div>
          <div class="column is-3">
            <p class="has-text-primary mb-1">Giá hợp đồng</p>
            <p class="title is-3 has-text-primary has-text-weight-bold">{{ $numtoString(isEditingPolicy ? calculationResult.salePrice : transactionData.sale_price) }} đ</p>
          </div>
          <div class="column is-3">
            <p class="has-text-primary mb-1">Tổng đã nhận</p>
            <p class="title is-5 has-text-success">{{ $numtoString(transactionData.amount_received) }} đ</p>
          </div>
        </div>
      </div>
    </div>

    <div v-if="!selectedProduct && !isLoading" class="has-text-centered py-6">
      <p class="mb-4"><span class="icon has-text-primary"><SvgIcon name="info.svg" type="primary" :size="64" /></span></p>
      <p class="title is-4 has-text-primary">Vui lòng chọn sản phẩm đang giữ chỗ</p>
      <p class="subtitle is-6 has-text-primary">Để xem thông tin chi tiết và chuyển giai đoạn</p>
    </div>

    <div v-if="isLoading" class="has-text-centered py-6">
      <button class="button is-primary is-loading is-large"></button>
      <p class="mt-4 has-text-primary has-text-weight-semibold">Đang tải thông tin...</p>
    </div>

    <div v-if="error" class="notification is-danger is-light mt-4">
      <button class="delete" @click="error = null"></button>
      <strong>Lỗi:</strong> {{ error }}
    </div>

    <Modal @close="showmodal = undefined" v-bind="showmodal" @confirm="showmodal.onConfirm" v-if="showmodal" />
    <Modal v-if="showContractModal" @close="showContractModal = false" @dataevent="handleContractUpdated" v-bind="contractModalConfig" />
    <Modal v-if="customerModal" @close="customerModal = null" v-bind="customerModal" />
  </div>
</template>

<script setup>
import { ref, computed, watch, nextTick } from 'vue';
import { useStore } from "@/stores/index";
import { useAdvancedWorkflow } from '@/composables/useAdvancedWorkflow';
import { usePaymentCalculator } from '~/composables/usePaymentCalculator';
import SearchBox from '~/components/SearchBox.vue';
import Modal from '~/components/Modal.vue';
import SvgIcon from '~/components/SvgIcon.vue';
import PaymentSchedulePresentation from './PaymentSchedulePresentation.vue';
import Datepicker from '~/components/datepicker/Datepicker.vue';
import dayjs from 'dayjs';

const store = useStore();
const { $getdata, $snackbar, $copyToClipboard, $patchapi, $insertapi, $deleteapi, $exportpdf, $numtoString } = useNuxtApp();
const { advanceTransactionPhase } = useAdvancedWorkflow();

const calculator = usePaymentCalculator();

// State
const selectedProduct = ref(null);
const transactionData = ref(null);
const paymentScheduleData = ref(null);
const isLoading = ref(false);
const isAdvancing = ref(false);
const success = ref(null);
const error = ref(null);
const productViewAddon = {
  component: "product/ProductView",
  width: "70%",
  height: "500px",
  title: "Thông tin sản phẩm",
};
const showmodal = ref(null);
const showContractModal = ref(false);
const createdContractId = ref(null);
const customerModal = ref(null);
const isEditingCustomer = ref(false);
const isUpdatingCustomer = ref(false);
const newCustomer = ref(null);

const policies = ref([]);
const allPaymentPlans = ref([]);
const selectedNewPolicy = ref(null);
const selectedNewPolicyId = ref(null);
const isEditingPolicy = ref(false);
const isUpdatingPolicy = ref(false);

const coOwner = ref(null);
const relatedPeople = ref([]);
const coOwnerSearchBoxKey = ref(0);
// --- NEW STATE: Stores pending changes { action: 'add'|'remove', data: personObj }
const pendingCoOwner = ref(null);

const discountRows = ref([{ 
  key: Date.now(), 
  selectedData: null, 
  customValue: 0,
  basePriceType: 'contract', 
  calculatedAmount: 0 
}]);

const isDiscountInputFocused = ref(false);
const draggedIndex = ref(null);
const schedulePresentationRef = ref(null);

const contractDate = ref(dayjs().format('YYYY-MM-DD'));
const dateRecord = ref({ contractDate: contractDate.value });
const enableEarlyPayment = ref(false);
const earlyPaymentCycles = ref(2);

// Addons
const customerViewAddon = {
  component: "customer/CustomerView",
  width: "70%",
  height: "500px",
  title: "Thông tin khách hàng",
};
const customerViewAdd = {
  component: "customer/CustomerInfo2",
  width: "60%",
  height: "600px",
  title: "Tạo / Chỉnh sửa khách hàng",
};

// Computed
const activeTabInfo = computed(() => {
  const tabinfo = store.tabinfo;
  let tab = null, subtab = null;
  if (tabinfo) {
    tab = tabinfo.tab?.code || tabinfo.vbind?.tab;
    subtab = tabinfo.subtab?.code || tabinfo.vbind?.subtab;
  }
  return { tab, subtab };
});

const maxEarlyCycles = computed(() => {
  return calculator.paymentPlan.value?.length || 0;
});

const currentPhaseType = computed(() => {
  const { tab, subtab } = activeTabInfo.value;
  if (tab === 'calculation' && subtab === 'deposit') return 'deposit';
  if (tab === 'calculation' && subtab === 'dowill') return 'dowill';
  if (tab === 'calculation' && subtab === 'purchase') return 'purchase';
  return null;
});

const filterStatus = computed(() => {
  const { subtab } = activeTabInfo.value;
  if (subtab === 'deposit') return 1;
  if (subtab === 'dowill') return 4;
  if (subtab === 'purchase') return 2;
});

const canEditPolicy = computed(() => ['deposit', 'dowill', 'purchase'].includes(currentPhaseType.value));

const contractModalConfig = computed(() => ({
  component: "application/Contract",
  title: "Hợp đồng",
  width: "90%",
  height: "90vh",
  vbind: { row: { id: createdContractId.value } },
  event: "contractUpdated",
  eventname: "dataevent",
}));

const currentPolicyName = computed(() => {
  if (isEditingPolicy.value && selectedNewPolicy.value) {
    return selectedNewPolicy.value.name;
  }
  return transactionData.value?.policy__name || '-';
});

const productDataForSchedule = computed(() => {
  if (!selectedProduct.value) return null;
  return {
    ...selectedProduct.value,
    origin_price: transactionData.value?.origin_price || selectedProduct.value.origin_price
  };
});

const selectedCustomer = computed(() => {
  if (!transactionData.value) return null;
  return {
    code: transactionData.value.customer__code,
    fullname: transactionData.value.customer__fullname
  };
});

const calculationResult = computed(() => ({
  originPrice: calculator.originPrice?.value || 0,
  totalDiscount: calculator.totalDiscount?.value || 0,
  salePrice: calculator.finalTotal.value,
  allocatedPrice: calculator.allocatedAmount?.value ?? (calculator.salePrice?.value || 0),
  originalPaymentSchedule: calculator.originalPaymentSchedule?.value || [],
  finalPaymentSchedule: calculator.finalPaymentSchedule?.value || [],
  earlyDiscountDetails: calculator.earlyDiscountDetails?.value || [],
  totalRemaining: calculator.totalRemaining?.value || 0,
  detailedDiscounts: calculator.detailedDiscounts.value,
  baseDate: calculator.startDate?.value
}));

const filteredPolicies = computed(() => {
  if (!policies.value?.length) return [];
  if (currentPhaseType.value === 'deposit') {
    return policies.value.filter(p => p.id === 15);
  }
  const currentPolicyId = transactionData.value?.policy;
  switch (currentPhaseType.value) {
    case 'dowill':
      return policies.value.filter(p => p.id !== (currentPolicyId || 15));
    case 'purchase':
      return policies.value.filter(p => p.id !== 15);
    default:
      return [];
  }
});

// Watchers
watch(discountRows, () => {
  calculator.discounts.value = discountRows.value
    .filter(row => row.selectedData)
    .map(row => {
      if (row.selectedData.type === 1) {
        let basePrice = 0;
        switch (row.basePriceType) {
          case 'with_vat':
            basePrice = transactionData.value?.origin_price || selectedProduct.value?.origin_price || 0;
            break;
          case 'without_vat':
            basePrice = selectedProduct.value?.price_excluding_vat || 
                       (transactionData.value?.origin_price || selectedProduct.value?.origin_price || 0) / 1.1;
            break;
          case 'contract':
          default:
            return {
              id: row.selectedData.id,
              name: row.selectedData.name,
              code: row.selectedData.code,
              type: row.selectedData.type,
              value: row.customValue || 0
            };
        }
        
        const calculatedAmount = (basePrice * (row.customValue || 0)) / 100;
        row.calculatedAmount = calculatedAmount;
        
        return {
          id: row.selectedData.id,
          name: `${row.selectedData.name} (${row.basePriceType === 'with_vat' ? 'Giá đã VAT' : 'Giá chưa VAT'})`,
          code: row.selectedData.code,
          type: 2,
          value: Math.round(calculatedAmount)
        };
      } else {
        row.calculatedAmount = 0;
        return {
          id: row.selectedData.id,
          name: row.selectedData.name,
          code: row.selectedData.code,
          type: row.selectedData.type,
          value: row.customValue || 0
        };
      }
    });
}, { deep: true });

watch(selectedNewPolicy, (policy) => {
  if (!policy) return;
  const plans = allPaymentPlans.value.filter(p => p.policy === policy.id);
  if (plans.length > 0) {
    plans.sort((a, b) => a.cycle - b.cycle);
    calculator.paymentPlan.value = plans.map(p => ({
      cycle: p.cycle,
      value: p.value,
      type: p.type,
      days: p.days || 0,
      payment_note: p.payment_note,
      due_note: p.due_note || ''
    }));
  }
  calculator.contractAllocationPercentage.value = policy.contract_allocation_percentage || 100;
});

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

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

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

// Methods

async function handleProductSelection(product) {
  selectedProduct.value = null;
  transactionData.value = null;
  error.value = null;
  success.value = null;
  createdContractId.value = null;
  showmodal.value = null;
  isEditingPolicy.value = false;
  selectedNewPolicy.value = null;
  discountRows.value = [{ 
    key: Date.now(), 
    selectedData: null, 
    customValue: 0,
    basePriceType: 'contract',
    calculatedAmount: 0
  }];
  enableEarlyPayment.value = false;
  earlyPaymentCycles.value = 2;
  contractDate.value = dayjs().format('YYYY-MM-DD');
  dateRecord.value.contractDate = contractDate.value;
  isEditingCustomer.value = false;
  coOwner.value = null;
  relatedPeople.value = [];
  pendingCoOwner.value = null; // Reset pending
  coOwnerSearchBoxKey.value++;

  if (!product?.id) return;

  isLoading.value = true;
  try {
    const fullProduct = await $getdata('product', { id: product.id }, undefined, true);
    if (!fullProduct) throw new Error('Không tìm thấy thông tin chi tiết sản phẩm.');

    selectedProduct.value = fullProduct;
    const transactionId = fullProduct.prdbk__transaction;
    if (!transactionId) throw new Error('Sản phẩm này không có giao dịch liên kết.');

    const transaction = await $getdata('transaction', { id: transactionId }, undefined, true);
    if (!transaction) throw new Error('Không tìm thấy thông tin giao dịch.');

    transactionData.value = transaction;

    const paymentSchedule = await $getdata('payment_schedule', undefined, {
      values: 'txn_detail__transaction__product__trade_code',
      filter: {
        txn_detail__transaction__product__trade_code: product.trade_code
      },
      distinct_values: {
        sum_remain_amount: {
          type: "Sum",
          field: "remain_amount"
        }
      },
      summary: 'annotate',
    }, true);
    if (!paymentSchedule) throw new Error('Không tìm thấy thông tin lịch thanh toán.');
    paymentScheduleData.value = paymentSchedule;

    if (paymentSchedule.sum_remain_amount > 0) throw new Error(`Sản phẩm chưa hoàn tất các lịch thanh toán (còn ${$numtoString(paymentSchedule.sum_remain_amount)} đ).`)

    const coOwnerData = await $getdata('co_op', { transaction: transaction.id }, undefined, true);
    if (coOwnerData) {
      coOwner.value = coOwnerData;
    }

    if (transaction.customer__type === 1) { // Only for individuals
      const people = await $getdata('customerpeople', { customer: transaction.customer });
      relatedPeople.value = Array.isArray(people) ? people : (people ? [people] : []);
    }

    await loadPoliciesAndPlans();

    const initialDate = new Date(transaction.create_time || Date.now());
    calculator.originPrice.value = transaction.origin_price || 0;
    calculator.discounts.value = [];
    calculator.paymentPlan.value = [];
    calculator.contractAllocationPercentage.value = 100;
    calculator.startDate.value = initialDate;
    calculator.paidAmount.value = transaction.amount_received || 0;
    calculator.earlyPaymentCycles.value = 0;
    
    contractDate.value = dayjs(initialDate).format('YYYY-MM-DD');
    dateRecord.value.contractDate = contractDate.value;

  } catch (e) {
    error.value = e.message || 'Lỗi khi tải thông tin giao dịch.';
    $snackbar(error.value, { type: 'is-danger' });
  } finally {
    isLoading.value = false;
  }
}

async function loadPoliciesAndPlans() {
  try {
    policies.value = await $getdata("salepolicy", { enable: "True" }, undefined, false);
    const plans = await $getdata("paymentplan", { policy__enable: "True" }, undefined, false);
    if (plans) {
      plans.sort((a, b) => a.cycle - b.cycle);
      allPaymentPlans.value = plans;
    }
  } catch (err) {
    console.error('Error loading policies and plans:', err);
  }
}

function handlePolicySelect(policy) {
  selectedNewPolicy.value = policy;
  selectedNewPolicyId.value = policy ? policy.id : null;

  const plans = allPaymentPlans.value.filter(p => p.policy === policy.id);
  if (plans.length > 0) {
    plans.sort((a, b) => a.cycle - b.cycle);
    calculator.paymentPlan.value = plans.map(p => ({
      cycle: p.cycle,
      value: p.value,
      type: p.type,
      days: p.days || 0,
      payment_note: p.payment_note,
      due_note: p.due_note || ''
    }));
  }
  calculator.contractAllocationPercentage.value = policy.contract_allocation_percentage || 100;
  
  enableEarlyPayment.value = false;
  earlyPaymentCycles.value = 2;
}

function enablePolicyEdit() {
  isEditingPolicy.value = true;
  discountRows.value = [{ 
    key: Date.now(), 
    selectedData: null, 
    customValue: 0,
    basePriceType: 'contract',
    calculatedAmount: 0
  }];

  selectedNewPolicy.value = null;
  selectedNewPolicyId.value = null;

  calculator.originPrice.value = transactionData.value?.origin_price || 0;
  const initialDate = new Date(transactionData.value.create_time || Date.now());
  calculator.startDate.value = initialDate;
  contractDate.value = dayjs(initialDate).format('YYYY-MM-DD');
  dateRecord.value.contractDate = contractDate.value;

  if (currentPhaseType.value === 'deposit') {
    const policy15 = filteredPolicies.value.find(p => p.id === 15);
    if (policy15) {
      handlePolicySelect(policy15);
    }
  } else {
    const currentPolicy = policies.value.find(p => p.id === transactionData.value.policy);
    if (currentPolicy) {
      handlePolicySelect(currentPolicy);
    }
  }
}

function cancelPolicyEdit() {
  isEditingPolicy.value = false;
  selectedNewPolicy.value = null;
  discountRows.value = [{ 
    key: Date.now(), 
    selectedData: null, 
    customValue: 0,
    basePriceType: 'contract',
    calculatedAmount: 0
  }];
  enableEarlyPayment.value = false;
  earlyPaymentCycles.value = 2;
}

async function executePolicyUpdate() {
  showmodal.value = null;
  isUpdatingPolicy.value = true;
  error.value = null;
  try {
    const calcResult = calculationResult.value;
    const isEarlyPaymentActive = isEditingPolicy.value && enableEarlyPayment.value;

    let plansForApi = calcResult.finalPaymentSchedule;

    const paymentPlanData = plansForApi.map(plan => ({
      amount: plan.amount || 0,
      due_days: plan.days || plan.cycle_days || 0,
      cycle: String(plan.cycle || 1),
      note: plan.payment_note,
      is_early_merged: plan.is_merged || false,
      merged_cycles: plan.is_merged ? (plan.original_cycles || []) : [],
      raw_amount: plan.amount || 0,
      status: plan.status || 1,
      paid_amount: plan.paid_amount || 0,
      remain_amount: plan.remain_amount || 0,
      from_date: plan.from_date instanceof Date ? plan.from_date.toISOString().split('T')[0] : (plan.from_date || ''),
      to_date: plan.to_date instanceof Date ? plan.to_date.toISOString().split('T')[0] : (plan.to_date || ''),
      due_note: plan.due_note || ''
    }));

    const totalEarlyDiscount = isEarlyPaymentActive
        ? calculator.totalEarlyDiscount.value
        : 0;

    const patchData = {
      id: transactionData.value.id,
      policy: selectedNewPolicy.value.id,
      payment_plan: paymentPlanData,
      date: contractDate.value,
      discounts: calcResult.detailedDiscounts.map(d => ({
        discount: d.id,
        type: d.customType,
        value: d.customValue
      })),
      sale_price: calcResult.salePrice,
      discount_amount: calcResult.totalDiscount,
      early_discount_amount: parseInt(totalEarlyDiscount),
      contract_sign_date: contractDate.value
    };

    const result = await $patchapi('transaction', patchData);
    if (!result) throw new Error('Cập nhật chính sách thất bại.');

    transactionData.value = await $getdata('transaction', { id: transactionData.value.id }, undefined, true);
    $snackbar('Đã cập nhật chính sách thành công.', { type: 'is-success' });
    isEditingPolicy.value = false;
    selectedNewPolicy.value = null;
  } catch (e) {
    error.value = e.message || 'Lỗi khi cập nhật chính sách.';
    $snackbar(error.value, { type: 'is-danger' });
  } finally {
    isUpdatingPolicy.value = false;
  }
}

function confirmAdvancePhase() {
  const tx = transactionData.value;
  if (tx?.txncurrent__detail__amount_remaining > 0) {
    return $snackbar('Khách hàng chưa thanh toán số tiền yêu cầu', { type: 'is-warning' });
  }
  if (paymentScheduleData.value.sum_remain_amount > 0) {
    return $snackbar(`Sản phẩm chưa hoàn tất các lịch thanh toán (còn ${$numtoString(paymentScheduleData.value.sum_remain_amount)} đ).`);
  }
  if (currentPhaseType.value === 'deposit' && tx.policy !== 15 && !isEditingPolicy.value) {
    return $snackbar('Phải đổi sang chính sách THNV trước khi chuyển tiếp giai đoạn', { type: 'is-warning' });
  }
  if (currentPhaseType.value === 'dowill' && tx.policy === 15 && !isEditingPolicy.value) {
    return $snackbar('Phải chọn chính sách thanh toán cho giai đoạn tiếp theo', { type: 'is-warning' });
  }
  if (isEditingPolicy.value && !selectedNewPolicy.value) {
    return $snackbar('Vui lòng chọn chính sách thanh toán mới', { type: 'is-warning' });
  }

  showmodal.value = {
    component: 'dialog/Confirm',
    title: 'Xác nhận chuyển giai đoạn',
    width: '600px',
    height: '150px',
    vbind: { content: `Xác nhận chuyển giai đoạn cho giao dịch: ${tx?.code}?` },
    onConfirm: handleConfirmAdvance
  };
}

async function handleConfirmAdvance() {
  if (isEditingPolicy.value) {
    await executePolicyUpdate();
  }
  await executeAdvancePhase();
}

async function executeAdvancePhase() {
  isAdvancing.value = true;
  error.value = null;
  try {
    if (!transactionData.value?.id) throw new Error('Thông tin giao dịch không đầy đủ.');

    const apiDetail = await $getdata('reservation', {
      transaction: transactionData.value.id,
      phase: transactionData.value.phase,
      status: 3
    }, undefined, true);

    if (!apiDetail?.id) throw new Error('Không tìm thấy chi tiết giao dịch hợp lệ để chuyển giai đoạn.');

    const result = await advanceTransactionPhase(apiDetail.id);
    if (!result) throw new Error('Thực hiện chuyển giai đoạn thất bại.');

    success.value = true;
    $snackbar('Chuyển giai đoạn thành công!', { type: 'is-success' });
    createdContractId.value = result.contract;
    showContractModal.value = true;
  } catch (e) {
    error.value = e.message;
    $snackbar(error.value, { type: 'is-danger' });
  } finally {
    isAdvancing.value = false;
  }
}

function openContractModal() {
  showContractModal.value = true;
}

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

function formatDate(dateString) {
  if (!dateString) return '-';
  return dayjs(dateString).format('DD/MM/YYYY');
}

function showCustomerDetails() {
  if (!transactionData.value?.customer) return;
  customerModal.value = {
    ...customerViewAddon,
    vbind: {row: { id: transactionData.value.customer }}
  };
}

// --- MODIFIED: Load related people immediately for NEW customer ---
async function handleNewCustomerSelected(customer) {
  newCustomer.value = customer;
  pendingCoOwner.value = null;
  relatedPeople.value = [];
  
  if (customer && customer.type === 1) {
    try {
      const people = await $getdata('customerpeople', { customer: customer.id });
      relatedPeople.value = Array.isArray(people) ? people : (people ? [people] : []);
    } catch (e) {
      console.error("Error loading related people", e);
      $snackbar('Không thể tải danh sách người thân.', { type: 'is-danger' });
    }
  }
  coOwnerSearchBoxKey.value++; 
}

// --- MODIFIED: Store local pending state only ---
function handleCoOwnerPersonSelected(person) {
  if (!person || !person.people) return;

  pendingCoOwner.value = {
    action: 'add',
    data: {
      people__fullname: person.people__fullname,
      people__phone: person.people__phone,
      people: person.people,
    }
  };
}

// --- MODIFIED: Mark for local removal ---
function confirmRemoveCoOwner() {
  if (pendingCoOwner.value?.action === 'add') {
    pendingCoOwner.value = null;
    return;
  }
  pendingCoOwner.value = { action: 'remove' };
}

// --- MODIFIED: Batch Update (Clean old -> Update Tx -> Add new) ---
async function executeCustomerUpdate() {
  if (!transactionData.value || !newCustomer.value) return;
  isUpdatingCustomer.value = true;
  error.value = null;
  
  try {
    // 1. Remove old co-owner from DB if exists
    if (coOwner.value) {
      await $deleteapi('co_op', coOwner.value.id);
      coOwner.value = null;
    }

    // 2. Update Transaction with new customer
    const result = await $patchapi('transaction', {
      id: transactionData.value.id,
      customer: newCustomer.value.id
    });

    if (result && result !== 'error') {
       // 3. Add new co-owner if pending
       if (pendingCoOwner.value?.action === 'add') {
          await $insertapi('co_op', {
            transaction: transactionData.value.id,
            people: pendingCoOwner.value.data.people
          });
       }

      $snackbar('Đã cập nhật thông tin thành công.', { type: 'is-success' });
      isEditingCustomer.value = false;
      newCustomer.value = null;
      pendingCoOwner.value = null;
      
      // Refresh all data
      if (selectedProduct.value) {
        await handleProductSelection(selectedProduct.value);
      }
    } else {
      throw new Error('Cập nhật khách hàng thất bại.');
    }
  } catch (e) {
    error.value = e.message || 'Lỗi khi cập nhật khách hàng.';
    $snackbar(error.value, { type: 'is-danger' });
  } finally {
    isUpdatingCustomer.value = false;
  }
}

// --- ADDED: Reset State on Cancel ---
function cancelCustomerEdit() {
    isEditingCustomer.value = false; 
    newCustomer.value = null;
    pendingCoOwner.value = null;
}

// ... (Rest of existing methods: handleRowSelect, recalculateDiscount, etc. keep same) ...

function handleRowSelect(index, data) {
  const row = discountRows.value[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';
      recalculateDiscount(index);
    } else {
      row.calculatedAmount = 0;
    }
  }
}

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

function validateRowValue(e, index) {
  const row = discountRows.value[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;
    recalculateDiscount(index);
  } else {
    if (row.customValue < 0) row.customValue = 0;
  }
}

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

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

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

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

function drop(e) {
  e.preventDefault();
  const dropIdx = parseInt(e.currentTarget.getAttribute('data-index'));
  if (draggedIndex.value !== null && draggedIndex.value !== dropIdx) {
    const draggedRow = discountRows.value[draggedIndex.value];
    discountRows.value.splice(draggedIndex.value, 1);
    discountRows.value.splice(dropIdx, 0, draggedRow);
  }
  document.querySelectorAll('[data-index]').forEach(row => {
    row.style.borderTop = '';
    row.style.opacity = '1';
  });
}

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

function updateContractDate(newDate) {
  contractDate.value = newDate;
  dateRecord.value.contractDate = newDate;
}

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

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

async function printContent() {
  if (!selectedProduct.value || !selectedNewPolicy.value) {
    $snackbar('Vui lòng chọn sản phẩm và chính sách mới', { type: 'is-warning' });
    return;
  }

  await nextTick();

  const docId = 'print-area';
  const fileName = `${selectedNewPolicy.value?.name || 'Payment Schedule'} - ${selectedProduct.value?.code}`;
  const printElement = document.getElementById(docId);
  if (!printElement) {
    $snackbar('Không tìm thấy vùng nội dung để in.', { type: 'is-danger' });
    return;
  }

  const scheduleContainers = printElement.querySelectorAll('.schedule-container, .table-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';
  });
  
  $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);
  
  $snackbar('Đang xuất PDF...', { type: 'is-info' });
}
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>