<template>
  <q-page class="edit-page-container full-height">
    <div class="row justify-center full-height">
      <div class="col-12 col-md-8 col-lg-4 full-height">
        <q-card class="full-height-card">


          <q-card-section class="flex-1 scroll">
            <q-form @submit.prevent="onSave" class="q-gutter-md full-height-form">
              
              <!-- Tab Panels (without tab navigation here) -->
              <q-tab-panels v-model="currentTab" animated>
                
                <!-- Tab 1: Basics - Only Image and Emotional Level -->
                <q-tab-panel name="basics" class="q-pa-none">
                  <div class="q-gutter-md ">

                    <!-- Emotional Level -->
                    <div class="q-mb-md">
                      <q-label class="text-subtitle2 q-mb-sm">Emotional Level</q-label>
                      <q-slider
                        v-model="form.level"
                        :min="-3"
                        :max="3"
                        :step="1"
                        snap
                        markers
                        label
                        :label-value="`Level: ${form.level}`"
                        color="primary"
                        class="q-mt-md"
                      />
                      <div class="row justify-between text-caption text-grey q-mt-xs">
                        <span>Very Negative (-3)</span>
                        <span>Neutral (0)</span>
                        <span>Very Positive (+3)</span>
                      </div>
                    </div>


                    <!-- Key Image -->
                    <div class="q-mb-md">
                      <q-label class="text-subtitle2 q-mb-sm">Image *</q-label>
                      
                      <!-- Preview selected key image -->
                      <div v-if="form.keyImage || form.keyImageUrl" class="q-mb-sm">
                        <div class="relative-position" style="display: inline-block;">
                          <q-img
                            :src="getKeyImagePreview()"
                            style="height: 120px; max-width: 180px"
                            class="rounded-borders"
                          />
                          <q-btn
                            icon="close"
                            size="sm"
                            round
                            color="negative"
                            class="absolute-top-right"
                            style="margin: 4px"
                            @click="removeKeyImage"
                          />
                        </div>
                      </div>
                      
                      <!-- Mobile-friendly image selection -->
                      <div class="q-mb-sm">
                        <q-btn-group spread class="full-width">
                          <q-btn 
                            icon="photo_camera" 
                            label="Camera" 
                            color="primary" 
                            outline
                            @click="openCamera"
                            class="col"
                          />
                          <q-btn 
                            icon="photo_library" 
                            label="Gallery" 
                            color="primary" 
                            outline
                            @click="openGallery"
                            class="col"
                          />
                        </q-btn-group>
                      </div>
                      
                      <q-file
                        v-model="form.keyImage"
                        label="Select key image *"
                        filled
                        accept="image/*"
                        max-file-size="5242880"
                        @rejected="onImageRejected"
                        @update:model-value="onKeyImageSelected"
                        :rules="[val => !!val || !!form.keyImageUrl || 'Key image is required']"
                        ref="keyImageInput"
                        style="display: none;"
                      >
                        <template v-slot:prepend>
                          <q-icon name="attach_file" />
                        </template>
                      </q-file>
                      
                      <!-- Hidden file inputs for camera and gallery -->
                      <input
                        type="file"
                        ref="cameraInput"
                        accept="image/*"
                        capture="environment"
                        style="display: none;"
                        @change="handleCameraInput"
                      />
                      <input
                        type="file"
                        ref="galleryInput"
                        accept="image/*"
                        style="display: none;"
                        @change="handleGalleryInput"
                      />
                    </div>
                    
                  </div>

                  <!-- Tab Navigation for Basics -->
                  <div class="row q-gutter-md q-mt-lg justify-between">
                    <q-btn
                      label="Cancel"
                      color="grey"
                      flat
                      @click="onCancel"
                      class="col-auto"
                    />
                    <q-btn
                      label="Continue"
                      icon-right="arrow_forward"
                      color="primary"
                      @click="goToNextTab"
                      class="col-auto"
                    />
                  </div>
                </q-tab-panel>

                <!-- Tab 2: Content - Title, Headline, Date/Time, Description -->
                <q-tab-panel name="content" class="q-pa-none">
                  <div class="q-gutter-md ">

                  <!-- Date and Time -->
                  <div class="row q-gutter-md q-mb-md">
                    <div class="col">
                    <q-input
                      v-model="form.date"
                      label="Date *"
                      filled
                      type="date"
                      :rules="[val => !!val || 'Date is required']"
                    >
                      <template v-slot:prepend>
                      <q-icon name="event" />
                      </template>
                    </q-input>
                    </div>
                    <div class="col">
                    <q-input
                      v-model="form.time"
                      label="Time"
                      filled
                      type="time"
                    >
                      <template v-slot:prepend>
                      <q-icon name="access_time" />
                      </template>
                    </q-input>
                    </div>
                  </div>

                  <!-- Title - Now mandatory -->
                  <q-input
                    v-model="form.title"
                    label="Short title for the wave*"
                    filled
                    :rules="[val => !!val || 'Title is required']"
                  />

                  <!-- Headline - Now optionaquasal -->
                  <q-input
                    v-model="form.headline"
                    label="Headline"
                    filled
                  />

                  <!-- Description (formerly Text) -->
                  <q-input
                    v-model="form.text"
                    label="Description"
                    filled
                    type="textarea"
                    rows="4"
                  />

                  </div>

                  <!-- Tab Navigation for Content -->
                  <div class="row q-gutter-md q-mt-lg justify-between">
                  <q-btn
                    label="Back"
                    icon="arrow_back"
                    color="grey"
                    flat
                    @click="goToPreviousTab"
                    class="col-auto"
                  />
                  <q-btn
                    label="Continue"
                    icon-right="arrow_forward"
                    color="primary"
                    @click="goToNextTab"
                    class="col-auto"
                  />
                  </div>
                </q-tab-panel>

                <!-- Tab 3: Media -->
                <q-tab-panel name="media" class="q-pa-none">
                  <div class="q-gutter-md q-mt-md">
                    
                    <!-- Additional Images -->
                    <div class="q-mb-md">
                      <q-label class="text-subtitle2 q-mb-sm">Additional Images</q-label>
                      
                      <!-- Mobile-friendly buttons for additional images -->
                      <q-btn-group unelevated class="full-width q-mb-md">
                        <q-btn
                          unelevated
                          color="primary"
                          icon="photo_camera"
                          label="Camera"
                          class="col"
                          @click="openAdditionalCamera"
                        />
                        <q-btn
                          unelevated
                          color="primary"
                          icon="photo_library"
                          label="Gallery"
                          class="col"
                          @click="openAdditionalGallery"
                        />
                      </q-btn-group>

                      <!-- Hidden file inputs for additional images -->
                      <input
                        type="file"
                        id="additionalCameraInput"
                        accept="image/*"
                        capture="environment"
                        multiple
                        style="display: none;"
                        @change="handleAdditionalCameraInput"
                      />
                      <input
                        type="file"
                        id="additionalGalleryInput"
                        accept="image/*"
                        multiple
                        style="display: none;"
                        @change="handleAdditionalGalleryInput"
                      />
                      
                      <!-- Preview additional images -->
                      <div v-if="form.additionalImages && form.additionalImages.length > 0" class="q-mt-md">
                        <div class="text-caption text-grey q-mb-sm">Selected Images ({{ form.additionalImages.length }})</div>
                        <div class="additional-images-grid">
                          <div 
                            v-for="(image, index) in form.additionalImages" 
                            :key="index" 
                            class="additional-image-item"
                            @mouseenter="hoveredAdditionalImageIndex = index"
                            @mouseleave="hoveredAdditionalImageIndex = null"
                          >
                            <q-img
                              :src="URL.createObjectURL(image)"
                              class="additional-image-thumbnail"
                              fit="cover"
                            />
                            <div 
                              v-show="hoveredAdditionalImageIndex === index"
                              class="additional-image-overlay"
                              @click="removeAdditionalImageFile(index)"
                            >
                              <q-icon name="close" size="20px" color="white" />
                            </div>
                            <div class="additional-image-name">{{ image.name }}</div>
                          </div>
                        </div>
                      </div>
                      
                      <!-- Preview additional image URLs (for existing entries) -->
                      <div v-if="form.additionalImageUrls.length > 0" class="q-mt-md">
                        <div class="text-caption text-grey q-mb-sm">Existing Images ({{ form.additionalImageUrls.length }})</div>
                        <div class="additional-images-grid">
                          <div 
                            v-for="(url, index) in form.additionalImageUrls" 
                            :key="'url-' + index" 
                            class="additional-image-item"
                            @mouseenter="hoveredAdditionalUrlIndex = index"
                            @mouseleave="hoveredAdditionalUrlIndex = null"
                          >
                            <q-img
                              :src="url"
                              class="additional-image-thumbnail"
                              fit="cover"
                            />
                            <div 
                              v-show="hoveredAdditionalUrlIndex === index"
                              class="additional-image-overlay"
                              @click="removeAdditionalImage(index)"
                            >
                              <q-icon name="close" size="20px" color="white" />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- Audio Recordings -->
                    <div class="q-mb-md">
                      <q-label class="text-subtitle2 q-mb-sm">Audio Recordings</q-label>
                      
                      <!-- Mobile-friendly buttons for audio -->
                      <q-btn-group unelevated class="full-width q-mb-md">
                        <q-btn
                          unelevated
                          color="accent"
                          icon="mic"
                          label="Record"
                          class="col"
                          @click="toggleAudioRecording"
                          :loading="isRecording"
                        />
                        <q-btn
                          unelevated
                          color="accent"
                          icon="audiotrack"
                          label="Files"
                          class="col"
                          @click="openAudioFiles"
                        />
                      </q-btn-group>

                      <!-- Recording status -->
                      <div v-if="isRecording" class="q-mb-md text-center">
                        <q-circular-progress
                          show-value
                          :value="recordingProgress"
                          size="60px"
                          color="accent"
                          class="q-mb-sm"
                        >
                          {{ recordingTime }}s
                        </q-circular-progress>
                        <div class="text-caption text-accent">Recording...</div>
                        <q-btn
                          icon="stop"
                          label="Stop"
                          color="negative"
                          @click="stopAudioRecording"
                          class="q-mt-sm"
                        />
                      </div>

                      <!-- Hidden file input for audio -->
                      <input
                        type="file"
                        id="audioFilesInput"
                        accept="audio/*"
                        multiple
                        style="display: none;"
                        @change="handleAudioFilesInput"
                      />
                      
                      <!-- List selected audio files -->
                      <div v-if="form.audioFiles && form.audioFiles.length > 0" class="q-mt-md">
                        <div class="text-caption text-grey q-mb-sm">Selected Audio Files ({{ form.audioFiles.length }})</div>
                        <div class="audio-files-list">
                          <div 
                            v-for="(file, index) in form.audioFiles" 
                            :key="index" 
                            class="audio-file-item"
                            @mouseenter="hoveredAudioFileIndex = index"
                            @mouseleave="hoveredAudioFileIndex = null"
                          >
                            <q-icon name="audiotrack" size="24px" color="accent" class="q-mr-sm" />
                            <div class="audio-file-info">
                              <div class="audio-file-name">{{ file.name }}</div>
                              <div class="audio-file-size">{{ formatFileSize(file.size) }}</div>
                            </div>
                            <q-btn
                              v-show="hoveredAudioFileIndex === index"
                              icon="close"
                              size="sm"
                              round
                              color="negative"
                              flat
                              @click="removeAudioFile(index)"
                            />
                          </div>
                        </div>
                      </div>
                      
                      <!-- List existing audio recordings -->
                      <div v-if="form.audioRecordings.length > 0" class="q-mt-sm">
                        <div class="media-thumbnails">
                          <div 
                            v-for="(audio, index) in form.audioRecordings" 
                            :key="index"
                            class="media-thumbnail audio-thumbnail"
                            @mouseenter="hoveredAudioIndex = index"
                            @mouseleave="hoveredAudioIndex = null"
                          >
                            <div class="media-icon">
                              <q-icon name="audiotrack" size="24px" />
                            </div>
                            <div class="media-info">
                              <div class="media-name">{{ audio.name }}</div>
                              <div class="media-size">{{ formatFileSize(audio.size) }}</div>
                            </div>
                            <div 
                              v-if="hoveredAudioIndex === index"
                              class="media-delete"
                              @click="removeAudioRecording(index)"
                            >
                              ×
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- Video Recordings -->
                    <div class="q-mb-md">
                      <q-label class="text-subtitle2 q-mb-sm">Video Recordings</q-label>
                      
                      <!-- Mobile-friendly buttons for videos -->
                      <q-btn-group unelevated class="full-width q-mb-md">
                        <q-btn
                          unelevated
                          color="secondary"
                          icon="videocam"
                          label="Record"
                          class="col"
                          @click="openVideoCamera"
                        />
                        <q-btn
                          unelevated
                          color="secondary"
                          icon="video_library"
                          label="Gallery"
                          class="col"
                          @click="openVideoGallery"
                        />
                      </q-btn-group>

                      <!-- Hidden file inputs for videos -->
                      <input
                        type="file"
                        id="videoCameraInput"
                        accept="video/*"
                        capture="environment"
                        multiple
                        style="display: none;"
                        @change="handleVideoCameraInput"
                      />
                      <input
                        type="file"
                        id="videoGalleryInput"
                        accept="video/*"
                        multiple
                        style="display: none;"
                        @change="handleVideoGalleryInput"
                      />
                      
                      <!-- List selected video files -->
                      <div v-if="form.videoFiles && form.videoFiles.length > 0" class="q-mt-md">
                        <div class="text-caption text-grey q-mb-sm">Selected Video Files ({{ form.videoFiles.length }})</div>
                        <div class="video-files-list">
                          <div 
                            v-for="(file, index) in form.videoFiles" 
                            :key="index" 
                            class="video-file-item"
                            @mouseenter="hoveredVideoFileIndex = index"
                            @mouseleave="hoveredVideoFileIndex = null"
                          >
                            <q-icon name="videocam" size="24px" color="secondary" class="q-mr-sm" />
                            <div class="video-file-info">
                              <div class="video-file-name">{{ file.name }}</div>
                              <div class="video-file-size">{{ formatFileSize(file.size) }}</div>
                            </div>
                            <q-btn
                              v-show="hoveredVideoFileIndex === index"
                              icon="close"
                              size="sm"
                              round
                              color="negative"
                              flat
                              @click="removeVideoFile(index)"
                            />
                          </div>
                        </div>
                      </div>
                      
                      <!-- List existing video recordings -->
                      <div v-if="form.videoRecordings.length > 0" class="q-mt-sm">
                        <div class="media-thumbnails">
                          <div 
                            v-for="(video, index) in form.videoRecordings" 
                            :key="index"
                            class="media-thumbnail video-thumbnail"
                            @mouseenter="hoveredVideoIndex = index"
                            @mouseleave="hoveredVideoIndex = null"
                          >
                            <div class="media-icon">
                              <q-icon name="videocam" size="24px" />
                            </div>
                            <div class="media-info">
                              <div class="media-name">{{ video.name }}</div>
                              <div class="media-size">{{ formatFileSize(video.size) }}</div>
                            </div>
                            <div 
                              v-if="hoveredVideoIndex === index"
                              class="media-delete"
                              @click="removeVideoRecording(index)"
                            >
                              ×
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                  </div>

                  <!-- Tab Navigation for Media -->
                  <div class="row q-gutter-md q-mt-lg justify-between">
                    <q-btn
                      label="Back"
                      icon="arrow_back"
                      color="grey"
                      flat
                      @click="goToPreviousTab"
                      class="col-auto"
                    />
                    <q-btn
                      label="Continue"
                      icon-right="arrow_forward"
                      color="primary"
                      @click="goToNextTab"
                      class="col-auto"
                    />
                  </div>
                </q-tab-panel>

                <!-- Tab 4: Details - Location, Persons, Category, Tags, Delete -->
                <q-tab-panel name="details" class="q-pa-none">
                  <div class="q-gutter-md q-mt-md">
                    
                    <!-- Location -->
                    <div class="q-mb-md">
                      <q-label class="text-subtitle2 q-mb-sm">Location</q-label>
                      
                      <!-- Location input with current location button -->
                      <div class="row q-gutter-sm">
                        <q-input
                          v-model="form.location"
                          label="Enter location or use current"
                          filled
                          class="col"
                        >
                          <template v-slot:prepend>
                            <q-icon name="place" />
                          </template>
                        </q-input>
                        
                        <q-btn
                          icon="my_location"
                          color="primary"
                          @click="getCurrentLocation"
                          :loading="loadingLocation"
                          :disable="loadingLocation"
                          class="col-auto"
                        >
                          <q-tooltip class="bg-primary">Get current location</q-tooltip>
                        </q-btn>
                      </div>
                      
                      <!-- Location status -->
                      <div v-if="locationStatus" class="q-mt-xs">
                        <div class="text-caption" :class="locationStatus.type === 'success' ? 'text-positive' : 'text-negative'">
                          {{ locationStatus.message }}
                        </div>
                      </div>
                      
                      <!-- Coordinates display (optional) -->
                      <div v-if="currentCoordinates" class="q-mt-xs">
                        <div class="text-caption text-grey">
                          Coordinates: {{ currentCoordinates.lat.toFixed(6) }}, {{ currentCoordinates.lng.toFixed(6) }}
                        </div>
                      </div>
                    </div>

                    <!-- Related Persons -->
                    <div class="q-mb-md">
                      <q-separator class="q-mt-lg q-mb-lg" />
                      <q-label class="text-subtitle2 q-mb-sm">Related Persons</q-label>
                      
                      <!-- Person selector button -->
                      <q-btn
                        unelevated
                        color="primary"
                        icon="person_add"
                        :label="form.relatedPersons.length > 0 ? `Edit Persons (${form.relatedPersons.length})` : 'Select Persons'"
                        class="full-width q-mb-md"
                        @click="goToPersonSelector"
                      />
                      
                      <!-- Selected persons display -->
                      <div v-if="form.relatedPersons.length > 0" class="selected-persons-display">
                        <div class="person-circles">
                          <div 
                            v-for="(person, index) in form.relatedPersons" 
                            :key="index"
                            class="person-circle"
                            @mouseenter="hoveredPersonIndex = index"
                            @mouseleave="hoveredPersonIndex = null"
                          >
                            <div class="person-initials">{{ getInitials(person) }}</div>
                            <div class="person-name-tooltip">{{ person }}</div>
                            <div 
                              v-if="hoveredPersonIndex === index"
                              class="person-delete"
                              @click="removePerson(index)"
                            >
                              ×
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- Category Selection -->
                    <div class="q-mb-md">
                      <q-separator class="q-mb-md" />
                      <q-label class="text-subtitle2 q-mb-sm">Categories</q-label>
                      
                      <!-- Category selector button -->
                      <q-btn
                        unelevated
                        color="primary"
                        icon="category"
                        :label="form.categories && form.categories.length > 0 ? `Edit Categories (${form.categories.length})` : 'Select Categories'"
                        class="full-width q-mb-md"
                        @click="goToCategorySelector"
                      />
                      
                      <!-- Selected categories display -->
                      <div v-if="form.categories && form.categories.length > 0" class="selected-categories-display">
                        <div class="category-chips">
                          <q-chip
                            v-for="(category, index) in form.categories"
                            :key="index"
                            :removable="hoveredCategoryIndex === index"
                            @remove="removeCategory(index)"
                            @mouseenter="hoveredCategoryIndex = index"
                            @mouseleave="hoveredCategoryIndex = null"
                            color="primary"
                            text-color="white"
                            icon="category"
                            class="category-chip"
                          >
                            {{ category }}
                          </q-chip>
                        </div>
                      </div>
                    </div>

                    <!-- Tags -->
                    <div class="q-mb-md">
                      <q-label class="text-subtitle2 q-mb-sm">Tags</q-label>
                      
                      <!-- Tag selector button -->
                      <q-btn
                        unelevated
                        color="secondary"
                        icon="tag"
                        :label="form.tags && form.tags.length > 0 ? `Edit Tags (${form.tags.length})` : 'Select Tags'"
                        class="full-width q-mb-md"
                        @click="goToTagSelector"
                      />
                      
                      <!-- Selected tags display -->
                      <div v-if="form.tags && form.tags.length > 0" class="selected-tags-display">
                        <div class="tag-chips">
                          <q-chip
                            v-for="(tag, index) in form.tags"
                            :key="index"
                            :removable="hoveredTagIndex === index"
                            @remove="removeTag(index)"
                            @mouseenter="hoveredTagIndex = index"
                            @mouseleave="hoveredTagIndex = null"
                            color="secondary"
                            text-color="white"
                            icon="tag"
                            class="tag-chip"
                          >
                            {{ tag }}
                          </q-chip>
                        </div>
                      </div>
                    </div>

                  </div>

                  <!-- Tab Navigation for Details - Back and Publish -->
                  <div class="row q-gutter-md q-mt-lg justify-between">
                    <q-btn
                      label="Back"
                      icon="arrow_back"
                      color="grey"
                      flat
                      @click="goToPreviousTab"
                      class="col-auto"
                    />
                    <q-btn
                      label="Publish"
                      icon="publish"
                      color="primary"
                      type="submit"
                      class="col-auto"
                    />
                  </div>
                </q-tab-panel>

              </q-tab-panels>

            </q-form>
          </q-card-section>
        </q-card>
      </div>
    </div>

    <!-- Fixed Footer with Tab Navigation - Updated order -->
    <q-footer elevated class="bg-white text-dark edit-footer">
      <q-tabs
        v-model="currentTab"
        dense
        class="text-grey full-width"
        active-color="primary"
        indicator-color="primary"
        align="justify"
        narrow-indicator
      >
        <q-tab name="basics" icon="event" />
        <q-tab name="content" icon="article"  />
        <q-tab name="media" icon="perm_media" />
        <q-tab name="details" icon="info"  />
      </q-tabs>
    </q-footer>
  </q-page>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useQuasar } from 'quasar'
import { tagOptions, personOptions, defaultFormData, getMainCategories, getSubcategories } from '../utils/editFormOptions.js'

export default {
  name: 'EditPage',
  setup() {
    const $q = useQuasar()
    const router = useRouter()
    const route = useRoute()

    // Tab navigation state
    const currentTab = ref('basics')
    const tabOrder = ['basics', 'content', 'media', 'details']

    // Get current date and time
    const getCurrentDate = () => {
      const now = new Date()
      return now.toISOString().split('T')[0] // Format: YYYY-MM-DD
    }

    const getCurrentTime = () => {
      const now = new Date()
      return now.toTimeString().slice(0, 5) // Format: HH:MM
    }

    // Form data with current date/time defaults
    const form = reactive({
      ...defaultFormData,
      date: getCurrentDate(),
      time: getCurrentTime()
    })

    // Category selection state
    const selectedMainCategory = ref('')
    const availableSubcategories = ref([])

    // Person selection state
    const selectedPerson = ref(null)
    const hoveredPersonIndex = ref(null)

    // Category and tag hover states
    const hoveredCategoryIndex = ref(null)
    const hoveredTagIndex = ref(null)

    // Media file hover states
    const hoveredAudioIndex = ref(null)
    const hoveredVideoIndex = ref(null)
    const hoveredAdditionalImageIndex = ref(null)
    const hoveredAdditionalUrlIndex = ref(null)
    const hoveredAudioFileIndex = ref(null)
    const hoveredVideoFileIndex = ref(null)

    // Audio recording state
    const isRecording = ref(false)
    const recordingTime = ref(0)
    const recordingProgress = ref(0)
    const mediaRecorder = ref(null)
    const recordingInterval = ref(null)

    // Location state
    const loadingLocation = ref(false)
    const locationStatus = ref(null)
    const currentCoordinates = ref(null)

    // Options for selects - imported from external file
    const tagOptionsRef = ref([...tagOptions])
    const personOptionsRef = ref([...personOptions])
    const mainCategoryOptions = ref(getMainCategories())

    // Tab navigation methods
    const goToNextTab = () => {
      const currentIndex = tabOrder.indexOf(currentTab.value)
      if (currentIndex < tabOrder.length - 1) {
        currentTab.value = tabOrder[currentIndex + 1]
      }
    }

    const goToPreviousTab = () => {
      const currentIndex = tabOrder.indexOf(currentTab.value)
      if (currentIndex > 0) {
        currentTab.value = tabOrder[currentIndex - 1]
      }
    }

    const goToPersonSelector = () => {
      // Navigate to person selector with current selection
      router.push({
        name: 'person-selector',
        query: {
          currentSelection: JSON.stringify(form.relatedPersons),
          returnTo: 'edit'
        }
      })
    }

    const goToCategorySelector = () => {
      // Navigate to category selector with current selection
      router.push({
        name: 'category-selector',
        query: {
          currentSelection: JSON.stringify(form.categories || []),
          returnTo: 'edit'
        }
      })
    }

    const goToTagSelector = () => {
      // Navigate to tag selector with current selection
      router.push({
        name: 'tag-selector',
        query: {
          currentSelection: JSON.stringify(form.tags || []),
          returnTo: 'edit'
        }
      })
    }

    // Methods
    const loadEntry = () => {
      // TODO: Load entry data based on route params
      const entryId = route.params.id
      if (entryId) {
        // Load existing entry data
        // This would typically come from an API call
        console.log('Loading entry:', entryId)
        // Note: When loading existing entry, you might want to override the default date/time
      }
    }

    const onSave = () => {
      // TODO: Implement publish functionality
      $q.notify({
        type: 'positive',
        message: 'Entry published successfully!',
        position: 'top'
      })
      router.push('/wave')
    }

    const onCancel = () => {
      router.go(-1)
    }

    // Mobile image selection methods
    const openCamera = () => {
      const cameraInput = document.getElementById('cameraInput')
      if (cameraInput) {
        cameraInput.click()
      }
    }

    const openGallery = () => {
      const galleryInput = document.getElementById('galleryInput')
      if (galleryInput) {
        galleryInput.click()
      }
    }

    const handleCameraInput = (event) => {
      const files = event.target.files
      if (files && files.length > 0) {
        form.keyImage = files[0]
      }
    }

    const handleGalleryInput = (event) => {
      const files = event.target.files
      if (files && files.length > 0) {
        form.keyImage = files[0]
      }
    }

    // Additional Images Methods
    const openAdditionalCamera = () => {
      const input = document.getElementById('additionalCameraInput')
      if (input) input.click()
    }

    const openAdditionalGallery = () => {
      const input = document.getElementById('additionalGalleryInput')
      if (input) input.click()
    }

    const handleAdditionalCameraInput = (event) => {
      const files = event.target.files
      if (files && files.length > 0) {
        const newImages = Array.from(files)
        if (form.additionalImages) {
          form.additionalImages = [...form.additionalImages, ...newImages]
        } else {
          form.additionalImages = newImages
        }
      }
    }

    const handleAdditionalGalleryInput = (event) => {
      const files = event.target.files
      if (files && files.length > 0) {
        const newImages = Array.from(files)
        if (form.additionalImages) {
          form.additionalImages = [...form.additionalImages, ...newImages]
        } else {
          form.additionalImages = newImages
        }
      }
    }

    // Video Methods
    const openVideoCamera = () => {
      const input = document.getElementById('videoCameraInput')
      if (input) input.click()
    }

    const openVideoGallery = () => {
      const input = document.getElementById('videoGalleryInput')
      if (input) input.click()
    }

    const handleVideoCameraInput = (event) => {
      const files = event.target.files
      if (files && files.length > 0) {
        const newVideos = Array.from(files)
        if (form.videoFiles) {
          form.videoFiles = [...form.videoFiles, ...newVideos]
        } else {
          form.videoFiles = newVideos
        }
      }
    }

    const handleVideoGalleryInput = (event) => {
      const files = event.target.files
      if (files && files.length > 0) {
        const newVideos = Array.from(files)
        if (form.videoFiles) {
          form.videoFiles = [...form.videoFiles, ...newVideos]
        } else {
          form.videoFiles = newVideos
        }
      }
    }

    // Audio Methods
    const openAudioFiles = () => {
      const input = document.getElementById('audioFilesInput')
      if (input) input.click()
    }

    const handleAudioFilesInput = (event) => {
      const files = event.target.files
      if (files && files.length > 0) {
        const newAudio = Array.from(files)
        if (form.audioFiles) {
          form.audioFiles = [...form.audioFiles, ...newAudio]
        } else {
          form.audioFiles = newAudio
        }
      }
    }

    const toggleAudioRecording = async () => {
      if (isRecording.value) {
        stopAudioRecording()
      } else {
        startAudioRecording()
      }
    }

    const startAudioRecording = async () => {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
        mediaRecorder.value = new MediaRecorder(stream)
        
        const chunks = []
        mediaRecorder.value.ondataavailable = (event) => {
          chunks.push(event.data)
        }
        
        mediaRecorder.value.onstop = () => {
          const blob = new Blob(chunks, { type: 'audio/wav' })
          const file = new File([blob], `recording-${Date.now()}.wav`, { type: 'audio/wav' })
          
          if (form.audioFiles) {
            form.audioFiles = [...form.audioFiles, file]
          } else {
            form.audioFiles = [file]
          }
          
          // Cleanup
          stream.getTracks().forEach(track => track.stop())
        }
        
        isRecording.value = true
        recordingTime.value = 0
        recordingProgress.value = 0
        
        mediaRecorder.value.start()
        
        // Update recording time
        recordingInterval.value = setInterval(() => {
          recordingTime.value += 1
          recordingProgress.value = (recordingTime.value / 60) * 100 // Max 60 seconds
          
          if (recordingTime.value >= 60) {
            stopAudioRecording()
          }
        }, 1000)
        
      } catch (error) {
        console.error('Error accessing microphone:', error)
        $q.notify({
          type: 'negative',
          message: 'Could not access microphone. Please check permissions.'
        })
      }
    }

    const stopAudioRecording = () => {
      if (mediaRecorder.value && isRecording.value) {
        mediaRecorder.value.stop()
        isRecording.value = false
        
        if (recordingInterval.value) {
          clearInterval(recordingInterval.value)
          recordingInterval.value = null
        }
      }
    }

    // Location Methods
    const getCurrentLocation = () => {
      if (!navigator.geolocation) {
        locationStatus.value = {
          type: 'error',
          message: 'Geolocation is not supported by this browser.'
        }
        return
      }

      loadingLocation.value = true
      locationStatus.value = null

      navigator.geolocation.getCurrentPosition(
        async (position) => {
          const { latitude, longitude } = position.coords
          currentCoordinates.value = { lat: latitude, lng: longitude }
          
          try {
            // Try to get human-readable address using reverse geocoding
            const locationName = await reverseGeocode(latitude, longitude)
            form.location = locationName
            
            locationStatus.value = {
              type: 'success',
              message: 'Location updated successfully!'
            }
          } catch {
            // Fallback to coordinates if reverse geocoding fails
            form.location = `${latitude.toFixed(6)}, ${longitude.toFixed(6)}`
            locationStatus.value = {
              type: 'success',
              message: 'Coordinates added (address lookup failed)'
            }
          }
          
          loadingLocation.value = false
          
          // Clear status after 3 seconds
          setTimeout(() => {
            locationStatus.value = null
          }, 3000)
        },
        (error) => {
          loadingLocation.value = false
          let message = 'Failed to get location: '
          
          switch (error.code) {
            case error.PERMISSION_DENIED:
              message += 'Location access denied by user.'
              break
            case error.POSITION_UNAVAILABLE:
              message += 'Location information unavailable.'
              break
            case error.TIMEOUT:
              message += 'Location request timed out.'
              break
            default:
              message += 'Unknown error occurred.'
              break
          }
          
          locationStatus.value = {
            type: 'error',
            message: message
          }
          
          // Clear status after 5 seconds
          setTimeout(() => {
            locationStatus.value = null
          }, 5000)
        },
        {
          enableHighAccuracy: true,
          timeout: 10000,
          maximumAge: 60000
        }
      )
    }

    // Simple reverse geocoding using a free service
    const reverseGeocode = async (lat, lng) => {
      try {
        // Using OpenStreetMap Nominatim service (free, no API key required)
        const response = await fetch(
          `https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}&zoom=16&addressdetails=1`,
          {
            headers: {
              'User-Agent': 'ThatsMe-App/1.0'
            }
          }
        )
        
        if (!response.ok) {
          throw new Error('Geocoding service unavailable')
        }
        
        const data = await response.json()
        
        if (data.display_name) {
          // Extract useful parts of the address
          const address = data.address || {}
          const parts = []
          
          if (address.house_number && address.road) {
            parts.push(`${address.house_number} ${address.road}`)
          } else if (address.road) {
            parts.push(address.road)
          }
          
          if (address.city || address.town || address.village) {
            parts.push(address.city || address.town || address.village)
          }
          
          if (address.country) {
            parts.push(address.country)
          }
          
          return parts.length > 0 ? parts.join(', ') : data.display_name
        }
        
        throw new Error('No address found')
      } catch (error) {
        console.error('Reverse geocoding failed:', error)
        throw error
      }
    }

    const onImageRejected = (rejectedEntries) => {
      $q.notify({
        type: 'negative',
        message: `${rejectedEntries.length} file(s) rejected. Max file size is 5MB.`
      })
    }

    const onAudioRejected = (rejectedEntries) => {
      $q.notify({
        type: 'negative',
        message: `${rejectedEntries.length} audio file(s) rejected. Max file size is 10MB.`
      })
    }

    const onVideoRejected = (rejectedEntries) => {
      $q.notify({
        type: 'negative',
        message: `${rejectedEntries.length} video file(s) rejected. Max file size is 50MB.`
      })
    }

    const removeAdditionalImage = (index) => {
      form.additionalImageUrls.splice(index, 1)
    }

    const removeAdditionalImageFile = (index) => {
      if (form.additionalImages) {
        form.additionalImages.splice(index, 1)
      }
    }

    const removeAudioFile = (index) => {
      if (form.audioFiles) {
        form.audioFiles.splice(index, 1)
      }
    }

    const removeVideoFile = (index) => {
      if (form.videoFiles) {
        form.videoFiles.splice(index, 1)
      }
    }

    // Key image handling functions
    const getKeyImagePreview = () => {
      if (form.keyImage) {
        return URL.createObjectURL(form.keyImage)
      }
      return form.keyImageUrl
    }

    const onKeyImageSelected = (file) => {
      // Clear any existing URL when a new file is selected
      if (file) {
        form.keyImageUrl = ''
      }
    }

    const removeKeyImage = () => {
      form.keyImage = null
      form.keyImageUrl = ''
    }

    const removeAudioRecording = (index) => {
      form.audioRecordings.splice(index, 1)
    }

    const removeVideoRecording = (index) => {
      form.videoRecordings.splice(index, 1)
    }

    const formatFileSize = (bytes) => {
      if (bytes === 0) return '0 Bytes'
      const k = 1024
      const sizes = ['Bytes', 'KB', 'MB', 'GB']
      const i = Math.floor(Math.log(bytes) / Math.log(k))
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
    }

    const filterTags = (val, update) => {
      update(() => {
        if (val === '') {
          tagOptionsRef.value = [...tagOptions]
        } else {
          const needle = val.toLowerCase()
          tagOptionsRef.value = tagOptions.filter(v => v.toLowerCase().indexOf(needle) > -1)
        }
      })
    }

    const filterPersons = (val, update) => {
      update(() => {
        if (val === '') {
          personOptionsRef.value = [...personOptions]
        } else {
          const needle = val.toLowerCase()
          personOptionsRef.value = personOptions.filter(v => v.toLowerCase().indexOf(needle) > -1)
        }
      })
    }

    // Person management functions
    const getInitials = (name) => {
      return name
        .split(' ')
        .map(word => word.charAt(0).toUpperCase())
        .join('')
        .substring(0, 2)
    }

    const addPerson = (person) => {
      if (person && !form.relatedPersons.includes(person)) {
        form.relatedPersons.push(person)
      }
      selectedPerson.value = null // Clear selection after adding
    }

    const removePerson = (index) => {
      form.relatedPersons.splice(index, 1)
    }

    const removeCategory = (index) => {
      if (form.categories) {
        form.categories.splice(index, 1)
      }
    }

    const removeTag = (index) => {
      if (form.tags) {
        form.tags.splice(index, 1)
      }
    }

    const onMainCategoryChange = (newMainCategory) => {
      selectedMainCategory.value = newMainCategory
      form.category = '' // Reset subcategory when main category changes
      
      if (newMainCategory) {
        availableSubcategories.value = getSubcategories(newMainCategory)
        
        // If main category has no subcategories, use the main category value
        if (availableSubcategories.value.length === 0) {
          form.category = newMainCategory
        }
      } else {
        availableSubcategories.value = []
      }
    }

    // Close navigation drawer when page loads
    onMounted(() => {
      // Close the drawer by setting it to false
      const drawerElement = document.querySelector('.q-drawer')
      if (drawerElement) {
        // Trigger close event
        const closeEvent = new CustomEvent('drawer-close')
        window.dispatchEvent(closeEvent)
      }
      
      // Handle selected persons from PersonSelector
      if (route.query.selectedPersons) {
        try {
          const selectedPersons = JSON.parse(route.query.selectedPersons)
          form.relatedPersons = selectedPersons
          
          // Navigate to details tab
          currentTab.value = 'details'
          
          // Clear the query parameter
          router.replace({
            name: route.name,
            query: {
              ...route.query,
              selectedPersons: undefined
            }
          })
        } catch (error) {
          console.error('Error parsing selected persons:', error)
        }
      }

      // Handle selected categories from CategorySelector
      if (route.query.selectedCategories) {
        try {
          const selectedCategories = JSON.parse(route.query.selectedCategories)
          form.categories = selectedCategories
          
          // Navigate to details tab
          currentTab.value = 'details'
          
          // Clear the query parameter
          router.replace({
            name: route.name,
            query: {
              ...route.query,
              selectedCategories: undefined
            }
          })
        } catch (error) {
          console.error('Error parsing selected categories:', error)
        }
      }

      // Handle selected tags from TagSelector
      if (route.query.selectedTags) {
        try {
          const selectedTags = JSON.parse(route.query.selectedTags)
          form.tags = selectedTags
          
          // Navigate to details tab
          currentTab.value = 'details'
          
          // Clear the query parameter
          router.replace({
            name: route.name,
            query: {
              ...route.query,
              selectedTags: undefined
            }
          })
        } catch (error) {
          console.error('Error parsing selected tags:', error)
        }
      }
      
      loadEntry()
    })

    return {
      form,
      currentTab,
      selectedMainCategory,
      availableSubcategories,
      selectedPerson,
      hoveredPersonIndex,
      hoveredCategoryIndex,
      hoveredTagIndex,
      hoveredAudioIndex,
      hoveredVideoIndex,
      hoveredAdditionalImageIndex,
      hoveredAdditionalUrlIndex,
      hoveredAudioFileIndex,
      hoveredVideoFileIndex,
      // Audio recording state
      isRecording,
      recordingTime,
      recordingProgress,
      // Location state
      loadingLocation,
      locationStatus,
      currentCoordinates,
      tagOptions: tagOptionsRef,
      personOptions: personOptionsRef,
      mainCategoryOptions,
      goToNextTab,
      goToPreviousTab,
      goToPersonSelector,
      goToCategorySelector,
      goToTagSelector,
      onSave,
      onCancel,
      // Location methods
      getCurrentLocation,
      // Key image methods
      openCamera,
      openGallery,
      handleCameraInput,
      handleGalleryInput,
      // Additional images methods
      openAdditionalCamera,
      openAdditionalGallery,
      handleAdditionalCameraInput,
      handleAdditionalGalleryInput,
      // Video methods
      openVideoCamera,
      openVideoGallery,
      handleVideoCameraInput,
      handleVideoGalleryInput,
      // Audio methods
      openAudioFiles,
      handleAudioFilesInput,
      toggleAudioRecording,
      // File handling methods
      onImageRejected,
      onAudioRejected,
      onVideoRejected,
      removeAdditionalImage,
      removeAdditionalImageFile,
      removeAudioFile,
      removeVideoFile,
      getKeyImagePreview,
      onKeyImageSelected,
      removeKeyImage,
      removeAudioRecording,
      removeVideoRecording,
      formatFileSize,
      filterTags,
      filterPersons,
      onMainCategoryChange,
      getInitials,
      addPerson,
      removePerson,
      removeCategory,
      removeTag
    }
  }
}
</script>

<style scoped>
/* Fix for first item in row with q-gutter having unwanted left margin */
.row.q-gutter-md > .col:first-child {
  margin-left: 0 !important;
}

/* Add this more specific rule if the above doesn't work */
.row.q-gutter-md.q-mb-md > .col:first-child {
  margin-left: 0 !important;
}

/* Add padding bottom to prevent content from being hidden behind footer */
.edit-page-container {
  padding: 16px;
  padding-bottom: 80px; /* Adjust based on footer height */
  min-height: 100vh;
}

/* Full height layout */
.edit-page-container.full-height {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.edit-page-container .row.full-height {
  flex: 1;
  margin: 0;
}

.edit-page-container .col-12.full-height {
  display: flex;
  flex-direction: column;
}

.full-height-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-height: calc(100vh - 112px); /* Account for page padding and footer */
  background-color: rgba(255, 255, 255, 0.8);
}

.full-height-card .q-card-section.flex-1 {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.full-height-form {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.full-height-form .q-tab-panels {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: none;
}

.full-height-form .q-tab-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.scroll {
  overflow-y: auto;
}

/* Style the edit footer */
.edit-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

/* Ensure tabs are properly sized in footer */
.edit-footer .q-tabs {
  min-height: 60px;
}

.edit-footer .q-tab {
  padding: 8px 16px;
}

/* Custom tab icon styling */
.tab-icon {
  filter: opacity(0.6);
  transition: filter 0.2s ease;
}

.q-tab--active .tab-icon {
  filter: opacity(1);
}

/* Ensure proper spacing for custom tab content */
.q-tab .column {
  gap: 2px;
}

/* Responsive adjustments for mobile */
@media (max-width: 600px) {
  .tab-icon {
    width: 20px !important;
    height: 20px !important;
    margin-bottom: 2px !important;
  }
  
  .q-tab .column span {
    font-size: 11px;
  }
}

.q-card {
  max-width: 100%;
}

.q-slider {
  margin: 16px 0;
}

/* Vue-select custom styling to match Quasar design */
:deep(.vue-select-custom) {
  font-family: inherit;
}

:deep(.vue-select-custom .vs__dropdown-toggle) {
  border: 1px solid rgba(0, 0, 0, 0.24);
  border-radius: 4px;
  background: #f5f5f5;
  padding: 8px 12px;
  min-height: 56px;
  display: flex;
  align-items: center;
}

:deep(.vue-select-custom .vs__selected-options) {
  flex-wrap: nowrap;
  padding: 0;
}

:deep(.vue-select-custom .vs__selected) {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(0, 0, 0, 0.87);
  font-size: 16px;
}

:deep(.vue-select-custom .vs__search) {
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.87);
  border: none;
  background: transparent;
}

:deep(.vue-select-custom .vs__search::placeholder) {
  color: rgba(0, 0, 0, 0.6);
}

:deep(.vue-select-custom .vs__actions) {
  padding: 0 8px 0 0;
}

:deep(.vue-select-custom .vs__clear) {
  margin-right: 8px;
}

:deep(.vue-select-custom .vs__open-indicator) {
  fill: rgba(0, 0, 0, 0.54);
}

:deep(.vue-select-custom .vs__dropdown-menu) {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  background: white;
}

:deep(.vue-select-custom .vs__dropdown-option) {
  padding: 12px 16px;
  color: rgba(0, 0, 0, 0.87);
  font-size: 16px;
}

:deep(.vue-select-custom .vs__dropdown-option--highlight) {
  background: #1976d2;
  color: white;
}

:deep(.vue-select-custom.vs--open .vs__dropdown-toggle) {
  border-color: #1976d2;
  border-bottom-color: transparent;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

:deep(.vue-select-custom .vs__dropdown-menu) {
  border-top-color: transparent;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: -1px;
}

/* Person circles styling */
.person-circles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.person-circle {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1976d2, #42a5f5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.person-circle:hover {
  transform: scale(1.05);
}

.person-initials {
  color: white;
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  user-select: none;
}

.person-delete {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f44336;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.person-delete:hover {
  background: #d32f2f;
  transform: scale(1.1);
}

.person-name-tooltip {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.person-circle:hover .person-name-tooltip {
  opacity: 1;
}

.selected-persons-display {
  margin-top: 8px;
  padding: 12px;
  background: rgba(25, 118, 210, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(25, 118, 210, 0.2);
}

/* Category and Tag chips styling */
.selected-categories-display,
.selected-tags-display {
  margin-top: 8px;
}

.category-chips,
.tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.category-chip,
.tag-chip {
  font-size: 14px;
  min-height: 32px;
  transition: all 0.2s ease;
}

.category-chip:hover,
.tag-chip:hover {
  transform: translateY(-1px);
}

/* Media thumbnails styling */
.media-thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.media-thumbnail {
  position: relative;
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  padding: 12px;
  min-width: 200px;
  max-width: 300px;
  cursor: default;
  transition: all 0.2s ease;
}

.media-thumbnail:hover {
  transform: translateY(-1px);
}

.audio-thumbnail .media-icon {
  color: #1976d2;
  margin-right: 12px;
}

.video-thumbnail .media-icon {
  color: #7b1fa2;
  margin-right: 12px;
}

.media-info {
  flex: 1;
  min-width: 0;
}

.media-name {
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.87);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.media-size {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
}

.media-delete {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  background: #f44336;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.media-delete:hover {
  background: #d32f2f;
  transform: scale(1.1);
}

/* Additional Images Grid */
.additional-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.additional-image-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f5f5;
  transition: all 0.2s ease;
}

.additional-image-item:hover {
  transform: translateY(-2px);
}

.additional-image-thumbnail {
  width: 100%;
  height: 120px;
  border-radius: 8px 8px 0 0;
}

.additional-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 20px;
  background: rgba(244, 67, 54, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.additional-image-overlay:hover {
  background: rgba(244, 67, 54, 0.9);
}

.additional-image-name {
  padding: 8px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: white;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

/* Audio and Video File Lists */
.audio-files-list,
.video-files-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.audio-file-item,
.video-file-item {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  padding: 12px;
  transition: all 0.2s ease;
}

.audio-file-item:hover,
.video-file-item:hover {
  transform: translateY(-1px);
}

.audio-file-info,
.video-file-info {
  flex: 1;
  min-width: 0;
  margin-left: 8px;
}

.audio-file-name,
.video-file-name {
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.87);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.audio-file-size,
.video-file-size {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
}
</style>