<template>
  <section class='section-list'>
    <list-table-content
      :tableHeader='tableHeader'
      icon='draws'
      title='Katılım Listesi'
      listText='Katılımcı'
      :rowAction='OpenUser'
      :apiList="'Katilimci/ByCekilisId/' + piyangoStore.selectedLottery"
      v-model:pagination='paginationData'
      v-model:refresh='piyangoKatilimciStore.refreshPiyangoKatilimciList'>
      <template #extraButtons>
        <button
          class='button-c'
          @click='piyangoKatilimciService.CreateOnlineDraw'
          v-if='
            paginationData.totalRecords > 0 &&
            usersStore.isPanelUser &&
            !piyangoStore.lotteryDrawState  &&
            piyangoStore.lotteryApprove === 4 &&
            piyangoStore.lotteryData.cekilisYontemiId === 2
          '>
          Online Çekiliş Düzenle
        </button>
        <a href='/data/ornek-katilimci-listesi.xlsx' target='_blank' class='button-c'>
          Örnek Katılımcı Dosyası İndir
        </a>
        <button
          class='button-c'
          @click='AddNewDocument'
          v-if='!usersStore.isPanelUser && !piyangoStore.lotteryDrawState'>
          Katılımcı Dosyası Yükle
        </button>
        <button
          class="button-c button-alert"
          @click="DeleteAllButton"
          v-if="
            paginationData.totalRecords > 0 &&
            usersStore.isPanelUser &&
            !piyangoStore.lotteryDrawState &&
            (piyangoStore.lotteryApprove === 7 ||  piyangoStore.lotteryApprove === 14)
          ">

          Tüm katılımcıları Sil
        </button>
        <button
          @click="SendChangeRequest"
          v-if="piyangoStore.lotteryApprove === 4 && !usersStore.isPanelUser">
          Katılım Listesi Değişiklik Talebi Gönder
        </button>
      </template>
    </list-table-content>
    <panel-wrapper
      v-if='piyangoKatilimciStore.katilimciFilePanel'
      v-model='piyangoKatilimciStore.katilimciFilePanel'
      panel-title='Katılımcı Dosyası Yükle'>
      <template #panelContent>
        <panel-katilimci-document />
      </template>
      <template #footerButton>
        <button class='button-c button-save' @click='FileUpload'>Yükle</button>
      </template>
    </panel-wrapper>
    <panel-wrapper
      wide
      v-if='piyangoKatilimciStore.katilimciUserPanel'
      v-model='piyangoKatilimciStore.katilimciUserPanel'
      :panel-title="
        piyangoKatilimciStore.isPiyangoKatilimciUserUpdate
          ? 'Katılımcı Düzenle'
          : 'Katılımcı Ekle'
      ">
      <template #panelContent>
        <panel-piyango-katilimci />
      </template>
      <template #footerButton v-if='!usersStore.isPanelUser'>
        <button
          :disabled='!piyangoKatilimciValidationStore.userFormChanged'
          class='button-c button-save'
          @click='piyangoKatilimciService.SaveKatilimciUser'>
          {{ piyangoKatilimciStore.isPiyangoKatilimciUserUpdate ? 'Kaydet' : 'Ekle' }}
        </button>
      </template>
    </panel-wrapper>
    <panel-wrapper
      v-if="uploadProgressPanel"
      v-model="uploadProgressPanel"
      panel-title="Yükleme Durumu">
      <template #panelContent>
        <div class="progress-container">
          <div class="upload-warning">
            📌 İşlem sırasında tarayıcıyı veya bu sekmeyi kapatmayınız.
          </div>
          <div class="progress-bar">
            <div
              class="progress-fill"
              :style="{ width: uploadProgressValue + '%' }"
            ></div>
          </div>
          <div class="progress-text">
            <template v-if="uploadProgressValue === 0">
              Dosya içeriği okunuyor, yükleme başlatılıyor...
            </template>
            <template v-else>
              {{ uploadProgressValue }}%
            </template>
          </div>
        </div>
      </template>
    </panel-wrapper>
  </section>
</template>
<script setup lang='ts'>
  import { ref, computed } from 'vue'
  import PanelWrapper from '@/components/PanelWrapper.vue'
  import PanelKatilimciDocument from '@/module/cekilisler/components/panel/PanelKatilimciDocument.vue'
  import PanelPiyangoKatilimci from '@/module/cekilisler/components/panel/PanelPiyangoKatilimci.vue'

  import { useDateStore } from '@/stores/dateStore'

  const dateStore = useDateStore()
  import { useUsersStore } from '@/stores/usersStore'

  const usersStore = useUsersStore()
  import { useDataStore } from '@/stores/dataStore'

  const dataStore = useDataStore()
  import { usePiyangoStore } from '../stores/piyangoStore'

  const piyangoStore = usePiyangoStore()
  import { usePiyangoKatilimciStore } from '../stores/piyangoKatilimciStore'

  const piyangoKatilimciStore = usePiyangoKatilimciStore()
  import { usePiyangoKatilimciValidationStore } from '../validation/piyangoKatilimciValidationStore'

  const piyangoKatilimciValidationStore = usePiyangoKatilimciValidationStore()
  import { usePiyangoKatilimciService } from '../service/piyangoKatilimciService'

  const piyangoKatilimciService = usePiyangoKatilimciService()
  import { useDialogStore } from '@/components/global/dialogStore'

  const dialogStore = useDialogStore()

  import { usePiyangoOnayStore } from '../stores/piyangoOnayStore'
  const piyangoOnayStore = usePiyangoOnayStore()
  import { usePiyangoOnayService } from '../service/piyangoOnayService'
  const piyangoOnayService = usePiyangoOnayService()

  import { connectToHub, onProgress, onInsertProgress, onCompleted, onError } from '../service/signalrService'


  const uploadProgressValue = ref(0)
  const uploadProgressPanel = ref(false)
  const today = ref<Date>(new Date())
  const ilanTarihi = ref<Date>(new Date(piyangoStore.lotteryIlanTarihi!))

  const tableHeader = ref<Record<string, any>[]>([
    {
      name: 'cekilisKatilimSiraNo',
      title: 'Çekiliş Katılım Sıra No',
      sort: true,
      style: { width: '20%' }
    },
    {
      name: 'cekilisHakkiAdedi',
      title: 'Çekiliş Hakkı Adedi',
      style: { width: '10%' }
    },
    {
      name: 'sifreCode',
      title: 'Şifre (Code)',
      sort: true,
      style: { width: '20%' }
    },
    {
      name: 'magazaKartNumarasi',
      title: '(Mağaza Kartı)  (Müşteri Kartı) Numarası',
      sort: true,
      style: { width: '20%' }
    },
    {
      name: 'isimSoyisim',
      title: 'Ad Soyad',
      sort: true,
      style: { width: '20%' }
    },

    {
      name: 'telefonNumarasi',
      title: 'Telefon',
      sort: true
    },
    {
      name: 'ilce',
      title: 'İlçe',
      sort: true
    },
    {
      name: 'il',
      title: 'İl',
      sort: true
    },
    {
      name: 'email',
      title: 'Email',
      sort: true,
      style: { width: '15%' }
    },

    {
      name: 'katilimTarihi',
      title: 'Katılım Tarihi',
      sort: true,
      style: { width: '15%' }
    },
    {
      name: 'fisFaturaTarihi',
      title: 'Fiş/Fatura Tarihi',
      sort: true,
      style: { width: '15%' }
    },
    {
      name: 'fisFaturaNo',
      title: 'Fiş/Fatura No',
      sort: true,
      style: { width: '15%' }
    },
    {
      name: 'kampanyaliUrunTutari',
      title: 'Fiş/Fatura (Kampanyalı Ürün Tutarı)',
      sort: true,
      style: { width: '15%' }
    },
    {
      name: 'toplamTutar',
      title: 'Fiş/Fatura  Toplam Tutarı',
      sort: true,
      style: { width: '15%' }
    },

    {
      name: 'magazaAdiYeri',
      title: 'Mağaza Adı/Yeri',
      sort: true,
      style: { width: '15%' }
    }
  ])

  const paginationData = ref<Record<string, any>>({})

  const KatilimciAddAction = computed(() => {
    if (
      !usersStore.isPanelUser &&
      piyangoStore.lotteryApprove === 4 &&
      !piyangoStore.lotteryDrawState
    )
      return AddNewKatilimci
    else return ''
  })

  const AddNewDocument = () => {
    dataStore.panelData = {
      title: '',
      file: ''
    }
    piyangoKatilimciStore.katilimciFilePanel = true
  }

  const AddNewKatilimci = () => {
    piyangoKatilimciStore.isPiyangoKatilimciUserUpdate = false
    piyangoKatilimciValidationStore.userFormChanged = false
    piyangoKatilimciStore.RestoreUserFormData()
    piyangoKatilimciStore.isNewKatilimci = true
    piyangoKatilimciStore.katilimciUserPanel = true
  }

  const OpenUser = async (row: any) => {
    piyangoKatilimciStore.isPiyangoKatilimciUserUpdate = true
    piyangoKatilimciValidationStore.userFormChanged = false
    let data = await piyangoKatilimciService.KatilimciData(row.id)
    Object.assign(piyangoKatilimciStore.piyangoKatilimciUserFormData, data)
    piyangoKatilimciStore.isNewKatilimci = false
    piyangoKatilimciStore.katilimciUserPanel = true
  }
  const FileUpload = async () => {
    const connectionId = await connectToHub()

    // Progress modal'ı aç
    uploadProgressValue.value = 0
    uploadProgressPanel.value = true

    onProgress((data) => {
      uploadProgressValue.value = data.Percent
      console.log('Progress:', data.Percent)
    })

    onCompleted((data) => {
      console.log('Tamamlandı:', data)
      uploadProgressPanel.value = false
      piyangoKatilimciStore.refreshPiyangoKatilimciList = true
      piyangoKatilimciStore.katilimciFilePanel = false
    })

    const formData = new FormData()
    formData.append('excelFile', piyangoKatilimciStore.piyangoKatilimciFileFormData.excelFile)
console.log( dataStore.panelData)
    const response = await dataStore.dataPost(
      `Katilimci/ExcelleYukle/${piyangoStore.selectedLottery}?connectionId=${connectionId}`,
      {
        data: formData,
        headers: { 'Content-Type': 'multipart/form-data' }
      }
    )

    if (response.data !== 'errorfalse') {
      // Başarı işlemi zaten onCompleted içinde yapıldı
    } else {
      // Hata olursa paneli kapat
      uploadProgressPanel.value = false
    }
  }
  // const FileUpload = async () => {
  //   if (true) {
  //     const formData = new FormData()
  //     formData.append('excelFile', dataStore.panelData.file)
  //     let dt: any
  //
  //     dt = await dataStore.dataPost(
  //       `Katilimci/ExcelleYukle/${piyangoStore.selectedLottery}?connectionId=${connectionId}`,
  //       {
  //         data: formData,
  //         headers: { 'Content-Type': 'multipart/form-data' }
  //       }
  //     )
  //     if (dt !== 'errorfalse') {
  //       piyangoKatilimciStore.refreshPiyangoKatilimciList = true
  //       piyangoKatilimciStore.katilimciFilePanel = false
  //     }
  //   }
  // }
  const DeleteAllButton = () => {
    dialogStore.CreateDialog({
      title: 'Tüm Katılımcıları Sil',
      content:
        'Tüm katılımcıları silmek istediğinize emin misiniz? Bu işlem geri alınamaz.',
      closeText: 'Vazgeç',
      buttons: [
        {
          label: 'Tüm katılımcıları Sil',
          type: 'alert',
          function: DeleteAll
        }
      ]
    })
  }
  const DeleteAll = async (id: number) => {
    var dt = await dataStore.dataDelete(
      'Katilimci/DeleteCekilisKatilimci/' + piyangoStore.selectedLottery
    )

    if (dt !== 'errorfalse') {
      piyangoKatilimciStore.refreshPiyangoKatilimciList = true
      dialogStore.CloseDialog(id)
    }
  }

  const SendChangeRequest = async () => {
    piyangoOnayStore.piyangoOnayForm.onayDurumuIslemTipiId = 14
    piyangoOnayStore.piyangoOnayForm.file = ''
    piyangoOnayStore.piyangoOnayForm.aciklama = ''
    await piyangoOnayService.SaveOnayDurum()
  }

</script>
<style>
  .progress-container {
    width: 100%;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .progress-bar {
    width: 90%;
    max-width: 400px;
    height: 30px;
    background: #f0f0f0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.15);
  }

  .progress-fill {
    height: 100%;
    background-color: #42b983;
    transition: width 0.3s ease;
  }

  .progress-text {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
  }
  .upload-warning {
    background: #fff8db;
    color: #856404;
    border: 1px solid #ffeeba;
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 14px;
    text-align: center;
  }
</style>