{# 
    Reading List Buttons Component
    Include in paper show pages with: {% include '@syndexAcademic/Research/_reading_list_buttons.html.twig' %}
    
    Required variables:
    - researchId: The paper ID
    - researchSlug: The paper slug (for building URLs)
    - researchType: 'arabic', 'english', or 'elastic'
    - paperTitle: Title for caching (optional)
    - paperAuthors: Authors for caching (optional)
    - paperYear: Year for caching (optional)
#}
{% if app.user %}
<div class="reading-list-component" 
     data-research-id="{{ researchId }}"
     data-research-slug="{{ researchSlug|default(researchId) }}"
     data-research-type="{{ researchType }}"
     data-paper-title="{{ paperTitle|default('')|e('html_attr') }}"
     data-paper-authors="{{ paperAuthors|default('')|e('html_attr') }}"
     data-paper-year="{{ paperYear|default('') }}">
    
    {# Quick Status Buttons #}
    <div class="rl-quick-buttons">
        <button class="rl-quick-btn rl-btn-want" data-status="want_to_read" title="{{ 'reading_lists.want_to_read'|trans({}, 'ReadingList') }}">
            <span class="rl-icon">📚</span>
            <span class="rl-label">{{ 'reading_lists.want_to_read'|trans({}, 'ReadingList') }}</span>
        </button>
        <button class="rl-quick-btn rl-btn-reading" data-status="reading" title="{{ 'reading_lists.currently_reading'|trans({}, 'ReadingList') }}">
            <span class="rl-icon">📖</span>
            <span class="rl-label">{{ 'reading_lists.currently_reading'|trans({}, 'ReadingList') }}</span>
        </button>
        <button class="rl-quick-btn rl-btn-read" data-status="read" title="{{ 'reading_lists.read'|trans({}, 'ReadingList') }}">
            <span class="rl-icon">✅</span>
            <span class="rl-label">{{ 'reading_lists.read'|trans({}, 'ReadingList') }}</span>
        </button>
        <button class="rl-quick-btn rl-btn-add" data-action="add-to-list" title="{{ 'reading_lists.add_to_list'|trans({}, 'ReadingList') }}">
            <span class="rl-icon">+</span>
            <span class="rl-label">{{ 'reading_lists.add_to_list'|trans({}, 'ReadingList') }}</span>
        </button>
    </div>
    
    {# Dropdown for custom lists #}
    <div class="rl-dropdown" style="display: none;">
        <div class="rl-dropdown-header">
            <span>{{ 'reading_lists.add_to_list'|trans({}, 'ReadingList') }}</span>
            <button class="rl-dropdown-close">&times;</button>
        </div>
        <div class="rl-dropdown-content">
            <div class="rl-dropdown-loading">{{ 'reading_lists.loading'|trans({}, 'ReadingList') }}...</div>
            <div class="rl-dropdown-lists"></div>
            <div class="rl-dropdown-create">
                <input type="text" class="rl-new-list-input" placeholder="{{ 'reading_lists.new_list_name'|trans({}, 'ReadingList') }}">
                <button class="rl-create-list-btn">{{ 'reading_lists.create_and_add'|trans({}, 'ReadingList') }}</button>
            </div>
        </div>
    </div>
    
    {# Toast notification #}
    <div class="rl-toast" style="display: none;"></div>
</div>

<style>
.reading-list-component {
    margin: 15px 0;
}
.rl-quick-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.rl-quick-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
    color: #555;
}
.rl-quick-btn:hover {
    border-color: #7c3aed;
    color: #7c3aed;
    background: #f8f5ff;
}
.rl-quick-btn.active {
    background: #7c3aed;
    color: #fff;
    border-color: #7c3aed;
}
.rl-quick-btn.active .rl-icon {
    filter: none;
}
.rl-quick-btn .rl-icon {
    font-size: 14px;
}
.rl-btn-want.active { background: #f59e0b; border-color: #f59e0b; }
.rl-btn-reading.active { background: #3b82f6; border-color: #3b82f6; }
.rl-btn-read.active { background: #10b981; border-color: #10b981; }
.rl-btn-add {
    background: #f3e8ff;
    border-color: #d8b4fe;
    color: #7c3aed;
}
.rl-btn-add:hover {
    background: #7c3aed;
    color: #fff;
}
.rl-quick-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Mobile: hide labels, show only icons */
@media (max-width: 600px) {
    .rl-quick-btn .rl-label {
        display: none;
    }
    .rl-quick-btn {
        padding: 10px 12px;
    }
}

/* RTL adjustments */
[dir="rtl"] .rl-quick-buttons {
    flex-direction: row-reverse;
}

/* Dropdown styles */
.rl-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    min-width: 280px;
    z-index: 1000;
}
[dir="rtl"] .rl-dropdown {
    left: auto;
    right: 0;
}
.rl-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 600;
    color: #333;
}
.rl-dropdown-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #666;
    padding: 0;
    line-height: 1;
}
.rl-dropdown-close:hover {
    color: #333;
}
.rl-dropdown-content {
    padding: 8px 0;
    max-height: 300px;
    overflow-y: auto;
}
.rl-dropdown-loading {
    padding: 16px;
    text-align: center;
    color: #666;
}
.rl-dropdown-lists {
    display: none;
}
.rl-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s;
}
.rl-list-item:hover {
    background: #f8f5ff;
}
.rl-list-item.in-list {
    background: #f0fdf4;
}
.rl-list-item.in-list::after {
    content: '✓';
    margin-left: auto;
    color: #10b981;
    font-weight: bold;
}
[dir="rtl"] .rl-list-item.in-list::after {
    margin-left: 0;
    margin-right: auto;
}
.rl-list-icon {
    font-size: 18px;
}
.rl-list-name {
    flex: 1;
    font-size: 14px;
    color: #333;
}
.rl-list-count {
    font-size: 12px;
    color: #999;
}
.rl-dropdown-create {
    border-top: 1px solid #e2e8f0;
    padding: 12px 16px;
    display: flex;
    gap: 8px;
}
.rl-new-list-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
}
.rl-new-list-input:focus {
    outline: none;
    border-color: #7c3aed;
}
.rl-create-list-btn {
    padding: 8px 14px;
    background: #7c3aed;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
}
.rl-create-list-btn:hover {
    background: #6d28d9;
}
.rl-create-list-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Toast notification */
.rl-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a2e;
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 12px;
}
.rl-toast a {
    color: #a78bfa;
    text-decoration: underline;
}
.rl-toast.success {
    background: #065f46;
}
.rl-toast.error {
    background: #991b1b;
}

.reading-list-component {
    position: relative;
}
</style>

<script>
(function() {
    const component = document.querySelector('.reading-list-component');
    if (!component) return;
    
    const researchId = component.dataset.researchId;
    const researchSlug = component.dataset.researchSlug;
    const researchType = component.dataset.researchType;
    const paperTitle = component.dataset.paperTitle;
    const paperAuthors = component.dataset.paperAuthors;
    const paperYear = component.dataset.paperYear;
    
    const buttons = component.querySelectorAll('.rl-quick-btn[data-status]');
    const addBtn = component.querySelector('.rl-btn-add');
    
    // Load current status
    async function loadStatus() {
        try {
            const res = await fetch(`/reading-lists/api/paper-status/${researchType}/${researchId}`);
            if (!res.ok) return;
            const data = await res.json();
            updateUI(data.status);
        } catch (e) {
            console.error('Failed to load reading status:', e);
        }
    }
    
    // Update button states
    function updateUI(status) {
        buttons.forEach(btn => {
            const btnStatus = btn.dataset.status;
            btn.classList.toggle('active', status === btnStatus);
        });
    }
    
    // Set status
    async function setStatus(listType) {
        buttons.forEach(btn => btn.disabled = true);
        
        try {
            const res = await fetch(`/reading-lists/api/paper-status/${researchType}/${researchId}`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    listType: listType,
                    title: paperTitle,
                    authors: paperAuthors,
                    year: paperYear ? parseInt(paperYear) : null,
                    slug: researchSlug
                })
            });
            
            if (res.ok) {
                const data = await res.json();
                updateUI(data.status?.status);
            }
        } catch (e) {
            console.error('Failed to set status:', e);
        } finally {
            buttons.forEach(btn => btn.disabled = false);
        }
    }
    
    // Clear status (clicking active button again)
    async function clearStatus() {
        buttons.forEach(btn => btn.disabled = true);
        
        try {
            await fetch(`/reading-lists/api/paper-status/${researchType}/${researchId}`, {
                method: 'DELETE'
            });
            updateUI(null);
        } catch (e) {
            console.error('Failed to clear status:', e);
        } finally {
            buttons.forEach(btn => btn.disabled = false);
        }
    }
    
    // Event listeners
    buttons.forEach(btn => {
        btn.addEventListener('click', () => {
            const status = btn.dataset.status;
            if (btn.classList.contains('active')) {
                clearStatus();
            } else {
                setStatus(status);
            }
        });
    });
    
    // Add to custom list button
    if (addBtn) {
        addBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            toggleDropdown();
        });
    }
    
    // Dropdown elements
    const dropdown = component.querySelector('.rl-dropdown');
    const dropdownClose = component.querySelector('.rl-dropdown-close');
    const dropdownLoading = component.querySelector('.rl-dropdown-loading');
    const dropdownLists = component.querySelector('.rl-dropdown-lists');
    const newListInput = component.querySelector('.rl-new-list-input');
    const createListBtn = component.querySelector('.rl-create-list-btn');
    const toast = component.querySelector('.rl-toast');
    
    let customLists = [];
    let listsContainingPaper = [];
    
    function toggleDropdown() {
        if (dropdown.style.display === 'none') {
            dropdown.style.display = 'block';
            loadCustomLists();
        } else {
            dropdown.style.display = 'none';
        }
    }
    
    function closeDropdown() {
        dropdown.style.display = 'none';
    }
    
    // Close dropdown when clicking outside
    document.addEventListener('click', (e) => {
        if (!component.contains(e.target)) {
            closeDropdown();
        }
    });
    
    if (dropdownClose) {
        dropdownClose.addEventListener('click', closeDropdown);
    }
    
    async function loadCustomLists() {
        dropdownLoading.style.display = 'block';
        dropdownLists.style.display = 'none';
        
        try {
            // Load lists and check which ones contain this paper
            const [listsRes, statusRes] = await Promise.all([
                fetch('/reading-lists/api/lists'),
                fetch(`/reading-lists/api/paper-status/${researchType}/${researchId}`)
            ]);
            
            const listsData = await listsRes.json();
            const statusData = await statusRes.json();
            
            // Filter to custom lists only (not system lists)
            customLists = [...(listsData.owned || []), ...(listsData.member || [])]
                .filter(l => !l.isSystemList);
            listsContainingPaper = statusData.lists || [];
            
            renderLists();
        } catch (e) {
            console.error('Failed to load lists:', e);
            dropdownLists.innerHTML = '<div style="padding: 16px; color: #666;">Failed to load lists</div>';
        } finally {
            dropdownLoading.style.display = 'none';
            dropdownLists.style.display = 'block';
        }
    }
    
    function renderLists() {
        if (customLists.length === 0) {
            dropdownLists.innerHTML = '<div style="padding: 16px; color: #666; text-align: center;">{{ "reading_lists.no_custom_lists"|trans({}, "ReadingList") }}</div>';
            return;
        }
        
        dropdownLists.innerHTML = customLists.map(list => {
            const inList = listsContainingPaper.some(l => l.id === list.id);
            return `
                <div class="rl-list-item ${inList ? 'in-list' : ''}" data-list-id="${list.id}" data-list-slug="${list.slug}">
                    <span class="rl-list-icon">📋</span>
                    <span class="rl-list-name">${escapeHtml(list.name)}</span>
                    <span class="rl-list-count">${list.itemCount}</span>
                </div>
            `;
        }).join('');
        
        // Add click handlers
        dropdownLists.querySelectorAll('.rl-list-item').forEach(item => {
            item.addEventListener('click', () => {
                const listId = item.dataset.listId;
                const listSlug = item.dataset.listSlug;
                const inList = item.classList.contains('in-list');
                
                if (!inList) {
                    addToList(listId, listSlug);
                } else {
                    showToast('{{ "reading_lists.already_in_list"|trans({}, "ReadingList") }}', 'info');
                }
            });
        });
    }
    
    async function addToList(listId, listSlug) {
        try {
            const res = await fetch(`/reading-lists/api/lists/${listSlug}/items`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    researchType: researchType,
                    researchId: parseInt(researchId),
                    title: paperTitle,
                    authors: paperAuthors,
                    year: paperYear ? parseInt(paperYear) : null,
                    slug: researchSlug
                })
            });
            
            if (res.ok) {
                closeDropdown();
                showToast(
                    '{{ "reading_lists.added_to_list"|trans({}, "ReadingList") }} <a href="/reading-lists/' + listSlug + '">{{ "reading_lists.view_list"|trans({}, "ReadingList") }}</a>',
                    'success'
                );
            } else {
                const data = await res.json();
                showToast(data.error || 'Failed to add', 'error');
            }
        } catch (e) {
            console.error('Failed to add to list:', e);
            showToast('Failed to add to list', 'error');
        }
    }
    
    // Create new list
    if (createListBtn && newListInput) {
        createListBtn.addEventListener('click', () => createNewListAndAdd());
        newListInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') createNewListAndAdd();
        });
    }
    
    async function createNewListAndAdd() {
        const name = newListInput.value.trim();
        if (!name) return;
        
        createListBtn.disabled = true;
        
        try {
            // Create the list
            const createRes = await fetch('/reading-lists/api/lists', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ name: name, visibility: 'private' })
            });
            
            if (!createRes.ok) {
                throw new Error('Failed to create list');
            }
            
            const createData = await createRes.json();
            const newList = createData.list;
            
            // Add paper to the new list
            await addToList(newList.id, newList.slug);
            newListInput.value = '';
        } catch (e) {
            console.error('Failed to create list:', e);
            showToast('Failed to create list', 'error');
        } finally {
            createListBtn.disabled = false;
        }
    }
    
    function showToast(message, type = 'info') {
        toast.innerHTML = message;
        toast.className = 'rl-toast ' + type;
        toast.style.display = 'flex';
        
        setTimeout(() => {
            toast.style.display = 'none';
        }, 4000);
    }
    
    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
    
    // Load initial status
    loadStatus();
})();
</script>
{% endif %}