<template>
  <q-page class="q-pa-md full-width order-prod-page">
  <div class="row items-center justify-between page-header">
    <div>
      <div class="text-h6 text-weight-bold">Uretime Verilen Urunleri Guncelle</div>
    </div>
    <q-btn
      color="primary"
      icon="refresh"
      label="Yenile"
      :loading="store.loading"
      @click="refreshAll"
    />
    <q-btn
      class="q-ml-sm"
      color="secondary"
      icon="save"
      label="Secili Degisiklikleri Kaydet"
      :loading="store.saving"
      @click="onBulkSubmit"
    />
  </div>

    <div class="filter-bar row q-col-gutter-md">
      <div class="col-5">
        <q-input
          :model-value="cariLabel"
          label="Cari Secimi"
          filled
          dense
          readonly
        />
      </div>
      <div class="col-3">
        <q-input
          v-model="descFilter"
          label="Aciklama Ara"
          filled
          dense
          clearable
        />
      </div>
      <div class="col-2">
        <q-input
          :model-value="header?.OrderNumber || ''"
          label="Siparis No"
          filled
          dense
          readonly
        />
      </div>
      <div class="col-2">
        <q-input
          :model-value="formatDate(header?.OrderDate)"
          label="Olusturulma Tarihi"
          filled
          dense
          readonly
        />
      </div>
      <div class="col-2">
        <q-input
          :model-value="formatDate(header?.AverageDueDate)"
          label="Tahmini Termin Tarihi"
          filled
          dense
          readonly
        />
      </div>
    </div>

  <div class="table-wrap">
    <q-table
        class="q-mt-md prod-table"
        flat
        bordered
        dense
        separator="cell"
        row-key="RowKey"
        :rows="filteredRows"
        :columns="columns"
        :loading="store.loading"
        no-data-label="Uretime verilecek urun bulunamadi"
        :rows-per-page-options="[0]"
        :table-style="{ tableLayout: 'fixed', width: '100%' }"
        hide-bottom
      >
      <template #header-cell-select="props">
        <q-th :props="props" class="text-center" style="width: 44px">
          <q-checkbox
            size="sm"
            :model-value="allSelectedVisible"
            :indeterminate="someSelectedVisible && !allSelectedVisible"
            @update:model-value="toggleSelectAllVisible"
          />
        </q-th>
      </template>

      <template #body-cell-select="props">
        <q-td :props="props" class="text-center" style="width: 44px">
          <q-checkbox
            size="sm"
            :model-value="!!selectedMap[props.row.RowKey]"
            @update:model-value="(val) => toggleRowSelection(props.row.RowKey, val)"
          />
        </q-td>
      </template>

      <template #body-cell-NewItemCode="props">
        <q-td :props="props">
          <q-input
            v-model="props.row.NewItemCode"
            dense
            filled
            maxlength="13"
            label="Yeni Urun"
            :class="newItemInputClass(props.row)"
            @update:model-value="val => onNewItemChange(props.row, val, 'typed')"
          >
            <template #append>
              <q-icon name="arrow_drop_down" class="cursor-pointer" />
            </template>
            <q-menu
              anchor="bottom left"
              self="top left"
              fit
            >
              <div class="q-pa-sm" style="min-width:260px">
                <q-input
                  v-model="productSearch"
                  dense
                  filled
                  debounce="200"
                  placeholder="Urun ara..."
                />
                <q-list class="q-mt-xs" bordered separator>
                  <q-item
                    v-for="opt in filteredProducts"
                    :key="opt.ProductCode"
                    clickable
                    @click="onSelectProduct(props.row, opt.ProductCode)"
                  >
                    <q-item-section>{{ opt.ProductCode }}</q-item-section>
                  </q-item>
                </q-list>
              </div>
            </q-menu>
          </q-input>
          <div v-if="props.row.NewItemMode && props.row.NewItemMode !== 'empty'" class="q-mt-xs row items-center no-wrap">
            <q-badge :color="newItemBadgeColor(props.row)" text-color="white">
              {{ newItemBadgeLabel(props.row) }}
            </q-badge>
            <span class="text-caption q-ml-sm text-grey-8">{{ newItemHintText(props.row) }}</span>
            <q-btn
              v-if="props.row.NewItemMode === 'new'"
              class="q-ml-sm"
              dense
              flat
              size="sm"
              color="warning"
              label="cdItem Bilgisi"
              @click="openCdItemDialog(props.row.NewItemCode)"
            />
            <q-btn
              v-if="props.row.NewItemMode === 'new'"
              class="q-ml-xs"
              dense
              flat
              size="sm"
              color="primary"
              label="Urun Ozellikleri"
              @click="openAttributeDialog(props.row.NewItemCode)"
            />
          </div>
        </q-td>
      </template>

      <template #body-cell-NewColor="props">
        <q-td :props="props">
          <q-select
            v-model="props.row.NewColor"
            :options="getColorOptions(props.row)"
            option-label="colorLabel"
            option-value="color_code"
            emit-value
            map-options
            dense
            filled
            label="Yeni Renk"
            @update:model-value="() => onNewColorChange(props.row)"
          />
        </q-td>
      </template>

      <template #body-cell-NewDim2="props">
        <q-td :props="props">
          <q-select
            v-model="props.row.NewDim2"
            :options="getSecondColorOptions(props.row)"
            option-label="item_dim2_label"
            option-value="item_dim2_code"
            emit-value
            map-options
            dense
            filled
            label="Yeni 2. Renk"
          />
        </q-td>
      </template>

      <template #body-cell-NewDesc="props">
        <q-td :props="props" class="cell-new">
          <q-input
            v-model="props.row.NewDesc"
            dense
            filled
            type="textarea"
            autogrow
            label="Yeni Aciklama"
          />
        </q-td>
      </template>
    </q-table>
  </div>

    <q-banner v-if="store.error" class="bg-red text-white q-mt-sm">
      Hata: {{ store.error }}
    </q-banner>

    <q-dialog v-model="cdItemDialogOpen" persistent>
      <q-card style="min-width: 980px; max-width: 98vw;">
        <q-card-section class="row items-center q-pb-none">
          <div class="text-h6">Yeni Kod cdItem Bilgileri</div>
          <q-space />
          <q-badge color="warning" text-color="black">
            {{ cdItemTargetCode || '-' }}
          </q-badge>
        </q-card-section>

        <q-card-section class="q-pt-md">
          <div class="row q-col-gutter-sm">
            <div class="col-12 col-md-4">
              <q-select v-model="cdItemDraftForm.ItemDimTypeCode" dense filled emit-value map-options option-label="label" option-value="value" :options="lookupOptions('itemDimTypeCodes')" label="ItemDimTypeCode" />
            </div>
            <div class="col-12 col-md-4">
              <q-select v-model="cdItemDraftForm.ProductTypeCode" dense filled emit-value map-options option-label="label" option-value="value" :options="lookupOptions('productTypeCodes')" label="ProductTypeCode" />
            </div>
            <div class="col-12 col-md-4">
              <q-select v-model="cdItemDraftForm.ProductHierarchyID" dense filled emit-value map-options option-label="label" option-value="value" :options="lookupOptions('productHierarchyIDs')" label="ProductHierarchyID" />
            </div>

            <div class="col-12 col-md-4">
              <q-select v-model="cdItemDraftForm.UnitOfMeasureCode1" dense filled emit-value map-options option-label="label" option-value="value" :options="lookupOptions('unitOfMeasureCode1List')" label="UnitOfMeasureCode1" />
            </div>
            <div class="col-12 col-md-4">
              <q-select v-model="cdItemDraftForm.ItemAccountGrCode" dense filled emit-value map-options option-label="label" option-value="value" :options="lookupOptions('itemAccountGrCodes')" label="ItemAccountGrCode" />
            </div>
            <div class="col-12 col-md-4">
              <q-select v-model="cdItemDraftForm.ItemTaxGrCode" dense filled emit-value map-options option-label="label" option-value="value" :options="lookupOptions('itemTaxGrCodes')" label="ItemTaxGrCode" />
            </div>

            <div class="col-12 col-md-4">
              <q-select v-model="cdItemDraftForm.ItemPaymentPlanGrCode" dense filled emit-value map-options option-label="label" option-value="value" :options="lookupOptions('itemPaymentPlanGrCodes')" label="ItemPaymentPlanGrCode" />
            </div>
            <div class="col-12 col-md-4">
              <q-select v-model="cdItemDraftForm.ItemDiscountGrCode" dense filled emit-value map-options option-label="label" option-value="value" :options="lookupOptions('itemDiscountGrCodes')" label="ItemDiscountGrCode" />
            </div>
            <div class="col-12 col-md-4">
              <q-select v-model="cdItemDraftForm.ItemVendorGrCode" dense filled emit-value map-options option-label="label" option-value="value" :options="lookupOptions('itemVendorGrCodes')" label="ItemVendorGrCode" />
            </div>

            <div class="col-12 col-md-4">
              <q-select v-model="cdItemDraftForm.PromotionGroupCode" dense filled emit-value map-options option-label="label" option-value="value" :options="lookupOptions('promotionGroupCodes')" label="PromotionGroupCode" />
            </div>
            <div class="col-12 col-md-4">
              <q-select v-model="cdItemDraftForm.ProductCollectionGrCode" dense filled emit-value map-options option-label="label" option-value="value" :options="lookupOptions('productCollectionGrCodes')" label="ProductCollectionGrCode" />
            </div>
            <div class="col-12 col-md-4">
              <q-select v-model="cdItemDraftForm.StorePriceLevelCode" dense filled emit-value map-options option-label="label" option-value="value" :options="lookupOptions('storePriceLevelCodes')" label="StorePriceLevelCode" />
            </div>

            <div class="col-12 col-md-4">
              <q-select v-model="cdItemDraftForm.PerceptionOfFashionCode" dense filled emit-value map-options option-label="label" option-value="value" :options="lookupOptions('perceptionOfFashionCodes')" label="PerceptionOfFashionCode" />
            </div>
            <div class="col-12 col-md-4">
              <q-select v-model="cdItemDraftForm.CommercialRoleCode" dense filled emit-value map-options option-label="label" option-value="value" :options="lookupOptions('commercialRoleCodes')" label="CommercialRoleCode" />
            </div>
            <div class="col-12 col-md-4">
              <q-select v-model="cdItemDraftForm.StoreCapacityLevelCode" dense filled emit-value map-options option-label="label" option-value="value" :options="lookupOptions('storeCapacityLevelCodes')" label="StoreCapacityLevelCode" />
            </div>

            <div class="col-12 col-md-6">
              <q-select v-model="cdItemDraftForm.CustomsTariffNumberCode" dense filled emit-value map-options option-label="label" option-value="value" :options="lookupOptions('customsTariffNumbers')" label="CustomsTariffNumberCode" />
            </div>
            <div class="col-12 col-md-6">
              <q-select v-model="cdItemDraftForm.CompanyCode" dense filled emit-value map-options option-label="label" option-value="value" :options="lookupOptions('companyCodes')" label="CompanyCode" />
            </div>
          </div>
        </q-card-section>

        <q-card-actions align="right">
          <q-btn flat label="Vazgec" color="grey-8" v-close-popup />
          <q-btn color="primary" label="Taslagi Kaydet" @click="saveCdItemDraft" />
        </q-card-actions>
      </q-card>
    </q-dialog>

    <q-dialog v-model="attributeDialogOpen" persistent>
      <q-card style="min-width: 1100px; max-width: 98vw;">
        <q-card-section class="row items-center q-pb-none">
          <div class="text-h6">Urun Ozellikleri (2. Pop-up)</div>
          <q-space />
          <q-badge color="primary">{{ attributeTargetCode || '-' }}</q-badge>
        </q-card-section>

        <q-card-section style="max-height: 68vh; overflow: auto;">
          <div class="text-caption text-grey-7 q-mb-sm">
            Ilk etap dummy: isBlocked=0 kabul edilmis satirlar gibi listelenir.
          </div>
          <div
            v-for="(row, idx) in attributeRows"
            :key="`${row.AttributeTypeCodeNumber}-${idx}`"
            class="row q-col-gutter-sm q-mb-xs items-center"
          >
            <div class="col-12 col-md-5">
              <q-input :model-value="row.TypeLabel" dense filled readonly />
            </div>
            <div class="col-12 col-md-7">
              <q-select
                v-model="row.AttributeCode"
                dense
                filled
                emit-value
                map-options
                option-label="label"
                option-value="value"
                :options="row.Options"
                label="AttributeCode - AttributeDescription"
              />
            </div>
          </div>
        </q-card-section>

        <q-card-actions align="right">
          <q-btn flat label="Vazgec" color="grey-8" v-close-popup />
          <q-btn color="primary" label="Ozellikleri Kaydet" @click="saveAttributeDraft" />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </q-page>
</template>

<script setup>
import { computed, onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useQuasar } from 'quasar'
import { useOrderProductionItemStore } from 'src/stores/OrderProductionItemStore'
import api from 'src/services/api'
import { normalizeSearchText } from 'src/utils/searchText'

const route = useRoute()
const $q = useQuasar()
const store = useOrderProductionItemStore()
const BAGGI_CODE_PATTERN = /^[A-Z][0-9]{3}-[A-Z]{3}[0-9]{5}$/
const BAGGI_CODE_ERROR = 'Girdiginiz kod BAGGI kod sistemine uyumlu degil. Format: X999-XXX99999'

const orderHeaderID = computed(() => String(route.params.orderHeaderID || '').trim())
const header = computed(() => store.header || {})
const cariLabel = computed(() => {
  const code = header.value?.CurrAccCode || ''
  const name = header.value?.CurrAccDescription || ''
  if (!code && !name) return ''
  if (!name) return code
  return `${code} - ${name}`
})

const rows = ref([])
const descFilter = ref('')
const productOptions = ref([])
const productSearch = ref('')
const selectedMap = ref({})
const cdItemDialogOpen = ref(false)
const cdItemTargetCode = ref('')
const cdItemDraftForm = ref(createEmptyCdItemDraft(''))
const attributeDialogOpen = ref(false)
const attributeTargetCode = ref('')
const attributeRows = ref([])

const columns = [
  { name: 'select', label: '', field: 'select', align: 'center', sortable: false, style: 'width:44px;', headerStyle: 'width:44px;' },
  { name: 'OldItemCode', label: 'Eski Urun Kodu', field: 'OldItemCode', align: 'left', sortable: true, style: 'min-width:90px;white-space:normal', headerStyle: 'min-width:90px;white-space:normal', headerClasses: 'col-old', classes: 'col-old' },
  { name: 'OldColor', label: 'Eski Urun Rengi', field: 'OldColor', align: 'left', sortable: true, style: 'min-width:80px;white-space:normal', headerStyle: 'min-width:80px;white-space:normal', headerClasses: 'col-old', classes: 'col-old' },
  { name: 'OldDim2', label: 'Eski 2. Renk', field: 'OldDim2', align: 'left', sortable: true, style: 'min-width:80px;white-space:normal', headerStyle: 'min-width:80px;white-space:normal', headerClasses: 'col-old', classes: 'col-old' },
  { name: 'OldDesc', label: 'Eski Aciklama', field: 'OldDesc', align: 'left', sortable: false, style: 'min-width:130px;', headerStyle: 'min-width:130px;', headerClasses: 'col-old col-desc', classes: 'col-old col-desc' },
  { name: 'OldSizes', label: 'Bedenler', field: 'OldSizesLabel', align: 'left', sortable: false, style: 'min-width:90px;', headerStyle: 'min-width:90px;', headerClasses: 'col-old col-wrap', classes: 'col-old col-wrap' },
  { name: 'NewItemCode', label: 'Yeni Urun Kodu', field: 'NewItemCode', align: 'left', sortable: false, style: 'min-width:130px;', headerStyle: 'min-width:130px;', headerClasses: 'col-new col-new-first', classes: 'col-new col-new-first' },
  { name: 'NewColor', label: 'Yeni Urun Rengi', field: 'NewColor', align: 'left', sortable: false, style: 'min-width:100px;', headerStyle: 'min-width:100px;', headerClasses: 'col-new', classes: 'col-new' },
  { name: 'NewDim2', label: 'Yeni 2. Renk', field: 'NewDim2', align: 'left', sortable: false, style: 'min-width:100px;', headerStyle: 'min-width:100px;', headerClasses: 'col-new', classes: 'col-new' },
  { name: 'NewDesc', label: 'Yeni Aciklama', field: 'NewDesc', align: 'left', sortable: false, style: 'min-width:140px;', headerStyle: 'min-width:140px;', headerClasses: 'col-new col-desc', classes: 'col-new col-desc' }
]

onMounted(async () => {
  await refreshAll()
})

watch(orderHeaderID, async (id) => {
  await refreshAll()
})

watch(
  () => store.items,
  (items) => {
    rows.value = groupItems(items || [], rows.value)
  },
  { immediate: true }
)

watch(
  () => store.products,
  (products) => {
    productOptions.value = products || []
  },
  { immediate: true }
)

function formatDate (val) {
  if (!val) return ''
  const text = String(val)
  return text.length >= 10 ? text.slice(0, 10) : text
}

const filteredProducts = computed(() => {
  const needle = normalizeSearchText(productSearch.value)
  if (!needle) return productOptions.value.slice(0, 50)
  return productOptions.value.filter(p =>
    normalizeSearchText(p?.ProductCode).includes(needle)
  ).slice(0, 50)
})

const filteredRows = computed(() => {
  const needle = normalizeSearchText(descFilter.value)
  if (!needle) return rows.value
  return rows.value.filter(r =>
    normalizeSearchText(r?.OldDesc).includes(needle)
  )
})

const visibleRowKeys = computed(() => filteredRows.value.map(r => r.RowKey))
const selectedVisibleCount = computed(() => visibleRowKeys.value.filter(k => !!selectedMap.value[k]).length)
const allSelectedVisible = computed(() => visibleRowKeys.value.length > 0 && selectedVisibleCount.value === visibleRowKeys.value.length)
const someSelectedVisible = computed(() => selectedVisibleCount.value > 0)

function applyNewItemVisualState (row, source = 'typed') {
  const info = store.classifyItemCode(row?.NewItemCode || '')
  row.NewItemCode = info.normalized
  row.NewItemMode = info.mode
  row.NewItemSource = info.mode === 'empty' ? '' : source
}

function newItemInputClass (row) {
  return {
    'new-item-existing': row?.NewItemMode === 'existing',
    'new-item-new': row?.NewItemMode === 'new'
  }
}

function newItemBadgeColor (row) {
  return row?.NewItemMode === 'existing' ? 'positive' : 'warning'
}

function newItemBadgeLabel (row) {
  return row?.NewItemMode === 'existing' ? 'MEVCUT KOD' : 'YENI KOD'
}

function newItemHintText (row) {
  if (row?.NewItemMode === 'existing') {
    return row?.NewItemSource === 'selected'
      ? 'Urun listesinden secildi'
      : 'Elle girildi (sistemde bulundu)'
  }
  if (row?.NewItemMode === 'new') {
    return store.getCdItemDraft(row?.NewItemCode) ? 'Yeni kod: cdItem taslagi hazir' : 'Yeni kod: cdItem taslagi gerekli'
  }
  return ''
}

function onSelectProduct (row, code) {
  productSearch.value = ''
  onNewItemChange(row, code, 'selected')
}

function onNewItemChange (row, val, source = 'typed') {
  const prevCode = String(row?.NewItemCode || '').trim().toUpperCase()
  const next = String(val || '').trim().toUpperCase()
  if (next.length > 13) {
    $q.notify({ type: 'negative', message: 'Model kodu en fazla 13 karakter olabilir.' })
    row.NewItemCode = next.slice(0, 13)
    applyNewItemVisualState(row, source)
    return
  }
  if (next.length === 13 && !isValidBaggiModelCode(next)) {
    $q.notify({ type: 'negative', message: BAGGI_CODE_ERROR })
    row.NewItemCode = prevCode
    applyNewItemVisualState(row, source)
    return
  }
  row.NewItemCode = next ? next.toUpperCase() : ''
  applyNewItemVisualState(row, source)
  row.NewColor = ''
  row.NewDim2 = ''
  if (row.NewItemCode) {
    store.fetchColors(row.NewItemCode)
  }
  if (row.NewItemMode === 'new' && isValidBaggiModelCode(row.NewItemCode) && row.NewItemCode !== prevCode) {
    openCdItemDialog(row.NewItemCode)
  }
}

function onNewColorChange (row) {
  row.NewColor = normalizeShortCode(row.NewColor, 3)
  row.NewDim2 = ''
  if (row.NewItemCode && row.NewColor) {
    store.fetchSecondColors(row.NewItemCode, row.NewColor)
  }
}

function getColorOptions (row) {
  const code = row?.NewItemCode || ''
  const list = store.colorOptionsByCode[code] || []
  return list.map(c => ({
    ...c,
    colorLabel: `${c.color_code} - ${c.color_description || ''}`.trim()
  }))
}

function getSecondColorOptions (row) {
  const code = row?.NewItemCode || ''
  const color = row?.NewColor || ''
  const key = `${code}::${color}`
  const list = store.secondColorOptionsByKey[key] || []
  return list.map(c => ({
    ...c,
    item_dim2_label: `${c.item_dim2_code} - ${c.color_description || ''}`.trim()
  }))
}

function toggleRowSelection (rowKey, checked) {
  const next = { ...selectedMap.value }
  if (checked) next[rowKey] = true
  else delete next[rowKey]
  selectedMap.value = next
}

function toggleSelectAllVisible (checked) {
  const next = { ...selectedMap.value }
  for (const key of visibleRowKeys.value) {
    if (checked) next[key] = true
    else delete next[key]
  }
  selectedMap.value = next
}

function normalizeShortCode (value, maxLen) {
  return String(value || '').trim().toUpperCase().slice(0, maxLen)
}

function isValidBaggiModelCode (code) {
  return BAGGI_CODE_PATTERN.test(code)
}

function validateRowInput (row) {
  const newItemCode = String(row.NewItemCode || '').trim().toUpperCase()
  const newColor = normalizeShortCode(row.NewColor, 3)
  const newDim2 = normalizeShortCode(row.NewDim2, 3)
  const oldColor = String(row.OldColor || '').trim()
  const oldDim2 = String(row.OldDim2 || '').trim()

  if (!newItemCode) return 'Yeni model kodu zorunludur.'
  if (!isValidBaggiModelCode(newItemCode)) {
    return BAGGI_CODE_ERROR
  }
  if (oldColor && !newColor) return 'Eski kayitta 1. renk oldugu icin yeni 1. renk zorunludur.'
  if (newColor && newColor.length !== 3) return 'Yeni 1. renk kodu 3 karakter olmalidir.'
  if (oldDim2 && !newDim2) return 'Eski kayitta 2. renk oldugu icin yeni 2. renk zorunludur.'
  if (newDim2 && newDim2.length !== 3) return 'Yeni 2. renk kodu 3 karakter olmalidir.'
  if (newDim2 && !newColor) return '2. renk girmek icin 1. renk zorunludur.'

  row.NewItemCode = newItemCode
  row.NewColor = newColor
  row.NewDim2 = newDim2
  return ''
}

function collectLinesFromRows (selectedRows) {
  const lines = []
  for (const row of selectedRows) {
    const errMsg = validateRowInput(row)
    if (errMsg) {
      return { errMsg, lines: [] }
    }

    const baseLine = {
      NewItemCode: String(row.NewItemCode || '').trim().toUpperCase(),
      NewColor: normalizeShortCode(row.NewColor, 3),
      NewDim2: normalizeShortCode(row.NewDim2, 3),
      NewDesc: String((row.NewDesc || row.OldDesc) || '').trim()
    }

    for (const id of (row.OrderLineIDs || [])) {
      lines.push({
        OrderLineID: id,
        ...baseLine
      })
    }
  }
  return { errMsg: '', lines }
}

function createEmptyCdItemDraft (itemCode) {
  return {
    ItemTypeCode: '1',
    ItemCode: String(itemCode || '').trim().toUpperCase(),
    ItemDimTypeCode: '',
    ProductTypeCode: '',
    ProductHierarchyID: '',
    UnitOfMeasureCode1: '',
    ItemAccountGrCode: '',
    ItemTaxGrCode: '',
    ItemPaymentPlanGrCode: '',
    ItemDiscountGrCode: '',
    ItemVendorGrCode: '',
    PromotionGroupCode: '',
    ProductCollectionGrCode: '',
    StorePriceLevelCode: '',
    PerceptionOfFashionCode: '',
    CommercialRoleCode: '',
    StoreCapacityLevelCode: '',
    CustomsTariffNumberCode: '',
    CompanyCode: ''
  }
}

function lookupOptions (key) {
  const list = store.cdItemLookups?.[key] || []
  return list.map(x => {
    const code = String(x?.code || '').trim()
    const desc = String(x?.description || '').trim()
    return {
      value: code,
      label: desc ? `${code} - ${desc}` : code
    }
  })
}

async function openCdItemDialog (itemCode) {
  const code = String(itemCode || '').trim().toUpperCase()
  if (!code) return
  await store.fetchCdItemLookups()

  cdItemTargetCode.value = code
  const existing = store.getCdItemDraft(code)
  const draft = createEmptyCdItemDraft(code)
  if (existing) {
    for (const [k, v] of Object.entries(existing)) {
      if (v == null) continue
      draft[k] = String(v)
    }
  }
  cdItemDraftForm.value = draft
  cdItemDialogOpen.value = true
}

function normalizeCdItemDraftForPayload (draftRaw) {
  const d = draftRaw || {}
  const toIntOrNil = (v) => {
    const n = Number(v)
    return Number.isFinite(n) && n > 0 ? n : null
  }
  const toStrOrNil = (v) => {
    const s = String(v || '').trim()
    return s || null
  }
  return {
    ItemTypeCode: toIntOrNil(d.ItemTypeCode) || 1,
    ItemCode: String(d.ItemCode || '').trim().toUpperCase(),
    ItemDimTypeCode: toIntOrNil(d.ItemDimTypeCode),
    ProductTypeCode: toIntOrNil(d.ProductTypeCode),
    ProductHierarchyID: toIntOrNil(d.ProductHierarchyID),
    UnitOfMeasureCode1: toStrOrNil(d.UnitOfMeasureCode1),
    ItemAccountGrCode: toStrOrNil(d.ItemAccountGrCode),
    ItemTaxGrCode: toStrOrNil(d.ItemTaxGrCode),
    ItemPaymentPlanGrCode: toStrOrNil(d.ItemPaymentPlanGrCode),
    ItemDiscountGrCode: toStrOrNil(d.ItemDiscountGrCode),
    ItemVendorGrCode: toStrOrNil(d.ItemVendorGrCode),
    PromotionGroupCode: toStrOrNil(d.PromotionGroupCode),
    ProductCollectionGrCode: toStrOrNil(d.ProductCollectionGrCode),
    StorePriceLevelCode: toStrOrNil(d.StorePriceLevelCode),
    PerceptionOfFashionCode: toStrOrNil(d.PerceptionOfFashionCode),
    CommercialRoleCode: toStrOrNil(d.CommercialRoleCode),
    StoreCapacityLevelCode: toStrOrNil(d.StoreCapacityLevelCode),
    CustomsTariffNumberCode: toStrOrNil(d.CustomsTariffNumberCode),
    CompanyCode: toStrOrNil(d.CompanyCode)
  }
}

function saveCdItemDraft () {
  const payload = normalizeCdItemDraftForPayload(cdItemDraftForm.value)
  if (!payload.ItemCode) {
    $q.notify({ type: 'negative', message: 'ItemCode bos olamaz.' })
    return
  }
  store.setCdItemDraft(payload.ItemCode, payload)
  cdItemDialogOpen.value = false
}

function createDummyAttributeRows () {
  const sharedOptions = [
    { value: 'DAMATLIK', label: 'DAMATLIK - DAMATLIK' },
    { value: 'TAKIM', label: 'TAKIM - TAKIM ELBISE' },
    { value: 'CEKET', label: 'CEKET - CEKET' },
    { value: 'PANTOLON', label: 'PANTOLON - PANTOLON' }
  ]
  const rows = [{
    AttributeTypeCodeNumber: 1,
    TypeLabel: '1-001 Urun Ana Grubu',
    AttributeCode: '',
    Options: sharedOptions
  }]
  for (let i = 2; i <= 50; i++) {
    const code = String(i).padStart(3, '0')
    rows.push({
      AttributeTypeCodeNumber: i,
      TypeLabel: `1-${code} Dummy Ozellik ${i}`,
      AttributeCode: '',
      Options: sharedOptions
    })
  }
  return rows
}

function buildAttributeRowsFromLookup (list) {
  const grouped = new Map()
  for (const it of (list || [])) {
    const typeCode = Number(it?.attribute_type_code || 0)
    if (!typeCode) continue
    if (!grouped.has(typeCode)) {
      grouped.set(typeCode, {
        typeCode,
        typeDesc: String(it?.attribute_type_description || '').trim() || String(typeCode),
        options: []
      })
    }
    const g = grouped.get(typeCode)
    const code = String(it?.attribute_code || '').trim()
    const desc = String(it?.attribute_description || '').trim()
    g.options.push({
      value: code,
      label: `${code} - ${desc || code}`
    })
  }

  const rows = [...grouped.values()]
    .sort((a, b) => a.typeCode - b.typeCode)
    .map(g => ({
      AttributeTypeCodeNumber: g.typeCode,
      TypeLabel: `${g.typeCode}-${g.typeDesc}`,
      AttributeCode: '',
      Options: g.options
    }))
  return rows
}

async function openAttributeDialog (itemCode) {
  const code = String(itemCode || '').trim().toUpperCase()
  if (!code) return
  attributeTargetCode.value = code
  const existing = store.getProductAttributeDraft(code)
  const fetched = await store.fetchProductAttributes(1)
  const fromLookup = buildAttributeRowsFromLookup(fetched)
  const baseRows = fromLookup.length ? fromLookup : createDummyAttributeRows()
  attributeRows.value = Array.isArray(existing) && existing.length
    ? JSON.parse(JSON.stringify(existing))
    : baseRows
  attributeDialogOpen.value = true
}

function saveAttributeDraft () {
  const code = String(attributeTargetCode.value || '').trim().toUpperCase()
  if (!code) return
  for (const row of (attributeRows.value || [])) {
    const selected = String(row?.AttributeCode || '').trim()
    if (!selected) {
      $q.notify({ type: 'negative', message: `Urun ozelliklerinde secim zorunlu: ${row?.TypeLabel || ''}` })
      return
    }
  }
  store.setProductAttributeDraft(code, JSON.parse(JSON.stringify(attributeRows.value || [])))
  attributeDialogOpen.value = false
  $q.notify({ type: 'positive', message: 'Urun ozellikleri taslagi kaydedildi.' })
}

function collectProductAttributesFromSelectedRows (selectedRows) {
  const codeSet = [...new Set(
    (selectedRows || [])
      .map(r => String(r?.NewItemCode || '').trim().toUpperCase())
      .filter(Boolean)
  )]
  const out = []

  for (const code of codeSet) {
    const rows = store.getProductAttributeDraft(code)
    if (!Array.isArray(rows) || !rows.length) {
      return { errMsg: `${code} icin urun ozellikleri secilmedi`, productAttributes: [] }
    }
    for (const row of rows) {
      const attributeTypeCode = Number(row?.AttributeTypeCodeNumber || 0)
      const attributeCode = String(row?.AttributeCode || '').trim()
      if (!attributeTypeCode || !attributeCode) {
        return { errMsg: `${code} icin urun ozellikleri eksik`, productAttributes: [] }
      }
      out.push({
        ItemTypeCode: 1,
        ItemCode: code,
        AttributeTypeCode: attributeTypeCode,
        AttributeCode: attributeCode
      })
    }
  }
  return { errMsg: '', productAttributes: out }
}

function collectCdItemsFromSelectedRows (selectedRows) {
  const codes = [...new Set(
    (selectedRows || [])
      .filter(r => r?.NewItemMode === 'new' && String(r?.NewItemCode || '').trim())
      .map(r => String(r.NewItemCode).trim().toUpperCase())
  )]
  if (!codes.length) return { errMsg: '', cdItems: [] }

  const out = []
  for (const code of codes) {
    const draft = store.getCdItemDraft(code)
    if (!draft) {
      return { errMsg: `${code} icin cdItem bilgisi eksik`, cdItems: [] }
    }
    out.push(normalizeCdItemDraftForPayload(draft))
  }
  return { errMsg: '', cdItems: out }
}

function buildMailLineLabelFromRow (row) {
  const item = String(row?.NewItemCode || row?.OldItemCode || '').trim().toUpperCase()
  const color1 = String(row?.NewColor || row?.OldColor || '').trim().toUpperCase()
  const color2 = String(row?.NewDim2 || row?.OldDim2 || '').trim().toUpperCase()
  const desc = String(row?.NewDesc || row?.OldDesc || '').trim()

  if (!item) return ''
  const colorPart = color2 ? `${color1}-${color2}` : color1
  return [item, colorPart, desc].filter(Boolean).join(' ')
}

function buildProductionUpdateMailPayload (selectedRows) {
  const updatedItems = [
    ...new Set(
      (selectedRows || [])
        .map(buildMailLineLabelFromRow)
        .filter(Boolean)
    )
  ]

  return {
    operation: 'update',
    deletedItems: [],
    updatedItems,
    addedItems: []
  }
}

async function sendUpdateMailAfterApply (selectedRows) {
  const orderId = String(orderHeaderID.value || '').trim()
  if (!orderId) return

  try {
    const payload = buildProductionUpdateMailPayload(selectedRows)
    const res = await api.post('/order/send-market-mail', {
      orderHeaderID: orderId,
      operation: payload.operation,
      deletedItems: payload.deletedItems,
      updatedItems: payload.updatedItems,
      addedItems: payload.addedItems
    })

    const sentCount = Number(res?.data?.sentCount || 0)
    $q.notify({
      type: 'positive',
      message: sentCount > 0
        ? `Guncelleme maili gonderildi (${sentCount} alici)`
        : 'Guncelleme maili gonderildi'
    })
  } catch (err) {
    $q.notify({
      type: 'warning',
      message: 'Guncelleme kaydedildi, mail gonderilemedi.'
    })
  }
}

function buildGroupKey (item) {
  const parts = [
    String(item?.OldItemCode || '').trim(),
    String(item?.OldColor || '').trim(),
    String(item?.OldDim2 || '').trim(),
    String(item?.OldDesc || '').trim(),
    String(item?.OldDim3 || '').trim()
  ]
  return parts.join('||')
}

function formatSizes (sizeMap) {
  const entries = Object.entries(sizeMap || {})
  if (!entries.length) return { list: [], label: '-' }
  entries.sort((a, b) => String(a[0]).localeCompare(String(b[0])))
  const label = entries.map(([k, v]) => (v > 1 ? `${k}(${v})` : k)).join(', ')
  return { list: entries.map(([k]) => k), label }
}

function groupItems (items, prevRows = []) {
  const prevMap = new Map()
  for (const r of prevRows || []) {
    if (!r?.RowKey) continue
    prevMap.set(r.RowKey, {
      NewDesc: String(r.NewDesc || '').trim(),
      NewItemCode: String(r.NewItemCode || '').trim().toUpperCase(),
      NewColor: String(r.NewColor || '').trim().toUpperCase(),
      NewDim2: String(r.NewDim2 || '').trim().toUpperCase(),
      NewItemMode: String(r.NewItemMode || '').trim(),
      NewItemSource: String(r.NewItemSource || '').trim()
    })
  }
  const map = new Map()

  for (const it of items) {
    const key = buildGroupKey(it)
    if (!map.has(key)) {
      const prev = prevMap.get(key) || {}
      const prevDesc = prev.NewDesc || ''
      const fallbackDesc = String((it?.NewDesc || it?.OldDesc) || '').trim()
      map.set(key, {
        RowKey: key,
        OrderHeaderID: it.OrderHeaderID,
        OldItemCode: it.OldItemCode,
        OldColor: it.OldColor,
        OldDim2: it.OldDim2,
        OldDim3: it.OldDim3,
        OldDesc: it.OldDesc,
        OrderLineIDs: [],
        OldSizes: [],
        OldSizesLabel: '',
        NewItemCode: prev.NewItemCode || '',
        NewColor: prev.NewColor || '',
        NewDim2: prev.NewDim2 || '',
        NewDesc: prevDesc || fallbackDesc,
        NewItemMode: prev.NewItemMode || 'empty',
        NewItemSource: prev.NewItemSource || '',
        IsVariantMissing: !!it.IsVariantMissing
      })
    }

    const g = map.get(key)
    if (it?.OrderLineID) g.OrderLineIDs.push(it.OrderLineID)

    const size = String(it?.OldDim1 || '').trim()
    if (size !== '') {
      g.__sizeMap = g.__sizeMap || {}
      g.__sizeMap[size] = (g.__sizeMap[size] || 0) + 1
    }
    if (it?.IsVariantMissing) g.IsVariantMissing = true
  }

  const out = []
  for (const g of map.values()) {
    const sizes = formatSizes(g.__sizeMap || {})
    g.OldSizes = sizes.list
    g.OldSizesLabel = sizes.label
    const info = store.classifyItemCode(g.NewItemCode)
    g.NewItemCode = info.normalized
    g.NewItemMode = info.mode
    if (info.mode === 'empty') g.NewItemSource = ''
    delete g.__sizeMap
    out.push(g)
  }

  return out
}

async function refreshAll () {
  await store.fetchHeader(orderHeaderID.value)
  await store.fetchItems(orderHeaderID.value)
  await store.fetchProducts()
}

async function onBulkSubmit () {
  const selectedRows = rows.value.filter(r => !!selectedMap.value[r.RowKey])
  if (!selectedRows.length) {
    $q.notify({ type: 'warning', message: 'Lutfen en az bir satir seciniz.' })
    return
  }

  const { errMsg, lines } = collectLinesFromRows(selectedRows)
  if (errMsg) {
    $q.notify({ type: 'negative', message: errMsg })
    return
  }
  if (!lines.length) {
    $q.notify({ type: 'negative', message: 'Secili satirlarda guncellenecek kayit bulunamadi.' })
    return
  }
  const { errMsg: cdErrMsg, cdItems } = collectCdItemsFromSelectedRows(selectedRows)
  if (cdErrMsg) {
    $q.notify({ type: 'negative', message: cdErrMsg })
    const firstCode = String(cdErrMsg.split(' ')[0] || '').trim()
    if (firstCode) openCdItemDialog(firstCode)
    return
  }
  const { errMsg: attrErrMsg, productAttributes } = collectProductAttributesFromSelectedRows(selectedRows)
  if (attrErrMsg) {
    $q.notify({ type: 'negative', message: attrErrMsg })
    const firstCode = String(attrErrMsg.split(' ')[0] || '').trim()
    if (firstCode) openAttributeDialog(firstCode)
    return
  }

  try {
    const validate = await store.validateUpdates(orderHeaderID.value, lines)
    const missingCount = validate?.missingCount || 0
    if (missingCount > 0) {
      const missingList = (validate?.missing || []).map(v => (
        `${v.ItemCode} / ${v.ColorCode} / ${v.ItemDim1Code} / ${v.ItemDim2Code}`
      ))
      $q.dialog({
        title: 'Eksik Varyantlar',
        message: `Eksik varyant bulundu: ${missingCount}<br><br>${missingList.join('<br>')}`,
        html: true,
        ok: { label: 'Ekle ve Guncelle', color: 'primary' },
        cancel: { label: 'Vazgec', flat: true }
      }).onOk(async () => {
        await store.applyUpdates(orderHeaderID.value, lines, true, cdItems, productAttributes)
        await store.fetchItems(orderHeaderID.value)
        selectedMap.value = {}
        await sendUpdateMailAfterApply(selectedRows)
      })
      return
    }

    await store.applyUpdates(orderHeaderID.value, lines, false, cdItems, productAttributes)
    await store.fetchItems(orderHeaderID.value)
    selectedMap.value = {}
    await sendUpdateMailAfterApply(selectedRows)
  } catch (err) {
    console.error('[OrderProductionUpdate] onBulkSubmit failed', {
      orderHeaderID: orderHeaderID.value,
      selectedRowCount: selectedRows.length,
      lineCount: lines.length,
      apiError: err?.response?.data,
      message: err?.message
    })
    $q.notify({ type: 'negative', message: store.error || 'Toplu kayit islemi basarisiz.' })
  }
}
</script>

<style scoped>
.prod-table :deep(th) {
  font-weight: 700;
  letter-spacing: 0.2px;
}

.prod-table :deep(td) {
  vertical-align: middle;
}

.prod-table :deep(.q-table__container) {
  width: 100%;
}

.prod-table :deep(.q-table) {
  font-size: 11px;
}

.order-prod-page {
  --header-height: 56px;
  --filter-bar-height: 72px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: auto;
}

.page-header {
  position: sticky;
  top: 0;
  z-index: 8;
  background: #fff;
  margin-top: -8px;
  margin-bottom: 8px;
  padding-top: 4px;
  padding-bottom: 6px;
}

.filter-bar {
  position: sticky;
  top: var(--header-height);
  z-index: 7;
  background: #fff;
  padding-top: 4px;
  padding-bottom: 8px;
}

.table-wrap {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  width: 100%;
  overflow: auto;
}

.prod-table :deep(.q-table__middle) {
  max-height: calc(100vh - var(--header-height) - var(--filter-bar-height) - 140px);
  overflow: auto;
}

.prod-table :deep(.q-table__container) {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.prod-table :deep(.q-table thead tr th) {
  position: sticky;
  top: 0;
  z-index: 6;
  background: #fff;
}

.prod-table :deep(th.col-old),
.prod-table :deep(td.col-old) {
  background: #fff0d9;
}

.prod-table :deep(th.col-new),
.prod-table :deep(td.col-new) {
  background: #e3f3ff;
}

.prod-table :deep(th.col-old) {
  color: #8a5a00;
}

.prod-table :deep(th.col-new) {
  color: #0d4f7a;
}

.prod-table :deep(td.col-old) {
  border-left: 4px solid #f0a500;
}

.prod-table :deep(td.col-new) {
  border-left: 4px solid #2d9cdb;
}

.prod-table :deep(th.col-new-first),
.prod-table :deep(td.col-new-first) {
  border-left: 6px solid #1b7cc8;
}

.prod-table :deep(td.cell-new) {
  background: #e3f3ff;
}

.prod-table :deep(.new-item-existing .q-field__control) {
  background: #eaf9ef !important;
  border-left: 3px solid #21ba45;
}

.prod-table :deep(.new-item-new .q-field__control) {
  background: #fff5e9 !important;
  border-left: 3px solid #f2a100;
}

.prod-table :deep(td.col-desc),
.prod-table :deep(th.col-desc),
.prod-table :deep(td.col-wrap),
.prod-table :deep(th.col-wrap) {
  white-space: normal;
  word-break: break-word;
  line-height: 1.2;
}

.prod-table :deep(.q-field),
.prod-table :deep(.q-field__control),
.prod-table :deep(.q-select),
.prod-table :deep(.q-input) {
  width: 100%;
  min-width: 0;
}
</style>
