<template>
  <v-container fluid class="pa-6">
    <PushZipUpload
      :uploaded-zip="form.uploadedZip"
      :is-dragging="form.isDragging"
      :zip-uploading="form.zipUploading"
      @dragover="form.isDragging = true"
      @dragleave="form.isDragging = false"
      @drop="form.handleZipDrop"
      @file-select="form.handleZipSelect"
      @clear="form.clearZipUpload"
    />

    <PushToolbar
      v-model:source-path="form.sourcePath"
      v-model:target-path="form.targetPath"
      :zip-locked="!!form.uploadedZip"
      :pushing="progress.pushing"
      @preview="preview.doPreview"
      @push="progress.doPush"
    />

    <PushServerGrid
      :select-all="servers.selectAll"
      v-model:server-search="servers.serverSearch"
      :servers-loading="servers.serversLoading"
      :servers-by-category="servers.serversByCategory"
      :selected-ids="servers.selectedIds"
      :push-status="servers.pushStatus"
      :is-category-all-selected="servers.isCategoryAllSelected"
      @toggle-all="servers.toggleAll"
      @refresh="servers.loadServers"
      @toggle-category="servers.toggleCategory"
      @toggle-server="servers.toggleServer"
    />

    <PushSyncModeCard
      v-model:sync-mode="form.syncMode"
      :sync-mode-desc="form.syncModeDesc"
    />

    <PushProgressList
      :items="progress.wsProgressItems"
      :batch-id="progress.pushBatchId"
      :pushing="progress.pushing"
      :cancelling="progress.cancelling"
      :done-count="progress.doneCount"
      :total-progress="progress.totalProgress"
      @cancel="progress.cancelPush"
    />

    <PushPreviewDialog
      v-model="preview.showPreview"
      :loading="preview.previewLoading"
      :results="preview.previewResults"
      :selected-count="servers.selectedIds.size"
      :preview-done="preview.previewDone"
      :preview-total="preview.previewTotal"
      :large-batch="preview.previewLargeBatch"
      :warn-threshold="preview.previewWarnThreshold"
      :error-count="preview.previewErrorCount"
      :sync-mode="form.syncMode"
      @confirm-push="onConfirmAndPush"
    />

    <PushDiagnoseDialog
      v-model="logs.showDiagnose"
      :loading="logs.diagnoseLoading"
      :result="logs.diagnoseResult"
      :target-name="logs.diagnoseTarget?.server_name ?? undefined"
    />

    <PushHistoryTable
      :items="logs.logs"
      :headers="logs.logHeaders"
      :total="logs.logTotal"
      :loading="logs.logLoading"
      v-model:page="logs.logPage"
      v-model:status-filter="logs.logStatusFilter"
      v-model:sync-mode-filter="logs.logSyncModeFilter"
      v-model:server-filter="logs.logServerFilter"
      :status-options="logs.logStatusOptions"
      :sync-mode-options="logs.logSyncModeOptions"
      :server-options="logs.logServerOptions"
      :reconciling="logs.reconcilingLogs"
      @filter-change="logs.onLogFilterChange"
      @page-change="logs.loadLogs"
      @reconcile="logs.reconcileStaleLogs"
      @diagnose="logs.openDiagnose"
    />
  </v-container>
</template>

<script setup lang="ts">
import PushDiagnoseDialog from '@/components/push/PushDiagnoseDialog.vue'
import PushHistoryTable from '@/components/push/PushHistoryTable.vue'
import PushPreviewDialog from '@/components/push/PushPreviewDialog.vue'
import PushProgressList from '@/components/push/PushProgressList.vue'
import PushServerGrid from '@/components/push/PushServerGrid.vue'
import PushSyncModeCard from '@/components/push/PushSyncModeCard.vue'
import PushToolbar from '@/components/push/PushToolbar.vue'
import PushZipUpload from '@/components/push/PushZipUpload.vue'
import { usePushPage } from '@/composables/push'

const { form, servers, progress, preview, logs, onConfirmAndPush } = usePushPage()
</script>
