pet-web/src/views/ScanView.vue

<script setup>
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useToast } from 'primevue/usetoast'
import Dialog from 'primevue/dialog'
import LocationPicker from '@/components/LocationPicker.vue'
import {
  fetchQrInfoApi,
  updatePersonProfileApi,
  updatePetProfileApi,
  updateGoodsInfoApi,
  verifyMaintenanceCodeApi,
  uploadFile
} from '@/services/api'

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

// Pull QR code from route params
const qrCode = ref(route.params.qrCode?.toString().trim() || '')
const queryInput = ref(qrCode.value)

const loading = reactive({
  info: false,
  saving: false,
  verifying: false,
  photo: false
})

const qrDetail = ref(null)
const profile = ref(null)
const infoStatus = reactive({
  state: qrCode.value ? 'loading' : 'idle',
  message: ''
})

const maintenanceCode = ref('')
const maintenancePassed = ref(false)
const showMaintenancePanel = ref(false)
const showMaintenanceDialog = ref(false)
const isEditing = ref(false)
const showLocationDialog = ref(false)
const showLocationViewDialog = ref(false)

const personKeys = [
  'photoUrl',
  'name',
  'gender',
  'phone',
  'specialNote',
  'emergencyContactName',
  'emergencyContactPhone',
  'emergencyContactEmail'
]
const petKeys = ['photoUrl', 'name', 'contactName', 'contactPhone', 'contactEmail', 'location', 'remark']
const goodsKeys = ['photoUrl', 'name', 'contactName', 'contactPhone', 'contactEmail', 'location', 'remark']

const formData = reactive({
  photoUrl: '',
  name: '',
  gender: 'unknown',
  phone: '',
  specialNote: '',
  emergencyContactName: '',
  emergencyContactPhone: '',
  emergencyContactEmail: '',
  remark: '',
  contactName: '',
  contactPhone: '',
  contactEmail: '',
  location: ''
})

const qrType = computed(() => qrDetail.value?.qrType || 'person')
const isPerson = computed(() => qrType.value === 'person')
const isPet = computed(() => qrType.value === 'pet')
const isGoods = computed(() => qrType.value === 'goods')
const hasProfile = computed(() => Boolean(profile.value))
const isFirstFill = computed(() => Boolean(qrDetail.value) && !hasProfile.value)
const heroTitle = computed(() => {
  if (!qrDetail.value) return 'Contact Card'
  if (isPerson.value) return 'Person Card'
  if (isPet.value) return 'Pet Card'
  if (isGoods.value) return 'Item Card'
  return 'Contact Card'
})

const parseError = (error) => {
  if (!error) return 'Request failed'
  if (typeof error === 'string') return error
  if (error.message) return error.message
  if (error.detail) return error.detail
  if (error.response?.data?.message) return error.response.data.message
  if (error.data?.message) return error.data.message
  if (error.message === undefined && error?.error) return error.error
  return 'Request failed'
}

const resetForm = (source) => {
  const allKeys = Array.from(new Set([...personKeys, ...petKeys, ...goodsKeys]))
  allKeys.forEach((key) => {
    if (key === 'gender') {
      formData[key] = 'unknown'
      return
    }
    formData[key] = ''
  })
  let keys = personKeys
  if (isPet.value) keys = petKeys
  if (isGoods.value) keys = goodsKeys
  keys.forEach((key) => {
    if (source && Object.prototype.hasOwnProperty.call(source, key)) {
      formData[key] = source[key] ?? (key === 'gender' ? 'unknown' : '')
    }
  })
}

const setDocumentTitle = () => {
  if (typeof document === 'undefined') return
  let defaultName = 'Person'
  if (isPet.value) defaultName = 'Pet'
  if (isGoods.value) defaultName = 'Item'
  const name = profile.value?.name || defaultName
  document.title = `${name} | Emergency QR`
}

const fetchQrDetails = async () => {
  if (!qrCode.value) return
  loading.info = true
  infoStatus.state = 'loading'
  infoStatus.message = ''
  try {
    const data = await fetchQrInfoApi(qrCode.value)
    qrDetail.value = data
    profile.value = data.info || null
    resetForm(profile.value)
    infoStatus.state = 'ready'
    setDocumentTitle()
  } catch (error) {
    infoStatus.state = 'error'
    infoStatus.message = parseError(error)
  } finally {
    loading.info = false
  }
}

const handleQrSubmit = () => {
  if (!queryInput.value.trim()) {
    toast.add({ severity: 'warn', summary: 'Notice', detail: 'Please enter a QR code first.', life: 2600 })
    return
  }
  router.push({ name: 'scan', params: { qrCode: queryInput.value.trim() } })
}

const handleVerifyMaintenance = async () => {
  if (!qrCode.value || !maintenanceCode.value) {
    toast.add({ severity: 'warn', summary: 'Notice', detail: 'Please enter the maintenance code.', life: 2400 })
    return
  }
  loading.verifying = true
  try {
    await verifyMaintenanceCodeApi({
      qrCode: qrCode.value,
      maintenanceCode: maintenanceCode.value
    })
    maintenancePassed.value = true
    showMaintenancePanel.value = false
    showMaintenanceDialog.value = false
    isEditing.value = true
    toast.add({ severity: 'success', summary: 'Verified', detail: 'Maintenance editing unlocked.', life: 2600 })
    // Scroll to the form the first time we collect data
    if (isFirstFill.value) {
      setTimeout(scrollToForm, 300)
    }
  } catch (error) {
    maintenancePassed.value = false
    toast.add({ severity: 'error', summary: 'Verification failed', detail: parseError(error), life: 3200 })
  } finally {
    loading.verifying = false
  }
}

const buildProfilePayload = () => {
  let keys = personKeys
  if (isPet.value) keys = petKeys
  if (isGoods.value) keys = goodsKeys
  const payload = {
    qrCode: qrCode.value
  }
  keys.forEach((key) => {
    payload[key] = formData[key] ?? ''
  })
  if (maintenanceCode.value) {
    payload.maintenanceCode = maintenanceCode.value
  }
  return payload
}

const handleSaveProfile = async () => {
  if (!qrCode.value) return
  loading.saving = true
  try {
    const payload = buildProfilePayload()
    let updater = updatePersonProfileApi
    if (isPet.value) updater = updatePetProfileApi
    if (isGoods.value) updater = updateGoodsInfoApi
    await updater(payload)
    toast.add({ severity: 'success', summary: 'Saved', detail: 'Profile has been updated.', life: 3000 })
    await fetchQrDetails()
    // Exit edit mode after a successful save
    isEditing.value = false
    maintenancePassed.value = false
    maintenanceCode.value = ''
  } catch (error) {
    toast.add({ severity: 'error', summary: 'Save failed', detail: parseError(error), life: 3200 })
  } finally {
    loading.saving = false
  }
}

const photoInputRef = ref(null)
const triggerPhotoPicker = () => {
  photoInputRef.value?.click?.()
}

const handleImageError = (event) => {
  // Handle broken image preview
  console.warn('Image load failed:', formData.photoUrl)
  event.target.style.display = 'none'
}

const handlePhotoChange = async (event) => {
  const file = event.target.files?.[0]
  if (!file) return

  // Validate mime type
  if (!file.type.startsWith('image/')) {
    toast.add({ severity: 'warn', summary: 'Notice', detail: 'Please choose an image file.', life: 2400 })
    return
  }

  // Validate file size (limit 15MB)
  const maxSize = 15 * 1024 * 1024
  if (file.size > maxSize) {
    toast.add({ severity: 'warn', summary: 'Notice', detail: 'Image size cannot exceed 15MB.', life: 2400 })
    return
  }

  loading.photo = true
  try {
    const response = await uploadFile(file)
    // Normalize upload response shape
    const url = response?.data?.url || response?.url || ''
    if (url) {
      formData.photoUrl = url
      toast.add({ severity: 'success', summary: 'Uploaded', detail: 'Photo has been updated.', life: 2400 })
    } else {
      throw new Error('Image URL not found')
    }
  } catch (error) {
    toast.add({ severity: 'error', summary: 'Upload failed', detail: parseError(error), life: 3200 })
  } finally {
    loading.photo = false
    // Reset input so the same file can trigger change
    if (event.target) {
      event.target.value = ''
    }
  }
}

const scrollToForm = () => {
  const el = document.getElementById('scan-form-section')
  if (el) {
    el.scrollIntoView({ behavior: 'smooth', block: 'start' })
  }
}

const callNumber = (phone) => {
  if (!phone) return
  window.location.href = `tel:${phone}`
}

const sendEmail = (email) => {
  if (!email) return
  window.location.href = `mailto:${email}`
}

const copyInfo = async (value, label = 'info') => {
  const content = value?.toString().trim()
  if (!content) {
    toast.add({ severity: 'info', summary: 'Notice', detail: `Nothing to copy for ${label}.`, life: 2200 })
    return
  }
  try {
    if (navigator?.clipboard?.writeText) {
      await navigator.clipboard.writeText(content)
    } else {
      const textarea = document.createElement('textarea')
      textarea.value = content
      textarea.style.position = 'fixed'
      textarea.style.opacity = '0'
      document.body.appendChild(textarea)
      textarea.focus()
      textarea.select()
      document.execCommand('copy')
      document.body.removeChild(textarea)
    }
    toast.add({ severity: 'success', summary: 'Copied', detail: `${label} copied to clipboard.`, life: 2000 })
  } catch (error) {
    console.error('Copy failed', error)
    toast.add({ severity: 'error', summary: 'Copy failed', detail: 'Please copy manually.', life: 2200 })
  }
}

const resetPageState = () => {
  qrDetail.value = null
  profile.value = null
  maintenanceCode.value = ''
  maintenancePassed.value = false
  showMaintenancePanel.value = false
  showMaintenanceDialog.value = false
  isEditing.value = false
  infoStatus.state = qrCode.value ? 'loading' : 'idle'
  infoStatus.message = ''
  resetForm()
}

watch(
  () => route.params.qrCode,
  (value) => {
    const normalized = value?.toString().trim() || ''
    queryInput.value = normalized
    qrCode.value = normalized
    resetPageState()
    if (normalized) {
      fetchQrDetails()
    }
  },
  { immediate: true }
)

watch([qrType, profile], () => {
  resetForm(profile.value)
})

watch([qrType, () => profile.value?.name], () => {
  setDocumentTitle()
})

// Auto open verification dialog on first fill
watch(isFirstFill, (value) => {
  if (value && !maintenancePassed.value) {
    showMaintenanceDialog.value = true
  }
})

const handleOpenLocationDialog = () => {
  showLocationDialog.value = true
}

const handleSaveLocation = (location) => {
  formData.location = location
  toast.add({ severity: 'success', summary: 'Saved', detail: 'Address selected.', life: 2400 })
}

const handleOpenLocationView = () => {
  showLocationViewDialog.value = true
}

const openGoogleMaps = () => {
  const location = isPerson.value ? null : profile.value?.location
  if (!location) return

  // Try to parse coordinate format (lat, lng)
  const coordsMatch = location.match(/(-?\d+\.?\d*),\s*(-?\d+\.?\d*)/)
  if (coordsMatch) {
    const lat = coordsMatch[1]
    const lng = coordsMatch[2]
    // Open Google Maps with coordinates
    window.open(`https://www.google.com/maps?q=${lat},${lng}`, '_blank')
  } else {
    // Otherwise search by address string
    window.open(`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(location)}`, '_blank')
  }
}

onMounted(() => {
  if (!qrCode.value) {
    setDocumentTitle()
  }
})
</script>

<template>
  <div class="scan-page min-h-screen bg-slate-950 text-slate-100">
    <div class="relative isolate px-4 py-10 sm:px-6 lg:px-8">
      <div
        class="pointer-events-none absolute inset-x-0 top-0 -z-10 h-96 bg-gradient-to-br from-cyan-500/20 via-indigo-500/10 to-transparent blur-3xl" />
      <div class="mx-auto max-w-6xl space-y-8">
        <header class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
          <div>
            <p class="text-xs uppercase tracking-[0.4em] text-cyan-200">Qr emergency link</p>
            <h1 class="mt-2 text-3xl font-semibold text-white sm:text-4xl">
              {{ heroTitle }}
            </h1>
          </div>
        </header>

        <section v-if="!qrCode"
          class="rounded-3xl border border-white/10 bg-white/5 p-6 shadow-xl shadow-cyan-500/10 backdrop-blur">
          <div class="flex items-start gap-4">
            <div class="flex h-12 w-12 items-center justify-center rounded-2xl bg-cyan-500/20">
              <i class="pi pi-qrcode text-2xl text-cyan-300" />
            </div>
            <div class="flex-1">
              <p class="text-lg font-semibold text-white">Welcome to the Emergency QR system</p>
              <p class="mt-2 text-sm text-slate-300">
                Scan the QR code or enter its value below to continue.
              </p>
            </div>
          </div>
          <div class="mt-6 flex flex-col gap-4 sm:flex-row sm:items-start">
            <div class="flex-1 space-y-2">
              <input v-model="queryInput" type="text" placeholder="Enter QR code"
                class="w-full rounded-2xl border border-white/20 bg-white/5 px-5 py-3.5 text-base text-white placeholder:text-slate-400 backdrop-blur-sm transition-all duration-200 focus:border-cyan-400 focus:bg-white/10 focus:outline-none focus:ring-2 focus:ring-cyan-400/30"
                @keyup.enter="handleQrSubmit" />
              <div class="flex items-center gap-2 px-1">
                <svg class="h-4 w-4 flex-shrink-0 text-cyan-400/70" fill="none" viewBox="0 0 24 24"
                  stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span class="text-sm text-slate-400/90">Example: <span
                    class="font-mono text-slate-300/80">QRMIH76J350CE2CF6150A51F4E</span></span>
              </div>
            </div>
            <button type="button"
              class="rounded-2xl bg-gradient-to-r from-cyan-400 to-blue-400 px-8 py-3.5 text-base font-semibold text-slate-900 shadow-lg shadow-cyan-500/30 transition-all duration-200 hover:scale-105 hover:shadow-xl hover:shadow-cyan-500/40 sm:whitespace-nowrap"
              @click="handleQrSubmit">
              View info
            </button>
          </div>
        </section>

        <section v-else class="space-y-6">
          <div v-if="infoStatus.state === 'error'" class="rounded-3xl border border-red-500/40 bg-red-500/10 p-5">
            <p class="text-sm text-red-100">{{ infoStatus.message }}</p>
            <p class="mt-2 text-xs text-red-200">Please double-check the QR code or reach out for assistance.</p>
          </div>

          <div v-if="loading.info" class="rounded-3xl border border-white/10 bg-white/5 p-6 text-base text-white">
            Loading QR information...
          </div>

          <!-- Only render details after maintenance verification -->
          <div v-if="infoStatus.state === 'ready' && qrDetail && (maintenancePassed || hasProfile)" class="space-y-6">
            <div v-if="hasProfile && !isEditing"
              class="rounded-3xl border border-white/10 bg-white text-slate-900 shadow-2xl shadow-cyan-500/10 relative">
              <template v-if="hasProfile">
                <div class="space-y-6 p-6">
                  <div class="flex flex-col items-center gap-4">
                    <div class="relative w-full max-w-md overflow-hidden rounded-2xl bg-slate-100 ring-2 ring-slate-200"
                      style="aspect-ratio: 1/1;">
                      <img v-if="profile?.photoUrl" :src="profile.photoUrl" alt="profile"
                        class="h-full w-full object-cover transition-transform duration-300 hover:scale-105"
                        @error="(e) => e.target.style.display = 'none'" />
                      <div v-else class="flex h-full w-full flex-col items-center justify-center gap-2 text-slate-400">
                        <i class="pi pi-image text-4xl" />
                        <span class="text-sm">No photo</span>
                      </div>
                      <!-- Edit button -->
                      <button v-if="!isEditing" type="button"
                        class="absolute top-3 right-3 flex h-9 w-9 items-center justify-center rounded-full bg-white/90 backdrop-blur-sm text-slate-600 hover:bg-white hover:text-slate-900 transition-all shadow-lg hover:shadow-xl"
                        @click="showMaintenanceDialog = true" title="Edit profile">
                        <i class="pi pi-pencil text-xs" />
                      </button>
                    </div>
                    <p class="text-xs uppercase tracking-[0.4em] text-slate-400">
                      {{ qrCode }}
                    </p>
                  </div>
                  <div class="space-y-4">
                    <div>
                      <p class="mt-1 text-sm text-slate-500">
                        {{ isPerson ? 'Emergency contact card' : isGoods ? 'Item information' : 'Pet information' }}
                      </p>
                      <p class="text-2xl font-semibold text-slate-900">
                        {{ profile?.name || 'Unnamed' }}
                      </p>
                    </div>
                    <div
                      class="rounded-2xl border border-slate-200 bg-gradient-to-br from-slate-50 to-white p-5 transition hover:shadow-md">
                      <div class="flex items-center gap-3">
                        <div
                          class="flex h-12 w-12 items-center justify-center rounded-full bg-emerald-100 shadow-inner">
                          <i class="pi pi-user text-lg text-emerald-600" />
                        </div>
                        <p class="text-[11px] font-semibold uppercase tracking-[0.35em] text-slate-500">{{ isPerson ?
                          'EMERGENCY CONTACT' : 'CONTACT' }}</p>
                      </div>
                      <p class="mt-3 cursor-pointer text-3xl font-semibold leading-tight text-slate-800" title="Click to copy name"
                        @click="copyInfo(isPerson ? profile?.emergencyContactName : profile?.contactName, 'Name')">
                        {{ isPerson ? profile?.emergencyContactName || '-' : profile?.contactName || '-' }}
                      </p>
                      <div class="mt-4 space-y-3 text-sm text-slate-600">
                        <div class="flex items-center gap-3">
                          <i class="pi pi-phone text-lg text-slate-500" />
                          <div class="leading-tight cursor-pointer select-text text-slate-600" title="Click to copy phone"
                            @click="copyInfo(isPerson ? profile?.emergencyContactPhone : profile?.contactPhone, 'Phone')">
                            <p class="text-[10px] uppercase tracking-[0.4em] text-slate-400">PHONE</p>
                            <p class="text-base font-semibold text-slate-700">
                              {{ isPerson ? profile?.emergencyContactPhone || '-' : profile?.contactPhone || '-' }}
                            </p>
                          </div>
                        </div>
                        <div v-if="(isPerson ? profile?.emergencyContactEmail : profile?.contactEmail)"
                          class="flex items-center gap-3">
                          <i class="pi pi-envelope text-lg text-slate-500" />
                          <div class="leading-tight min-w-0 cursor-pointer select-text text-slate-600" title="Click to copy email"
                            @click="copyInfo(isPerson ? profile?.emergencyContactEmail : profile?.contactEmail, 'Email')">
                            <p class="text-[10px] uppercase tracking-[0.4em] text-slate-400">EMAIL</p>
                            <p class="truncate text-base font-semibold text-slate-700">
                              {{ isPerson ? profile?.emergencyContactEmail : profile?.contactEmail }}
                            </p>
                          </div>
                        </div>
                        <div v-if="!isPerson && profile?.location" class="flex items-start gap-3">
                          <i class="pi pi-map-marker text-lg text-slate-500 mt-0.5 flex-shrink-0" />
                          <div class="leading-tight cursor-pointer select-text text-slate-600" title="Click to copy address"
                            @click="copyInfo(profile?.location, 'Address')">
                            <p class="text-[10px] uppercase tracking-[0.4em] text-slate-400">LOCATION</p>
                            <p class="flex-1 break-words whitespace-normal text-base font-medium text-slate-700">
                              {{ profile.location }}
                            </p>
                          </div>
                        </div>
                      </div>
                      <div class="mt-4 grid grid-cols-2 gap-2">
                        <button v-if="profile?.emergencyContactPhone || profile?.contactPhone" type="button"
                          class="inline-flex w-full items-center justify-center gap-1.5 rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1.5 text-xs font-medium text-emerald-700 transition hover:bg-emerald-100"
                          @click="callNumber(isPerson ? profile?.emergencyContactPhone : profile?.contactPhone)">
                          <i class="pi pi-phone" /> Call
                        </button>
                        <button
                          v-if="(isPerson && profile?.emergencyContactEmail) || (!isPerson && profile?.contactEmail)"
                          type="button"
                          class="inline-flex w-full items-center justify-center gap-1.5 rounded-full border border-blue-200 bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 transition hover:bg-blue-100"
                          @click="sendEmail(isPerson ? profile?.emergencyContactEmail : profile?.contactEmail)">
                          <i class="pi pi-envelope" /> Email
                        </button>
                        <button v-if="!isPerson && profile?.location" type="button"
                          class="inline-flex w-full items-center justify-center gap-1.5 rounded-full border border-purple-200 bg-purple-50 px-3 py-1.5 text-xs font-medium text-purple-700 transition hover:bg-purple-100"
                          @click="handleOpenLocationView">
                          <i class="pi pi-map" /> Map
                        </button>
                        <button v-if="!isPerson && profile?.location" type="button"
                          class="inline-flex w-full items-center justify-center gap-1.5 rounded-full border border-red-200 bg-red-50 px-3 py-1.5 text-xs font-medium text-red-700 transition hover:bg-red-100"
                          @click="openGoogleMaps">
                          <i class="pi pi-external-link" /> Google Maps
                        </button>
                      </div>
                    </div>
                    <div class="rounded-2xl border border-amber-200 bg-gradient-to-br from-amber-50 to-white p-5">
                      <div class="flex items-center gap-2">
                        <div class="flex h-8 w-8 items-center justify-center rounded-full bg-amber-100">
                          <i class="pi pi-info-circle text-sm text-amber-600" />
                        </div>
                        <p class="text-xs font-medium uppercase tracking-wider text-slate-500">{{ isPerson ? 'Additional notes' :
                          isGoods ? 'Item notes' : 'Extra description' }}</p>
                      </div>
                      <p class="mt-3 whitespace-pre-wrap text-sm leading-relaxed text-slate-700">
                        {{ isPerson ? (profile?.specialNote || 'No extra details') : (profile?.remark || 'No extra details') }}
                      </p>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </section>

        <section v-if="qrCode && maintenancePassed" id="scan-form-section"
          class="rounded-3xl border border-white/10 bg-white p-6 text-slate-900 shadow-2xl shadow-cyan-500/10">
          <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
            <div>
              <p class="text-xs uppercase tracking-[0.3em] text-slate-400">Profile setup</p>
              <h2 class="mt-1 text-2xl font-semibold text-slate-900">
                {{ hasProfile ? 'Update profile' : 'First-time setup' }}
              </h2>
            </div>
            <p class="text-sm text-slate-500">
              QR Code: <span class="font-mono text-slate-700">{{ qrCode }}</span>
            </p>
          </div>

          <div v-if="isFirstFill" class="mt-4 rounded-2xl border border-emerald-200 bg-emerald-50 p-4">
            <div class="flex items-start gap-3">
              <i class="pi pi-info-circle text-emerald-600" />
              <div class="flex-1 text-sm text-emerald-700">
                <p class="font-semibold">First-time tip</p>
                <p class="mt-1">
                  This is the first record for this QR code. Once submitted, it becomes active. Keep the maintenance code
                  safe for future edits.
                </p>
              </div>
            </div>
          </div>
          <div v-else class="mt-4 rounded-2xl border border-cyan-200 bg-cyan-50 p-4">
            <div class="flex items-start gap-3">
              <i class="pi pi-check-circle text-cyan-600" />
              <div class="flex-1 text-sm text-cyan-700">
                <p class="font-semibold">Edit mode</p>
                <p class="mt-1">
                  Maintenance code verified. You can now edit the profile—remember to save your changes.
                </p>
              </div>
            </div>
          </div>

          <form class="mt-6 space-y-6" @submit.prevent="handleSaveProfile">
            <div class="space-y-4">
              <div>
                <p class="text-sm font-medium text-slate-700">Display photo / item image</p>
                <p class="mt-1 text-xs text-slate-500">Recommended 640×640+, supports JPG/PNG, up to 15MB.</p>
              </div>
              <div
                class="relative w-full max-w-md mx-auto overflow-hidden rounded-2xl bg-slate-100 ring-2 ring-slate-200"
                style="aspect-ratio: 1/1;">
                <img v-if="formData.photoUrl && !loading.photo" :src="formData.photoUrl" alt="profile"
                  class="h-full w-full object-cover transition-opacity duration-200" @error="handleImageError" />
                <div v-if="loading.photo" class="flex h-full w-full items-center justify-center">
                  <i class="pi pi-spin pi-spinner text-4xl text-slate-400" />
                </div>
                <div v-else-if="!formData.photoUrl"
                  class="flex h-full w-full flex-col items-center justify-center gap-2 text-slate-400">
                  <i class="pi pi-image text-5xl" />
                  <span class="text-sm">No image</span>
                </div>
              </div>
              <input ref="photoInputRef" type="file" accept="image/jpeg,image/jpg,image/png,image/webp" class="hidden"
                @change="handlePhotoChange" />
              <div class="flex justify-center gap-3">
                <button type="button"
                  class="rounded-full border border-slate-300 bg-white px-6 py-2.5 text-sm font-medium text-slate-700 transition hover:bg-slate-50 disabled:opacity-50"
                  :disabled="loading.photo" @click="triggerPhotoPicker">
                  <i class="pi mr-2" :class="loading.photo ? 'pi-spin pi-spinner' : 'pi-upload'" />
                  {{ loading.photo ? 'Uploading...' : 'Upload image' }}
                </button>
                <button v-if="formData.photoUrl" type="button"
                  class="rounded-full border border-red-200 bg-red-50 px-4 py-2.5 text-sm font-medium text-red-600 transition hover:bg-red-100"
                  @click="formData.photoUrl = ''">
                  <i class="pi pi-times mr-1" />
                  Clear image
                </button>
              </div>
            </div>

            <div class="grid gap-4 md:grid-cols-2">
              <label class="space-y-2 text-sm">
                <span class="text-slate-500">{{ isPerson ? 'Name' : isGoods ? 'Item name' : 'Pet name' }}</span>
                <input v-model="formData.name" type="text" class="w-full rounded-2xl border border-slate-200 px-4 py-3"
                  :placeholder="isPerson ? 'e.g. John Doe' : isGoods ? 'e.g. MacBook Pro' : 'e.g. Snowy'" required />
              </label>

              <label v-if="isPerson" class="space-y-2 text-sm">
                <span class="text-slate-500">Gender</span>
                <div class="flex gap-2">
                  <button v-for="option in [
                    { label: 'Male', value: 'male' },
                    { label: 'Female', value: 'female' },
                    { label: 'Prefer not to say', value: 'unknown' }
                  ]" :key="option.value" type="button" class="flex-1 rounded-2xl border px-4 py-3 text-sm"
                    :class="formData.gender === option.value ? 'border-slate-900 bg-slate-900 text-white' : 'border-slate-200 text-slate-500'"
                    @click="formData.gender = option.value">
                    {{ option.label }}
                  </button>
                </div>
              </label>
            </div>

            <div v-if="isPerson" class="grid gap-4 md:grid-cols-2">
              <label class="space-y-2 text-sm">
                <span class="text-slate-500">Owner phone</span>
                <input v-model="formData.phone" type="tel" class="w-full rounded-2xl border border-slate-200 px-4 py-3"
                  required />
              </label>

              <label class="space-y-2 text-sm">
                <span class="text-slate-500">Emergency contact name</span>
                <input v-model="formData.emergencyContactName" type="text"
                  class="w-full rounded-2xl border border-slate-200 px-4 py-3" required />
              </label>

              <label class="space-y-2 text-sm">
                <span class="text-slate-500">Emergency contact phone</span>
                <input v-model="formData.emergencyContactPhone" type="tel"
                  class="w-full rounded-2xl border border-slate-200 px-4 py-3" required />
              </label>

              <label class="space-y-2 text-sm md:col-span-2">
                <span class="text-slate-500">Emergency contact email</span>
                <input v-model="formData.emergencyContactEmail" type="email"
                  class="w-full rounded-2xl border border-slate-200 px-4 py-3" placeholder="Optional" />
              </label>
            </div>

            <div v-else class="grid gap-4 md:grid-cols-2">
              <label class="space-y-2 text-sm">
                <span class="text-slate-500">Contact name</span>
                <input v-model="formData.contactName" type="text"
                  class="w-full rounded-2xl border border-slate-200 px-4 py-3" required />
              </label>

              <label class="space-y-2 text-sm">
                <span class="text-slate-500">Contact phone</span>
                <input v-model="formData.contactPhone" type="tel"
                  class="w-full rounded-2xl border border-slate-200 px-4 py-3" required />
              </label>

              <label class="space-y-2 text-sm md:col-span-2">
                <span class="text-slate-500">Contact email</span>
                <input v-model="formData.contactEmail" type="email"
                  class="w-full rounded-2xl border border-slate-200 px-4 py-3" placeholder="Optional" />
              </label>

              <label class="space-y-2 text-sm md:col-span-2">
                <span class="text-slate-500">Contact address</span>
                <div class="flex gap-2">
                  <input v-model="formData.location" type="text" readonly
                    class="flex-1 rounded-2xl border border-slate-200 px-4 py-3 bg-slate-50 cursor-pointer"
                    placeholder="Click to select address" @click="handleOpenLocationDialog" />
                  <button type="button"
                    class="rounded-2xl border border-slate-300 bg-white px-6 py-3 text-sm font-medium text-slate-700 transition hover:bg-slate-50 whitespace-nowrap"
                    @click="handleOpenLocationDialog">
                    <i class="pi pi-map-marker mr-2" />
                    Select address
                  </button>
                </div>
              </label>
            </div>

            <label class="block space-y-2 text-sm">
              <span class="text-slate-500">{{ isPerson ? 'Additional notes / health tips' : isGoods ? 'Item notes' : 'Extra remarks' }}</span>
              <textarea v-if="isPerson" v-model="formData.specialNote" rows="4"
                class="w-full rounded-2xl border border-slate-200 px-4 py-3" placeholder="e.g. allergies, medical needs, carried items" />
              <textarea v-else v-model="formData.remark" rows="4"
                class="w-full rounded-2xl border border-slate-200 px-4 py-3"
                :placeholder="isGoods ? 'e.g. item features, usage notes, handling tips' : 'e.g. pet habits, health info, behavior notes'" />
            </label>

            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
              <p class="text-sm text-slate-500">
                Submitted data will sync to the public scan page.
              </p>
              <button type="submit"
                class="rounded-full bg-slate-900 px-8 py-3 text-sm font-semibold text-white hover:bg-slate-800"
                :disabled="loading.saving">
                {{ loading.saving ? 'Saving...' : hasProfile ? 'Save changes' : 'Submit profile' }}
              </button>
            </div>
          </form>
        </section>

        <footer class="mt-8 border-t border-white/10 pt-6 text-center">
          <p class="text-xs text-slate-400">
            Data is used solely for emergency contact scenarios. Uploading means you consent to display it when scanned.
          </p>
          <p class="mt-2 text-xs text-slate-500">
            <i class="pi pi-shield text-cyan-400" /> Your privacy stays protected
          </p>
        </footer>
      </div>
    </div>

    <!-- Location picker dialog -->
    <LocationPicker v-model="showLocationDialog" :initial-location="formData.location" @save="handleSaveLocation" />

    <!-- Location preview dialog (read-only) -->
    <LocationPicker v-model="showLocationViewDialog" :initial-location="isPerson ? null : profile?.location"
      :closable="true" :readonly="true" />

    <!-- Maintenance code dialog -->
    <Dialog v-model:visible="showMaintenanceDialog" modal :closable="!isFirstFill" :closeOnEscape="!isFirstFill"
      :dismissableMask="!isFirstFill" :style="{ width: '90vw', maxWidth: '450px' }" :draggable="false">
      <template #header>
        <div class="flex items-center gap-3">
          <div class="flex h-10 w-10 items-center justify-center rounded-full bg-cyan-100">
            <i class="pi pi-lock text-lg text-cyan-600" />
          </div>
          <div>
            <h3 class="text-lg font-semibold text-slate-900">
              {{ isFirstFill ? 'Verification required for first use' : 'Verification required to edit' }}
            </h3>
            <p class="text-sm text-slate-500">
              {{ isFirstFill ? 'Enter the maintenance code that came with the QR tag.' : 'Enter the maintenance code to unlock editing.' }}
            </p>
          </div>
        </div>
      </template>

      <div class="space-y-4 py-4">
        <div>
          <label class="mb-2 block text-sm font-medium text-slate-700">Maintenance code</label>
          <input v-model="maintenanceCode" type="text" maxlength="8"
            class="w-full rounded-xl border border-slate-300 px-4 py-3 text-slate-900 placeholder:text-slate-400 focus:border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/20"
            placeholder="Enter the maintenance code" @keyup.enter="handleVerifyMaintenance" autofocus />
        </div>
        <div v-if="isFirstFill" class="rounded-xl border border-emerald-200 bg-emerald-50 p-3">
          <div class="flex items-start gap-2">
            <i class="pi pi-info-circle text-sm text-emerald-600" />
            <p class="text-xs text-emerald-700">
              This is the first record for this QR code. Verify to begin entering details.
            </p>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="flex justify-end gap-3">
          <button v-if="!isFirstFill" type="button"
            class="rounded-xl border border-slate-300 px-5 py-2.5 text-sm font-medium text-slate-700 transition hover:bg-slate-50"
            @click="showMaintenanceDialog = false">
            Cancel
          </button>
          <button type="button"
            class="rounded-xl bg-cyan-600 px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-cyan-700 disabled:opacity-50"
            :disabled="loading.verifying || !maintenanceCode" @click="handleVerifyMaintenance">
            {{ loading.verifying ? 'Verifying...' : 'Verify' }}
          </button>
        </div>
      </template>
    </Dialog>
  </div>
</template>

<style scoped>
.scan-page {
  background-image: radial-gradient(circle at 20% 20%, rgba(14, 165, 233, 0.12), transparent 45%),
    radial-gradient(circle at 80% 0%, rgba(129, 140, 248, 0.12), transparent 50%),
    linear-gradient(135deg, #020617, #030712);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>