<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useApi } from '@/composables/useApi'
import { useAuthStore } from '@/stores/auth'
import { useToastStore } from '@/stores/toast'
import { safeFileSize, safeDate } from '@/utils/formatters'
import Panel from '@/components/ds/data/Panel.vue'
import Button from '@/components/ds/core/Button.vue'
import Badge from '@/components/ds/core/Badge.vue'
import Icon from '@/components/ds/core/Icon.vue'
import Alert from '@/components/ds/feedback/Alert.vue'
import EmptyState from '@/components/ds/feedback/EmptyState.vue'

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 toast = useToastStore()
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)
const importError = ref<string | null>(null)
const importSuccess = ref(false)

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 })
    toast.success(`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
  importError.value = null
  importSuccess.value = false
  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')
    }

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

const EXPORT_TYPE_OPTIONS = [
  { value: 'full' as const, label: 'Full' },
  { value: 'config_only' as const, label: 'Config only' },
  { value: 'store_only' as const, label: 'Store only' },
]

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

<template>
  <div class="mv">
    <!-- Page head -->
    <div class="mv__head">
      <div class="mv__head-id">
        <div class="mv__head-chip">
          <Icon name="upload" :size="20" :stroke-width="2" />
        </div>
        <div>
          <div class="t-eyebrow">Platform</div>
          <h1 class="mv__title">Migration</h1>
        </div>
      </div>
    </div>

    <!-- Export section -->
    <Panel title="Export data" subtitle="Create a portable backup of your configuration">
      <div class="mv__export-row">
        <div class="mv__export-field">
          <div class="mv__field-label">Export type</div>
          <div class="mv__seg">
            <button
              v-for="opt in EXPORT_TYPE_OPTIONS"
              :key="opt.value"
              type="button"
              class="mv__seg-btn"
              :class="exportType === opt.value && 'mv__seg-btn--active'"
              @click="exportType = opt.value"
            >{{ opt.label }}</button>
          </div>
        </div>
        <Button
          icon="download"
          :loading="isExporting"
          :disabled="isExporting"
          @click="createExport"
        >Export</Button>
      </div>
    </Panel>

    <!-- Export history -->
    <Panel :flush-body="true" title="Export history">
      <EmptyState
        v-if="exports.length === 0"
        icon="file-text"
        title="No exports yet"
        description="Create an export above to see it listed here."
      />
      <table v-else class="cc-table">
        <thead>
          <tr>
            <th>Type</th>
            <th>Created</th>
            <th>Size</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="exp in exports" :key="exp.id">
            <td>
              <Badge tone="neutral">{{ exp.export_type.replace('_', ' ') }}</Badge>
            </td>
            <td class="td-mono">{{ safeDate(exp.created_at) }}</td>
            <td class="td-mono">{{ safeFileSize(exp.file_size_bytes) }}</td>
            <td>
              <a
                v-if="exp.download_url"
                :href="exp.download_url"
                class="mv__dl-link"
              >
                <Icon name="download" :size="13" />
                Download
              </a>
              <span v-else class="mv__preparing">Preparing…</span>
            </td>
          </tr>
        </tbody>
      </table>
    </Panel>

    <!-- Import section -->
    <Panel title="Import data" subtitle="Restore from a JSON or ZIP export file">
      <div class="mv__import-body">
        <Alert v-if="importSuccess" tone="online">Import completed successfully.</Alert>
        <Alert v-if="importError" tone="danger">{{ importError }}</Alert>

        <label for="file-upload" class="mv__dropzone">
          <Icon name="upload" :size="28" class="mv__dropzone-icon" />
          <span class="mv__dropzone-label">
            {{ uploadFile ? uploadFile.name : 'Click to select file' }}
          </span>
          <span class="mv__dropzone-hint">JSON or ZIP exports</span>
          <input
            id="file-upload"
            type="file"
            accept=".json,.zip"
            class="mv__file-input"
            @change="handleFileSelect"
          />
        </label>

        <Button
          :block="true"
          icon="upload"
          :loading="isImporting"
          :disabled="!uploadFile || isImporting"
          @click="importData"
        >Import</Button>
      </div>
    </Panel>
  </div>
</template>

<style scoped>
.mv {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Page head */
.mv__head { display: flex; align-items: center; }
.mv__head-id { display: flex; align-items: center; gap: 12px; }
.mv__head-chip {
  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-border);
}
.mv__title {
  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
  color: var(--text-primary); margin-top: 3px;
}

/* Export row */
.mv__export-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}
.mv__export-field { display: flex; flex-direction: column; gap: 6px; }
.mv__field-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
}

/* Segment control (mirrors WipesView pattern) */
.mv__seg {
  display: flex;
  background: var(--surface-inset);
  border-radius: var(--radius-md);
  box-shadow: var(--ring-default);
  overflow: hidden;
}
.mv__seg-btn {
  height: var(--control-h-md);
  padding: 0 14px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: var(--transition-colors);
}
.mv__seg-btn:hover { color: var(--text-primary); background: var(--surface-hover); }
.mv__seg-btn--active {
  background: var(--accent-soft);
  color: var(--accent-text);
  box-shadow: inset 0 0 0 1px var(--accent-border);
}

/* Table */
.cc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.cc-table thead tr {
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-inset);
}
.cc-table th {
  padding: 10px 16px;
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.cc-table tbody tr {
  border-bottom: 1px solid var(--border-subtle);
  transition: var(--transition-colors);
}
.cc-table tbody tr:last-child { border-bottom: 0; }
.cc-table tbody tr:hover { background: var(--surface-hover); }
.cc-table td {
  padding: 11px 16px;
  color: var(--text-secondary);
  vertical-align: middle;
}
.td-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Download link */
.mv__dl-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--accent-text);
  text-decoration: none;
  transition: var(--transition-colors);
}
.mv__dl-link:hover { color: var(--accent); }
.mv__preparing { font-size: var(--text-sm); color: var(--text-muted); }

/* Import body */
.mv__import-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Dropzone */
.mv__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 32px 24px;
  border: 1.5px dashed var(--border-default);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-colors);
  position: relative;
}
.mv__dropzone:hover { border-color: var(--accent-border); background: var(--accent-soft); }
.mv__dropzone-icon { color: var(--text-tertiary); }
.mv__dropzone:hover .mv__dropzone-icon { color: var(--accent-text); }
.mv__dropzone-label { font-size: var(--text-sm); font-weight: 500; color: var(--accent-text); }
.mv__dropzone-hint { font-size: var(--text-xs); color: var(--text-muted); }
.mv__file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
</style>
