{% extends 'base.html.twig' %}

{% block title %}{{ 'reading_lists.title'|trans({}, 'ReadingList') }} — Shamra Academia{% endblock %}

{% block og_title %}{{ 'reading_lists.title'|trans({}, 'ReadingList') }} — Shamra Academia{% endblock %}
{% block og_description %}{{ 'reading_lists.page_description'|trans({}, 'ReadingList') }}{% endblock %}
{% block metaDescription %}{{ 'reading_lists.page_description'|trans({}, 'ReadingList') }}{% endblock %}
{% block metaKeywords %}reading lists, قوائم القراءة, academic papers, organize research, Shamra Academia{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        /* Hide Vue components until hydrated */
        [v-cloak] { display: none !important; }

        :root {
            --rl-primary: #7c3aed;
            --rl-primary-light: #8b5cf6;
            --rl-primary-dark: #6d28d9;
            --rl-success: #10b981;
            --rl-warning: #f59e0b;
            --rl-bg: #f8f5ff;
            --rl-border: #e9e0ff;
        }

        .rl-page {
            max-width: 1100px;
            margin: 30px auto;
            padding: 0 20px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .rl-hero {
            text-align: center;
            margin-bottom: 36px;
        }
        .rl-hero h1 {
            font-size: 2.2rem;
            font-weight: 700;
            color: #1a1a2e;
            margin-bottom: 12px;
        }
        .rl-hero p {
            color: #555;
            font-size: 1.2rem;
        }

        /* Stats bar */
        .rl-stats {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin-bottom: 32px;
            padding: 20px;
            background: linear-gradient(135deg, #f8f5ff, #eff6ff);
            border-radius: 12px;
        }
        .rl-stat {
            text-align: center;
        }
        .rl-stat-value {
            font-size: 2rem;
            font-weight: 700;
            color: var(--rl-primary);
        }
        .rl-stat-label {
            font-size: 0.9rem;
            color: #666;
        }

        /* List grid */
        .rl-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }

        .rl-card {
            background: #fff;
            border-radius: 12px;
            border: 1px solid var(--rl-border);
            padding: 20px;
            transition: all 0.2s;
            cursor: pointer;
        }
        .rl-card:hover {
            box-shadow: 0 8px 24px rgba(124, 58, 237, 0.12);
            transform: translateY(-2px);
        }
        .rl-card-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }
        .rl-card-icon {
            width: 48px;
            height: 48px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }
        .rl-card-icon.want { background: #fef3c7; }
        .rl-card-icon.reading { background: #dbeafe; }
        .rl-card-icon.read { background: #d1fae5; }
        .rl-card-icon.custom { background: #f3e8ff; }

        .rl-card-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #1a1a2e;
            margin: 0;
        }
        .rl-card-meta {
            display: flex;
            gap: 16px;
            color: #666;
            font-size: 0.9rem;
        }
        .rl-visibility {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 0.8rem;
            padding: 2px 8px;
            border-radius: 12px;
            background: #f1f5f9;
        }

        /* Navigation */
        .rl-nav {
            display: flex;
            justify-content: center;
            gap: 16px;
            margin-bottom: 32px;
        }
        .rl-nav a {
            padding: 10px 20px;
            border-radius: 8px;
            text-decoration: none;
            color: #555;
            background: #f1f5f9;
            transition: all 0.2s;
        }
        .rl-nav a:hover {
            background: #e2e8f0;
        }
        .rl-nav a.active {
            background: var(--rl-primary);
            color: #fff;
        }

        /* Create button */
        .rl-create-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--rl-primary);
            color: #fff;
            padding: 12px 24px;
            border-radius: 8px;
            font-weight: 600;
            border: none;
            cursor: pointer;
            transition: background 0.2s;
        }
        .rl-create-btn:hover {
            background: var(--rl-primary-dark);
        }

        /* Loading */
        .rl-loading {
            text-align: center;
            padding: 60px;
            color: #666;
        }
        .rl-loading i {
            font-size: 2rem;
            color: var(--rl-primary);
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Section headers */
        .rl-section {
            margin-bottom: 32px;
        }
        .rl-section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        .rl-section-title {
            font-size: 1.3rem;
            font-weight: 600;
            color: #1a1a2e;
        }

        /* RTL support */
        [dir="rtl"] .rl-card-meta {
            flex-direction: row-reverse;
        }
        [dir="rtl"] .rl-section-header {
            flex-direction: row-reverse;
        }
    </style>
{% endblock %}

{% block body %}
{# Static loading shown before Vue.js loads #}
<div class="rl-page rl-static-loading" id="static-loading">
    <div class="rl-hero">
        <h1>📚 {{ 'reading_lists.title'|trans({}, 'ReadingList') }}</h1>
        <p>{{ 'reading_lists.subtitle'|trans({}, 'ReadingList') }}</p>
    </div>
    <div class="rl-loading">
        <i class="fas fa-spinner"></i>
        <p>{{ 'reading_lists.loading'|trans({}, 'ReadingList') }}</p>
    </div>
</div>

{# Vue app - hidden until Vue initializes #}
<div class="rl-page" id="reading-lists-app" v-cloak>
    <div class="rl-hero">
        <h1>📚 {{ 'reading_lists.title'|trans({}, 'ReadingList') }}</h1>
        <p>{{ 'reading_lists.subtitle'|trans({}, 'ReadingList') }}</p>
    </div>

    <div class="rl-nav">
        <a href="{{ path('reading_list_index') }}" class="active">{{ 'reading_lists.my_lists'|trans({}, 'ReadingList') }}</a>
        <a href="{{ path('reading_list_discover') }}">{{ 'reading_lists.discover'|trans({}, 'ReadingList') }}</a>
    </div>

    <div class="rl-loading" v-if="loading">
        <i class="fas fa-spinner"></i>
        <p>{{ 'reading_lists.loading'|trans({}, 'ReadingList') }}</p>
    </div>

    <div v-else>
        <!-- Stats -->
        <div class="rl-stats">
            <div class="rl-stat">
                <div class="rl-stat-value">${ stats.read || 0 }</div>
                <div class="rl-stat-label">{{ 'reading_lists.papers_read'|trans({}, 'ReadingList') }}</div>
            </div>
            <div class="rl-stat">
                <div class="rl-stat-value">${ stats.reading || 0 }</div>
                <div class="rl-stat-label">{{ 'reading_lists.papers_reading'|trans({}, 'ReadingList') }}</div>
            </div>
            <div class="rl-stat">
                <div class="rl-stat-value">${ stats.to_read || 0 }</div>
                <div class="rl-stat-label">{{ 'reading_lists.papers_to_read'|trans({}, 'ReadingList') }}</div>
            </div>
            <div class="rl-stat" v-if="stats.read_this_month !== undefined">
                <div class="rl-stat-value">${ stats.read_this_month }</div>
                <div class="rl-stat-label">{{ 'reading_lists.read_this_month'|trans({}, 'ReadingList') }}</div>
            </div>
        </div>

        <!-- System Lists -->
        <div class="rl-section">
            <div class="rl-grid">
                <div class="rl-card" v-for="list in systemLists" :key="list.id" @click="openList(list)">
                    <div class="rl-card-header">
                        <div class="rl-card-icon" :class="getListTypeClass(list)">
                            ${ getListIcon(list) }
                        </div>
                        <div>
                            <h3 class="rl-card-title">${ getListName(list) }</h3>
                        </div>
                    </div>
                    <div class="rl-card-meta">
                        <span><i class="far fa-file-alt"></i> ${ list.itemCount } {{ 'reading_lists.papers'|trans({}, 'ReadingList') }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Custom Lists -->
        <div class="rl-section">
            <div class="rl-section-header">
                <h2 class="rl-section-title">{{ 'reading_lists.custom_lists'|trans({}, 'ReadingList') }}</h2>
                <button class="rl-create-btn" @click="showCreateModal = true">
                    <i class="fas fa-plus"></i>
                    {{ 'reading_lists.create_list'|trans({}, 'ReadingList') }}
                </button>
            </div>
            
            <div class="rl-grid" v-if="customLists.length > 0">
                <div class="rl-card" v-for="list in customLists" :key="list.id" @click="openList(list)">
                    <div class="rl-card-header">
                        <div class="rl-card-icon custom" :style="{ background: list.coverColor || '#f3e8ff' }">
                            📋
                        </div>
                        <div>
                            <h3 class="rl-card-title">${ list.name }</h3>
                            <span class="rl-visibility">
                                <i :class="getVisibilityIcon(list.visibility)"></i>
                                ${ getVisibilityLabel(list.visibility) }
                            </span>
                        </div>
                    </div>
                    <div class="rl-card-meta">
                        <span><i class="far fa-file-alt"></i> ${ list.itemCount } {{ 'reading_lists.papers'|trans({}, 'ReadingList') }}</span>
                        <span v-if="list.visibility === 'public'"><i class="far fa-user"></i> ${ list.followerCount } {{ 'reading_lists.followers'|trans({}, 'ReadingList') }}</span>
                    </div>
                </div>
            </div>
            <p v-else style="color: #666; text-align: center; padding: 20px;">
                {{ 'reading_lists.no_lists'|trans({}, 'ReadingList') }}
            </p>
        </div>
    </div>

    <!-- Create Modal (simplified for now) -->
    <div class="modal" v-cloak v-if="showCreateModal" @click.self="showCreateModal = false" style="position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000;">
        <div style="background: #fff; border-radius: 12px; padding: 24px; width: 90%; max-width: 400px;">
            <h3 style="margin-bottom: 16px;">{{ 'reading_lists.create_list'|trans({}, 'ReadingList') }}</h3>
            <input type="text" v-model="newListName" placeholder="{{ 'reading_lists.list_name'|trans({}, 'ReadingList') }}" style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 12px;">
            <textarea v-model="newListDescription" placeholder="{{ 'reading_lists.list_description'|trans({}, 'ReadingList') }}" style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 12px; min-height: 80px;"></textarea>
            <select v-model="newListVisibility" style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 16px;">
                <option value="private">{{ 'reading_lists.visibility_private'|trans({}, 'ReadingList') }}</option>
                <option value="team">{{ 'reading_lists.visibility_team'|trans({}, 'ReadingList') }}</option>
                <option value="public">{{ 'reading_lists.visibility_public'|trans({}, 'ReadingList') }}</option>
            </select>
            <div style="display: flex; gap: 12px; justify-content: flex-end;">
                <button @click="showCreateModal = false" style="padding: 10px 20px; border: 1px solid #ddd; border-radius: 8px; background: #fff; cursor: pointer;">{{ 'reading_lists.cancel'|trans({}, 'ReadingList') }}</button>
                <button @click="createList" :disabled="!newListName.trim()" class="rl-create-btn">{{ 'reading_lists.create_list'|trans({}, 'ReadingList') }}</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
    <script>
        const { createApp } = Vue;

        createApp({
            delimiters: ['${', '}'],
            data() {
                return {
                    loading: true,
                    lists: [],
                    stats: {},
                    showCreateModal: false,
                    newListName: '',
                    newListDescription: '',
                    newListVisibility: 'private',
                };
            },
            computed: {
                systemLists() {
                    return this.lists.filter(l => l.isSystemList);
                },
                customLists() {
                    return this.lists.filter(l => !l.isSystemList);
                }
            },
            async mounted() {
                // Hide static loading shown before Vue initialized
                const staticLoading = document.getElementById('static-loading');
                if (staticLoading) staticLoading.style.display = 'none';
                
                await this.loadLists();
            },
            methods: {
                async loadLists() {
                    try {
                        const res = await fetch('/reading-lists/api/lists');
                        const data = await res.json();
                        this.lists = [...data.owned, ...data.member];
                        this.stats = data.stats || {};
                    } catch (e) {
                        console.error('Failed to load lists:', e);
                    } finally {
                        this.loading = false;
                    }
                },
                getListTypeClass(list) {
                    if (list.listType === 'want_to_read') return 'want';
                    if (list.listType === 'reading') return 'reading';
                    if (list.listType === 'read') return 'read';
                    return 'custom';
                },
                getListIcon(list) {
                    if (list.listType === 'want_to_read') return '📚';
                    if (list.listType === 'reading') return '📖';
                    if (list.listType === 'read') return '✅';
                    return '📋';
                },
                getListName(list) {
                    const names = {
                        'want_to_read': '{{ 'reading_lists.want_to_read'|trans({}, 'ReadingList') }}',
                        'reading': '{{ 'reading_lists.currently_reading'|trans({}, 'ReadingList') }}',
                        'read': '{{ 'reading_lists.read'|trans({}, 'ReadingList') }}'
                    };
                    return names[list.listType] || list.name;
                },
                getVisibilityIcon(v) {
                    if (v === 'public') return 'fas fa-globe';
                    if (v === 'team') return 'fas fa-users';
                    return 'fas fa-lock';
                },
                getVisibilityLabel(v) {
                    const labels = {
                        'private': '{{ 'reading_lists.visibility_private'|trans({}, 'ReadingList')|split(' —')[0] }}',
                        'team': '{{ 'reading_lists.visibility_team'|trans({}, 'ReadingList')|split(' —')[0] }}',
                        'public': '{{ 'reading_lists.visibility_public'|trans({}, 'ReadingList')|split(' —')[0] }}'
                    };
                    return labels[v] || v;
                },
                openList(list) {
                    window.location.href = '/reading-lists/' + list.slug;
                },
                async createList() {
                    if (!this.newListName.trim()) return;
                    
                    try {
                        const res = await fetch('/reading-lists/api/lists', {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify({
                                name: this.newListName,
                                description: this.newListDescription,
                                visibility: this.newListVisibility
                            })
                        });
                        const data = await res.json();
                        if (data.success) {
                            this.lists.push(data.list);
                            this.showCreateModal = false;
                            this.newListName = '';
                            this.newListDescription = '';
                            this.newListVisibility = 'private';
                        }
                    } catch (e) {
                        console.error('Failed to create list:', e);
                    }
                }
            }
        }).mount('#reading-lists-app');
    </script>
{% endblock %}