﻿<template>
  <div class="card">
    <div class="card-title">
      {{ t('title') }}
    </div>

    <div class="card-content">
      <p class="card-text">
        {{ t('description') }}
      </p>
      
      <div class="file-input-container">
        <input
            type="file"
            ref="fileInput"
            accept="image/*"
            class="hidden"
            @change="onFileSelected"
        />
        <button
            class="choose-file-button"
            @click="triggerFileInput"
        >
          {{ t('chooseImage') }}
        </button>
      </div>

      <div v-if="errorMessage" class="error-message">
        {{ errorMessage }}
      </div>

      <div v-if="showCropper" class="cropper-wrapper">
        <Cropper
          ref="cropper"
          :src="fileUrl"
          :aspect-ratio="4"
          :stencil-props="{
            aspectRatio: 4,
            class: 'banner-stencil'
          }"
        />
      </div>

      <div v-else class="image-preview-container" @click="startEditing">
        <img
            :src="fileUrl || fallbackUrl"
            :alt="t('preview')"
            class="preview-image"
        />
        <div class="edit-overlay">
          <span class="edit-text">{{ t('clickToEdit') }}</span>
        </div>
      </div>
    </div>

    <div class="card-actions">
      <button class="secondary"
              @click="cancel"
              :disabled="isUploading">
        {{ t('cancel') }}
      </button>
      <button class="primary"
              @click="showCropper ? applyCrop() : publish()"
              :disabled="!selectedFile || isUploading">
        <template v-if="isUploading">
          <span class="loading-spinner"></span>
          {{ t('uploading') }} ({{ uploadProgress }}%)
        </template>
        <template v-else>
          {{ showCropper ? t('apply') : t('save') }}
        </template>
      </button>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {useClient} from '@/plugins/api.js'
import { Cropper } from 'vue-advanced-cropper'
import 'vue-advanced-cropper/dist/style.css'
import { useI18n } from 'vue-i18n'

const props = defineProps({
  creator: {
    required: true
  }
})

const emits = defineEmits(['closeRequested'])

const fileInput = ref(null)
const selectedFile = ref(null)
const fileUrl = ref(props.creator?.images?.banner)
const fallbackUrl = '/images/hutopymedia/banners/hutopyul.png'
const errorMessage = ref('')
const showCropper = ref(false)
const cropper = ref(null)
const isUploading = ref(false)
const uploadProgress = ref(0)

// Get translations for this component
const { t } = useI18n()

const triggerFileInput = () => {
  fileInput.value.click()
}

const onFileSelected = (event) => {
  const file = event.target.files[0]
  if (file) {
    selectedFile.value = file
    const reader = new FileReader()
    reader.onload = (e) => {
      fileUrl.value = e.target.result
      showCropper.value = true
    }
    reader.readAsDataURL(file)
  } else {
    selectedFile.value = null
    fileUrl.value = null
    showCropper.value = false
  }
}

const startEditing = () => {
  if (fileUrl.value && fileUrl.value !== fallbackUrl) {
    // Use our API client to get the image
    client.get(fileUrl.value, { responseType: 'blob' })
      .then(response => {
        const blob = response.data
        selectedFile.value = new File([blob], 'current-image.jpg', { type: 'image/jpeg' })
        // Create a local URL for the cropper
        fileUrl.value = URL.createObjectURL(blob)
        showCropper.value = true
      })
      .catch(error => {
        console.error('Error loading image for editing:', error)
        errorMessage.value = t('errors.imageLoad')
      })
  }
}

const applyCrop = () => {
  if (!cropper.value) return

  const canvas = cropper.value.getResult().canvas
  canvas.toBlob((blob) => {
    const croppedFile = new File([blob], selectedFile.value.name, {
      type: selectedFile.value.type
    })
    selectedFile.value = croppedFile
    fileUrl.value = canvas.toDataURL()
    showCropper.value = false
  }, selectedFile.value.type)
}

const client = useClient()
const publish = async () => {
  if (!selectedFile.value || isUploading.value) return

  try {
    isUploading.value = true
    uploadProgress.value = 0
    const formData = new FormData()
    formData.append('file', selectedFile.value)

    const response = await client.post(
        `/api/creators/${props.creator.id}/banner`,
        formData,
        {
          onUploadProgress: (progressEvent) => {
            uploadProgress.value = Math.round((progressEvent.loaded * 100) / progressEvent.total)
          }
        }
    )

    props.creator.images.banner = `${response.data.blobUrl}?t=${Date.now()}`
    emits('closeRequested')
  } catch (error) {
    console.error(error)
    errorMessage.value = t('errors.imageUpload')
  } finally {
    isUploading.value = false
    uploadProgress.value = 0
  }
}

const cancel = () => {
  showCropper.value = false
  // Reset to original state if we were editing
  if (props.creator?.images?.banner) {
    fileUrl.value = props.creator.images.banner
    selectedFile.value = null
  } else {
    fileUrl.value = fallbackUrl
    selectedFile.value = null
  }
  emits('closeRequested')
}
</script>

<style scoped>
.card-text {
  @apply font-sans text-lg;
}

.image-preview-container {
  @apply mb-5;
  @apply w-full;
  @apply flex;
  @apply justify-center;
  @apply items-center;
  @apply overflow-hidden;
  @apply rounded-lg;
  @apply relative;
  @apply cursor-pointer;
}

.preview-image {
  @apply w-full;
  @apply aspect-[4/1];
  @apply object-cover;
}

.edit-overlay {
  @apply absolute;
  @apply inset-0;
  @apply flex;
  @apply items-center;
  @apply justify-center;
  @apply bg-black;
  @apply bg-opacity-0;
  @apply transition-opacity;
  @apply duration-200;
}

.image-preview-container:hover .edit-overlay {
  @apply bg-opacity-30;
}

.edit-text {
  @apply text-white;
  @apply font-medium;
  @apply opacity-0;
  @apply transition-opacity;
  @apply duration-200;
}

.image-preview-container:hover .edit-text {
  @apply opacity-100;
}

.cropper-wrapper {
  @apply mb-5;
  @apply w-full;
  @apply h-[400px];
  @apply flex;
  @apply justify-center;
  @apply items-center;
  @apply overflow-hidden;
}

.file-input-container {
  @apply flex;
  @apply justify-center;
  @apply items-center;
  @apply w-full;
}

.choose-file-button {
  @apply px-4;
  @apply py-2;
  @apply primary;
  @apply rounded-lg;
  @apply cursor-pointer;
}

.error-message {
  @apply text-red-500;
  @apply mt-2;
  @apply text-center;
  @apply font-medium;
}

:deep(.banner-stencil) {
  @apply border-2;
  @apply border-white;
}

:deep(.cropper) {
  @apply max-h-full;
}

.loading-spinner {
  @apply inline-block;
  @apply w-4;
  @apply h-4;
  @apply mr-2;
  @apply border-2;
  @apply border-white;
  @apply border-t-transparent;
  @apply rounded-full;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

<i18n>
{
  "en": {
    "title": "Banner Editor",
    "description": "Upload or edit your profile banner image. The recommended size is 1024x256 pixels (4:1 ratio).",
    "chooseImage": "Choose an image",
    "clickToEdit": "Click to edit",
    "uploading": "Uploading"
  },
  "fr": {
    "title": "Éditeur de bannière",
    "description": "Téléchargez ou modifiez votre image de bannière de profil. La taille recommandée est de 1024x256 pixels (ratio 4:1).",
    "chooseImage": "Choisir une image",
    "clickToEdit": "Cliquez pour modifier",
    "uploading": "Téléchargement"
  },
  "es": {
    "title": "Editor de banner",
    "description": "Sube o edita tu imagen de banner de perfil. El tamaño recomendado es de 1024x256 píxeles (ratio 4:1).",
    "chooseImage": "Elegir una imagen",
    "clickToEdit": "Haga clic para editar",
    "uploading": "Subiendo"
  }
}
</i18n>
