<template>
  <div class="space-y-4">

    <!-- Step: setup — initial prompt to begin enrollment -->
    <template v-if="step === 'setup'">
      <div class="space-y-3">
        <p class="text-sm text-gray-600">
          Two-factor authentication adds an extra layer of security. You will need an authenticator app (e.g. Google Authenticator, Authy) on your phone.
        </p>
        <button
          type="button"
          @click="startSetup"
          :disabled="loading"
          class="flex items-center gap-2 px-6 py-2.5 bg-indigo-600 text-white rounded-lg text-sm font-semibold hover:bg-indigo-700 transition-colors disabled:opacity-75 min-h-[44px]"
        >
          <AppSpinner v-if="loading" />
          {{ loading ? 'Setting up…' : 'Set up two-factor authentication' }}
        </button>
        <p v-if="error" class="mt-1 text-xs text-red-600">{{ error }}</p>
      </div>
    </template>

    <!-- Step: verify — show QR/secret and accept code -->
    <template v-else-if="step === 'verify'">
      <div class="space-y-4">
        <div>
          <p class="text-sm text-gray-600 mb-3">
            Open your authenticator app and scan this QR code, or enter the key manually.
          </p>

          <!-- QR code — rendered as an inline image via qrcode library -->
          <div class="bg-white border border-gray-200 rounded-xl p-6 flex flex-col items-center gap-4">
            <p class="text-xs text-gray-500 text-center">Scan this QR code with your authenticator app:</p>
            <img v-if="qrDataUrl" :src="qrDataUrl" alt="TOTP QR code" class="w-48 h-48 rounded-xl border border-gray-200" />
          </div>
        </div>

        <!-- Manual secret display -->
        <div>
          <p class="text-xs text-gray-500 mb-1 font-semibold">Or enter this secret key manually:</p>
          <div class="flex items-center gap-2">
            <code
              class="font-mono text-sm text-gray-700 bg-gray-50 px-3 py-2 rounded-md border border-gray-200 break-all flex-1"
            >{{ secret }}</code>
            <button
              type="button"
              @click="copySecret"
              aria-label="Copy secret key"
              class="text-gray-400 hover:text-gray-600 transition-colors flex-shrink-0"
            >
              <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
              </svg>
            </button>
          </div>
          <p v-if="secretCopied" class="mt-1 text-xs text-green-600">Copied!</p>
        </div>

        <!-- Verification code input -->
        <div>
          <label class="block text-sm font-semibold text-gray-700 mb-1">
            Enter the 6-digit code from your authenticator app
          </label>
          <input
            v-model="verifyCode"
            type="text"
            inputmode="numeric"
            maxlength="6"
            placeholder="000000"
            autocomplete="one-time-code"
            class="block w-36 rounded-lg px-3 py-3 text-sm border transition-colors focus:ring-2 focus:outline-none"
            :class="error
              ? 'border-red-500 ring-red-500 focus:ring-red-500 focus:border-red-500'
              : 'border-gray-300 focus:ring-indigo-500 focus:border-indigo-500'"
          />
          <p v-if="error" class="mt-1 text-xs text-red-600">{{ error }}</p>
          <p v-if="verified" class="mt-1 text-xs text-green-600 flex items-center gap-1">
            <!-- Checkmark icon -->
            <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
            </svg>
            Authenticator connected.
          </p>
        </div>

        <button
          type="button"
          @click="confirmEnrollment"
          :disabled="loading || verifyCode.length !== 6"
          class="flex items-center gap-2 px-6 py-2.5 bg-indigo-600 text-white rounded-lg text-sm font-semibold hover:bg-indigo-700 transition-colors disabled:opacity-75 min-h-[44px]"
        >
          <AppSpinner v-if="loading" />
          {{ loading ? 'Verifying…' : 'Verify code' }}
        </button>
      </div>
    </template>

    <!-- Step: backup-codes — show BackupCodesDisplay -->
    <template v-else-if="step === 'backup-codes'">
      <BackupCodesDisplay
        :codes="backupCodes"
        @acknowledged="finishEnrollment"
      />
    </template>

  </div>
</template>

<script setup>
import { ref } from 'vue'
import QRCode from 'qrcode'
import * as api from '../../api/client.js'
import AppSpinner from '../ui/AppSpinner.vue'
import BackupCodesDisplay from './BackupCodesDisplay.vue'

const emit = defineEmits(['enrolled'])

const step = ref('setup')
const qrUri = ref('')
const qrDataUrl = ref('')
const secret = ref('')
const verifyCode = ref('')
const backupCodes = ref([])
const error = ref(null)
const loading = ref(false)
const verified = ref(false)
const secretCopied = ref(false)

async function startSetup() {
  loading.value = true
  error.value = null
  try {
    const data = await api.totpSetup()
    qrUri.value = data.provisioning_uri
    secret.value = data.secret
    qrDataUrl.value = await QRCode.toDataURL(qrUri.value, { width: 200, margin: 1 })
    step.value = 'verify'
  } catch (e) {
    error.value = e.message
  } finally {
    loading.value = false
  }
}

async function confirmEnrollment() {
  loading.value = true
  error.value = null
  try {
    const data = await api.totpEnable(verifyCode.value)
    backupCodes.value = data.backup_codes
    verified.value = true
    // Brief success flash before transitioning to backup codes screen
    setTimeout(() => {
      step.value = 'backup-codes'
    }, 800)
  } catch (e) {
    error.value = 'Incorrect code. Try again.'
    verifyCode.value = ''
  } finally {
    loading.value = false
  }
}

function finishEnrollment() {
  emit('enrolled')
}

async function copySecret() {
  try {
    await navigator.clipboard.writeText(secret.value)
    secretCopied.value = true
    setTimeout(() => { secretCopied.value = false }, 2000)
  } catch {
    // Fail silently
  }
}
</script>
