<template>
  <q-dialog :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)" persistent>
    <q-card style="width:700px;max-width:95vw">
      <!-- Header -->
      <q-card-section class="row items-center q-pb-sm" style="border-bottom:1px solid var(--ops-border, #e2e8f0)">
        <div class="col">
          <div class="text-subtitle1 text-weight-bold">Nouvelle facture</div>
          <div v-if="customer?.customer_name" class="text-caption text-grey-6">{{ customer.customer_name }} ({{ customer.name }})</div>
        </div>
        <q-btn flat round dense icon="close" @click="$emit('update:modelValue', false)" />
      </q-card-section>

      <q-card-section class="q-pt-md">
        <!-- Line items (the focus) -->
        <div class="text-caption text-weight-bold q-mb-xs">Lignes</div>
        <div v-for="(line, idx) in form.items" :key="idx" class="q-mb-sm">
          <div class="row items-start q-gutter-xs">
            <!-- Product autosuggest — type to search catalogue, or free description -->
            <q-select
              dense outlined class="col"
              :model-value="line.sel"
              :options="itemResults"
              option-label="item_name"
              use-input fill-input hide-selected input-debounce="250"
              new-value-mode="add-unique" hide-bottom-space clearable
              label="Produit ou description"
              @filter="searchItems"
              @update:model-value="opt => applyProduct(line, opt)"
              @input-value="txt => onType(line, txt)"
              @clear="() => resetLineProduct(line)">
              <template #option="scope">
                <q-item v-bind="scope.itemProps">
                  <q-item-section>
                    <q-item-label>{{ scope.opt.item_name }}</q-item-label>
                    <q-item-label caption>{{ scope.opt.value }} · {{ scope.opt.item_group || '—' }}</q-item-label>
                  </q-item-section>
                  <q-item-section side v-if="scope.opt.rate">
                    <q-item-label class="text-weight-medium">{{ formatMoney(scope.opt.rate) }}</q-item-label>
                  </q-item-section>
                </q-item>
              </template>
              <template #no-option>
                <q-item><q-item-section class="text-grey-6 text-caption">Tapez pour chercher un produit — ou saisissez une description libre</q-item-section></q-item>
              </template>
            </q-select>

            <q-input v-model.number="line.qty" label="Qté" type="number" dense outlined
                     style="width:64px" min="1" step="1" hide-bottom-space />
            <q-input v-model.number="line.rate" label="Taux" type="number" dense outlined
                     style="width:106px" min="0" step="0.01" prefix="$" hide-bottom-space class="no-spin" />
            <div style="width:84px" class="q-pt-sm text-right text-weight-medium">
              {{ formatMoney((line.qty || 0) * (line.rate || 0)) }}
            </div>
            <q-btn flat round dense icon="delete" color="negative" size="sm" class="q-mt-xs"
                   :disable="form.items.length === 1" @click="removeLine(idx)">
              <q-tooltip>Supprimer la ligne</q-tooltip>
            </q-btn>
          </div>
          <!-- Resolved income account (transparent; flagged when it fell back to default) -->
          <div v-if="line.item_code" class="text-caption q-pl-xs"
               :class="line._confident === false ? 'text-warning' : 'text-grey-6'">
            <q-icon :name="line._confident === false ? 'help_outline' : 'east'" size="13px" class="q-mr-xs" />{{ accountCaption(line) }}
          </div>
        </div>

        <q-btn flat dense no-caps color="primary" icon="add" label="Ajouter une ligne"
               @click="addLine" class="q-mt-xs" />

        <!-- Totals -->
        <q-separator class="q-my-sm" />
        <div class="totals-grid">
          <div class="row justify-between">
            <span class="text-grey-7">Sous-total</span>
            <span class="text-weight-medium">{{ formatMoney(subtotal) }}</span>
          </div>
          <div v-if="taxRate > 0" class="row justify-between">
            <span class="text-grey-7">Taxes ({{ taxLabel }})</span>
            <span class="text-weight-medium">{{ formatMoney(taxAmount) }}</span>
          </div>
          <div v-if="taxRate > 0 && isTwoPartTax" class="text-caption text-grey-5 q-ml-sm">
            TPS 5%: {{ formatMoney(subtotal * 0.05) }} / TVQ 9.975%: {{ formatMoney(subtotal * 0.09975) }}
          </div>
          <q-separator class="q-my-xs" />
          <div class="row justify-between text-subtitle2">
            <span class="text-weight-bold">Total</span>
            <span class="text-weight-bold">{{ formatMoney(grandTotal) }}</span>
          </div>
        </div>

        <!-- Rarely-touched settings, tucked away -->
        <q-separator class="q-mt-sm" />
        <q-expansion-item dense flat icon="tune" :label="advancedSummary"
                          header-class="text-grey-7 text-caption q-px-none">
          <div class="q-pt-sm q-gutter-sm">
            <!-- Due terms -->
            <div>
              <div class="text-caption text-grey-6 q-mb-xs">Échéance (selon le crédit du client)</div>
              <div class="row items-center q-gutter-sm">
                <q-btn-toggle v-model="dueTerms" no-caps unelevated dense
                              toggle-color="primary" color="grey-3" text-color="grey-8"
                              :options="[{label:'Prépayé', value:0},{label:'15 jours', value:15},{label:'30 jours', value:30}]" />
                <span class="text-caption text-grey-6">→ {{ form.due_date }}</span>
              </div>
            </div>
            <!-- Dates -->
            <div class="row q-gutter-sm">
              <q-input v-model="form.posting_date" label="Date de facturation" type="date" dense outlined class="col" hide-bottom-space />
              <q-input v-model="form.due_date" label="Date d'échéance" type="date" dense outlined class="col" hide-bottom-space
                       @update:model-value="dueTerms = 'custom'" />
            </div>
            <!-- Taxes -->
            <q-select v-model="form.taxes_and_charges" :options="taxOptions" label="Taxes"
                      dense outlined emit-value map-options hide-bottom-space />
            <!-- Default income account (for free-text lines without a product) -->
            <q-select v-model="form.default_income_account" :options="incomeAccountOptions"
                      label="Compte de revenu par défaut (lignes sans produit)"
                      dense outlined emit-value map-options hide-bottom-space />
          </div>
        </q-expansion-item>
      </q-card-section>

      <!-- Actions -->
      <q-card-actions align="right" class="q-px-md q-pb-md">
        <q-btn flat label="Annuler" color="grey-7" @click="$emit('update:modelValue', false)" />
        <q-btn unelevated label="Créer brouillon" color="primary" icon="save"
               :loading="submitting" :disable="!canSubmit" @click="onSubmit" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { Notify } from 'quasar'
import { createDoc, listDocs } from 'src/api/erp'
import { formatMoney } from 'src/composables/useFormatters'
import {
  DEFAULT_INCOME_ACCOUNT, INCOME_ACCOUNT_OPTIONS,
  resolveIncomeAccount, incomeAccountLabel,
} from 'src/data/income-accounts'

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  customer:   { type: Object, default: () => ({}) },
})

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

const TAX_QC = 'QC TPS 5% + TVQ 9.975% - T'
const TAX_GST = 'Canada GST 5% - T'
const TAX_NONE = ''

const taxOptions = [
  { label: 'QC TPS 5% + TVQ 9.975%', value: TAX_QC },
  { label: 'Canada GST 5%', value: TAX_GST },
  { label: 'Aucune taxe (Exempt)', value: TAX_NONE },
]
const incomeAccountOptions = INCOME_ACCOUNT_OPTIONS

const submitting = ref(false)
const dueTerms = ref(30)          // 0 = prépayé · 15 · 30 · 'custom'
const itemResults = ref([])       // product search results (shared by the active dropdown)

function defaultLine () {
  return { sel: null, description: '', qty: 1, rate: 0, item_code: '', item_group: '', income_account: DEFAULT_INCOME_ACCOUNT, _confident: null }
}
function todayStr () { return new Date().toISOString().slice(0, 10) }
function addDays (dateStr, days) {
  const d = new Date(dateStr)
  d.setDate(d.getDate() + days)
  return d.toISOString().slice(0, 10)
}

const form = ref({
  posting_date: todayStr(),
  due_date: addDays(todayStr(), 30),
  taxes_and_charges: TAX_QC,
  default_income_account: DEFAULT_INCOME_ACCOUNT,
  items: [defaultLine()],
})

// Reset when the dialog opens
watch(() => props.modelValue, (open) => {
  if (open) {
    const isExempt = props.customer?.tax_category_legacy === 'Exempt'
    dueTerms.value = 30
    itemResults.value = []
    form.value = {
      posting_date: todayStr(),
      due_date: addDays(todayStr(), 30),
      taxes_and_charges: isExempt ? TAX_NONE : TAX_QC,
      default_income_account: DEFAULT_INCOME_ACCOUNT,
      items: [defaultLine()],
    }
  }
})

// Recompute due date from the selected term (unless the user set a custom date)
watch([dueTerms, () => form.value.posting_date], () => {
  if (dueTerms.value !== 'custom' && form.value.posting_date) {
    form.value.due_date = addDays(form.value.posting_date, dueTerms.value)
  }
})

// ── Product search (ERPNext Item) ────────────────────────────────────────────
async function searchItems (txt, update, abort) {
  try {
    const like = `%${(txt || '').trim()}%`
    const items = await listDocs('Item', {
      filters: { is_sales_item: 1, disabled: 0 },
      or_filters: [['item_name', 'like', like], ['item_code', 'like', like]],
      fields: ['name', 'item_name', 'item_group', 'standard_rate'],
      limit: 15,
      orderBy: 'item_name asc',
    })
    update(() => {
      itemResults.value = items.map(it => ({
        item_name: it.item_name || it.name,
        value: it.name,
        item_group: it.item_group || '',
        rate: parseFloat(it.standard_rate || 0),
      }))
    })
  } catch { update(() => { itemResults.value = [] }) }
}

function applyProduct (line, opt) {
  if (opt && typeof opt === 'object') {
    line.sel = opt
    line.description = opt.item_name || opt.value
    line.item_code = opt.value
    line.item_group = opt.item_group || ''
    if (opt.rate) line.rate = opt.rate          // don't wipe a manual rate with a $0 item
    const r = resolveIncomeAccount(opt.item_group)
    line.income_account = r.account
    line._confident = r.confident
  } else if (typeof opt === 'string') {
    line.sel = opt
    line.description = opt
    line.item_code = ''
    line.item_group = ''
    line._confident = null
    line.income_account = form.value.default_income_account
  } else {
    resetLineProduct(line)
  }
}
function onType (line, txt) { line.description = txt }
function resetLineProduct (line) {
  line.sel = null; line.item_code = ''; line.item_group = ''; line._confident = null
  line.description = ''; line.income_account = form.value.default_income_account
}

function accountCaption (line) {
  const lbl = incomeAccountLabel(line.income_account)
  return line._confident === false ? `${lbl} — compte par défaut, à vérifier` : lbl
}

function addLine () { form.value.items.push(defaultLine()) }
function removeLine (idx) { if (form.value.items.length > 1) form.value.items.splice(idx, 1) }

// ── Totals ───────────────────────────────────────────────────────────────────
const subtotal = computed(() => form.value.items.reduce((s, l) => s + (l.qty || 0) * (l.rate || 0), 0))
const isTwoPartTax = computed(() => form.value.taxes_and_charges === TAX_QC)
const taxRate = computed(() => {
  if (form.value.taxes_and_charges === TAX_QC) return 0.14975
  if (form.value.taxes_and_charges === TAX_GST) return 0.05
  return 0
})
const taxLabel = computed(() => {
  if (form.value.taxes_and_charges === TAX_QC) return '14.975%'
  if (form.value.taxes_and_charges === TAX_GST) return '5%'
  return ''
})
const taxAmount = computed(() => subtotal.value * taxRate.value)
const grandTotal = computed(() => subtotal.value + taxAmount.value)

const termLabel = computed(() => {
  if (dueTerms.value === 'custom') return `échéance ${form.value.due_date}`
  if (dueTerms.value === 0) return 'prépayé'
  return `échéance ${dueTerms.value} j`
})
const advancedSummary = computed(() => {
  const tax = taxOptions.find(t => t.value === form.value.taxes_and_charges)?.label || 'Sans taxe'
  return `Options — ${tax} · ${termLabel.value}`
})

const canSubmit = computed(() => form.value.items.some(l => l.description?.trim() && l.rate > 0))

async function onSubmit () {
  if (!canSubmit.value) return
  submitting.value = true
  try {
    const items = form.value.items
      .filter(l => l.description?.trim() && l.rate > 0)
      .map(l => {
        const row = {
          item_code: l.item_code || 'SVC',
          description: l.description.trim(),
          qty: l.qty || 1,
          rate: l.rate,
          income_account: l.income_account || form.value.default_income_account,
        }
        if (!l.item_code) row.item_name = l.description.trim().slice(0, 140)
        return row
      })

    const payload = {
      doctype: 'Sales Invoice',
      customer: props.customer?.name,
      posting_date: form.value.posting_date,
      due_date: form.value.due_date,
      company: 'TARGO',
      debit_to: 'Comptes clients - T',
      currency: 'CAD',
      items,
    }

    const taxSel = form.value.taxes_and_charges
    if (taxSel === TAX_QC) {
      payload.taxes_and_charges = TAX_QC
      payload.taxes = [
        { charge_type: 'On Net Total', account_head: '2300 - TPS perçue - T', description: 'TPS 5%', rate: 5 },
        { charge_type: 'On Net Total', account_head: '2350 - TVQ perçue - T', description: 'TVQ 9.975%', rate: 9.975 },
      ]
    } else if (taxSel === TAX_GST) {
      payload.taxes_and_charges = TAX_GST
      payload.taxes = [
        { charge_type: 'On Net Total', account_head: '2300 - TPS perçue - T', description: 'TPS 5%', rate: 5 },
      ]
    }

    const doc = await createDoc('Sales Invoice', payload)
    Notify.create({ type: 'positive', message: `Facture ${doc.name} créée (brouillon)`, position: 'top' })
    emit('created', doc)
    emit('update:modelValue', false)
  } catch (err) {
    Notify.create({ type: 'negative', message: `Erreur: ${err.message || err}`, position: 'top' })
  } finally {
    submitting.value = false
  }
}
</script>

<style scoped>
.totals-grid { max-width: 320px; margin-left: auto; }
/* Hide number-input spinner arrows (useless here) */
.no-spin :deep(input[type=number])::-webkit-outer-spin-button,
.no-spin :deep(input[type=number])::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.no-spin :deep(input[type=number]) { -moz-appearance: textfield; }
</style>
