<template>
  <div class="profile-view">
    <h2>User Profile</h2>
    <form class="profile-form" @submit.prevent>
      <div class="group">
        <label for="child-image">Image</label>
        <ImagePicker
          id="child-image"
          v-model="selectedImageId"
          :image-type="1"
          @add-image="onAddImage"
        />
      </div>
      <div class="group">
        <label for="first-name">First Name</label>
        <input id="first-name" v-model="firstName" type="text" disabled />
      </div>
      <div class="group">
        <label for="last-name">Last Name</label>
        <input id="last-name" v-model="lastName" type="text" disabled />
      </div>
      <div class="group">
        <label for="email">Email Address</label>
        <input id="email" v-model="email" type="email" disabled />
      </div>
      <div>
        <button type="button" class="btn-link" @click="resetPassword" :disabled="resetting">
          {{ resetting ? 'Sending...' : 'Reset Password' }}
        </button>
      </div>
      <div v-if="successMsg" class="success-message" aria-live="polite">{{ successMsg }}</div>
      <div v-if="errorMsg" class="error-message" aria-live="polite">{{ errorMsg }}</div>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import ImagePicker from '@/components/utils/ImagePicker.vue'
import { getCachedImageUrl } from '@/common/imageCache'
import '@/assets/edit-forms.css'
import '@/assets/actions-shared.css'
import '@/assets/button-shared.css'

const firstName = ref('')
const lastName = ref('')
const email = ref('')
const avatarId = ref<string | null>(null)
const avatarUrl = ref('/static/avatar-default.png')
const selectedImageId = ref<string | null>(null)
const localImageFile = ref<File | null>(null)
const errorMsg = ref('')
const successMsg = ref('')
const resetting = ref(false)

onMounted(async () => {
  try {
    const res = await fetch('/api/user/profile')
    if (!res.ok) throw new Error('Failed to load profile')
    const data = await res.json()
    firstName.value = data.first_name || ''
    lastName.value = data.last_name || ''
    email.value = data.email || ''
    avatarId.value = data.image_id || null
    selectedImageId.value = data.image_id || null

    // Use imageCache to get avatar URL
    if (avatarId.value) {
      avatarUrl.value = await getCachedImageUrl(avatarId.value)
    } else {
      avatarUrl.value = '/static/avatar-default.png'
    }
  } catch {
    errorMsg.value = 'Could not load user profile.'
  }
})

// Watch for avatarId changes (e.g., after updating avatar)
watch(avatarId, async (id) => {
  if (id) {
    avatarUrl.value = await getCachedImageUrl(id)
  } else {
    avatarUrl.value = '/static/avatar-default.png'
  }
})

function onAddImage({ id, file }: { id: string; file: File }) {
  if (id === 'local-upload') {
    localImageFile.value = file
  } else {
    localImageFile.value = null
    selectedImageId.value = id
    updateAvatar(id)
  }
}

async function updateAvatar(imageId: string) {
  errorMsg.value = ''
  successMsg.value = ''
  try {
    const res = await fetch('/api/user/avatar', {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ image_id: imageId }),
    })
    if (!res.ok) throw new Error('Failed to update avatar')
    // Update avatarId, which will trigger the watcher to update avatarUrl
    avatarId.value = imageId
    successMsg.value = 'Avatar updated!'
  } catch {
    errorMsg.value = 'Failed to update avatar.'
  }
}

// If uploading a new image file
watch(localImageFile, async (file) => {
  if (!file) return
  errorMsg.value = ''
  successMsg.value = ''
  const formData = new FormData()
  formData.append('file', file)
  formData.append('type', '2')
  formData.append('permanent', 'true')
  try {
    const resp = await fetch('/api/image/upload', {
      method: 'POST',
      body: formData,
    })
    if (!resp.ok) throw new Error('Image upload failed')
    const data = await resp.json()
    selectedImageId.value = data.id
    await updateAvatar(data.id)
  } catch {
    errorMsg.value = 'Failed to upload avatar image.'
  }
})

async function resetPassword() {
  resetting.value = true
  errorMsg.value = ''
  successMsg.value = ''
  try {
    const res = await fetch('/api/request-password-reset', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email: email.value }),
    })
    if (!res.ok) throw new Error('Failed to send reset email')
    successMsg.value =
      'If this email is registered, you will receive a password reset link shortly.'
  } catch {
    errorMsg.value = 'Failed to send password reset email.'
  } finally {
    resetting.value = false
  }
}
</script>

<style scoped>
.success-message {
  color: var(--success, #16a34a);
  font-size: 1rem;
}
.error-message {
  color: var(--error, #e53e3e);
  font-size: 0.98rem;
  margin-top: 0.4rem;
}
</style>
