{% extends "base.html" %}

{% block title %}Favorites - AI Conversation Viewer{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Page Header -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white flex items-center">
                <i class="bi bi-star-fill text-amber-500 mr-3"></i>
                {{ t('favorites') }}
            </h1>
            <p class="mt-2 text-gray-600 dark:text-gray-400">
                {{ t('your_saved_conversations') }}
            </p>
        </div>
    </div>

    <!-- Search and Filters -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
        <form id="favorites-filter-form" class="space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <!-- Search Input -->
                <div class="lg:col-span-2">
                    <label for="search" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="bi bi-search mr-1"></i>
                        {{ t('search_favorites') }}
                    </label>
                    <input type="text"
                           id="search"
                           name="search"
                           class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition"
                           placeholder="{{ t('search_in_titles_annotations') }}">
                </div>

                <!-- Type Filter -->
                <div>
                    <label for="type" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="bi bi-funnel mr-1"></i>
                        {{ t('type') }}
                    </label>
                    <select id="type"
                            name="type"
                            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-transparent transition">
                        <option value="">{{ t('all_types') }}</option>
                        <option value="session">{{ t('sessions') }}</option>
                        <option value="message">{{ t('messages') }}</option>
                    </select>
                </div>

                <!-- View Filter -->
                <div>
                    <label for="view" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="bi bi-eye mr-1"></i>
                        {{ t('view') }}
                    </label>
                    <select id="view"
                            name="view"
                            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-transparent transition">
                        <option value="">{{ t('all_ides') }}</option>
                        <option value="claude">{{ t('claude') }}</option>
                        <option value="qwen">{{ t('qwen') }}</option>
                        <option value="cursor">{{ t('cursor') }}</option>
                        <option value="trae">{{ t('trae') }}</option>
                        <option value="kiro">{{ t('kiro') }}</option>
                    </select>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="flex flex-wrap gap-2">
                <button type="button"
                        id="apply-filters"
                        class="inline-flex items-center px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white font-medium rounded-lg transition-colors">
                    <i class="bi bi-funnel-fill mr-2"></i>
                    {{ t('apply_filters') }}
                </button>
                <button type="button"
                        id="clear-filters"
                        class="inline-flex items-center px-4 py-2 bg-gray-500 hover:bg-gray-600 text-white font-medium rounded-lg transition-colors">
                    <i class="bi bi-x-circle mr-2"></i>
                    {{ t('clear_filters') }}
                </button>
            </div>
        </form>
    </div>

    <!-- Statistics Panel -->
    <div id="favorites-stats" class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <!-- Total Favorites -->
        <div class="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 border border-blue-200 dark:border-blue-700 rounded-lg p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-blue-600 dark:text-blue-400">{{ t('total_favorites') }}</p>
                    <p id="stat-total" class="text-3xl font-bold text-blue-900 dark:text-blue-100 mt-2">0</p>
                </div>
                <div class="bg-blue-200 dark:bg-blue-700 p-3 rounded-full">
                    <i class="bi bi-star-fill text-2xl text-blue-700 dark:text-blue-300"></i>
                </div>
            </div>
        </div>

        <!-- Sessions -->
        <div class="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 border border-green-200 dark:border-green-700 rounded-lg p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-green-600 dark:text-green-400">{{ t('sessions') }}</p>
                    <p id="stat-sessions" class="text-3xl font-bold text-green-900 dark:text-green-100 mt-2">0</p>
                </div>
                <div class="bg-green-200 dark:bg-green-700 p-3 rounded-full">
                    <i class="bi bi-chat-dots-fill text-2xl text-green-700 dark:text-green-300"></i>
                </div>
            </div>
        </div>

        <!-- Messages -->
        <div class="bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 border border-purple-200 dark:border-purple-700 rounded-lg p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-purple-600 dark:text-purple-400">{{ t('messages') }}</p>
                    <p id="stat-messages" class="text-3xl font-bold text-purple-900 dark:text-purple-100 mt-2">0</p>
                </div>
                <div class="bg-purple-200 dark:bg-purple-700 p-3 rounded-full">
                    <i class="bi bi-chat-text-fill text-2xl text-purple-700 dark:text-purple-300"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Tags Filter (Horizontal Scrollable) -->
    <div id="tags-container" class="hidden">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4">
            <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
                <i class="bi bi-tags mr-2"></i>{{ t('filter_by_tags') }}
            </h3>
            <div id="tags-list" class="flex flex-wrap gap-2"></div>
        </div>
    </div>

    <!-- Favorites List -->
    <div id="favorites-container">
        <div class="space-y-2" id="favorites-grid"></div>

        <!-- Empty State -->
        <div id="empty-state" class="hidden bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-12 text-center">
            <div class="max-w-md mx-auto space-y-4">
                <div class="flex justify-center">
                    <div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-full">
                        <i class="bi bi-star text-6xl text-gray-400 dark:text-gray-600"></i>
                    </div>
                </div>
                <h3 class="text-2xl font-bold text-gray-900 dark:text-white">{{ t('no_favorites_yet') }}</h3>
                <p class="text-gray-600 dark:text-gray-400">
                    {{ t('no_favorites_desc') }}
                </p>
            </div>
        </div>

        <!-- Loading State -->
        <div id="loading-state" class="flex items-center justify-center p-12">
            <div class="text-center">
                <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto"></div>
                <p class="mt-4 text-gray-600 dark:text-gray-400">{{ t('loading_favorites') }}</p>
            </div>
        </div>
    </div>

    <!-- Edit Annotation Modal -->
    <div id="edit-annotation-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
            <!-- Modal Header -->
            <div class="sticky top-0 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-6 py-4">
                <div class="flex items-center justify-between">
                    <h2 class="text-xl font-bold text-gray-900 dark:text-white flex items-center">
                        <i class="bi bi-pencil-square text-primary-600 dark:text-primary-400 mr-2"></i>
                        {{ t('edit_annotation') }}
                    </h2>
                    <button id="close-modal" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors">
                        <i class="bi bi-x-lg text-xl"></i>
                    </button>
                </div>
            </div>

            <!-- Modal Body -->
            <div class="px-6 py-6">
                <div class="space-y-4">
                    <!-- Favorite Info -->
                    <div class="bg-gradient-to-r from-primary-50 to-transparent dark:from-primary-900/20 dark:to-transparent border-l-4 border-primary-500 px-4 py-3 rounded">
                        <p id="modal-favorite-title" class="font-semibold text-gray-900 dark:text-white"></p>
                        <p id="modal-favorite-meta" class="text-sm text-gray-600 dark:text-gray-400 mt-1"></p>
                    </div>

                    <!-- Annotation Input -->
                    <div>
                        <label for="annotation-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            <i class="bi bi-chat-left-text mr-1"></i>
                            {{ t('annotation') }}
                        </label>
                        <textarea id="annotation-input"
                                  rows="6"
                                  class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition resize-none"
                                  placeholder="{{ t('add_notes_comments') }} {{ t('about') }} {{ t('this') }} {{ t('favorite') }}..."></textarea>
                        <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                            <i class="bi bi-info-circle mr-1"></i>
                            {{ t('remember_annotation') }}
                        </p>
                    </div>

                    <!-- Tags Section (Future Enhancement) -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            <i class="bi bi-tags mr-1"></i>
                            {{ t('tags') }}
                        </label>
                        <div id="modal-tags" class="flex flex-wrap gap-2 min-h-[2rem] p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700/50">
                            <span class="text-sm text-gray-500 dark:text-gray-400 italic">{{ t('tag_management_soon') }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal Footer -->
            <div class="sticky bottom-0 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 px-6 py-4">
                <div class="flex items-center justify-end space-x-3">
                    <button id="cancel-edit" class="px-4 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 font-medium transition-colors">
                        <i class="bi bi-x-circle mr-2"></i>
                        {{ t('cancel') }}
                    </button>
                    <button id="save-annotation" class="px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-lg font-medium transition-colors">
                        <i class="bi bi-check-circle mr-2"></i>
                        {{ t('save') }} {{ t('annotation') }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
// Translations for JavaScript
const FAVORITES_TRANSLATIONS = {
    failed_load_statistics: '{{ t('failed_load_statistics') }}',
    failed_load_tags: '{{ t('failed_load_tags') }}',
    failed_load_favorites: '{{ t('failed_load_favorites') }}',
    failed_remove_favorites: '{{ t('failed_remove_favorites') }}',
    failed_save_annotation: '{{ t('failed_to_save_annotation') }}',
    error_in_show_edit_modal: '{{ t('error_in_show_edit_modal') }}'
};

class FavoritesManager {
    constructor() {
        this.currentFilters = {
            search: '',
            type: '',
            view: '',
            tag: ''
        };
        this.currentEditingId = null;
        this.init();
    }

    init() {
        this.setupEventListeners();
        this.loadStatistics();
        this.loadTags();
        this.loadFavorites();
    }

    setupEventListeners() {
        // Apply filters button
        document.getElementById('apply-filters').addEventListener('click', () => {
            this.applyFilters();
        });

        // Clear filters button
        document.getElementById('clear-filters').addEventListener('click', () => {
            this.clearFilters();
        });

        // Enter key in search
        document.getElementById('search').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                e.preventDefault();
                this.applyFilters();
            }
        });

        // Modal event listeners
        document.getElementById('close-modal').addEventListener('click', () => {
            this.closeEditModal();
        });

        document.getElementById('cancel-edit').addEventListener('click', () => {
            this.closeEditModal();
        });

        document.getElementById('save-annotation').addEventListener('click', () => {
            this.saveAnnotation();
        });

        // Close modal on backdrop click
        document.getElementById('edit-annotation-modal').addEventListener('click', (e) => {
            if (e.target.id === 'edit-annotation-modal') {
                this.closeEditModal();
            }
        });

        // Escape key to close modal
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                const modal = document.getElementById('edit-annotation-modal');
                if (!modal.classList.contains('hidden')) {
                    this.closeEditModal();
                }
            }
        });
    }

    async loadStatistics() {
        try {
            const response = await fetch('/api/favorites/statistics');
            if (response.ok) {
                const stats = await response.json();
                console.log('Statistics loaded:', stats);
                document.getElementById('stat-total').textContent = stats.total || 0;
                document.getElementById('stat-sessions').textContent = stats.by_type?.session || 0;
                document.getElementById('stat-messages').textContent = stats.by_type?.message || 0;
            } else {
                console.error('Failed to load statistics:', response.status, response.statusText);
            }
        } catch (error) {
            console.error(FAVORITES_TRANSLATIONS.failed_load_statistics, error);
        }
    }

    async loadTags() {
        try {
            const response = await fetch('/api/tags');
            if (response.ok) {
                const tags = await response.json();
                if (tags && tags.length > 0) {
                    this.renderTags(tags);
                }
            }
        } catch (error) {
            console.error(FAVORITES_TRANSLATIONS.failed_load_tags, error);
        }
    }

    renderTags(tags) {
        const container = document.getElementById('tags-container');
        const tagsList = document.getElementById('tags-list');

        if (tags.length === 0) {
            container.classList.add('hidden');
            return;
        }

        container.classList.remove('hidden');
        tagsList.innerHTML = tags.map(tag => `
            <button class="tag-filter inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium border-2 transition-all duration-200 hover:shadow-md ${
                this.currentFilters.tag === tag.name
                    ? 'bg-primary-500 border-primary-600 text-white'
                    : 'bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:border-primary-400'
            }" data-tag="${tag.name}" style="border-color: ${tag.color}20">
                <i class="bi bi-tag-fill mr-1.5" style="color: ${tag.color}"></i>
                ${tag.name}
                <span class="ml-1.5 px-1.5 py-0.5 rounded-full text-xs ${
                    this.currentFilters.tag === tag.name
                        ? 'bg-primary-400'
                        : 'bg-gray-100 dark:bg-gray-600'
                }">${tag.usage_count || 0}</span>
            </button>
        `).join('');

        // Add click listeners to tag buttons
        document.querySelectorAll('.tag-filter').forEach(btn => {
            btn.addEventListener('click', () => {
                const tagName = btn.dataset.tag;
                if (this.currentFilters.tag === tagName) {
                    this.currentFilters.tag = '';
                } else {
                    this.currentFilters.tag = tagName;
                }
                this.loadTags();
                this.loadFavorites();
            });
        });
    }

    async loadFavorites() {
        const loadingState = document.getElementById('loading-state');
        const emptyState = document.getElementById('empty-state');
        const grid = document.getElementById('favorites-grid');

        loadingState.classList.remove('hidden');
        emptyState.classList.add('hidden');
        grid.innerHTML = '';

        try {
            const params = new URLSearchParams();
            if (this.currentFilters.search) params.append('search', this.currentFilters.search);
            if (this.currentFilters.type) params.append('type', this.currentFilters.type);
            if (this.currentFilters.view) params.append('view', this.currentFilters.view);
            if (this.currentFilters.tag) params.append('tag', this.currentFilters.tag);
            params.append('limit', '100');

            const response = await fetch('/api/favorites?' + params.toString());
            if (response.ok) {
                const data = await response.json();
                loadingState.classList.add('hidden');

                if (data.favorites && data.favorites.length > 0) {
                    this.renderFavorites(data.favorites);
                } else {
                    emptyState.classList.remove('hidden');
                }
            }
        } catch (error) {
            console.error(FAVORITES_TRANSLATIONS.failed_load_favorites, error);
            loadingState.classList.add('hidden');
            emptyState.classList.remove('hidden');
        }
    }

    renderFavorites(favorites) {
        const grid = document.getElementById('favorites-grid');

        // Helper function to safely escape HTML for text content
        const escapeHtml = (text) => {
            if (!text) return '';
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        };

        grid.innerHTML = favorites.map(fav => `
            <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-primary-400 dark:hover:border-primary-600 transition-all overflow-hidden">
                <div class="px-4 py-3">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-3 flex-1 min-w-0">
                            <!-- Star Icon -->
                            <i class="bi bi-star-fill text-amber-500 text-lg"></i>

                            <!-- Title & Meta -->
                            <div class="flex-1 min-w-0">
                                <div class="flex items-center space-x-2 mb-1">
                                    <h3 class="font-semibold text-gray-900 dark:text-white truncate" title="${escapeHtml(fav.title)}">
                                        ${escapeHtml(fav.title)}
                                    </h3>
                                    <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium ${
                                        fav.type === 'session' ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400' : 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400'
                                    }">
                                        ${fav.type}
                                    </span>
                                    <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">
                                        ${fav.view}
                                    </span>
                                </div>
                                <div class="flex items-center text-xs text-gray-500 dark:text-gray-500 space-x-2">
                                    <span class="truncate">${escapeHtml(fav.project_name)}</span>
                                    <span>•</span>
                                    <span class="font-mono">${fav.session_id.substring(0, 8)}</span>
                                    ${fav.message_line ? `<span>• Line ${fav.message_line}</span>` : ''}
                                    <span>•</span>
                                    <span>${new Date(fav.created_at).toLocaleDateString()}</span>
                                </div>
                            </div>
                        </div>

                        <!-- Actions -->
                        <div class="flex items-center space-x-1">
                            <a href="/conversation/${encodeURIComponent(fav.project_name)}/${encodeURIComponent(fav.session_id)}?view=${fav.view}${fav.message_line ? '&highlight=' + fav.message_line : ''}"
                               class="p-2 rounded-lg text-primary-600 dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/20 transition-colors"
                               title="{{ t('view_conversation') }}">
                                <i class="bi bi-box-arrow-up-right"></i>
                            </a>
                            <button class="edit-favorite p-2 rounded-lg text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
                                    data-id="${fav.id}"
                                    title="{{ t('edit_annotation') }}">
                                <i class="bi bi-pencil"></i>
                            </button>
                            <button class="remove-favorite p-2 rounded-lg text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
                                    data-id="${fav.id}"
                                    title="{{ t('remove_from_favorites') }}">
                                <i class="bi bi-trash"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Annotation -->
                    ${fav.annotation ? `
                        <div class="mt-2 ml-8 p-2 bg-amber-50 dark:bg-amber-900/20 border-l-2 border-amber-500 rounded text-sm text-gray-700 dark:text-gray-300">
                            ${escapeHtml(fav.annotation)}
                        </div>
                    ` : ''}

                    <!-- Tags -->
                    ${fav.tags && fav.tags.length > 0 ? `
                        <div class="mt-2 ml-8 flex flex-wrap gap-1">
                            ${fav.tags.map(tag => `
                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs border"
                                      style="border-color: ${tag.color}; background-color: ${tag.color}20">
                                    <i class="bi bi-tag-fill mr-1" style="color: ${tag.color}"></i>
                                    ${escapeHtml(tag.name)}
                                </span>
                            `).join('')}
                        </div>
                    ` : ''}
                </div>
            </div>
        `).join('');

        // Add event listeners to edit buttons
        document.querySelectorAll('.edit-favorite').forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.preventDefault();
                e.stopPropagation();

                const favoriteId = btn.dataset.id;
                console.log('Edit button clicked for favorite:', favoriteId);

                const favorite = favorites.find(f => f.id === favoriteId || f.id === parseInt(favoriteId));
                if (favorite) {
                    console.log('Found favorite, showing edit modal:', favorite);
                    this.showEditModal(favorite);
                } else {
                    console.error('Favorite not found in list:', favoriteId, favorites);
                }
            });
        });

        // Add event listeners to remove buttons
        document.querySelectorAll('.remove-favorite').forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.preventDefault();
                e.stopPropagation();
                this.removeFavorite(btn.dataset.id);
            });
        });
    }

    async removeFavorite(favoriteId) {
        if (!confirm('{{ t("confirm_remove_favorite") }}')) {
            return;
        }

        try {
            const response = await fetch(`/api/favorites/${favoriteId}`, {
                method: 'DELETE'
            });

            if (response.ok) {
                window.claudeViewer.showNotification('{{ t("removed_from_favorites") }}', 'success');
                this.loadStatistics();
                this.loadTags();
                this.loadFavorites();
            } else {
                window.claudeViewer.showNotification('{{ t("failed_remove_favorites") }}', 'error');
            }
        } catch (error) {
            console.error('Failed to remove favorite:', error);
            window.claudeViewer.showNotification('{{ t("failed_remove_favorites") }}', 'error');
        }
    }

    applyFilters() {
        this.currentFilters.search = document.getElementById('search').value.trim();
        this.currentFilters.type = document.getElementById('type').value;
        this.currentFilters.view = document.getElementById('view').value;
        this.loadFavorites();
    }

    clearFilters() {
        document.getElementById('search').value = '';
        document.getElementById('type').value = '';
        document.getElementById('view').value = '';
        this.currentFilters = {
            search: '',
            type: '',
            view: '',
            tag: ''
        };
        this.loadTags();
        this.loadFavorites();
    }

    showEditModal(favorite) {
        console.log('showEditModal called with:', favorite);

        try {
            this.currentEditingId = favorite.id;

            // Set modal content
            const titleEl = document.getElementById('modal-favorite-title');
            const metaEl = document.getElementById('modal-favorite-meta');
            const annotationEl = document.getElementById('annotation-input');
            const modal = document.getElementById('edit-annotation-modal');

            if (!titleEl || !metaEl || !annotationEl || !modal) {
                console.error('Modal elements not found:', {titleEl, metaEl, annotationEl, modal});
                return;
            }

            titleEl.textContent = favorite.title;
            metaEl.textContent = `${favorite.type} • ${favorite.view} • ${favorite.project_name} • ${favorite.session_id.substring(0, 12)}`;
            annotationEl.value = favorite.annotation || '';

            // Show modal
            console.log('Showing modal, removing hidden class');
            modal.classList.remove('hidden');

            // Verify modal is visible
            setTimeout(() => {
                const isHidden = modal.classList.contains('hidden');
                console.log('Modal visible check:', !isHidden, 'Classes:', modal.className);

                // Focus on textarea
                annotationEl.focus();
            }, 100);

        } catch (error) {
            console.error(FAVORITES_TRANSLATIONS.error_in_show_edit_modal, error);
        }
    }

    closeEditModal() {
        const modal = document.getElementById('edit-annotation-modal');
        modal.classList.add('hidden');
        this.currentEditingId = null;
        document.getElementById('annotation-input').value = '';
    }

    async saveAnnotation() {
        if (!this.currentEditingId) {
            return;
        }

        const annotation = document.getElementById('annotation-input').value.trim();
        const saveBtn = document.getElementById('save-annotation');
        const originalText = saveBtn.innerHTML;

        try {
            // Show loading state
            saveBtn.disabled = true;
            saveBtn.innerHTML = '<i class="bi bi-hourglass-split mr-2 animate-spin"></i>{{ t("saving") }}...';

            const response = await fetch(`/api/favorites/${this.currentEditingId}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    annotation: annotation
                })
            });

            if (response.ok) {
                window.claudeViewer.showNotification('{{ t("annotation_saved_successfully") }}', 'success');
                this.closeEditModal();
                this.loadFavorites(); // Reload to show updated annotation
            } else {
                const error = await response.json();
                window.claudeViewer.showNotification('{{ t("failed_to_save_annotation") }}: ' + (error.detail || 'Unknown error'), 'error');
            }
        } catch (error) {
            console.error(FAVORITES_TRANSLATIONS.failed_save_annotation, error);
            window.claudeViewer.showNotification('{{ t("failed_to_save_annotation") }}', 'error');
        } finally {
            // Restore button state
            saveBtn.disabled = false;
            saveBtn.innerHTML = originalText;
        }
    }
}

// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    window.favoritesManager = new FavoritesManager();
});
</script>

<style>
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>
{% endblock %}