<template>
  <div class="bg-neutral-light min-h-screen">
    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-semibold text-neutral-dark">{{ $t('linktree.title') }}</h1>
        <div class="flex space-x-3">
          <button 
            @click="copyProfileLink" 
            class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
          >
            {{ $t('linktree.shareProfile') }}
          </button>
          <router-link 
            :to="`/u/${username}`" 
            target="_blank"
            class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-primary bg-white hover:bg-neutral-light focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
          >
            {{ $t('linktree.view') }}
          </router-link>
        </div>
      </div>

      <div class="bg-white shadow rounded-lg p-6 mb-6">
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-lg font-medium text-neutral-dark">{{ $t('linktree.manage') }}</h2>
          <button 
            @click="openLinkModal()" 
            type="button"
            class="inline-flex items-center px-3 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
          >
            {{ $t('linktree.addLink') }}
          </button>
        </div>

        <div v-if="loading" class="flex justify-center py-8">
          <div class="spinner"></div>
        </div>

        <div v-else-if="links.length === 0" class="text-center py-8 text-neutral">
          {{ $t('linktree.noLinks') }}
        </div>

        <div v-else class="space-y-4" ref="linksContainer">
          <div 
            v-for="link in links" 
            :key="link.id" 
            :data-id="link.id"
            class="flex items-center p-4 bg-neutral-light rounded-lg"
          >
            <div class="handle cursor-move mr-3 text-neutral">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            </div>
            
            <div class="flex-1">
              <div class="font-medium text-neutral-dark">{{ link.title }}</div>
              <div class="text-sm text-neutral truncate">{{ link.url }}</div>
              <div class="text-xs text-primary mt-1">
                {{ $t(`linktree.categories.${link.category}`) }}
              </div>
            </div>
            
            <div class="flex space-x-2">
              <button 
                v-if="link.category === 'wishlist'"
                @click="openWishlistItemsModal(link)"
                class="text-secondary hover:text-secondary-dark"
              >
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                </svg>
              </button>
              <button 
                @click="openLinkModal(link)"
                class="text-primary hover:text-primary-dark"
              >
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                </svg>
              </button>
              <button 
                @click="confirmDeleteLink(link)"
                class="text-accent-2 hover:text-accent-2-dark"
              >
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                </svg>
              </button>
            </div>
          </div>
        </div>
        
        <p v-if="links.length > 1" class="text-sm text-neutral mt-4">
          {{ $t('linktree.dragAndDrop') }}
        </p>
      </div>
    </div>

    <!-- Link Modal -->
    <div v-if="showLinkModal" class="fixed inset-0 bg-neutral-dark bg-opacity-75 flex items-center justify-center p-4 z-50">
      <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
        <h3 class="text-lg font-medium text-neutral-dark mb-4">
          {{ editingLink ? $t('linktree.editLink') : $t('linktree.addLink') }}
        </h3>
        
        <form @submit.prevent="saveLink">
          <div class="mb-4">
            <label class="block text-sm font-medium text-neutral-dark mb-1">
              {{ $t('linktree.form.title') }}
            </label>
            <input 
              v-model="linkForm.title" 
              type="text" 
              class="form-input w-full rounded-md" 
              :placeholder="$t('linktree.form.titlePlaceholder')"
              required
            />
          </div>
          
          <div class="mb-4">
            <label class="block text-sm font-medium text-neutral-dark mb-1">
              {{ $t('linktree.form.url') }}
            </label>
            <input 
              v-model="linkForm.url" 
              type="url" 
              class="form-input w-full rounded-md" 
              :placeholder="$t('linktree.form.urlPlaceholder')"
              required
            />
          </div>
          
          <div class="mb-4">
            <label class="block text-sm font-medium text-neutral-dark mb-1">
              {{ $t('linktree.form.category') }}
            </label>
            <select 
              v-model="linkForm.category" 
              class="form-input w-full rounded-md"
              required
            >
              <option value="" disabled>{{ $t('linktree.form.selectCategory') }}</option>
              <option value="social">{{ $t('linktree.categories.social') }}</option>
              <option value="donation">{{ $t('linktree.categories.donation') }}</option>
              <option value="affiliate">{{ $t('linktree.categories.affiliate') }}</option>
              <option value="wishlist">{{ $t('linktree.categories.wishlist') }}</option>
            </select>
          </div>
          
          <div v-if="linkForm.category === 'affiliate'" class="mb-4">
            <label class="block text-sm font-medium text-neutral-dark mb-1">
              {{ $t('linktree.form.affiliateUrl') }}
            </label>
            <input 
              v-model="linkForm.affiliate_url" 
              type="url" 
              class="form-input w-full rounded-md" 
              :placeholder="$t('linktree.form.affiliateUrlPlaceholder')"
            />
          </div>
          
          <div class="flex justify-end space-x-3 mt-6">
            <button 
              type="button" 
              @click="closeLinkModal" 
              class="px-4 py-2 text-sm font-medium text-neutral-dark hover:text-neutral-darker"
            >
              {{ $t('linktree.form.cancel') }}
            </button>
            <button 
              type="submit" 
              class="px-4 py-2 bg-primary text-white text-sm font-medium rounded-md hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
            >
              {{ $t('linktree.form.save') }}
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- Wishlist Items Modal -->
    <div v-if="showWishlistItemsModal" class="fixed inset-0 bg-neutral-dark bg-opacity-75 flex items-center justify-center p-4 z-50">
      <div class="bg-white rounded-lg shadow-xl max-w-2xl w-full p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-lg font-medium text-neutral-dark">
            {{ currentWishlist.title }} - {{ $t('linktree.categories.wishlist') }}
          </h3>
          <button 
            @click="openWishlistItemModal()" 
            class="inline-flex items-center px-3 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
          >
            {{ $t('linktree.wishlist.addItem') }}
          </button>
        </div>
        
        <div v-if="loadingItems" class="flex justify-center py-8">
          <div class="spinner"></div>
        </div>

        <div v-else-if="wishlistItems.length === 0" class="text-center py-8 text-neutral">
          {{ $t('linktree.wishlist.noItems') }}
        </div>

        <div v-else class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
          <div 
            v-for="item in wishlistItems" 
            :key="item.id" 
            class="border rounded-lg p-4"
          >
            <div class="flex justify-between mb-2">
              <h4 class="font-medium text-neutral-dark">{{ item.item_name }}</h4>
              <div class="flex space-x-2">
                <button 
                  @click="openWishlistItemModal(item)"
                  class="text-primary hover:text-primary-dark"
                >
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                  </svg>
                </button>
                <button 
                  @click="confirmDeleteWishlistItem(item)"
                  class="text-accent-2 hover:text-accent-2-dark"
                >
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                  </svg>
                </button>
              </div>
            </div>
            
            <div class="text-sm text-neutral truncate mb-2">
              <a :href="item.item_url" target="_blank" class="text-primary hover:underline">
                {{ item.item_url }}
              </a>
            </div>
            
            <div v-if="item.price" class="text-sm font-medium text-neutral-dark">
              {{ item.price }} {{ item.currency }}
            </div>
          </div>
        </div>
        
        <div class="flex justify-end mt-4">
          <button 
            @click="closeWishlistItemsModal" 
            class="px-4 py-2 bg-neutral-light text-neutral-dark text-sm font-medium rounded-md hover:bg-neutral focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral mr-2"
          >
            {{ $t('linktree.form.cancel') }}
          </button>
          <button 
            @click="closeWishlistItemsModal" 
            class="px-4 py-2 bg-primary text-white text-sm font-medium rounded-md hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
          >
            {{ $t('linktree.form.save') }}
          </button>
        </div>
      </div>
    </div>

    <!-- Wishlist Item Modal -->
    <div v-if="showWishlistItemModal" class="fixed inset-0 bg-neutral-dark bg-opacity-75 flex items-center justify-center p-4 z-50">
      <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
        <h3 class="text-lg font-medium text-neutral-dark mb-4">
          {{ editingWishlistItem ? $t('linktree.wishlist.editItem') : $t('linktree.wishlist.addItem') }}
        </h3>
        
        <form @submit.prevent="saveWishlistItem">
          <div class="mb-4">
            <label class="block text-sm font-medium text-neutral-dark mb-1">
              {{ $t('linktree.wishlist.form.name') }}
            </label>
            <input 
              v-model="wishlistItemForm.item_name" 
              type="text" 
              class="form-input w-full rounded-md" 
              :placeholder="$t('linktree.wishlist.form.namePlaceholder')"
              required
            />
          </div>
          
          <div class="mb-4">
            <label class="block text-sm font-medium text-neutral-dark mb-1">
              {{ $t('linktree.wishlist.form.url') }}
            </label>
            <input 
              v-model="wishlistItemForm.item_url" 
              type="url" 
              class="form-input w-full rounded-md" 
              :placeholder="$t('linktree.wishlist.form.urlPlaceholder')"
              required
            />
          </div>
          
          <div class="grid grid-cols-2 gap-4">
            <div class="mb-4">
              <label class="block text-sm font-medium text-neutral-dark mb-1">
                {{ $t('linktree.wishlist.form.price') }}
              </label>
              <input 
                v-model="wishlistItemForm.price" 
                type="number" 
                step="0.01" 
                min="0" 
                class="form-input w-full rounded-md"
              />
            </div>
            
            <div class="mb-4">
              <label class="block text-sm font-medium text-neutral-dark mb-1">
                {{ $t('linktree.wishlist.form.currency') }}
              </label>
              <select 
                v-model="wishlistItemForm.currency" 
                class="form-input w-full rounded-md"
              >
                <option value="EUR">EUR</option>
                <option value="USD">USD</option>
                <option value="GBP">GBP</option>
                <option value="RUB">RUB</option>
              </select>
            </div>
          </div>
          
          <div class="flex justify-end space-x-3 mt-6">
            <button 
              type="button" 
              @click="closeWishlistItemModal" 
              class="px-4 py-2 text-sm font-medium text-neutral-dark hover:text-neutral-darker"
            >
              {{ $t('linktree.wishlist.form.cancel') }}
            </button>
            <button 
              type="submit" 
              class="px-4 py-2 bg-primary text-white text-sm font-medium rounded-md hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
            >
              {{ $t('linktree.wishlist.form.save') }}
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div v-if="showDeleteConfirmModal" class="fixed inset-0 bg-neutral-dark bg-opacity-75 flex items-center justify-center p-4 z-50">
      <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
        <h3 class="text-lg font-medium text-neutral-dark mb-4">
          {{ $t(deleteType === 'link' ? 'linktree.deleteLink' : 'linktree.wishlist.deleteItem') }}
        </h3>
        
        <p class="text-neutral mb-6">
          {{ $t(deleteType === 'link' ? 'linktree.deleteConfirm' : 'linktree.deleteItemConfirm') }}
        </p>
        
        <div class="flex justify-end space-x-3">
          <button 
            @click="closeDeleteConfirmModal" 
            class="px-4 py-2 text-sm font-medium text-neutral-dark hover:text-neutral-darker"
          >
            {{ $t('linktree.form.cancel') }}
          </button>
          <button 
            @click="confirmDelete" 
            class="px-4 py-2 bg-accent-2 text-white text-sm font-medium rounded-md hover:bg-accent-2-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-2"
          >
            {{ $t('linktree.deleteLink') }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted, computed, nextTick } from 'vue';
import axios from 'axios';
import Sortable from 'sortablejs';

export default {
  setup() {
    const links = ref([]);
    const loading = ref(true);
    const username = ref('asmr_creator');
    const linksContainer = ref(null);
    
    // Link modal
    const showLinkModal = ref(false);
    const editingLink = ref(null);
    const linkForm = reactive({
      title: '',
      url: '',
      category: '',
      affiliate_url: ''
    });
    
    // Wishlist items modal
    const showWishlistItemsModal = ref(false);
    const currentWishlist = ref({});
    const wishlistItems = ref([]);
    const loadingItems = ref(false);
    
    // Wishlist item modal
    const showWishlistItemModal = ref(false);
    const editingWishlistItem = ref(null);
    const wishlistItemForm = reactive({
      item_name: '',
      item_url: '',
      price: null,
      currency: 'EUR'
    });
    
    // Delete confirmation
    const showDeleteConfirmModal = ref(false);
    const deleteType = ref('link');
    const itemToDelete = ref(null);
    
    // Mock data
    const mockLinks = [
      {
        id: 1,
        title: 'Mein TikTok',
        url: 'https://tiktok.com/@asmr_creator',
        category: 'social',
        link_order: 0
      },
      {
        id: 2,
        title: 'YouTube Kanal',
        url: 'https://youtube.com/c/asmr_creator',
        category: 'social',
        link_order: 1
      },
      {
        id: 3,
        title: 'Instagram',
        url: 'https://instagram.com/asmr_creator',
        category: 'social',
        link_order: 2
      },
      {
        id: 4,
        title: 'Unterstütze mich auf Ko-Fi',
        url: 'https://ko-fi.com/asmr_creator',
        category: 'donation',
        link_order: 3
      },
      {
        id: 5,
        title: 'Mein Patreon',
        url: 'https://patreon.com/asmr_creator',
        category: 'donation',
        link_order: 4
      },
      {
        id: 6,
        title: 'Amazon Affiliate Shop',
        url: 'https://amazon.com/shop/asmr_creator',
        category: 'affiliate',
        affiliate_url: 'https://amazon.com/shop/asmr_creator?tag=aff123',
        link_order: 5
      },
      {
        id: 7,
        title: 'Meine ASMR Ausrüstung',
        url: 'https://amazon.com/wishlist/asmr_creator',
        category: 'wishlist',
        link_order: 6
      }
    ];
    
    const mockWishlistItems = {
      7: [
        {
          id: 1,
          user_link_id: 7,
          item_name: '3Dio Free Space Binaural Microphone',
          item_url: 'https://amazon.com/3dio-microphone',
          price: 499.99,
          currency: 'EUR'
        },
        {
          id: 2,
          user_link_id: 7,
          item_name: 'Zoom H6 Recorder',
          item_url: 'https://amazon.com/zoom-h6',
          price: 329.99,
          currency: 'EUR'
        },
        {
          id: 3,
          user_link_id: 7,
          item_name: 'Rode NT1 Mikrofon',
          item_url: 'https://amazon.com/rode-nt1',
          price: 249.99,
          currency: 'EUR'
        }
      ]
    };
    
    // Get user info and links
    onMounted(() => {
      // Direkte Zuweisung der Mock-Daten
      links.value = mockLinks;
      console.log('Initial links loaded:', links.value);
      loading.value = false;
      
      // Initialisiere Sortable nach dem nächsten Tick
      nextTick(() => {
        if (linksContainer.value) {
          Sortable.create(linksContainer.value, {
            handle: '.handle',
            animation: 150,
            onEnd: updateLinkOrder
          });
        }
      });
    });
    
    const fetchLinks = async () => {
      loading.value = true;
      // Simulate API call delay
      setTimeout(() => {
        links.value = JSON.parse(JSON.stringify(mockLinks));
        loading.value = false;
      }, 500);
    };
    
    // Link functions
    const openLinkModal = (link = null) => {
      console.log('Opening link modal', link);
      if (link) {
        editingLink.value = link;
        linkForm.title = link.title;
        linkForm.url = link.url;
        linkForm.category = link.category;
        linkForm.affiliate_url = link.affiliate_url || '';
      } else {
        editingLink.value = null;
        linkForm.title = '';
        linkForm.url = '';
        linkForm.category = '';
        linkForm.affiliate_url = '';
      }
      showLinkModal.value = true;
    };
    
    const closeLinkModal = () => {
      showLinkModal.value = false;
    };
    
    const saveLink = async () => {
      try {
        if (editingLink.value) {
          // Update existing link in mock data
          const index = links.value.findIndex(l => l.id === editingLink.value.id);
          if (index !== -1) {
            const updatedLinks = [...links.value];
            updatedLinks[index] = {
              ...updatedLinks[index],
              title: linkForm.title,
              url: linkForm.url,
              category: linkForm.category,
              affiliate_url: linkForm.affiliate_url
            };
            links.value = updatedLinks;
          }
        } else {
          // Add new link to mock data
          const newId = links.value.length > 0 
            ? Math.max(...links.value.map(l => l.id)) + 1 
            : 1;
          
          const newLink = {
            id: newId,
            title: linkForm.title,
            url: linkForm.url,
            category: linkForm.category,
            affiliate_url: linkForm.affiliate_url,
            link_order: links.value.length
          };
          
          console.log('Adding new link:', newLink);
          
          // Erstelle eine komplett neue Array-Referenz
          links.value = [...links.value, newLink];
          
          console.log('Links after adding:', JSON.stringify(links.value));
          
          // If it's a wishlist, initialize empty items array
          if (newLink.category === 'wishlist') {
            mockWishlistItems[newLink.id] = [];
          }
        }
        
        // Warte auf den nächsten Tick, um sicherzustellen, dass die UI aktualisiert wird
        await nextTick();
        
        closeLinkModal();
      } catch (error) {
        console.error('Error saving link:', error);
      }
    };
    
    const updateLinkOrder = async (evt) => {
      // Hole die neue Reihenfolge der IDs
      const items = Array.from(linksContainer.value.children);
      const newOrder = items.map(item => parseInt(item.getAttribute('data-id')));
      
      console.log('New order:', newOrder);
      
      // Erstelle eine neue sortierte Liste
      const sortedLinks = [...links.value].sort((a, b) => {
        return newOrder.indexOf(a.id) - newOrder.indexOf(b.id);
      });
      
      // Aktualisiere die link_order-Eigenschaft
      sortedLinks.forEach((link, index) => {
        link.link_order = index;
      });
      
      // Aktualisiere die links-Referenz
      links.value = sortedLinks;
    };
    
    const confirmDeleteLink = (link) => {
      itemToDelete.value = link;
      deleteType.value = 'link';
      showDeleteConfirmModal.value = true;
    };
    
    // Wishlist items functions
    const openWishlistItemsModal = async (wishlist) => {
      currentWishlist.value = wishlist;
      loadingItems.value = true;
      
      // Simulate API call delay
      setTimeout(() => {
        wishlistItems.value = mockWishlistItems[wishlist.id] || [];
        loadingItems.value = false;
        showWishlistItemsModal.value = true;
      }, 500);
    };
    
    const closeWishlistItemsModal = () => {
      showWishlistItemsModal.value = false;
    };
    
    // Wishlist item modal
    const openWishlistItemModal = (item = null) => {
      if (item) {
        editingWishlistItem.value = item;
        wishlistItemForm.item_name = item.item_name;
        wishlistItemForm.item_url = item.item_url;
        wishlistItemForm.price = item.price;
        wishlistItemForm.currency = item.currency || 'EUR';
      } else {
        editingWishlistItem.value = null;
        wishlistItemForm.item_name = '';
        wishlistItemForm.item_url = '';
        wishlistItemForm.price = null;
        wishlistItemForm.currency = 'EUR';
      }
      showWishlistItemModal.value = true;
    };
    
    const closeWishlistItemModal = () => {
      showWishlistItemModal.value = false;
    };
    
    const saveWishlistItem = async () => {
      const formData = {
        ...wishlistItemForm,
        user_link_id: currentWishlist.value.id
      };
      
      if (editingWishlistItem.value) {
        // Update existing item
        const index = wishlistItems.value.findIndex(item => item.id === editingWishlistItem.value.id);
        if (index !== -1) {
          wishlistItems.value[index] = {
            ...wishlistItems.value[index],
            ...formData
          };
        }
      } else {
        // Add new item
        const newId = wishlistItems.value.length > 0 
          ? Math.max(0, ...wishlistItems.value.map(item => item.id)) + 1 
          : 1;
          
        const newItem = {
          id: newId,
          ...formData
        };
        
        wishlistItems.value.push(newItem);
      }
      
      closeWishlistItemModal();
    };
    
    const confirmDeleteWishlistItem = (item) => {
      itemToDelete.value = item;
      deleteType.value = 'wishlist-item';
      showDeleteConfirmModal.value = true;
    };
    
    // Delete confirmation
    const closeDeleteConfirmModal = () => {
      showDeleteConfirmModal.value = false;
      itemToDelete.value = null;
    };
    
    const confirmDelete = async () => {
      if (deleteType.value === 'link') {
        // Remove link from mock data
        const index = links.value.findIndex(l => l.id === itemToDelete.value.id);
        if (index !== -1) {
          links.value.splice(index, 1);
          
          // If it's a wishlist, remove its items
          if (itemToDelete.value.category === 'wishlist') {
            delete mockWishlistItems[itemToDelete.value.id];
          }
          
          // Update link_order for remaining links
          links.value.forEach((link, i) => {
            link.link_order = i;
          });
        }
      } else {
        // Remove wishlist item from mock data
        const index = wishlistItems.value.findIndex(item => item.id === itemToDelete.value.id);
        if (index !== -1) {
          wishlistItems.value.splice(index, 1);
          
          // Update mock data
          const mockIndex = mockWishlistItems[currentWishlist.value.id].findIndex(
            item => item.id === itemToDelete.value.id
          );
          if (mockIndex !== -1) {
            mockWishlistItems[currentWishlist.value.id].splice(mockIndex, 1);
          }
        }
      }
      
      closeDeleteConfirmModal();
    };
    
    // Copy profile link
    const copyProfileLink = () => {
      const url = `${window.location.origin}/u/${username.value}`;
      navigator.clipboard.writeText(url).then(() => {
        alert('Link in die Zwischenablage kopiert!');
      });
    };
    
    return {
      links,
      loading,
      username,
      linksContainer,
      showLinkModal,
      editingLink,
      linkForm,
      openLinkModal,
      closeLinkModal,
      saveLink,
      updateLinkOrder,
      confirmDeleteLink,
      showWishlistItemsModal,
      currentWishlist,
      wishlistItems,
      loadingItems,
      openWishlistItemsModal,
      closeWishlistItemsModal,
      showWishlistItemModal,
      editingWishlistItem,
      wishlistItemForm,
      openWishlistItemModal,
      closeWishlistItemModal,
      saveWishlistItem,
      confirmDeleteWishlistItem,
      showDeleteConfirmModal,
      deleteType,
      itemToDelete,
      closeDeleteConfirmModal,
      confirmDelete,
      copyProfileLink
    };
  }
};
</script> 