<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useApi } from '@/composables/useApi'
import { useAuthStore } from '@/stores/auth'
import { Download, Upload, FileText, Loader2 } from 'lucide-vue-next'
import { safeFileSize, safeDate } from '@/utils/formatters'

interface ExportRecord {
  id: string
  export_type: 'full' | 'config_only' | 'store_only'
  file_size_bytes: number
  created_at: string
  download_url?: string
}

const api = useApi()
const authStore = useAuthStore()
const exports = ref<ExportRecord[]>([])
const isExporting = ref(false)
const isImporting = ref(false)
const exportType = ref<'full' | 'config_only' | 'store_only'>('full')
const uploadFile = ref<File | null>(null)

async function fetchExports() {
  exports.value = await api.get<ExportRecord[]>('/migration/exports')
}

async function createExport() {
  if (!confirm(`Export ${exportType.value.replace('_', ' ')} data?`)) return
  isExporting.value = true
  try {
    const result = await api.post<{ export_id: string }>('/migration/export', { export_type: exportType.value })
    alert(`Export created: ${result.export_id}`)
    await fetchExports()
  } finally {
    isExporting.value = false
  }
}

function handleFileSelect(event: Event) {
  const target = event.target as HTMLInputElement
  if (target.files && target.files.length > 0) {
    uploadFile.value = target.files[0] ?? null
  }
}

async function importData() {
  if (!uploadFile.value) return
  if (!confirm('Import data? This will overwrite existing configuration.')) return

  isImporting.value = true
  try {
    const formData = new FormData()
    formData.append('file', uploadFile.value)

    const response = await fetch('/api/migration/import', {
      method: 'POST',
      headers: { 'Authorization': 'Bearer ' + authStore.accessToken },
      body: formData,
    })

    if (!response.ok) {
      throw new Error('Import failed')
    }

    alert('Import successful')
    uploadFile.value = null
  } catch (err) {
    alert(err instanceof Error ? err.message : 'Import failed')
  } finally {
    isImporting.value = false
  }
}

function formatBytes(bytes: number): string {
  return safeFileSize(bytes)
}

onMounted(() => {
  fetchExports()
})
</script>

<template>
  <div class="p-6 space-y-6">
    <!-- Header -->
    <div class="flex items-center gap-3">
      <FileText class="w-5 h-5 text-oxide-500" />
      <h1 class="text-2xl font-bold text-neutral-100">Migration</h1>
    </div>

    <!-- Export Section -->
    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
      <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Export Data</h2>
      <div class="flex items-end gap-4">
        <div>
          <label class="block text-xs text-neutral-500 mb-2">Export Type</label>
          <div class="flex bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden">
            <button
              v-for="opt in (['full', 'config_only', 'store_only'] as const)"
              :key="opt"
              @click="exportType = opt"
              class="px-4 py-2 text-sm font-medium transition-colors capitalize"
              :class="exportType === opt ? 'bg-oxide-500/15 text-oxide-400' : 'text-neutral-400 hover:text-neutral-200'"
            >
              {{ opt.replace('_', ' ') }}
            </button>
          </div>
        </div>
        <button
          @click="createExport"
          :disabled="isExporting"
          class="flex items-center gap-2 px-4 py-2 bg-oxide-500 hover:bg-oxide-600 disabled:opacity-50 text-white font-medium rounded-lg transition-colors"
        >
          <Loader2 v-if="isExporting" class="w-4 h-4 animate-spin" />
          <Download v-else class="w-4 h-4" />
          Export
        </button>
      </div>
    </div>

    <!-- Export History -->
    <div class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
      <div class="p-5 border-b border-neutral-800">
        <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Export History</h2>
      </div>
      <div v-if="exports.length === 0" class="p-8 text-center text-neutral-500">
        No exports yet.
      </div>
      <table v-else class="w-full">
        <thead class="bg-neutral-800/50 border-b border-neutral-800">
          <tr>
            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Type</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Created</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Size</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Actions</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-neutral-800">
          <tr v-for="exp in exports" :key="exp.id" class="hover:bg-neutral-800/30">
            <td class="px-4 py-3 text-sm text-neutral-200 capitalize">{{ exp.export_type.replace('_', ' ') }}</td>
            <td class="px-4 py-3 text-sm text-neutral-400">{{ safeDate(exp.created_at) }}</td>
            <td class="px-4 py-3 text-sm text-neutral-400">{{ formatBytes(exp.file_size_bytes) }}</td>
            <td class="px-4 py-3">
              <a
                v-if="exp.download_url"
                :href="exp.download_url"
                class="text-oxide-400 hover:text-oxide-300 text-sm transition-colors"
              >
                Download
              </a>
              <span v-else class="text-sm text-neutral-600">Preparing...</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Import Section -->
    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
      <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Import Data</h2>
      <div class="space-y-4">
        <div class="border-2 border-dashed border-neutral-700 rounded-lg p-6 text-center">
          <Upload class="w-8 h-8 text-neutral-500 mx-auto mb-2" />
          <input
            type="file"
            accept=".json,.zip"
            @change="handleFileSelect"
            class="hidden"
            id="file-upload"
          />
          <label for="file-upload" class="cursor-pointer">
            <span class="text-sm text-oxide-400 hover:text-oxide-300 transition-colors">
              {{ uploadFile ? uploadFile.name : 'Click to select file' }}
            </span>
          </label>
          <p class="text-xs text-neutral-500 mt-1">JSON or ZIP exports</p>
        </div>
        <button
          @click="importData"
          :disabled="!uploadFile || isImporting"
          class="w-full flex items-center justify-center gap-2 px-4 py-2 bg-oxide-500 hover:bg-oxide-600 disabled:opacity-50 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors"
        >
          <Loader2 v-if="isImporting" class="w-4 h-4 animate-spin" />
          <Upload v-else class="w-4 h-4" />
          Import
        </button>
      </div>
    </div>
  </div>
</template>
