<template>
  <v-container>
    <v-card class="recipe-card pa-10 mx-auto mt-10" max-width="1200" elevation="1">
      
      <header class="text-center mb-10">
        <v-img 
          src="/images/seasoned-logo.png" 
          width="180" 
          class="mx-auto"
          contain
        ></v-img>
        <p class="collection-title">Your Recipe Collection</p>
      </header>

      <v-row justify="center" class="mb-6">
        <v-col cols="12" md="8" lg="6">
          <v-text-field
            v-model="searchQuery"
            placeholder="Search for 'comfort food'"
            variant="outlined"
            class="search-bar"
            hide-details
            clearable
            @click:clear="fetchRecipes"
            :loading="isSearching"
          >
            <template v-slot:prepend-inner>
              <v-icon :color="isSearching ? '#556b2f' : '#2e1e0a'">
                {{ isSearching ? 'mdi-auto-fix' : 'mdi-magnify' }}
              </v-icon>
            </template>
          </v-text-field>
        </v-col>
      </v-row>

      <v-divider class="mb-10 separator"></v-divider>

      <v-row v-if="loading" justify="center" class="py-16">
        <v-col cols="12" class="d-flex flex-column align-center">
          <v-progress-circular indeterminate color="#556b2f" size="64" width="3"></v-progress-circular>
          <p class="brand-subtitle mt-4">Opening Collection...</p>
        </v-col>
      </v-row>

      <v-row v-else-if="recipes?.length">
        <v-col v-for="recipe in (searchQuery?.trim() ? recipes : sortedRecipes)" :key="recipe.id" cols="12" sm="6" md="4">
          <v-card class="gallery-item-card pa-4">
            <v-sheet
              height="200"
              color="#f8f5f0"
              class="rounded-sm mb-4 d-flex align-center justify-center"
              style="border: 1px solid #e8e2d6;"
            >
              <v-img
                v-if="recipe.imageUrl"
                :src="recipe.imageUrl.startsWith('http') ? recipe.imageUrl : `${config.public.apiBase}${recipe.imageUrl}`"
                cover
                class="recipe-thumbnail"
              ></v-img>
              <v-icon 
                v-else
                icon="mdi-camera-outline" 
                size="80" 
                color="#d1c7b7"
              ></v-icon>
            </v-sheet>
            <h3 class="gallery-item-title text-center">{{ recipe.title }}</h3>
            <p class="gallery-item-date text-center">
              Added {{ new Date(recipe.createdAt).toLocaleDateString('en-US', { month: 'long', year: 'numeric' }) }}
            </p>
            
            <v-card-actions class="justify-center">
              <v-btn 
                variant="text" 
                color="#556b2f"
                class="save-btn"
                @click="openRecipe(recipe)"
              >
                Open
              </v-btn>
              <v-btn 
                variant="text" 
                color="#8c4a32" 
                class="cancel-btn"
                @click="editRecipe(recipe)"
              >
                Edit
              </v-btn>
              <v-btn 
                variant="text" 
                color="#8c4a32" 
                icon="mdi-trash-can-outline"
                @click="deleteRecipe(recipe.id)"
              ></v-btn>
            </v-card-actions>
          </v-card>
        </v-col>
      </v-row>
      
      <v-row v-else justify="center" class=" text-center">
        <v-col cols="12">
          <p class="brand-subtitle mb-10">Your collection is empty.</p>
          <v-btn to="/" variant="text" class="column-btn">Return Home</v-btn>
        </v-col>
      </v-row>

    </v-card>

    <v-dialog v-model="showDetails" max-width="950" persistent>
      <v-card v-if="selectedRecipe" class="recipe-card pa-8">
        <v-btn
          v-if="!isEditing"
          icon="mdi-close"
          variant="text"
          position="absolute"
          style="top: 10px; right: 10px; z-index: 10;"
          color="#5d4037"
          @click="closeDetails"
        ></v-btn>

        <v-row 
          align="center" 
          class="mb-9 px-md-5" 
          :justify="!(selectedRecipe.imageUrl || isEditing) ? 'center' : 'start'"
        >
          <v-col 
            v-if="selectedRecipe.imageUrl || isEditing"
            cols="12" 
            md="3" 
            class="d-flex justify-end pe-6"
            style="flex: 0 0 auto;" 
          >
            <v-hover v-slot="{ isHovering, props }">
              <v-card
                v-bind="props"
                width="150"
                height="150"
                :class="[
                  'rounded-lg d-flex align-center justify-center position-relative overflow-hidden elevation-1',
                  { 'image-drop-zone': isEditing, 'cursor-pointer': isEditing }
                ]"
                :style="{ 
                  pointerEvents: isEditing ? 'auto' : 'none',
                  border: !selectedRecipe.imageUrl && isEditing ? '2px dashed #d1c7b7' : 'none' 
                }"
                @click="isEditing ? $refs.fileInput.click() : null"
              >
                <v-img
                  v-if="selectedRecipe.imageUrl"
                  :src="selectedRecipe.imageUrl.startsWith('http') ? selectedRecipe.imageUrl : `${config.public.apiBase}${selectedRecipe.imageUrl}`"
                  cover
                  class="rounded-lg fill-height"
                ></v-img>

                <div 
                  v-if="isEditing && (isHovering || !selectedRecipe.imageUrl)" 
                  class="d-flex flex-column align-center justify-center position-absolute"
                  style="background: rgba(226,215,186,0.4); inset: 0;"
                >
                  <v-icon icon="mdi-camera-plus" color="#556b2f" size="large"></v-icon>
                  <span class="brand-subtitle" style="font-size: 0.7rem; color: #556b2f;">Update Photo</span>
                </div>
              </v-card>
            </v-hover>
            <input type="file" ref="fileInput" accept="image/*" style="display: none" @change="handleImageUpload" />
          </v-col>

          <v-col 
            cols="12" 
            :md="selectedRecipe.imageUrl || isEditing ? 8 : 12"
            :class="!(selectedRecipe.imageUrl || isEditing) ? 'text-center' : 'ps-0'"
          >
            <v-text-field
              v-if="isEditing"
              v-model="selectedRecipe.title"
              label="Recipe Title"
              variant="underlined"
              class="recipe-title-edit"
              hide-details
            ></v-text-field>
            <h2 
              v-else 
              class="recipe-title" 
              style="font-size: 2.2rem; line-height: 1.2; margin-bottom: 0;"
            >
              {{ selectedRecipe.title }}
            </h2>
          </v-col>
        </v-row>

        <v-divider class="mb-0 separator"></v-divider>

        <v-row class="mt-10" density="compact">
          <v-col cols="12" md="5" class="pe-md-10">
            <h3 class="section-header justify-center mb-6">
              <v-icon icon="mdi-spoon-sugar" class="mr-2"></v-icon>
              Ingredients
            </h3>
            
            <v-textarea
              v-if="isEditing"
              v-model="selectedRecipe.ingredients"
              variant="outlined"
              auto-grow
              density="comfortable"
              class="auth-input recipe-textarea"
              bg-color="transparent"
              :persistent-placeholder="true"
            ></v-textarea>
            
            <div v-else class="ingredients-container">
              <div 
                v-for="(ing, index) in (Array.isArray(selectedRecipe.ingredients) ? selectedRecipe.ingredients : selectedRecipe.ingredients?.split('\n') || [])" 
                :key="index"
                class="ingredient-item d-flex align-start mb-4"
              >
                {{ ing }}
              </div>
            </div>
          </v-col>

          <v-col cols="12" md="7" class="ps-md-1">
            <h3 class="section-header justify-center mb-6">
              <v-icon icon="mdi-pot-steam-outline" class="mr-2" size="small"></v-icon>
              Instructions
            </h3>

            <v-textarea
              v-if="isEditing"
              v-model="selectedRecipe.instructions"
              variant="outlined"
              auto-grow
              rows="10"
              density="comfortable"
              class="auth-input recipe-textarea"
              bg-color="transparent"
              :persistent-placeholder="true"
            ></v-textarea>

            <div v-else
              v-for="(step, index) in (Array.isArray(selectedRecipe.instructions) ? selectedRecipe.instructions : selectedRecipe.instructions?.split('\n') || [])"
              :key="index"
              class="instruction-step mb-8 d-flex align-start"
            >
              <span class="step-number mr-4">{{ index + 1 }}.</span>
              <p class="step-text flex-grow-1 mb-0">{{ step }}</p>
            </div>
          </v-col>
        </v-row>

        <v-card-actions v-if="isEditing" class="justify-center mt-8">
          <v-btn variant="text" @click="saveChanges" class="save-btn px-8">Save Changes</v-btn>
          <v-btn variant="text" @click="isEditing = false" class="cancel-btn px-8">Cancel</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    
    <v-dialog v-model="deleteConfirmVisible" max-width="400" persistent>
      <v-card 
        class="recipe-card elevation-5" 
        style="height: auto !important; min-height: unset !important; display: block !important;"
      >
        <div class="pa-8 text-center">
          <v-icon 
            icon="mdi-alert-rhombus-outline" 
            color="#8c4a32" 
            size="48" 
            class="mb-4"
          ></v-icon>
          
          <h3 class="recipe-title mb-10" style="font-size: 1.5rem; line-height: 1;">
            Remove from Archive?
          </h3>
          
          <div class="d-flex justify-center align-center mt-6">
            <v-btn 
              variant="text" 
              class="cancel-btn px-4 mr-4" 
              @click="deleteConfirmVisible = false"
            >
              Keep it
            </v-btn>
            
            <v-btn 
              color="#8c4a32" 
              class="save-recipe-btn px-6 text-white" 
              elevation="1"
              :loading="isDeleting"
              @click="confirmDelete"
            >
              Yes, Delete
            </v-btn>
          </div>
        </div>
      </v-card>
    </v-dialog>
  </v-container>
</template>


<script setup>
import { ref, onMounted, computed, watch } from 'vue'
import '@/assets/css/gallery.css'
import '@/assets/css/app-theme.css'

const recipes = ref([])
const loading = ref(true)
const showDetails = ref(false)
const selectedRecipe = ref(null)
const isEditing = ref(false)
const originalRecipe = ref(null)
const config = useRuntimeConfig()
const searchQuery = ref('')
const isSearching = ref(false)
let debounceTimeout = null
const deleteConfirmVisible = ref(false)
const recipeToDelete = ref(null)
const isDeleting = ref(false)

onMounted(async () => {
  await fetchRecipes()
})

const fetchRecipes = async () => {
  try {
    loading.value = true
    const data = await $fetch(`${config.public.apiBase}api/recipe/my-collection`, {
      credentials: 'include' 
    })
    recipes.value = data
    const isLoggedIn = useState('isLoggedIn')
    isLoggedIn.value = true
  } catch (err) {
    console.error("Failed to load collection:", err)
    if (err.status === 401) {
      const isLoggedIn = useState('isLoggedIn')
      isLoggedIn.value = false
      navigateTo('/login')
    }
  } finally {
    loading.value = false
  }
}
 
const handleImageUpload = (event) => {
  const file = event.target.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = (e) => {
    selectedRecipe.value.imageUrl = e.target.result;
  };
  reader.readAsDataURL(file);
 
};

const openRecipe = (recipe) => {
  selectedRecipe.value = { ...recipe }
  isEditing.value = false
  showDetails.value = true
}

const editRecipe = (recipe) => {
  const editableRecipe = JSON.parse(JSON.stringify(recipe));
  
  if (Array.isArray(editableRecipe.ingredients)) {
    editableRecipe.ingredients = editableRecipe.ingredients.join('\n');
  }
  if (Array.isArray(editableRecipe.instructions)) {
    editableRecipe.instructions = editableRecipe.instructions.join('\n');
  }

  originalRecipe.value = JSON.parse(JSON.stringify(recipe));
  selectedRecipe.value = editableRecipe;
  isEditing.value = true;
  showDetails.value = true;
}

const closeDetails = () => {
  if (isEditing.value && originalRecipe.value) {
    const index = recipes.value.findIndex(r => r.id === originalRecipe.value.id)
    if (index !== -1) {
      recipes.value[index] = originalRecipe.value
    }
  }
  
  showDetails.value = false
  isEditing.value = false
  originalRecipe.value = null
}

const saveChanges = async () => {
 try {
    const { embedding, user, ...recipeData } = selectedRecipe.value;

    const payload = { 
      title: recipeData.title,
      imageUrl: recipeData.imageUrl,
      ingredients: typeof recipeData.ingredients === 'string' 
        ? recipeData.ingredients.split('\n').filter(i => i.trim()) 
        : recipeData.ingredients,
      instructions: typeof recipeData.instructions === 'string' 
        ? recipeData.instructions.split('\n').filter(i => i.trim()) 
        : recipeData.instructions
    };

    await $fetch(`${config.public.apiBase}api/recipe/update/${selectedRecipe.value.id}`, {
      method: 'PUT',
      body: payload,
      credentials: 'include'
    });

    const index = recipes.value.findIndex(r => r.id === selectedRecipe.value.id);
    if (index !== -1) {
      const updatedRecipe = { ...recipes.value[index], ...payload };
      recipes.value.splice(index, 1, updatedRecipe); 
    }

    closeDetails();
  } catch (e) {
    console.error("The kitchen ledger could not be updated:", e);
  }
}

const sortedRecipes = computed(() => {
  return [...recipes.value].sort((a, b) => {
    return new Date(b.createdAt) - new Date(a.createdAt)
  })
})

const performSearch = async () => {
  const currentQuery = searchQuery.value
  if (!searchQuery.value) {
    await fetchRecipes()
    return
  }

  try {
    isSearching.value = true
    const data = await $fetch(`${config.public.apiBase}api/recipe/search`, {
      query: { query: currentQuery }, 
      credentials: 'include'
    })
    if (searchQuery.value === currentQuery) {
      recipes.value = data
    }
  } catch (err) {
    console.error("Search failed:", err)
  } finally {
    isSearching.value = false
  }
}

watch(searchQuery, (newVal) => {
  clearTimeout(debounceTimeout)
  debounceTimeout = setTimeout(() => {
    performSearch()
  }, 600)
})

const deleteRecipe = (id) => {
  recipeToDelete.value = id
  deleteConfirmVisible.value = true
}

const confirmDelete = async () => {
  if (!recipeToDelete.value) return;

  try {
    isDeleting.value = true
    await $fetch(`${config.public.apiBase}api/recipe/${recipeToDelete.value}`, {
      method: 'DELETE',
      credentials: 'include'
    });

    recipes.value = recipes.value.filter(r => r.id !== recipeToDelete.value);
    
    deleteConfirmVisible.value = false;
    recipeToDelete.value = null;
  } catch (err) {
    console.error("The archive could not be cleared:", err);
  } finally {
    isDeleting.value = false
  }
}


</script>