<template>
  <q-page v-if="canReadOrder" class="ol-page">
    <div class="ol-filter-bar">
      <div class="ol-filter-row">
        <q-input
          v-model="store.filters.search"
          class="ol-filter-input ol-search"
          dense
          filled
          debounce="300"
          clearable
          label="Arama (Sipariş No / Cari / Açıklama)"
        >
          <template #append>
            <q-icon name="search" />
          </template>
        </q-input>

        <q-input
          v-model="store.filters.CurrAccCode"
          class="ol-filter-input"
          dense
          filled
          clearable
          label="Cari Kodu"
        />

        <q-input
          v-model="store.filters.OrderDate"
          class="ol-filter-input"
          dense
          filled
          type="date"
          label="Sipariş Tarihi"
        />

        <div class="ol-filter-actions">
          <q-btn
            label="Temizle"
            icon="clear"
            color="grey-7"
            flat
            :disable="store.loading"
            @click="clearFilters"
          >
            <q-tooltip>Tüm filtreleri temizle</q-tooltip>
          </q-btn>

          <q-btn
            label="Yenile"
            color="primary"
            icon="refresh"
            :loading="store.loading"
            @click="store.fetchOrders"
          />

          <q-btn
            label="Excel'e Aktar"
            icon="download"
            color="primary"
            outline
            :disable="store.loading || productionOrders.length === 0"
            @click="exportExcel"
          />
        </div>

        <div class="ol-filter-total">
          <div class="ol-total-line">
            <span class="ol-total-label">Toplam USD:</span>
            <strong class="ol-total-value">
              {{ totalVisibleUSD.toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }}
            </strong>
          </div>
        </div>
      </div>
    </div>

    <q-table
      title="Üretime Verilecek Ürünleri Olan Siparişler"
      class="ol-table"
      flat
      bordered
      dense
      separator="cell"
      row-key="OrderHeaderID"
      :rows="productionOrders"
      :columns="columns"
      :loading="store.loading"
      no-data-label="Üretime verilecek sipariş bulunamadı"
      :rows-per-page-options="[0]"
      hide-bottom
    >
      <template #body-cell-open="props">
        <q-td :props="props" class="text-center">
          <q-btn
            icon="open_in_new"
            color="primary"
            flat
            round
            dense
            @click="selectOrder(props.row)"
          >
            <q-tooltip>Siparişi Aç</q-tooltip>
          </q-btn>
        </q-td>
      </template>

      <template #body-cell-IsCreditableConfirmed="props">
        <q-td :props="props" class="text-center q-gutter-sm">
          <q-btn
            icon="picture_as_pdf"
            color="red"
            flat
            round
            dense
            @click="printPDF(props.row)"
          >
            <q-tooltip>Siparişi PDF olarak aç</q-tooltip>
          </q-btn>

          <q-icon
            :name="props.row.IsCreditableConfirmed ? 'check_circle' : 'cancel'"
            :color="props.row.IsCreditableConfirmed ? 'green' : 'red'"
            size="20px"
          >
            <q-tooltip>
              {{ props.row.IsCreditableConfirmed ? 'Onaylı' : 'Onaysız' }}
            </q-tooltip>
          </q-icon>
        </q-td>
      </template>

      <template #body-cell-OrderDate="props">
        <q-td :props="props" class="text-center">
          {{ formatDate(props.row.OrderDate) }}
        </q-td>
      </template>

      <template #body-cell-CreditableConfirmedDate="props">
        <q-td :props="props" class="text-center">
          {{ formatDate(props.row.CreditableConfirmedDate) }}
        </q-td>
      </template>


      <template #body-cell-CurrAccDescription="props">
        <q-td :props="props" class="ol-col-cari">
          <div class="ol-col-multiline">{{ props.value }}</div>
          <q-tooltip v-if="props.value">
            {{ props.value }}
          </q-tooltip>
        </q-td>
      </template>

      <template #body-cell-MusteriTemsilcisi="props">
        <q-td :props="props" class="ol-col-short">
          <div class="ol-col-multiline">{{ props.value }}</div>
          <q-tooltip v-if="props.value">
            {{ props.value }}
          </q-tooltip>
        </q-td>
      </template>

      <template #body-cell-Piyasa="props">
        <q-td :props="props" class="ol-col-short">
          <div class="ol-col-multiline">{{ props.value }}</div>
          <q-tooltip v-if="props.value">
            {{ props.value }}
          </q-tooltip>
        </q-td>
      </template>

      <template #body-cell-Description="props">
        <q-td :props="props" class="ol-col-desc">
          <div class="ol-col-multiline">{{ props.value }}</div>
          <q-tooltip v-if="props.value">
            {{ props.value }}
          </q-tooltip>
        </q-td>
      </template>

      <template #body-cell-HasUretimUrunu="props">
        <q-td :props="props" class="text-center">
          <q-icon
            :name="props.row.HasUretimUrunu ? 'check_circle' : 'cancel'"
            :color="props.row.HasUretimUrunu ? 'green' : 'grey-5'"
            size="18px"
          />
        </q-td>
      </template>
    </q-table>

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

  <q-page v-else class="q-pa-md flex flex-center">
    <div class="text-negative text-subtitle1">
      Bu modüle erişim yetkiniz yok.
    </div>
  </q-page>
</template>

<script setup>
import { computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useQuasar } from 'quasar'
import { useOrderProductionUpdateStore } from 'src/stores/OrderProductionUpdateStore'
import { useAuthStore } from 'src/stores/authStore'
import { usePermission } from 'src/composables/usePermission'
import api, { extractApiErrorDetail } from 'src/services/api'

const { canRead } = usePermission()
const canReadOrder = canRead('order')

const router = useRouter()
const $q = useQuasar()
const store = useOrderProductionUpdateStore()

let searchTimer = null
watch(
  () => store.filters.search,
  () => {
    clearTimeout(searchTimer)
    searchTimer = setTimeout(() => {
      store.fetchOrders()
    }, 400)
  }
)

const productionOrders = computed(() => store.filteredOrders)

const totalVisibleUSD = computed(() =>
  productionOrders.value.reduce((sum, o) => {
    const v = Number(o.TotalAmountUSD || 0)
    return sum + (Number.isFinite(v) ? v : 0)
  }, 0)
)

function clearFilters () {
  store.filters.search = ''
  store.filters.CurrAccCode = ''
  store.filters.OrderDate = ''
  store.fetchOrders()
}

function formatDate (v) {
  if (!v) return ''
  return String(v)
}

function selectOrder (row) {
  if (!row?.OrderHeaderID) {
    $q.notify({ type: 'warning', message: 'OrderHeaderID bulunamadı' })
    return
  }

  router.push({
    name: 'orderproductionupdate',
    params: { orderHeaderID: row.OrderHeaderID }
  })
}

async function printPDF (row) {
  try {
    const auth = useAuthStore()
    if (!auth?.token) {
      $q.notify({ type: 'warning', message: 'Oturum bulunamadı' })
      return
    }

    const res = await api.get(`/order/pdf/${row.OrderHeaderID}`, {
      responseType: 'blob'
    })

    const blob = new Blob([res.data], { type: 'application/pdf' })
    const url = URL.createObjectURL(blob)
    window.open(url, '_blank')
    setTimeout(() => URL.revokeObjectURL(url), 2000)
  } catch (err) {
    const status = err?.response?.status
    const detail = extractApiErrorDetail(err)
    console.error(`PDF load error [${status}] /order/pdf/${row?.OrderHeaderID}: ${detail}`)
    $q.notify({ type: 'negative', message: `PDF alınamadı: ${detail}` })
  }
}

function exportExcel () {
  const auth = useAuthStore()

  if (!auth?.token) {
    $q.notify({
      type: 'negative',
      message: 'Oturum bulunamadı'
    })
    return
  }

  const params = new URLSearchParams()
  if (store.filters.search) params.append('search', store.filters.search)

  api.get(`/orders/production-list?${params.toString()}`, {
    responseType: 'blob'
  }).then((res) => {
    const blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = 'uretime_verilecek_siparisler.xlsx'
    a.click()
    URL.revokeObjectURL(url)
  }).catch((err) => {
    const detail = extractApiErrorDetail(err)
    $q.notify({ type: 'negative', message: `Excel alınamadı: ${detail}` })
  })
}

onMounted(() => {
  store.fetchOrders()
})

const columns = [
  { name: 'open', label: '', field: 'open', align: 'center', sortable: false },
  { name: 'OrderNumber', label: 'Sipariş No', field: 'OrderNumber', align: 'left', sortable: true, style: 'min-width:108px;white-space:nowrap', headerStyle: 'min-width:108px;white-space:nowrap' },
  { name: 'OrderDate', label: 'Tarih', field: 'OrderDate', align: 'center', sortable: true, style: 'min-width:82px;white-space:nowrap', headerStyle: 'min-width:82px;white-space:nowrap' },
  { name: 'CurrAccCode', label: 'Cari Kod', field: 'CurrAccCode', align: 'left', sortable: true, style: 'min-width:82px;white-space:nowrap', headerStyle: 'min-width:82px;white-space:nowrap' },
  { name: 'CurrAccDescription', label: 'Cari Adı', field: 'CurrAccDescription', align: 'left', sortable: true, classes: 'ol-col-cari', headerClasses: 'ol-col-cari', style: 'width:160px;max-width:160px', headerStyle: 'width:160px;max-width:160px' },
  { name: 'MusteriTemsilcisi', label: 'Temsilci', field: 'MusteriTemsilcisi', align: 'left', sortable: true, classes: 'ol-col-short', headerClasses: 'ol-col-short', style: 'width:88px;max-width:88px', headerStyle: 'width:88px;max-width:88px' },
  { name: 'Piyasa', label: 'Piyasa', field: 'Piyasa', align: 'left', sortable: true, classes: 'ol-col-short', headerClasses: 'ol-col-short', style: 'width:72px;max-width:72px', headerStyle: 'width:72px;max-width:72px' },
  { name: 'CreditableConfirmedDate', label: 'Onay', field: 'CreditableConfirmedDate', align: 'center', sortable: true, style: 'min-width:86px;white-space:nowrap', headerStyle: 'min-width:86px;white-space:nowrap' },
  { name: 'DocCurrencyCode', label: 'PB', field: 'DocCurrencyCode', align: 'center', sortable: true, style: 'min-width:46px;white-space:nowrap', headerStyle: 'min-width:46px;white-space:nowrap' },
  {
    name: 'TotalAmount',
    label: 'Tutar',
    field: 'TotalAmount',
    align: 'right',
    sortable: true,
    style: 'min-width:120px;white-space:nowrap',
    headerStyle: 'min-width:120px;white-space:nowrap',
    format: (val, row) => Number(val || 0).toLocaleString('tr-TR', { minimumFractionDigits: 2 }) + ' ' + row.DocCurrencyCode
  },
  {
    name: 'TotalAmountUSD',
    label: 'Tutar (USD)',
    field: 'TotalAmountUSD',
    align: 'right',
    sortable: true,
    style: 'min-width:120px;white-space:nowrap',
    headerStyle: 'min-width:120px;white-space:nowrap',
    format: val => Number(val || 0).toLocaleString('tr-TR', { minimumFractionDigits: 2 }) + ' USD'
  },
  { name: 'IsCreditableConfirmed', label: 'Durum', field: 'IsCreditableConfirmed', align: 'center', sortable: true },
  { name: 'HasUretimUrunu', label: 'Üretim', field: 'HasUretimUrunu', align: 'left', sortable: true, style: 'min-width:190px;white-space:nowrap', headerStyle: 'min-width:190px;white-space:nowrap' },
  { name: 'Description', label: 'Açıklama', field: 'Description', align: 'left', sortable: false, classes: 'ol-col-desc', headerClasses: 'ol-col-desc', style: 'width:160px;max-width:160px', headerStyle: 'width:160px;max-width:160px' }
]
</script>
