added my lists page

src/scripts/anime/anime.js

@@ -1,16 +1,196 @@
 const animeId = window.location.pathname.split('/').pop();
 let player;
-
 let totalEpisodes = 0;
 let currentPage = 1;
 const itemsPerPage = 12;
+let extensionName;
+let currentAnimeData = null;
+let isInList = false;
+let currentListEntry = null;
+
+const API_BASE = '/api';
 
 var tag = document.createElement('script');
 tag.src = "https://www.youtube.com/iframe_api";
 var firstScriptTag = document.getElementsByTagName('script')[0];
 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
-let extensionName;
+// Auth helpers
+function getAuthToken() {
+    return localStorage.getItem('token');
+}
+
+function getAuthHeaders() {
+    const token = getAuthToken();
+    return {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${token}`
+    };
+}
+
+// Check if anime is in list
+async function checkIfInList() {
+    try {
+        const response = await fetch(`${API_BASE}/list`, {
+            headers: getAuthHeaders()
+        });
+
+        if (response.ok) {
+            const data = await response.json();
+            const entry = data.results?.find(item =>
+                item.entry_id === parseInt(animeId) &&
+                item.source === (extensionName || 'anilist')
+            );
+
+            if (entry) {
+                isInList = true;
+                currentListEntry = entry;
+                updateAddToListButton();
+            }
+        }
+    } catch (error) {
+        console.error('Error checking list:', error);
+    }
+}
+
+// Update button state
+function updateAddToListButton() {
+    const btn = document.getElementById('add-to-list-btn');
+    if (isInList) {
+        btn.innerHTML = `
+            <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
+            </svg>
+            In Your List
+        `;
+        btn.style.background = 'rgba(34, 197, 94, 0.2)';
+        btn.style.color = '#22c55e';
+        btn.style.borderColor = 'rgba(34, 197, 94,  0.3)';
+    } else {
+        btn.innerHTML = '+ Add to List';
+    }
+}
+
+// Open add to list modal
+function openAddToListModal() {
+    if (isInList) {
+        // If already in list, open edit modal with current data
+        document.getElementById('modal-status').value = currentListEntry.status || 'PLANNING';
+        document.getElementById('modal-progress').value = currentListEntry.progress || 0;
+        document.getElementById('modal-score').value = currentListEntry.score || '';
+
+        document.getElementById('modal-title').textContent = 'Edit List Entry';
+        document.getElementById('modal-delete-btn').style.display = 'block';
+    } else {
+        // New entry defaults
+        document.getElementById('modal-status').value = 'PLANNING';
+        document.getElementById('modal-progress').value = 0;
+        document.getElementById('modal-score').value = '';
+
+        document.getElementById('modal-title').textContent = 'Add to List';
+        document.getElementById('modal-delete-btn').style.display = 'none';
+    }
+
+    document.getElementById('modal-progress').max = totalEpisodes || 999;
+    document.getElementById('add-list-modal').classList.add('active');}
+
+// Close modal
+function closeAddToListModal() {
+    document.getElementById('add-list-modal').classList.remove('active');
+}
+
+// Save to list
+async function saveToList() {
+    const status = document.getElementById('modal-status').value;
+    const progress = parseInt(document.getElementById('modal-progress').value) || 0;
+    const score = parseFloat(document.getElementById('modal-score').value) || null;
+
+    try {
+        const response = await fetch(`${API_BASE}/list/entry`, {
+            method: 'POST',
+            headers: getAuthHeaders(),
+            body: JSON.stringify({
+                entry_id: animeId,
+                source: extensionName || 'anilist',
+                entry_type: 'ANIME',
+                status: status,
+                progress: progress,
+                score: score
+            })
+        });
+
+        if (!response.ok) {
+            throw new Error('Failed to save entry');
+        }
+
+        // Si la operación fue exitosa, actualizamos currentListEntry con el nuevo campo type
+        isInList = true;
+        currentListEntry = {
+            entry_id: parseInt(animeId),
+            source: extensionName || 'anilist',
+            entry_type: 'ANIME', // <--- También se actualiza aquí
+            status,
+            progress,
+            score
+        };
+        updateAddToListButton();
+        closeAddToListModal();
+        showNotification(isInList ? 'Updated successfully!' : 'Added to your list!', 'success');
+    } catch (error) {
+        console.error('Error saving to list:', error);
+        showNotification('Failed to save. Please try again.', 'error');
+    }
+}
+
+// Delete from list
+async function deleteFromList() {
+    if (!confirm('Remove this anime from your list?')) return;
+
+    try {
+        const response = await fetch(`${API_BASE}/list/entry/${animeId}`, {
+            method: 'DELETE',
+            headers: getAuthHeaders()
+        });
+
+        if (!response.ok) {
+            throw new Error('Failed to delete entry');
+        }
+
+        isInList = false;
+        currentListEntry = null;
+        updateAddToListButton();
+        closeAddToListModal();
+        showNotification('Removed from your list', 'success');
+    } catch (error) {
+        console.error('Error deleting from list:', error);
+        showNotification('Failed to remove. Please try again.', 'error');
+    }
+}
+
+// Show notification
+function showNotification(message, type = 'info') {
+    const notification = document.createElement('div');
+    notification.style.cssText = `
+        position: fixed;
+        top: 100px;
+        right: 20px;
+        background: ${type === 'success' ? '#22c55e' : type === 'error' ? '#ef4444' : '#8b5cf6'};
+        color: white;
+        padding: 1rem 1.5rem;
+        border-radius: 12px;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+        z-index: 9999;
+        font-weight: 600;
+        animation: slideInRight 0.3s ease;
+    `;
+    notification.textContent = message;
+    document.body.appendChild(notification);
+
+    setTimeout(() => {
+        notification.style.animation = 'slideOutRight 0.3s ease';
+        setTimeout(() => notification.remove(), 300);
+    }, 3000);
+}
 
 async function loadAnime() {
     try {
@@ -36,6 +216,8 @@ async function loadAnime() {
             return;
         }
 
+        currentAnimeData = data;
+
         const title = data.title?.english || data.title?.romaji || data.title || "Unknown Title";
         document.title = `${title} | WaifuBoard`;
         document.getElementById('title').innerText = title;
@@ -44,7 +226,6 @@ async function loadAnime() {
 
         if (extensionName) {
             posterUrl = data.image || '';
-
         } else {
             posterUrl = data.coverImage?.extraLarge || '';
         }
@@ -181,6 +362,9 @@ async function loadAnime() {
 
         renderEpisodes();
 
+        // Check if in list after loading anime data
+        await checkIfInList();
+
     } catch (err) {
         console.error('Error loading anime:', err);
         document.getElementById('title').innerText = "Error loading anime";
@@ -274,4 +458,30 @@ searchInput.addEventListener('input', (e) => {
     }
 });
 
+// Close modal on outside click
+document.addEventListener('DOMContentLoaded', () => {
+    const modal = document.getElementById('add-list-modal');
+    if (modal) {
+        modal.addEventListener('click', (e) => {
+            if (e.target.id === 'add-list-modal') {
+                closeAddToListModal();
+            }
+        });
+    }
+});
+
+// Add animations
+const style = document.createElement('style');
+style.textContent = `
+    @keyframes slideInRight {
+        from { transform: translateX(400px); opacity: 0; }
+        to { transform: translateX(0); opacity: 1; }
+    }
+    @keyframes slideOutRight {
+        from { transform: translateX(0); opacity: 1; }
+        to { transform: translateX(400px); opacity: 0; }
+    }
+`;
+document.head.appendChild(style);
+
 loadAnime();