<template>
  <!-- ============================================================
       Biometric login enrollment card
       Shown on MyProfile.vue below the personal-details card.
       Two related toggles:
         1. Biometric login — enrolls / removes this device's
            fingerprint / face / device PIN for signing in.
         2. Biometric for epayslip / taxation — once biometric login
            is enabled, lets the user skip re-typing the epayslip
            password on the enquiry pages. Requires the user to prove
            they know the epayslip password at enable-time.

       The "credential id" of the WebAuthn registration is stashed in
       localStorage under `biometric_<username>` so the login page can
       show the "Sign in with fingerprint" button.

       The card hides itself entirely on devices that have a browser
       but no platform authenticator (e.g. a desktop without Windows
       Hello / Touch ID configured).
       ============================================================ -->
  <section
    v-if="showCard"
    class="rounded-2xl border border-slate-200 bg-white p-5 shadow-soft sm:p-6"
  >
    <header class="mb-4 flex items-center justify-between gap-3">
      <div>
        <h3 class="text-sm font-semibold uppercase tracking-wider text-slate-500">
          {{ t('MyProfileView.biometric_login') || 'Biometric login' }}
        </h3>
        <p class="mt-1 text-xs text-slate-400">
          {{ statusText }}
        </p>
      </div>
      <a-spin v-if="enrolling || removing" :spinning="true" size="small" />
    </header>

    <div v-if="!isSupported" class="rounded-lg bg-amber-50 px-4 py-3 text-sm text-amber-800">
      {{ t('MyProfileView.biometric_not_supported') || 'This browser does not support biometric login. Try the latest Chrome, Edge, Safari, or Firefox.' }}
    </div>

    <div v-else-if="hasPlatformAuthenticator === false" class="rounded-lg bg-amber-50 px-4 py-3 text-sm text-amber-800">
      <p class="font-medium">{{ t('MyProfileView.biometric_no_authenticator') || 'No biometric authenticator on this device' }}</p>
      <p class="mt-1 text-xs text-amber-700">
        {{ t('MyProfileView.biometric_no_authenticator_detail') || 'Enable Windows Hello (Settings → Accounts → Sign-in options), Touch ID, or a device PIN, then refresh this page.' }}
      </p>
    </div>

    <div v-else-if="hasPlatformAuthenticator === null" class="rounded-lg bg-slate-50 px-4 py-3 text-sm text-slate-500">
      {{ t('MyProfileView.biometric_checking') || 'Checking biometric support…' }}
    </div>

    <div v-else class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
      <div class="flex flex-col gap-1">
        <p class="text-sm text-slate-700">
          {{ enrolled
            ? (t('MyProfileView.biometric_enrolled_with') || `Enrolled on ${enrolledDeviceName || 'this device'}`)
            : (t('MyProfileView.biometric_use_prompt') || 'Sign in with fingerprint, face, or device PIN on this device.') }}
        </p>
        <p v-if="enrolled && enrolledAt" class="text-xs text-slate-400">
          {{ t('MyProfileView.biometric_enrolled_on') || 'Enrolled on' }} {{ formatDate(enrolledAt) }}
        </p>
      </div>

      <div class="flex items-center gap-3">
        <a-switch
          :checked="enrolled"
          :loading="enrolling || removing"
          @change="onToggle"
        />
      </div>
    </div>

    <!-- Second toggle — biometric for epayslip / taxation.
         Only visible when biometric login itself is enrolled (the local
         `enrolled` state is set from localStorage on mount, so the second
         toggle appears as soon as the user has a stored credential id).
         The server-side guard in EnableBiometricForEpayslip also re-checks
         that biometric_credential_id is not null. -->
    <div
      v-if="enrolled"
      class="mt-4 flex flex-col gap-3 border-t border-slate-100 pt-4 sm:flex-row sm:items-center sm:justify-between"
    >
      <div class="flex flex-col gap-1">
        <p class="text-sm text-slate-700">
          {{ t('MyProfileView.biometric_for_epayslip_prompt') || 'Use biometric for epayslip / taxation enquiry' }}
        </p>
        <p class="text-xs text-slate-400">
          {{
            biometricForEpayslip
              ? (t('MyProfileView.biometric_for_epayslip_enabled') || 'You can open epayslip / taxation with fingerprint or face.')
              : (t('MyProfileView.biometric_for_epayslip_disabled') || 'You will need to type your epayslip password each time.')
          }}
        </p>
      </div>
      <div class="flex items-center gap-3">
        <a-spin v-if="epayslipSaving" :spinning="true" size="small" />
        <a-switch
          v-else
          :checked="biometricForEpayslip"
          :disabled="epayslipSaving"
          @change="onEpayslipToggle"
        />
      </div>
    </div>

    <!-- Confirm-remove modal — kept inline for compactness -->
    <a-modal
      v-model:open="confirmRemoveOpen"
      :title="t('MyProfileView.biometric_remove_title') || 'Remove biometric login?'"
      :ok-text="t('buttons.remove') || 'Remove'"
      :ok-type="'danger'"
      :cancel-text="t('buttons.cancel') || 'Cancel'"
      @ok="onConfirmRemove"
    >
      <p>{{ t('MyProfileView.biometric_remove_body') || 'You will need to type your password to sign in next time. You can re-enroll anytime.' }}</p>
    </a-modal>

    <!-- Password re-verification modal — shown when the user toggles
         biometric login ON. Requires the user to prove they know the
         account password before WebAuthn enrollment starts. Closes
         silently on Cancel / X / ESC; clears `passwordInput` via the
         watcher when closed. -->
    <a-modal
      v-model:open="confirmPasswordOpen"
      :title="t('MyProfileView.biometric_enable_title') || 'Verify your password'"
      :ok-text="t('buttons.confirm') || 'Confirm'"
      :cancel-text="t('buttons.cancel') || 'Cancel'"
      :confirm-loading="verifying"
      :ok-button-props="{ disabled: !passwordInput }"
      @ok="onConfirmPassword"
    >
      <p class="mb-4 text-sm text-slate-600">
        {{ t('MyProfileView.biometric_enable_prompt') || 'Enter your password to enable biometric login on this device. This prevents someone from enrolling their fingerprint on a stolen or unattended device without your knowledge.' }}
      </p>
      <a-form layout="vertical">
        <a-form-item
          :label="t('LoginView.password') || 'Password'"
          :rules="[{ required: true, message: t('LoginView.pls_input_password') || 'Please enter your password' }]"
        >
          <a-input-password
            v-model:value="passwordInput"
            :placeholder="t('LoginView.password') || 'Password'"
            size="large"
            @press-enter="onConfirmPassword"
          />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- Epayslip password modal — shown when the user enables
         "biometric for epayslip". Re-uses passwordInput state.
         Disable flow needs no password (the user is just opting out
         of a convenience), so it calls disableBiometricForEpayslip
         directly. -->
    <a-modal
      v-model:open="epayslipPasswordOpen"
      :title="t('MyProfileView.biometric_for_epayslip_enable_title') || 'Verify your epayslip password'"
      :ok-text="t('buttons.confirm') || 'Confirm'"
      :cancel-text="t('buttons.cancel') || 'Cancel'"
      :confirm-loading="epayslipSaving"
      :ok-button-props="{
        type: 'primary',
        disabled: !passwordInput,
        style: { backgroundColor: '#1677ff', borderColor: '#1677ff', color: '#ffffff' }
      }"
      @ok="onConfirmEpayslipPassword"
    >
      <p class="mb-4 text-sm text-slate-600">
        {{ t('MyProfileView.biometric_for_epayslip_password_prompt') || 'Enter your epayslip password to confirm. After this you can open epayslip / taxation with fingerprint or face instead of typing it again.' }}
      </p>
      <a-form layout="vertical">
        <a-form-item
          :label="t('MyProfileView.epayslip_password') || 'Epayslip password'"
          :rules="[{ required: true, message: t('LoginView.pls_input_password') || 'Please enter your password' }]"
        >
          <a-input-password
            v-model:value="passwordInput"
            :placeholder="t('MyProfileView.epayslip_password') || 'Epayslip password'"
            size="large"
            @press-enter="onConfirmEpayslipPassword"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </section>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, watch } from 'vue'
import { startRegistration } from '@simplewebauthn/browser'
import { notification, message } from 'ant-design-vue'
import { useI18n } from 'vue-i18n'
import userProfileService from '@/service/UserProfileService'

const props = defineProps<{
  /** HR+ username — used as the localStorage key prefix. */
  username: string
  /** Current value of security_user.biometric_for_epayslip — drives the
   * switch's checked state and the helper-text copy. */
  biometricForEpayslipInitial?: boolean
}>()

const { t } = useI18n()

// ===== State =====
const enrolling = ref(false)
const removing = ref(false)
const enrolled = ref(false)
const enrolledDeviceName = ref<string | null>(null)
const enrolledAt = ref<Date | null>(null)
const confirmRemoveOpen = ref(false)
// Password re-verification before enabling biometric login. This prevents
// someone from enrolling their fingerprint on a stolen / unattended device
// without the user explicitly proving they know the account password.
//   confirmPasswordOpen  — controls the modal visibility
//   passwordInput        — bound to the password input field
//   verifying            — disables the OK button + shows a spinner while
//                          useLogin is in flight
const confirmPasswordOpen = ref(false)
const passwordInput = ref('')
const verifying = ref(false)

// ===== Epayslip / taxation biometric sub-toggle =====
// Mirrors security_user.biometric_for_epayslip. The initial value is
// passed in as a prop from MyProfile (which reads it from
// UserProfileDisplayData); we keep a local copy so the switch can
// optimistically flip when the user toggles, then commit to the server.
const biometricForEpayslip = ref(!!props.biometricForEpayslipInitial)
const epayslipSaving = ref(false)
const epayslipPasswordOpen = ref(false)

// Clear the password field whenever either modal closes (cancel, X, OK, ESC,
// or backdrop click). Otherwise the next open would pre-fill with the
// previous value.
watch(confirmPasswordOpen, (open) => {
  if (!open) passwordInput.value = ''
})
watch(epayslipPasswordOpen, (open) => {
  if (!open) passwordInput.value = ''
})

const isSupported = computed(() =>
  typeof window !== 'undefined' &&
  typeof window.PublicKeyCredential === 'function'
)

// Tri-state probe for the device's biometric capability.
//   null  → still loading (probe in flight or not started)
//   true  → the device has a user-verifying platform authenticator
//   false → the browser supports WebAuthn but no biometric is available
//
// isUserVerifyingPlatformAuthenticatorAvailable() is the W3C-standard
// check: it returns true only when the device has a biometric / PIN
// authenticator the browser can use to satisfy "user verification".
// Older / non-biometric devices return false, which means we should
// hide the toggle entirely instead of letting the user click into
// a failing flow.
const hasPlatformAuthenticator = ref<boolean | null>(
  isSupported.value ? null : false,
)

if (isSupported.value && typeof PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable === 'function') {
  PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable()
    .then((available) => {
      hasPlatformAuthenticator.value = !!available
    })
    .catch(() => {
      // Probe can fail on locked-down browsers. Default to "show the
      // toggle" — the call-time catch in enroll() will still surface
      // a friendly error if the user actually tries.
      hasPlatformAuthenticator.value = true
    })
}

// Only show the card if either:
//   - the device DOES have a platform authenticator, or
//   - the user has already enrolled on this device (so we need the
//     card to render the "remove" toggle even if the current
//     authenticator is no longer available, e.g. the user replaced
//     their fingerprint scanner but the credential still works).
const showCard = computed(() => {
  if (!isSupported.value) return false
  if (enrolled.value) return true
  return hasPlatformAuthenticator.value === true
})

// localStorage key — the login page reads this same key to decide
// whether to show the fingerprint button.
const storageKey = computed(() => `biometric_${props.username}`)

// Best-effort error message extraction. Handles three error shapes:
//   1. Axios: error.response.data is the server body (string or object)
//   2. WebAuthn/JS: err is a DOMException / SyntaxError with .name + .message
//   3. Plain string thrown by our own service
// Returns a single non-empty human-readable string.
const normalizeError = (err: any): string => {
  if (err == null) return 'Unknown error'
  if (typeof err === 'string') return err
  // Axios error: prefer the server's body when present
  if (err.response?.data != null) {
    const data = err.response.data
    if (typeof data === 'string') return data
    if (typeof data === 'object') {
      // Common ASP.NET ValidationException shape: { message, ... } or
      // a string that came from WebMessages.GetString.
      if (typeof data.message === 'string' && data.message) return data.message
      if (typeof data.error === 'string' && data.error) return data.error
      if (typeof data.title === 'string' && data.title) return data.title
      // Last resort: stringify the body. Try JSON first (avoids
      // "[object Object]" for plain objects) then fall back to String.
      try { return JSON.stringify(data) } catch { return String(data) }
    }
  }
  // WebAuthn / DOMException / Error
  if (err.name && err.message) return `${err.name}: ${err.message}`
  if (err.message) return err.message
  return String(err)
}

// Coerce the BeginBiometricRegistration response into a
// PublicKeyCredentialCreationOptionsJSON object that
// @simplewebauthn/browser can consume.
//
// The C# method returns a JSON *string* (the output of Fido2NetLib's
// options.ToJson()), which ASP.NET serializes as a JSON-encoded string.
// axios's default transformResponse JSON.parses that, so resp.data is
// normally a JS string. But we've seen this flow break in three ways:
//
//   1. resp.data is an empty string (server-side exception, the catch
//      logged it and rethrew, ASP.NET emitted a 500 with no body, or
//      a proxy stripped the body). Bare JSON.parse("") throws
//      "Unexpected end of JSON input" — the cryptic error the user
//      was seeing.
//   2. resp.data is an object (axios mis-classified the response, or
//      the body was a JSON object like {message: "..."} with a 200).
//      JSON.parse({message: "..."}) throws
//      "Unexpected token o in JSON at position 1".
//   3. resp.data is a valid object already (some intermediate layer
//      double-parsed). Just pass it through.
//
// This helper normalises all three cases and throws a readable error
// for (1) and (2) so the user sees "the server returned …" instead of
// a raw SyntaxError.
const parseCreationOptions = (raw: unknown): any => {
  if (raw == null || raw === '') {
    throw new Error(
      'Server returned an empty response for BeginBiometricRegistration. ' +
      'The backend probably threw an exception. Check the API log.',
    )
  }
  if (typeof raw === 'object') {
    return raw
  }
  if (typeof raw === 'string') {
    try {
      return JSON.parse(raw)
    } catch (e: any) {
      // Truncate the raw value so we don't dump a giant HTML error page
      // into the notification toast.
      const preview = raw.length > 200 ? raw.slice(0, 200) + '…' : raw
      throw new Error(
        `Server returned invalid JSON for BeginBiometricRegistration: ` +
        `${e.message}. Raw response: ${preview}`,
      )
    }
  }
  throw new Error(
    `Unexpected BeginBiometricRegistration response type: ${typeof raw}`,
  )
}

const statusText = computed(() => {
  if (!isSupported.value) return t('MyProfileView.biometric_unsupported') || 'Not supported in this browser'
  if (enrolled.value) return t('MyProfileView.biometric_enrolled') || 'Enabled on this device'
  return t('MyProfileView.biometric_disabled') || 'Disabled'
})

// ===== Lifecycle =====
onMounted(() => {
  if (!props.username) return
  try {
    const stored = localStorage.getItem(storageKey.value)
    if (stored) {
      const parsed = JSON.parse(stored) as { deviceName?: string; enrolledAt?: string }
      enrolled.value = true
      enrolledDeviceName.value = parsed.deviceName ?? null
      enrolledAt.value = parsed.enrolledAt ? new Date(parsed.enrolledAt) : null
    }
  } catch {
    // corrupted localStorage entry — treat as not enrolled
    localStorage.removeItem(storageKey.value)
  }
})

// ===== Actions =====
const formatDate = (d: Date): string => d.toLocaleDateString()

const onToggle = async (checked: boolean | string | Event) => {
  const next = typeof checked === 'boolean' ? checked : !!checked
  if (next) {
    // Don't enroll straight away — require the user to re-enter their
    // account password first. This is the standard "step-up auth" pattern
    // for sensitive enrollment changes (FIDO2 / WebAuthn best practice
    // §6.1.1 — "user verification prior to credential creation").
    confirmPasswordOpen.value = true
  } else {
    confirmRemoveOpen.value = true
  }
}

// Verify the password by calling UserProfileProcess.ConfirmPassword
// (auto-generated webmethod). The username is taken from the JWT on
// the server side via loginCredential, not from the request body, so
// the user can only verify their own password. No new session is
// minted — the existing one is preserved.
//
// IMPORTANT: the backend returns `false` (not throws) on wrong password.
// So we MUST check the boolean return value — only checking for thrown
// errors (the catch block) would let a wrong password fall through to
// the success path and start WebAuthn enrollment. That would defeat the
// entire purpose of the step-up auth gate.
const onConfirmPassword = async () => {
  if (verifying.value) return
  if (!passwordInput.value) {
    notification.warning({
      message: t('LoginView.pls_input_password') || 'Please enter your password',
      placement: 'topRight',
    })
    return
  }
  verifying.value = true
  const submitted = passwordInput.value
  try {
    const ok = await userProfileService.confirmPassword(submitted)
    if (!ok) {
      // Wrong password. Keep the dialog open so the user can retry.
      notification.error({
        message: t('MyProfileView.biometric_password_incorrect') || 'Incorrect password',
        description: t('MyProfileView.biometric_password_incorrect_detail') || 'Please re-enter your password to enable biometric login.',
        placement: 'topRight',
      })
      return
    }
    // Password is correct. Close the dialog and kick off WebAuthn
    // enrollment. Use the captured `submitted` value, not the cleared
    // `passwordInput` (the modal reset it on close).
    confirmPasswordOpen.value = false
    await enroll()
  } catch (err: any) {
    // Network / 500 / other transport errors. Wrong-password itself
    // does NOT throw — it returns false (handled above).
    notification.error({
      message: t('MyProfileView.biometric_password_check_failed') || 'Could not verify password',
      description: err?.message ?? String(err),
      placement: 'topRight',
    })
  } finally {
    verifying.value = false
  }
}

// Toggle handler for the epayslip sub-switch. Just opens the password
// dialog if the user wants to enable; if they want to disable, the
// password is NOT required (disabling is a safety/no-consequence
// action — the user can always re-enable with their password later).
const onEpayslipToggle = async (checked: boolean | string | Event) => {
  const next = typeof checked === 'boolean' ? checked : !!checked
  if (next) {
    // Enable path: don't optimistically flip the switch — the user must
    // prove they know the epayslip password before the flag (and the
    // switch) is set. The switch only goes to `true` after
    // onConfirmEpayslipPassword succeeds. If the user cancels the
    // password modal (Cancel button, X, Esc, or backdrop click), the
    // switch stays OFF and the server flag is unchanged.
    epayslipPasswordOpen.value = true
  } else {
    // Disable path: no password needed.
    epayslipSaving.value = true
    try {
      await userProfileService.disableBiometricForEpayslip()
      biometricForEpayslip.value = false
      notification.success({
        message: t('MyProfileView.biometric_for_epayslip_disabled_toast') || 'Epayslip biometric disabled',
        placement: 'topRight',
      })
    } catch (err: any) {
      // Revert the optimistic flip on failure.
      biometricForEpayslip.value = true
      notification.error({
        message: t('MyProfileView.biometric_for_epayslip_disable_failed') || 'Could not disable epayslip biometric',
        description: err?.message ?? String(err),
        placement: 'topRight',
      })
    } finally {
      epayslipSaving.value = false
    }
  }
}

// OK handler for the epayslip-password modal. Same boolean-check
// pattern as onConfirmPassword — the backend returns true on success
// and throws on wrong password, so we MUST inspect the return value.
const onConfirmEpayslipPassword = async () => {
  if (epayslipSaving.value) return
  if (!passwordInput.value) {
    notification.warning({
      message: t('LoginView.pls_input_password') || 'Please enter your password',
      placement: 'topRight',
    })
    return
  }
  epayslipSaving.value = true
  const submitted = passwordInput.value
  try {
    const ok = await userProfileService.enableBiometricForEpayslip(submitted)
    if (!ok) {
      // Wrong password — keep dialog open, don't flip the switch.
      biometricForEpayslip.value = false
      notification.error({
        message: t('MyProfileView.biometric_for_epayslip_password_incorrect') || 'Incorrect epayslip password',
        description: t('MyProfileView.biometric_for_epayslip_password_incorrect_detail') || 'Please re-enter your epayslip password to enable biometric authentication.',
        placement: 'topRight',
      })
      return
    }
    // Success: close the dialog AND flip the switch on now that the
    // server has confirmed the flag. (We do NOT optimistically flip in
    // onEpayslipToggle so that cancelling the modal leaves the switch
    // in its previous off state — see that handler for details.)
    biometricForEpayslip.value = true
    epayslipPasswordOpen.value = false
    notification.success({
      message: t('MyProfileView.biometric_for_epayslip_enabled_toast') || 'Epayslip biometric enabled',
      placement: 'topRight',
    })
  } catch (err: any) {
    biometricForEpayslip.value = false
    notification.error({
      message: t('MyProfileView.biometric_for_epayslip_check_failed') || 'Could not verify epayslip password',
      description: err?.message ?? String(err),
      placement: 'topRight',
    })
  } finally {
    epayslipSaving.value = false
  }
}

const enroll = async () => {
  if (enrolling.value) return
  enrolling.value = true
  try {
    // 1. Server returns the PublicKeyCredentialCreationOptions as a JSON
    //    string (the auto-generated UserProfileService stub types it as
    //    `Promise<string>` because the C# method returns `string`).
    //    @simplewebauthn/browser@13 wants a parsed object, so parse it
    //    here before handing it to startRegistration().
    //
    //    Be defensive about the shape: the backend could legitimately
    //    return the body as a JSON string (axios auto-parses to a JS
    //    string), as an already-parsed object (if a proxy/CDN unwrapped
    //    the JSON string), or as an error object (which axios rejects
    //    on, but a 200 with an error payload would land here). Treat
    //    all three cases and surface a clear error if parsing fails —
    //    a bare `JSON.parse` on an empty string throws the cryptic
    //    "Unexpected end of JSON input" the user was seeing.
    const raw = await userProfileService.beginBiometricRegistration(
      deriveDeviceName(),
    )
    // eslint-disable-next-line no-console
    console.log('[biometric] beginBiometricRegistration raw:', typeof raw, raw)

    const optionsJSON = parseCreationOptions(raw)

    // 2. Browser drives navigator.credentials.create(). @simplewebauthn/browser
    //    validates the object and shows the OS prompt.
    const attestation = await startRegistration({ optionsJSON })
    // eslint-disable-next-line no-console
    console.log('[biometric] attestation received:', JSON.stringify({
      id: attestation.id,
      rawId: attestation.rawId,
      type: attestation.type,
      hasResponse: !!attestation.response,
      hasAttestationObject: !!attestation.response?.attestationObject,
      attestationObjectLen: attestation.response?.attestationObject?.length,
      hasClientDataJSON: !!attestation.response?.clientDataJSON,
      clientDataJSONLen: attestation.response?.clientDataJSON?.length,
    }))

    // 3. Server verifies the attestation and persists the credential.
    // Use camelCase keys — that matches the TypeGen-generated
    // FinishBiometricRegistrationData class exactly, so TS type-checks
    // and ASP.NET's case-insensitive JSON binder maps to the C#
    // AttestationJson / CreationOptionsJson properties without 400s.
    const result = await userProfileService.finishBiometricRegistration({

      attestationJson: JSON.stringify(attestation),
      // creationOptionsJson is no longer used server-side (it was
      // round-tripped to Fido2NetLib in v1; for v2+ the server can
      // re-derive the challenge from the session). We keep the field
      // shape intact for backwards compatibility with the v1 backend.
      creationOptionsJson: JSON.stringify(optionsJSON),
    })

    // 4. Stash the credential id locally so the login page can use it
    //    as allowCredentials[0].id in navigator.credentials.get().
    localStorage.setItem(
      storageKey.value,
      JSON.stringify({
        credentialId: result.credentialIdBase64Url,
        deviceName: deriveDeviceName(),
        enrolledAt: new Date().toISOString(),
      }),
    )

    // 5. Remember the username separately so the login page can
    //    auto-fill the field on next visit (if the user opens a fresh
    //    tab and the credential id is the only thing in localStorage,
    //    they still have to type the username before the fingerprint
    //    button shows). Keyed by username so multiple enrolled
    //    accounts on the same device don't clobber each other.
    localStorage.setItem('last_biometric_username', props.username)

    enrolled.value = true
    enrolledDeviceName.value = deriveDeviceName()
    enrolledAt.value = new Date()
    notification.success({
      message: t('MyProfileView.biometric_enrolled_toast') || 'Biometric login enabled',
      placement: 'topRight',
    })
  } catch (err: any) {
    // @simplewebauthn/browser throws on user cancel, no authenticator,
    // or verification failure. Normalize the error to a readable string
    // (axios errors have a nested response.data; WebAuthn errors have
    // .name/.message). The previous "err?.message ?? String(err)" would
    // produce "[object Object]" when err is a structured axios error.
    const msg = normalizeError(err)
    if (/user cancelled|user canceled/i.test(msg)) {
      message.info(t('MyProfileView.biometric_cancelled') || 'Cancelled')
    } else if (/not allowed|security error|notallowed/i.test(msg)) {
      // Common on desktop without a biometric reader: the browser
      // has no platform authenticator. Show a friendlier message.
      notification.warning({
        message: t('MyProfileView.biometric_not_supported') || 'No biometric authenticator',
        description: t('MyProfileView.biometric_not_supported_detail') || 'This device has no fingerprint reader, face camera, or PIN configured. Try on a phone or laptop with Windows Hello / Touch ID.',
        placement: 'topRight',
      })
    } else {
      notification.error({
        message: t('MyProfileView.biometric_enroll_failed') || 'Could not enable biometric login',
        description: msg,
        placement: 'topRight',
      })
    }
  } finally {
    enrolling.value = false
  }
}

const onConfirmRemove = async () => {
  if (removing.value) return
  removing.value = true
  try {
    await userProfileService.removeBiometric()
    localStorage.removeItem(storageKey.value)
    enrolled.value = false
    enrolledDeviceName.value = null
    enrolledAt.value = null
    notification.success({
      message: t('MyProfileView.biometric_removed') || 'Biometric login removed',
      placement: 'topRight',
    })
  } catch (err: any) {
    notification.error({
      message: t('MyProfileView.biometric_remove_failed') || 'Could not remove biometric login',
      description: err?.message ?? String(err),
      placement: 'topRight',
    })
  } finally {
    removing.value = false
  }
}

// Best-effort friendly name from the user agent. We use a coarse
// platform detection — the user can override by re-enrolling on a
// different device. The server-side column is the source of truth.
const deriveDeviceName = (): string => {
  const ua = navigator.userAgent
  if (/iPhone/.test(ua)) return 'iPhone'
  if (/iPad/.test(ua)) return 'iPad'
  if (/Android/.test(ua)) {
    const m = ua.match(/Android[^;]+;\s*([^)]+)/)
    return m ? `Android (${m[1].trim()})` : 'Android device'
  }
  if (/Mac OS X/.test(ua)) return 'Mac'
  if (/Windows/.test(ua)) return 'Windows PC'
  if (/Linux/.test(ua)) return 'Linux'
  return 'Unnamed device'
}
</script>
