<template>
  <div class="setup-wizard">
    <div class="wizard-card">
      <header class="wizard-head">
        <h1>Set up ShopDB</h1>
        <p class="wizard-sub">A few quick steps to get this site ready.</p>
        <ol class="wizard-steps">
          <li v-for="(s, i) in steps" :key="s.key" :class="{ active: i === step, done: i < step }">
            <span class="step-num">{{ i < step ? '&check;' : i + 1 }}</span>
            <span class="step-label">{{ s.label }}</span>
          </li>
        </ol>
      </header>

      <section class="wizard-body">
        <!-- Site -->
        <div v-if="current.key === 'site'">
          <h2>Site details</h2>
          <p class="hint">Used for the dashboard header and QR / absolute links.</p>
          <div class="form-group">
            <label>Facility name</label>
            <input v-model="form.facility_name" type="text" class="form-control" placeholder="West Jefferson" />
          </div>
          <div class="form-group">
            <label>Site base URL <span class="hint">(blank = use the browsing origin)</span></label>
            <input v-model="form.site_base_url" type="url" class="form-control" placeholder="https://shopdb.example.net" />
          </div>
          <div class="form-group">
            <label>PC access domain <span class="hint">(for remote-access links)</span></label>
            <input v-model="form.pc_access_domain" type="text" class="form-control" placeholder="device.geaerospace.net" />
          </div>
        </div>

        <!-- Plugins -->
        <div v-else-if="current.key === 'plugins'">
          <h2>Features</h2>
          <p class="hint">Turn features on or off. Changes to routes take effect after the app restarts.</p>
          <div v-if="plugins.length" class="plugin-list">
            <label v-for="p in plugins" :key="p.name" class="plugin-row">
              <input type="checkbox" :checked="p.enabled" @change="togglePlugin(p, $event.target.checked)" />
              <span class="plugin-name">{{ p.name }}</span>
              <span class="plugin-desc">{{ p.description }}</span>
            </label>
          </div>
          <p v-else class="hint">No optional plugins found.</p>

          <!-- Per-plugin config for enabled plugins that declare a schema -->
          <div v-for="p in configurablePlugins" :key="`config-${p.name}`" class="config-block">
            <h3 class="config-title">{{ p.name }} configuration</h3>
            <div v-for="field in p.config_schema" :key="field.key" class="form-group">
              <label>{{ field.label }}<span v-if="field.secret" class="secret-tag">secret</span></label>
              <input
                :type="field.type === 'password' ? 'password' : (field.type === 'number' ? 'number' : 'text')"
                :placeholder="field.default || ''"
                v-model="pluginConfig[field.key]"
                class="form-control" />
              <small v-if="field.help" class="hint">{{ field.help }}</small>
            </div>
          </div>

          <!-- Secrets are never stored in the DB; emit .env lines to paste -->
          <div v-if="envLines" class="env-block">
            <p class="hint">Paste these into <code>.env</code> and restart the app (secrets are not stored in the database):</p>
            <pre class="env-pre">{{ envLines }}</pre>
            <button type="button" class="btn btn-secondary btn-sm" @click="copyEnv">Copy</button>
          </div>
        </div>

        <!-- Floor map -->
        <div v-else-if="current.key === 'map'">
          <h2>Floor map</h2>
          <p class="hint">Set the blueprint dimensions now; upload the image any time in Settings &gt; Floor Map.</p>
          <div class="form-row">
            <div class="form-group">
              <label>Map width (px)</label>
              <input v-model.number="form.map_width" type="number" class="form-control" placeholder="2000" />
            </div>
            <div class="form-group">
              <label>Map height (px)</label>
              <input v-model.number="form.map_height" type="number" class="form-control" placeholder="1200" />
            </div>
          </div>
        </div>

        <!-- Starter data -->
        <div v-else-if="current.key === 'data'">
          <h2>Starter data</h2>
          <p class="hint">Add common hardware vendors so you can start adding assets right away. Safe to run - it skips ones you already have.</p>
          <button class="btn btn-secondary" :disabled="seeding" @click="seedStarter">
            {{ seeding ? 'Adding...' : 'Add common vendors' }}
          </button>
          <p v-if="seedResult" class="seed-result">{{ seedResult }}</p>
        </div>

        <!-- Finish -->
        <div v-else-if="current.key === 'finish'">
          <h2>All set</h2>
          <p class="hint">You can change any of this later under Settings. Finish to go to the dashboard.</p>
        </div>
      </section>

      <footer class="wizard-foot">
        <button v-if="step > 0" class="btn btn-secondary" @click="back">Back</button>
        <div class="foot-right">
          <button type="button" class="btn btn-text" @click="skipForNow">Skip for now</button>
          <button v-if="step < steps.length - 1" class="btn btn-primary" :disabled="saving" @click="next">
            {{ saving ? 'Saving...' : 'Next' }}
          </button>
          <button v-else class="btn btn-primary" :disabled="saving" @click="finish">
            {{ saving ? 'Finishing...' : 'Finish' }}
          </button>
        </div>
      </footer>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { settingsApi, pluginsApi, setupApi } from '../api'
import { useToast } from '../composables/toast'
import { apiError } from '../utils/apiError'
import { refreshSetupState, setupSkipped } from '../composables/setupState'

const router = useRouter()
const toast = useToast()

const steps = [
  { key: 'site', label: 'Site' },
  { key: 'plugins', label: 'Features' },
  { key: 'map', label: 'Floor Map' },
  { key: 'data', label: 'Starter Data' },
  { key: 'finish', label: 'Finish' },
]
const step = ref(0)
const current = computed(() => steps[step.value])

const form = ref({
  facility_name: '', site_base_url: '', pc_access_domain: '',
  map_width: null, map_height: null,
})
const plugins = ref([])
const pluginConfig = ref({})   // flat map: setting/field key -> value
const saving = ref(false)
const seeding = ref(false)
const seedResult = ref('')

// Enabled plugins that declare config fields.
const configurablePlugins = computed(() =>
  plugins.value.filter(p => p.enabled && (p.config_schema || []).length))

// .env lines for secret fields that have a value entered.
const envLines = computed(() => {
  const lines = []
  for (const plugin of configurablePlugins.value) {
    for (const field of plugin.config_schema) {
      const value = pluginConfig.value[field.key]
      if (field.secret && field.envvar && value) {
        lines.push(`${field.envvar}=${value}`)
      }
    }
  }
  return lines.join('\n')
})

// Which settings each step owns, so Next only saves what changed on that step.
const stepSettings = {
  site: ['facility_name', 'site_base_url', 'pc_access_domain'],
  map: ['map_width', 'map_height'],
}

onMounted(async () => {
  // Load current values for the settings the wizard edits.
  const keys = ['facility_name', 'site_base_url', 'pc_access_domain', 'map_width', 'map_height']
  for (const key of keys) {
    try {
      const response = await settingsApi.get(key)
      const value = response.data?.data?.value
      if (value !== undefined && value !== null && value !== '') form.value[key] = value
    } catch (err) { /* setting may not exist yet */ }
  }
  try {
    const response = await pluginsApi.list()
    plugins.value = response.data.data?.plugins || response.data.data || []
  } catch (err) { /* ignore */ }

  // Preload current values for non-secret plugin config fields.
  for (const plugin of plugins.value) {
    for (const field of (plugin.config_schema || [])) {
      if (field.secret) continue
      try {
        const response = await settingsApi.get(field.key)
        const value = response.data?.data?.value
        if (value !== undefined && value !== null && value !== '') pluginConfig.value[field.key] = value
      } catch (err) { /* not set yet */ }
    }
  }
})

async function saveStep() {
  // Plugins step: persist non-secret config fields (secrets stay in .env).
  if (current.value.key === 'plugins') {
    for (const plugin of configurablePlugins.value) {
      for (const field of plugin.config_schema) {
        if (field.secret) continue
        const value = pluginConfig.value[field.key]
        if (value === undefined || value === null || value === '') continue
        await settingsApi.update(field.key, String(value))
      }
    }
    return
  }
  const keys = stepSettings[current.value.key]
  if (!keys) return
  for (const key of keys) {
    const value = form.value[key]
    if (value === null || value === undefined) continue
    await settingsApi.update(key, String(value))
  }
}

async function copyEnv() {
  try {
    await navigator.clipboard.writeText(envLines.value)
    toast.success('.env lines copied.')
  } catch (err) {
    toast.error('Copy failed - select and copy manually.')
  }
}

async function next() {
  saving.value = true
  try {
    await saveStep()
    step.value++
  } catch (err) {
    toast.error(apiError(err, 'Could not save this step'))
  } finally {
    saving.value = false
  }
}

function back() { if (step.value > 0) step.value-- }

function skipForNow() {
  setupSkipped.value = true
  router.push('/')
}

async function togglePlugin(plugin, enabled) {
  try {
    await pluginsApi.setEnabled(plugin.name, enabled)
    plugin.enabled = enabled
    toast.success(`${plugin.name} ${enabled ? 'enabled' : 'disabled'} (restart to apply route changes).`)
  } catch (err) {
    toast.error(apiError(err, 'Could not change plugin'))
  }
}

async function seedStarter() {
  seeding.value = true
  try {
    const response = await setupApi.seedStarter()
    const data = response.data?.data || {}
    seedResult.value = data.addedcount ? `Added ${data.addedcount}: ${data.added.join(', ')}` : 'All common vendors already present.'
  } catch (err) {
    toast.error(apiError(err, 'Could not seed starter data'))
  } finally {
    seeding.value = false
  }
}

async function finish() {
  saving.value = true
  try {
    await setupApi.complete()
    await refreshSetupState()
    toast.success('Setup complete.')
    router.push('/')
  } catch (err) {
    toast.error(apiError(err, 'Could not finish setup'))
  } finally {
    saving.value = false
  }
}
</script>

<style scoped>
.setup-wizard { display: flex; justify-content: center; padding: 2rem 1rem; }
.wizard-card { width: 100%; max-width: 640px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.wizard-head { padding: 1.5rem 1.75rem 1rem; border-bottom: 1px solid var(--border); }
.wizard-head h1 { margin: 0; }
.wizard-sub { color: var(--text-light); margin: 0.25rem 0 1rem; }
.wizard-steps { list-style: none; display: flex; gap: 0.5rem; padding: 0; margin: 0; flex-wrap: wrap; }
.wizard-steps li { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--text-light); }
.wizard-steps li.active { color: var(--primary); font-weight: 600; }
.wizard-steps li.done { color: var(--success); }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid currentColor; font-size: 0.72rem; }
.wizard-body { padding: 1.5rem 1.75rem; min-height: 220px; }
.wizard-body h2 { margin-top: 0; }
.hint { color: var(--text-light); font-size: 0.88rem; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: 0.3rem; font-weight: 500; }
.form-row { display: flex; gap: 1rem; }
.form-row .form-group { flex: 1; }
.plugin-list { display: flex; flex-direction: column; gap: 0.6rem; }
.plugin-row { display: grid; grid-template-columns: auto auto 1fr; gap: 0.6rem; align-items: baseline; padding: 0.5rem 0.6rem; background: var(--bg); border-radius: 6px; }
.plugin-name { font-weight: 600; text-transform: capitalize; }
.plugin-desc { color: var(--text-light); font-size: 0.85rem; }
.seed-result { margin-top: 0.75rem; color: var(--success); font-size: 0.88rem; }
.config-block { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.config-title { margin: 0 0 0.75rem; font-size: 1rem; text-transform: capitalize; }
.secret-tag { margin-left: 0.5rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--warning); border: 1px solid var(--warning); border-radius: 4px; padding: 0 0.3rem; }
.env-block { margin-top: 1rem; }
.env-pre { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 0.75rem; overflow-x: auto; font-size: 0.82rem; margin: 0.5rem 0; }
.wizard-foot { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.75rem; border-top: 1px solid var(--border); }
.foot-right { display: flex; align-items: center; gap: 0.75rem; }
.btn-text { background: none; border: none; color: var(--text-light); text-decoration: none; }
</style>
