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

{% block title %}{{ 'references.title'|trans }} - Shamra Academia{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --ref-primary: #6366f1;
            --ref-primary-light: #818cf8;
            --ref-primary-dark: #4f46e5;
            --ref-secondary: #1e293b;
            --ref-bg: #f8fafc;
            --ref-card-bg: #ffffff;
            --ref-border: #e2e8f0;
            --ref-text: #1e293b;
            --ref-text-muted: #64748b;
            --ref-text-light: #94a3b8;
            --ref-success: #10b981;
            --ref-danger: #ef4444;
            --ref-warning: #f59e0b;
            --ref-hover: #f1f5f9;
            --ref-accent-blue: #3b82f6;
            --ref-accent-purple: #8b5cf6;
            --ref-accent-pink: #ec4899;
            --ref-accent-orange: #f97316;
            --ref-accent-teal: #14b8a6;
            --ref-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
            --ref-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
            --ref-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
            --ref-radius: 12px;
            --ref-radius-sm: 8px;
        }

        html[dir="rtl"] { font-family: 'Tajawal', sans-serif; }
        html[dir="ltr"] { font-family: 'Inter', sans-serif; }

        body { background-color: var(--ref-bg); }
        [v-cloak] { display: none !important; }

        .references-container {
            display: flex;
            min-height: calc(100vh - 56px);
        }

        /* ==================== SPLIT VIEW LAYOUT ==================== */
        .ref-list-panel {
            width: 420px;
            background: var(--ref-card-bg);
            border-inline-end: 1px solid var(--ref-border);
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            height: calc(100vh - 56px);
            position: sticky;
            top: 56px;
        }

        .ref-list-panel.expanded {
            flex: 1;
        }

        .list-panel-header {
            padding: 16px 20px;
            background: linear-gradient(135deg, #f5f3ff, #eef2ff);
            border-bottom: 1px solid var(--ref-border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .list-panel-header h1 {
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--ref-primary-dark);
            margin: 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .list-panel-search {
            padding: 12px 16px;
            border-bottom: 1px solid var(--ref-border);
        }

        .list-panel-search .search-input {
            width: 100%;
            padding: 10px 14px 10px 38px;
            border: 1px solid var(--ref-border);
            border-radius: var(--ref-radius-sm);
            font-size: 0.88rem;
            background: var(--ref-bg);
            transition: all 0.2s;
        }

        .list-panel-search .search-input:focus {
            outline: none;
            border-color: var(--ref-primary);
            background: white;
            box-shadow: 0 0 0 3px rgba(99,102,241,0.08);
        }

        .list-panel-search .search-icon {
            position: absolute;
            inset-inline-start: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--ref-text-light);
            font-size: 0.85rem;
        }

        .list-panel-filters {
            display: flex;
            gap: 6px;
            padding: 10px 16px;
            border-bottom: 1px solid var(--ref-border);
            flex-wrap: wrap;
            background: var(--ref-bg);
        }

        .list-filter-pill {
            padding: 5px 12px;
            border: 1px solid var(--ref-border);
            border-radius: 16px;
            background: white;
            font-size: 0.78rem;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 4px;
            white-space: nowrap;
        }

        .list-filter-pill:hover {
            border-color: var(--ref-primary);
            color: var(--ref-primary);
        }

        .list-filter-pill.active {
            background: var(--ref-primary);
            border-color: var(--ref-primary);
            color: white;
        }

        .ref-items-scroll {
            flex: 1;
            overflow-y: auto;
        }

        .ref-item {
            padding: 14px 20px;
            border-bottom: 1px solid var(--ref-border);
            cursor: pointer;
            transition: all 0.15s;
        }

        .ref-item:hover {
            background: var(--ref-hover);
        }

        .ref-item.active {
            background: #eef2ff;
            border-inline-start: 3px solid var(--ref-primary);
        }

        .ref-item-title {
            font-size: 0.92rem;
            font-weight: 600;
            color: var(--ref-text);
            margin-bottom: 4px;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .ref-item-meta {
            font-size: 0.78rem;
            color: var(--ref-text-muted);
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 6px;
        }

        .ref-item-tags {
            display: flex;
            gap: 4px;
            flex-wrap: wrap;
        }

        .ref-item-tags .ref-tag {
            font-size: 0.65rem;
            padding: 2px 6px;
        }

        .list-panel-footer {
            padding: 10px 16px;
            border-top: 1px solid var(--ref-border);
            background: var(--ref-bg);
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.78rem;
            color: var(--ref-text-muted);
        }

        /* ==================== DETAIL PANEL ==================== */
        .ref-detail-panel {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0;
            height: calc(100vh - 56px);
            position: sticky;
            top: 56px;
        }

        .detail-empty {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--ref-text-light);
            padding: 2rem;
            text-align: center;
        }

        .detail-empty i {
            font-size: 3rem;
            margin-bottom: 1rem;
            color: var(--ref-border);
        }

        .detail-empty p {
            font-size: 0.95rem;
            max-width: 300px;
        }

        .detail-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            padding: 16px 24px;
            border-bottom: 1px solid var(--ref-border);
            background: var(--ref-card-bg);
            gap: 16px;
        }

        .detail-header-info {
            flex: 1;
            min-width: 0;
        }

        .detail-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--ref-text);
            margin: 0 0 6px;
            line-height: 1.4;
        }

        .detail-meta {
            font-size: 0.82rem;
            color: var(--ref-text-muted);
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .detail-actions {
            display: flex;
            gap: 6px;
            flex-shrink: 0;
        }

        .detail-actions .ref-action-btn {
            width: 34px;
            height: 34px;
        }

        .detail-actions .ref-action-btn.ai-btn {
            width: auto;
            height: auto;
            min-width: 160px;
            min-height: 36px;
            justify-content: center;
        }

        /* Translate dropdown */
        .translate-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 100;
            background: #fff;
            border: 1px solid var(--ref-border);
            border-radius: var(--ref-radius-sm);
            box-shadow: 0 4px 16px rgba(0,0,0,0.12);
            min-width: 160px;
            padding: 6px 0;
            margin-top: 4px;
        }
        .translate-dropdown-title {
            padding: 4px 14px;
            font-size: 0.72rem;
            color: var(--ref-text-light);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .translate-dropdown-item {
            display: block;
            width: 100%;
            text-align: start;
            padding: 7px 14px;
            border: none;
            background: none;
            font-size: 0.85rem;
            cursor: pointer;
            color: var(--ref-text);
        }
        .translate-dropdown-item:hover {
            background: var(--ref-hover);
        }

        /* Detail Tabs */
        .detail-tabs {
            display: flex;
            border-bottom: 2px solid var(--ref-border);
            background: var(--ref-card-bg);
            padding: 0 24px;
        }

        .detail-tab {
            padding: 12px 20px;
            border: none;
            background: none;
            font-size: 0.88rem;
            font-weight: 500;
            color: var(--ref-text-muted);
            cursor: pointer;
            position: relative;
            transition: color 0.2s;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .detail-tab:hover {
            color: var(--ref-primary);
        }

        .detail-tab.active {
            color: var(--ref-primary);
            font-weight: 600;
        }

        .detail-tab.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--ref-primary);
            border-radius: 1px;
        }

        /* Detail Tab Content */
        .detail-tab-content {
            flex: 1;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .detail-tab-pane {
            flex: 1;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

        /* Summary Tab */
        .summary-tab-content {
            padding: 16px 24px;
            display: flex;
            flex-direction: column;
            height: 100%;
            min-height: 0;
        }

        .summary-tab-empty {
            text-align: center;
            padding: 3rem 2rem;
        }

        .summary-tab-empty i {
            font-size: 2.5rem;
            color: var(--ref-border);
            margin-bottom: 1rem;
        }

        .summary-tab-editor {
            border: 1px solid var(--ref-border);
            border-radius: var(--ref-radius-sm);
            overflow: hidden;
            flex: 1;
            min-height: 300px;
        }

        .summary-tab-editor .tox.tox-tinymce {
            border: none !important;
        }

        .summary-tab-actions {
            display: flex;
            gap: 8px;
            padding-top: 12px;
            flex-wrap: wrap;
            flex-shrink: 0;
        }

        .panel-editor-toolbar {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
            min-height: 24px;
        }

        .unsaved-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 0.78rem;
            font-weight: 500;
            color: var(--ref-warning);
            animation: pulse-badge 1.5s ease-in-out infinite;
        }

        .unsaved-badge i {
            font-size: 0.5rem;
        }

        @keyframes pulse-badge {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        .saved-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 0.78rem;
            font-weight: 500;
            color: var(--ref-success);
        }

        /* Preview Tab */
        .preview-tab-content {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .preview-tab-content iframe,
        .preview-tab-content canvas {
            flex: 1;
            width: 100%;
            border: none;
        }

        .preview-no-file {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--ref-text-light);
            padding: 2rem;
            text-align: center;
        }

        .preview-no-file i {
            font-size: 3rem;
            margin-bottom: 1rem;
            color: var(--ref-border);
        }

        .docx-preview {
            padding: 24px;
            font-size: 0.95rem;
            line-height: 1.7;
        }

        .docx-preview h1, .docx-preview h2, .docx-preview h3 {
            color: var(--ref-text);
            margin: 16px 0 8px;
        }

        .docx-preview p {
            margin: 0 0 8px;
        }

        /* ==================== UPLOAD BUTTON ==================== */
        .upload-btn-compact {
            padding: 8px 18px;
            background: var(--ref-primary);
            color: white;
            border: none;
            border-radius: var(--ref-radius-sm);
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
            white-space: nowrap;
        }

        .upload-btn-compact:hover {
            background: var(--ref-primary-dark);
        }

        /* ==================== OLD TOOLBAR (kept for view toggle) ==================== */
        .ref-toolbar {
            display: none; /* hidden - replaced by list panel header/filters */
        }

        .ref-toolbar-compat {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 16px 24px;
            background: var(--ref-card-bg);
            border-bottom: 1px solid var(--ref-border);
            flex-wrap: wrap;
        }

        .search-box {
            flex: 1;
            min-width: 200px;
            max-width: 400px;
            position: relative;
        }

        .search-input {
            width: 100%;
            padding: 12px 16px 12px 44px;
            border: 2px solid var(--ref-border);
            border-radius: var(--ref-radius);
            font-size: 0.95rem;
            background: var(--ref-bg);
            transition: all 0.2s;
        }

        .search-input:focus {
            outline: none;
            border-color: var(--ref-primary);
            background: white;
            box-shadow: 0 0 0 4px rgba(99,102,241,0.1);
        }

        .search-icon {
            position: absolute;
            inset-inline-start: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--ref-text-light);
        }

        /* Quick Filters */
        .quick-filters {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .quick-filter {
            padding: 8px 16px;
            border: 1px solid var(--ref-border);
            border-radius: 20px;
            background: white;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .quick-filter:hover {
            border-color: var(--ref-primary);
            color: var(--ref-primary);
        }

        .quick-filter.active {
            background: var(--ref-primary);
            border-color: var(--ref-primary);
            color: white;
        }

        /* View Toggle & Actions */
        .toolbar-actions {
            display: flex;
            gap: 8px;
            margin-inline-start: auto;
        }

        .view-toggle {
            display: flex;
            border: 1px solid var(--ref-border);
            border-radius: var(--ref-radius-sm);
            overflow: hidden;
        }

        .view-btn {
            padding: 10px 14px;
            border: none;
            background: white;
            cursor: pointer;
            color: var(--ref-text-muted);
            transition: all 0.2s;
        }

        .view-btn:hover { background: var(--ref-hover); }
        .view-btn.active {
            background: var(--ref-primary);
            color: white;
        }

        .toolbar-btn {
            padding: 10px 16px;
            border: 1px solid var(--ref-border);
            border-radius: var(--ref-radius-sm);
            background: white;
            font-size: 0.85rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
        }

        .toolbar-btn:hover { background: var(--ref-hover); }

        .toolbar-btn.primary {
            background: var(--ref-primary);
            border-color: var(--ref-primary);
            color: white;
        }

        .toolbar-btn.primary:hover { background: var(--ref-primary-dark); }

        .toolbar-btn.danger {
            color: var(--ref-danger);
            border-color: var(--ref-danger);
        }

        .toolbar-btn.danger:hover {
            background: var(--ref-danger);
            color: white;
        }

        /* ==================== REFERENCE GRID/LIST ==================== */
        .ref-content-area {
            flex: 1;
            overflow-y: auto;
            padding: 24px;
        }

        /* Grid View */
        .ref-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }

        .ref-card {
            background: var(--ref-card-bg);
            border: 1px solid var(--ref-border);
            border-radius: var(--ref-radius);
            overflow: hidden;
            transition: all 0.3s;
            cursor: pointer;
            position: relative;
        }

        .ref-card:hover {
            box-shadow: var(--ref-shadow-lg);
            transform: translateY(-2px);
            border-color: var(--ref-primary-light);
        }

        .ref-card.selected {
            border-color: var(--ref-primary);
            box-shadow: 0 0 0 3px rgba(99,102,241,0.2);
        }

        .ref-type-badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }

        .ref-type-badge.journal { background: #dbeafe; color: #1d4ed8; }
        .ref-type-badge.book { background: #f3e8ff; color: #6d28d9; }
        .ref-type-badge.conference { background: #fed7aa; color: #c2410c; }
        .ref-type-badge.thesis { background: #d1fae5; color: #047857; }
        .ref-type-badge.preprint { background: #fce7f3; color: #be185d; }
        .ref-type-badge.report { background: #e2e8f0; color: #374151; }

        .ref-card-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            padding: 16px 16px 0 16px;
        }

        .ref-card-checkbox {
            width: 24px;
            height: 24px;
            border: 2px solid var(--ref-border);
            border-radius: 6px;
            background: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            flex-shrink: 0;
            margin-inline-start: 8px;
        }

        .ref-card-checkbox:hover,
        .ref-card.selected .ref-card-checkbox {
            background: var(--ref-primary);
            border-color: var(--ref-primary);
            color: white;
        }

        .ref-card-body {
            padding: 8px 16px 16px 16px;
        }

        .ref-card-title {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--ref-text);
            margin-bottom: 8px;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            cursor: pointer;
        }

        .ref-card-title:hover {
            color: var(--ref-primary);
        }

        .ref-card-authors {
            font-size: 0.85rem;
            color: var(--ref-text-muted);
            margin-bottom: 12px;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .ref-card-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            font-size: 0.8rem;
            color: var(--ref-text-light);
        }

        .ref-card-meta-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .ref-card-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            background: var(--ref-bg);
            border-top: 1px solid var(--ref-border);
        }

        .ref-card-tags {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }

        .ref-tag {
            padding: 3px 8px;
            background: white;
            border-radius: 4px;
            font-size: 0.7rem;
            color: var(--ref-text-muted);
            border: 1px solid var(--ref-border);
        }

        .ref-tag.warning {
            background: #fef3c7;
            color: #92400e;
            border-color: #fcd34d;
            cursor: pointer;
        }

        .ref-tag.warning:hover {
            background: #fde68a;
        }

        .ref-tag.success {
            background: #d1fae5;
            color: #065f46;
            border-color: #6ee7b7;
        }

        .ref-tag.processing {
            background: #e0e7ff;
            color: #3730a3;
            border-color: #a5b4fc;
            animation: pulse-subtle 2s infinite;
        }

        @keyframes pulse-subtle {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.6; }
        }

        .ref-card-actions {
            display: flex;
            gap: 4px;
        }

        .ref-action-btn {
            width: 32px;
            height: 32px;
            border: none;
            border-radius: var(--ref-radius-sm);
            background: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            color: var(--ref-text-muted);
            border: 1px solid var(--ref-border);
        }

        .ref-action-btn:hover {
            background: var(--ref-primary);
            border-color: var(--ref-primary);
            color: white;
        }

        .ref-action-btn.danger:hover {
            background: var(--ref-danger);
            border-color: var(--ref-danger);
        }

        /* List View */
        .ref-list .ref-card {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 16px;
        }

        .ref-list .ref-card-top {
            padding: 0;
            flex-shrink: 0;
        }

        .ref-list .ref-type-badge {
            display: none;
        }

        .ref-list .ref-card-checkbox {
            margin-inline-start: 0;
            margin-inline-end: 8px;
        }

        .ref-list .ref-card-body {
            flex: 1;
            padding: 0;
            min-width: 0;
        }

        .ref-list .ref-card-title {
            -webkit-line-clamp: 1;
            margin-bottom: 4px;
        }

        .ref-list .ref-card-footer {
            background: transparent;
            border: none;
            padding: 0;
            flex-shrink: 0;
        }

        .ref-list .ref-card-tags { display: none; }

        /* RTL support */
        .ref-card.rtl {
            direction: rtl;
            text-align: right;
        }

        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 80px 20px;
        }

        .empty-icon {
            width: 120px;
            height: 120px;
            background: linear-gradient(135deg, var(--ref-bg), #e2e8f0);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 24px;
        }

        .empty-icon i {
            font-size: 3rem;
            color: var(--ref-text-light);
        }

        .empty-title {
            font-size: 1.4rem;
            font-weight: 600;
            color: var(--ref-text);
            margin-bottom: 8px;
        }

        .empty-text {
            color: var(--ref-text-muted);
            margin-bottom: 24px;
            max-width: 400px;
            margin-inline: auto;
        }

        /* Loading */
        .loading-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 80px 20px;
        }

        .spinner {
            width: 40px;
            height: 40px;
            border: 3px solid var(--ref-border);
            border-top-color: var(--ref-primary);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin { to { transform: rotate(360deg); } }

        /* ==================== MODALS ==================== */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(15,23,42,0.6);
            backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2000;
            animation: fadeIn 0.2s;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .modal-content {
            background: var(--ref-card-bg);
            border-radius: var(--ref-radius);
            max-width: 700px;
            width: 95%;
            max-height: 90vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            animation: slideUp 0.3s;
            box-shadow: var(--ref-shadow-lg);
        }

        @keyframes slideUp {
            from { opacity: 0; transform: translateY(20px) scale(0.98); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        .modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 24px;
            border-bottom: 1px solid var(--ref-border);
        }

        .modal-title {
            font-size: 1.2rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .modal-title i { color: var(--ref-primary); }

        .modal-close {
            width: 36px;
            height: 36px;
            border: none;
            background: var(--ref-bg);
            font-size: 1.2rem;
            cursor: pointer;
            border-radius: var(--ref-radius-sm);
            color: var(--ref-text-muted);
            transition: all 0.2s;
        }

        .modal-close:hover {
            background: var(--ref-danger);
            color: white;
        }

        .modal-body {
            flex: 1;
            overflow-y: auto;
            padding: 24px;
        }

        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            padding: 16px 24px;
            border-top: 1px solid var(--ref-border);
            background: var(--ref-bg);
        }

        /* Form Styles */
        .form-group { margin-bottom: 18px; }

        .form-label {
            display: block;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--ref-text);
            margin-bottom: 6px;
        }

        .form-input, .form-select, .form-textarea {
            width: 100%;
            padding: 12px 14px;
            border: 2px solid var(--ref-border);
            border-radius: var(--ref-radius-sm);
            font-size: 0.95rem;
            transition: all 0.2s;
            background: white;
        }

        .form-input:focus, .form-select:focus, .form-textarea:focus {
            outline: none;
            border-color: var(--ref-primary);
            box-shadow: 0 0 0 4px rgba(99,102,241,0.1);
        }

        .form-textarea { min-height: 100px; resize: vertical; }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        .form-row-3 {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 15px;
        }

        /* BibTeX Import Section */
        .bibtex-section {
            margin-bottom: 20px;
            border: 1px solid var(--ref-border);
            border-radius: var(--ref-radius-sm);
            overflow: hidden;
            background: var(--ref-card-bg);
        }

        .bibtex-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            cursor: pointer;
            background: linear-gradient(135deg, rgba(99,102,241,0.05), rgba(139,92,246,0.05));
            border-bottom: 1px solid transparent;
            transition: all 0.2s;
            font-weight: 500;
            color: var(--ref-text);
        }

        .bibtex-header:hover {
            background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.1));
        }

        .bibtex-header i.fa-code {
            color: var(--ref-primary);
        }

        .bibtex-toggle {
            margin-inline-start: auto;
            color: var(--ref-text-muted);
            transition: transform 0.3s;
        }

        .bibtex-toggle.rotated {
            transform: rotate(180deg);
        }

        .bibtex-content {
            padding: 16px;
            border-top: 1px solid var(--ref-border);
            background: var(--ref-bg);
        }

        .bibtex-textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--ref-border);
            border-radius: var(--ref-radius-sm);
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
            font-size: 0.85rem;
            line-height: 1.5;
            resize: vertical;
            background: var(--ref-card-bg);
            color: var(--ref-text);
            transition: border-color 0.2s;
        }

        .bibtex-textarea:focus {
            outline: none;
            border-color: var(--ref-primary);
            box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
        }

        .bibtex-textarea::placeholder {
            color: var(--ref-text-light);
        }

        .bibtex-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            margin-top: 12px;
        }

        .btn-sm {
            padding: 8px 14px;
            font-size: 0.85rem;
        }

        .bibtex-error {
            margin-top: 12px;
            padding: 10px 14px;
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.3);
            border-radius: var(--ref-radius-sm);
            color: var(--ref-danger);
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .bibtex-success {
            margin-top: 12px;
            padding: 10px 14px;
            background: rgba(16, 185, 129, 0.1);
            border: 1px solid rgba(16, 185, 129, 0.3);
            border-radius: var(--ref-radius-sm);
            color: var(--ref-success);
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* Upload Zone */
        .upload-zone {
            border: 2px dashed var(--ref-border);
            border-radius: var(--ref-radius);
            padding: 48px;
            text-align: center;
            transition: all 0.3s;
            cursor: pointer;
            margin-bottom: 24px;
            background: var(--ref-bg);
        }

        .upload-zone:hover,
        .upload-zone.drag-over {
            border-color: var(--ref-primary);
            background: rgba(99,102,241,0.05);
        }

        /* Edit modal file upload */
        .edit-file-upload-section {
            background: #fffbeb;
            border: 1px solid #fcd34d;
            border-radius: var(--ref-radius);
            padding: 16px;
            margin-bottom: 20px;
        }

        .edit-summary-section {
            margin-top: 20px;
        }

        .edit-summary-preview {
            background: var(--ref-bg-secondary, #f9fafb);
            border: 1px solid var(--ref-border);
            border-radius: var(--ref-radius-sm);
            padding: 16px;
            max-height: 300px;
            overflow-y: auto;
            font-size: 0.9rem;
            line-height: 1.7;
            color: var(--ref-text);
        }

        .edit-summary-preview h1,
        .edit-summary-preview h2,
        .edit-summary-preview h3 {
            font-size: 1.05rem;
            margin: 12px 0 6px;
            color: var(--ref-primary);
        }

        .edit-summary-preview p {
            margin: 0 0 8px;
        }

        .edit-upload-zone {
            border: 2px dashed var(--ref-border);
            border-radius: var(--ref-radius-sm);
            padding: 24px;
            text-align: center;
            transition: all 0.3s;
            cursor: pointer;
            background: white;
        }

        .edit-upload-zone:hover,
        .edit-upload-zone.drag-over {
            border-color: var(--ref-primary);
            background: rgba(99,102,241,0.05);
        }

        .edit-file-selected {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 10px;
            padding: 8px 12px;
            background: white;
            border-radius: var(--ref-radius-sm);
            font-size: 0.85rem;
            color: var(--ref-text);
            border: 1px solid var(--ref-border);
        }

        .btn-remove-file {
            margin-inline-start: auto;
            background: none;
            border: none;
            color: var(--ref-danger);
            font-size: 1.2rem;
            cursor: pointer;
            padding: 0 4px;
        }

        .btn-sm {
            padding: 6px 14px;
            font-size: 0.85rem;
        }

        .upload-zone-icon {
            width: 80px;
            height: 80px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
            box-shadow: var(--ref-shadow);
        }

        .upload-zone-icon i {
            font-size: 2rem;
            color: var(--ref-primary);
        }

        .upload-zone-text {
            color: var(--ref-text);
            font-weight: 600;
            margin-bottom: 8px;
        }

        .upload-zone-hint {
            font-size: 0.85rem;
            color: var(--ref-text-muted);
        }

        .selected-file {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 16px;
            background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.1));
            border: 1px solid var(--ref-primary-light);
            border-radius: var(--ref-radius-sm);
            margin-bottom: 24px;
        }

        .selected-file-icon {
            color: var(--ref-primary);
            font-size: 1.5rem;
        }

        .selected-file-name {
            flex: 1;
            font-weight: 500;
        }

        .selected-file-remove {
            background: none;
            border: none;
            color: var(--ref-text-muted);
            cursor: pointer;
            padding: 4px;
        }

        .selected-file-remove:hover { color: var(--ref-danger); }

        /* Section Headers */
        .section-header {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--ref-text-muted);
            margin: 28px 0 16px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--ref-border);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .section-header:first-child { margin-top: 0; }

        .section-header i {
            color: var(--ref-primary);
            font-size: 0.9rem;
        }

        /* Buttons */
        .btn {
            padding: 12px 24px;
            border-radius: var(--ref-radius-sm);
            font-size: 0.95rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-primary {
            background: var(--ref-primary);
            color: white;
            border: none;
        }

        .btn-primary:hover { background: var(--ref-primary-dark); }

        .btn-primary:disabled {
            background: var(--ref-text-light);
            cursor: not-allowed;
        }

        .btn-secondary {
            background: white;
            color: var(--ref-text);
            border: 1px solid var(--ref-border);
        }

        .btn-secondary:hover { background: var(--ref-bg); }

        .btn-danger {
            background: var(--ref-danger);
            color: white;
            border: none;
        }

        .btn-danger:hover { background: #dc2626; }

        /* Responsive */
        @media (max-width: 1024px) {
            .ref-list-panel { width: 340px; }
        }

        @media (max-width: 768px) {
            .references-container { flex-direction: column; }

            .ref-list-panel {
                width: 100%;
                height: auto;
                max-height: 40vh;
                position: static;
                border-inline-end: none;
                border-bottom: 1px solid var(--ref-border);
            }

            .ref-list-panel.expanded {
                max-height: none;
            }

            .ref-detail-panel {
                height: auto;
                position: static;
                min-height: 50vh;
            }

            .list-panel-filters { display: none; }

            .form-row, .form-row-3 { grid-template-columns: 1fr; }

            .modal-content {
                max-width: 100%;
                max-height: 100%;
                border-radius: 0;
            }
        }

        /* ===== AI Summary Button ===== */
        .ref-action-btn.ai-btn {
            background: linear-gradient(135deg, #8b5cf6, #6366f1);
            color: #fff;
            border: none;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.35rem 0.75rem;
            border-radius: 6px;
            font-size: 0.8rem;
            font-weight: 500;
            white-space: nowrap;
            width: auto;
            height: auto;
        }
        .ref-action-btn.ai-btn:hover {
            background: linear-gradient(135deg, #7c3aed, #4f46e5);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
        }

        /* ===== Summary Modal ===== */
        .summary-modal {
            max-width: 850px;
            width: 95%;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
        }
        .summary-modal .modal-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--ref-border);
            background: linear-gradient(135deg, #f5f3ff, #eef2ff);
        }
        .summary-header-left {
            flex: 1;
            min-width: 0;
        }
        .summary-modal .modal-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--ref-primary-dark);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin: 0;
        }
        .summary-header-hint {
            font-size: 0.85rem;
            color: var(--ref-text-muted);
            margin: 0.3rem 0 0;
            font-weight: 400;
        }
        .summary-ref-title {
            font-size: 0.8rem;
            color: var(--ref-primary);
            font-weight: 500;
            display: block;
            max-width: 500px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-top: 0.4rem;
        }
        .summary-modal .modal-close {
            font-size: 1.6rem;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .summary-modal .modal-close:hover {
            background: rgba(0,0,0,0.08);
        }
        .summary-modal .modal-body {
            flex: 1;
            overflow-y: auto;
            padding: 1.5rem;
        }
        .summary-modal .modal-footer {
            padding: 1rem 1.5rem;
            border-top: 1px solid var(--ref-border);
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            background: #fafbfc;
        }

        /* Summary Empty State */
        .summary-empty {
            text-align: center;
            padding: 3rem 2rem;
        }
        .summary-empty-icon {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(135deg, #ede9fe, #e0e7ff);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.25rem;
            color: var(--ref-primary);
        }
        .summary-empty h3 {
            font-size: 1.2rem;
            color: var(--ref-text);
            margin-bottom: 0.5rem;
        }
        .summary-empty p {
            color: var(--ref-text-muted);
            margin-bottom: 1.5rem;
            max-width: 400px;
            margin-left: auto;
            margin-right: auto;
        }
        .summary-language-confirm {
            display: inline-flex;
            align-items: flex-start;
            gap: 0.6rem;
            background: #fffbeb;
            border: 1px solid #fcd34d;
            border-radius: 8px;
            padding: 0.75rem 1rem;
            margin-bottom: 1.25rem;
            text-align: start;
            max-width: 420px;
            font-size: 0.88rem;
            color: #92400e;
        }
        .summary-language-confirm .fa-language {
            font-size: 1.3rem;
            margin-top: 2px;
            flex-shrink: 0;
        }
        .summary-language-confirm small {
            color: #a16207;
            font-size: 0.78rem;
        }
        .btn-generate-summary {
            background: linear-gradient(135deg, #8b5cf6, #6366f1);
            color: #fff;
            border: none;
            padding: 0.65rem 1.75rem;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.2s;
        }
        .btn-generate-summary:hover {
            background: linear-gradient(135deg, #7c3aed, #4f46e5);
            transform: translateY(-1px);
            box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
        }

        /* Summary Generating State */
        .summary-generating {
            text-align: center;
            padding: 3rem 2rem;
        }
        .summary-loader h3 {
            margin-top: 1rem;
            font-size: 1.15rem;
            color: var(--ref-primary-dark);
        }
        .summary-loader p {
            color: var(--ref-text-muted);
            font-size: 0.9rem;
        }
        .summary-loader > .fa-spinner {
            color: var(--ref-primary);
        }
        .summary-steps {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            max-width: 300px;
            margin: 1.5rem auto 0;
            text-align: start;
        }
        .summary-step {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 0.75rem;
            border-radius: 8px;
            font-size: 0.85rem;
            color: var(--ref-text-muted);
            background: #f8fafc;
            transition: all 0.3s;
        }
        .summary-step.active {
            background: #ede9fe;
            color: var(--ref-primary-dark);
            font-weight: 500;
        }

        /* Summary Editor */
        .summary-editor-wrapper {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }
        .summary-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .summary-date {
            font-size: 0.8rem;
            color: var(--ref-text-muted);
        }
        .summary-editor-container {
            border: 1px solid var(--ref-border);
            border-radius: 8px;
            overflow: hidden;
        }
    </style>
{% endblock %}

{% block body %}
<div id="references-app" v-cloak>
    <div class="references-container" dir="{{ isRtl ? 'rtl' : 'ltr' }}">
        <!-- Left Panel: Reference List -->
        <div class="ref-list-panel" :class="{ expanded: !selectedRef }">
            <div class="list-panel-header">
                <h1><i class="fa fa-book"></i> {{ 'references.my_library'|trans }}</h1>
                <button class="upload-btn-compact" @click="showUploadModal = true">
                    <i class="fa fa-plus"></i> {{ 'references.upload_pdf'|trans }}
                </button>
            </div>

            <!-- Search -->
            <div class="list-panel-search">
                <div style="position:relative">
                    <i class="fa fa-search search-icon"></i>
                    <input type="text" class="search-input"
                           v-model="searchQuery"
                           @input="debouncedSearch"
                           placeholder="{{ 'references.search_placeholder'|trans }}">
                </div>
            </div>

            <!-- Sort Filters + Type Filters -->
            <div class="list-panel-filters">
                <button class="list-filter-pill" :class="{ active: sortBy === 'date' }" @click="sortBy = 'date'">
                    <i class="fa fa-clock-o"></i> {{ 'references.recent'|trans }}
                </button>
                <button class="list-filter-pill" :class="{ active: sortBy === 'title' }" @click="sortBy = 'title'">
                    <i class="fa fa-sort-alpha-asc"></i> {{ 'references.title'|trans }}
                </button>
                <button class="list-filter-pill" :class="{ active: sortBy === 'year' }" @click="sortBy = 'year'">
                    <i class="fa fa-calendar"></i> {{ 'references.year'|trans }}
                </button>
                <span style="width:1px;background:var(--ref-border);margin:0 2px;"></span>
                <button class="list-filter-pill" :class="{ active: currentType === null }" @click="filterByType(null)">
                    {{ 'references.all_types'|trans }}
                </button>
                <button class="list-filter-pill" :class="{ active: currentType === 'journal' }" @click="filterByType('journal')">
                    <i class="fa fa-file-text"></i> {{ 'references.type_journal'|trans }}
                </button>
                <button class="list-filter-pill" :class="{ active: currentType === 'book' }" @click="filterByType('book')">
                    <i class="fa fa-book"></i> {{ 'references.type_book'|trans }}
                </button>
                <button class="list-filter-pill" :class="{ active: currentType === 'conference' }" @click="filterByType('conference')">
                    <i class="fa fa-users"></i> {{ 'references.type_conference'|trans }}
                </button>
            </div>

            <!-- Reference Items -->
            <div class="ref-items-scroll">
                <!-- Loading State -->
                <div v-if="loading" class="loading-state" style="padding:2rem;text-align:center">
                    <div class="spinner"></div>
                </div>

                <!-- Empty State -->
                <div v-else-if="references.length === 0" style="padding:2rem;text-align:center;color:var(--ref-text-light)">
                    <i class="fa fa-folder-open-o" style="font-size:2rem;margin-bottom:0.5rem;display:block"></i>
                    <p>{{ 'references.empty_title'|trans }}</p>
                    <button class="upload-btn-compact" @click="showUploadModal = true" style="margin:auto">
                        <i class="fa fa-upload"></i>
                        {{ 'references.upload_first'|trans }}
                    </button>
                </div>

                <!-- Reference List Items -->
                <div v-else>
                    <div v-for="ref in filteredReferences" :key="ref.id"
                         class="ref-item"
                         :class="{ active: selectedRef && selectedRef.id === ref.id }"
                         @click="selectReference(ref)">
                        <div class="ref-item-title">${ ref.title }</div>
                        <div class="ref-item-meta">
                            <span v-if="ref.authors">${ truncate(ref.authors, 40) }</span>
                            <span v-if="ref.year"><i class="fa fa-calendar"></i> ${ ref.year }</span>
                            <span class="ref-type-badge" :class="ref.publicationType || 'journal'" style="padding:2px 6px;font-size:0.65rem">
                                ${ getTypeName(ref.publicationType) }
                            </span>
                        </div>
                        <div class="ref-item-tags">
                            <span v-if="!ref.hasFile" class="ref-tag warning" style="font-size:0.65rem;padding:2px 6px">
                                <i class="fa fa-exclamation-triangle"></i> {{ 'references.no_file_upload'|trans }}
                            </span>
                            <span v-else-if="ref.summaryStatus === 'completed' && ref.summary" class="ref-tag success" style="font-size:0.65rem;padding:2px 6px">
                                <i class="fa fa-check-circle"></i> {{ 'references.summary_ready'|trans }}
                            </span>
                            <span v-else-if="ref.summaryStatus === 'pending' || ref.summaryStatus === 'processing'" class="ref-tag processing" style="font-size:0.65rem;padding:2px 6px">
                                <i class="fa fa-spinner fa-spin"></i> {{ 'references.generating_summary'|trans }}
                            </span>
                            <span v-else-if="ref.summaryStatus === 'translating'" class="ref-tag processing" style="font-size:0.65rem;padding:2px 6px">
                                <i class="fa fa-spinner fa-spin"></i> {{ 'references.translating_summary'|trans }}
                            </span>
                            <span v-else-if="ref.ocrStatus === 'ready'" class="ref-tag success" style="font-size:0.65rem;padding:2px 6px">
                                <i class="fa fa-check-circle"></i> {{ 'references.ready_for_ai'|trans }}
                            </span>
                            <span v-else-if="ref.ocrStatus === 'processing'" class="ref-tag processing" style="font-size:0.65rem;padding:2px 6px">
                                <i class="fa fa-spinner fa-spin"></i> {{ 'references.processing_ocr'|trans }}
                            </span>
                            <span v-else-if="ref.ocrStatus === 'indexing'" class="ref-tag processing" style="font-size:0.65rem;padding:2px 6px">
                                <i class="fa fa-spinner fa-spin"></i> {{ 'references.indexing'|trans }}
                            </span>
                            <span v-if="ref.folder" class="ref-tag" style="font-size:0.65rem;padding:2px 6px">
                                <i class="fa fa-folder"></i> ${ ref.folder }
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- List Footer -->
            <div class="list-panel-footer">
                <span>${ filteredReferences.length } {{ 'references.items_count'|trans }}</span>
                <span>${ storageStats.used_formatted } / ${ storageStats.max_formatted }</span>
            </div>
        </div>

        <!-- Right Panel: Detail View -->
        <div class="ref-detail-panel" v-if="selectedRef">
            <!-- Detail Header -->
            <div class="detail-header">
                <div class="detail-header-info">
                    <h2 class="detail-title">${ selectedRef.title }</h2>
                    <div class="detail-meta">
                        <span v-if="selectedRef.authors"><i class="fa fa-user"></i> ${ selectedRef.authors }</span>
                        <span v-if="selectedRef.year"><i class="fa fa-calendar"></i> ${ selectedRef.year }</span>
                        <span v-if="selectedRef.publicationName"><i class="fa fa-book"></i> ${ selectedRef.publicationName }</span>
                        <span class="ref-type-badge" :class="selectedRef.publicationType || 'journal'" style="font-size:0.65rem">
                            ${ getTypeName(selectedRef.publicationType) }
                        </span>
                    </div>
                </div>
                <div class="detail-actions">
                    <button v-if="selectedRef.ocrStatus === 'ready' && !['pending', 'processing', 'translating'].includes(selectedRef.summaryStatus)" 
                            class="ref-action-btn ai-btn" 
                            @click="openSummary(selectedRef)">
                        <i class="fa fa-magic"></i> {{ 'references.generate_summary_btn'|trans }}
                    </button>
                    <span v-else-if="selectedRef.summaryStatus === 'pending' || selectedRef.summaryStatus === 'processing'" 
                          class="ref-action-btn" style="cursor:default;opacity:0.8">
                        <i class="fa fa-spinner fa-spin"></i> {{ 'references.generating_summary'|trans }}
                    </span>
                    <div v-if="selectedRef.summary" style="position:relative;display:inline-block">
                        <button class="ref-action-btn ai-btn"
                                @click="showTranslateOptions = !showTranslateOptions"
                                :disabled="translating">
                            <i class="fa" :class="translating ? 'fa-spinner fa-spin' : 'fa-language'"></i>
                            {{ 'references.translate_summary'|trans }}
                        </button>
                        <div v-if="showTranslateOptions" class="translate-dropdown">
                            <div class="translate-dropdown-title">{{ 'references.translate_to'|trans }}</div>
                            <button v-for="lang in availableTranslateLanguages" :key="lang.code"
                                    class="translate-dropdown-item"
                                    @click="translateSummary(lang.code)">
                                ${ lang.name }
                            </button>
                        </div>
                    </div>
                    <button class="ref-action-btn" @click="downloadReference(selectedRef)" title="{{ 'references.download'|trans }}">
                        <i class="fa fa-download"></i>
                    </button>
                    <button class="ref-action-btn" @click="editReference(selectedRef)" title="{{ 'references.edit'|trans }}">
                        <i class="fa fa-edit"></i>
                    </button>
                    <button class="ref-action-btn danger" @click="confirmDelete(selectedRef)" title="{{ 'references.delete'|trans }}">
                        <i class="fa fa-trash"></i>
                    </button>
                </div>
            </div>

            <!-- Detail Tabs -->
            <div class="detail-tabs">
                <button class="detail-tab" :class="{ active: detailTab === 'summary' }" @click="detailTab = 'summary'">
                    <i class="fa fa-magic"></i> {{ 'references.tab_summary'|trans }}
                </button>
                <button class="detail-tab" :class="{ active: detailTab === 'preview' }" @click="switchToPreviewTab">
                    <i class="fa fa-file-text"></i> {{ 'references.tab_preview'|trans }}
                </button>
            </div>

            <!-- Tab Content -->
            <div class="detail-tab-content">
                <!-- AI Summary Tab -->
                <div v-show="detailTab === 'summary'" class="detail-tab-pane">
                    <div class="summary-tab-content">
                        <!-- No summary yet -->
                        <div v-if="!selectedRef.summary && !['pending', 'processing', 'translating'].includes(selectedRef.summaryStatus)" class="summary-tab-empty">
                            <i class="fa fa-magic"></i>
                            <p>{{ 'references.no_summary_yet'|trans }}</p>
                            <button v-if="selectedRef.ocrStatus === 'ready'" 
                                    class="btn btn-primary" 
                                    @click="openSummary(selectedRef)">
                                <i class="fa fa-magic"></i> {{ 'references.generate_summary_btn'|trans }}
                            </button>
                            <p v-else style="font-size:0.82rem;color:var(--ref-text-light);margin-top:8px">
                                {{ 'references.summary_needs_processing'|trans }}
                            </p>
                        </div>
                        <!-- Pending / Processing -->
                        <div v-else-if="selectedRef.summaryStatus === 'pending' || selectedRef.summaryStatus === 'processing'" class="summary-tab-empty">
                            <i class="fa fa-spinner fa-spin" style="color:var(--ref-primary)"></i>
                            <p>{{ 'references.generating_summary'|trans }}</p>
                        </div>
                        <!-- Translating -->
                        <div v-else-if="selectedRef.summaryStatus === 'translating'" class="summary-tab-empty">
                            <i class="fa fa-spinner fa-spin" style="color:var(--ref-primary)"></i>
                            <p>{{ 'references.translating_summary'|trans }}</p>
                        </div>
                        <!-- Summary content (editable) -->
                        <div v-else>
                            <div class="panel-editor-toolbar">
                                <span v-if="panelSummaryDirty" class="unsaved-badge">
                                    <i class="fa fa-circle"></i> {{ 'references.unsaved_changes'|trans }}
                                </span>
                                <span v-if="panelSaved" class="saved-badge">
                                    <i class="fa fa-check"></i> {{ 'references.saved'|trans }}
                                </span>
                            </div>
                            <div class="summary-tab-editor">
                                <textarea id="panel-summary-editor"></textarea>
                            </div>
                            <div class="summary-tab-actions">
                                <button class="btn btn-primary btn-sm" @click="savePanelSummary" :disabled="panelSaving || !panelSummaryDirty">
                                    <i class="fa" :class="panelSaving ? 'fa-spinner fa-spin' : 'fa-save'"></i>
                                    {{ 'references.save_summary'|trans }}
                                </button>
                                <button class="btn btn-secondary btn-sm" @click="downloadSummary(selectedRef.id)">
                                    <i class="fa fa-download"></i> {{ 'references.download_summary'|trans }}
                                </button>
                                <button class="btn btn-secondary btn-sm" @click="openSummary(selectedRef)">
                                    <i class="fa fa-expand"></i> {{ 'references.open_full_editor'|trans }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Document Preview Tab -->
                <div v-show="detailTab === 'preview'" class="detail-tab-pane">
                    <div class="preview-tab-content">
                        <!-- PDF Preview -->
                        <iframe v-if="selectedRef.hasFile && selectedRef.fileType === 'pdf'"
                                :src="getPreviewUrl(selectedRef)"
                                style="flex:1;width:100%;border:none;min-height:100%"></iframe>

                        <!-- DOCX Preview -->
                        <div v-else-if="selectedRef.hasFile && selectedRef.fileType === 'docx'"
                             class="docx-preview" 
                             v-html="docxPreviewHtml">
                        </div>
                        <div v-if="selectedRef.hasFile && selectedRef.fileType === 'docx' && !docxPreviewHtml" 
                             class="preview-no-file">
                            <i class="fa fa-spinner fa-spin"></i>
                            <p>{{ 'references.loading_preview'|trans }}</p>
                        </div>

                        <!-- No File -->
                        <div v-if="!selectedRef.hasFile" class="preview-no-file">
                            <i class="fa fa-file-o"></i>
                            <p>{{ 'references.no_file_preview'|trans }}</p>
                            <button class="btn btn-primary btn-sm" @click="editReference(selectedRef)">
                                <i class="fa fa-upload"></i> {{ 'references.upload_file'|trans }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Empty Detail Panel (no selection) -->
        <div class="ref-detail-panel" v-if="!selectedRef">
            <div class="detail-empty">
                <i class="fa fa-hand-pointer-o"></i>
                <p>{{ 'references.select_reference'|trans }}</p>
            </div>
        </div>
    </div>

    <!-- Upload Modal -->
    <div v-if="showUploadModal" class="modal-overlay" @click.self="showUploadModal = false">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title">{{ 'references.upload_reference'|trans }}</h2>
                <button class="modal-close" @click="showUploadModal = false">&times;</button>
            </div>
            <div class="modal-body">
                <!-- BibTeX Import Section -->
                <div class="bibtex-section">
                    <div class="bibtex-header" @click="showBibtexInput = !showBibtexInput">
                        <i class="fa fa-code"></i>
                        <span>{{ 'references.import_bibtex'|trans }}</span>
                        <i class="fa fa-chevron-down bibtex-toggle" :class="{ 'rotated': showBibtexInput }"></i>
                    </div>
                    <div v-if="showBibtexInput" class="bibtex-content">
                        <textarea 
                            class="bibtex-textarea" 
                            v-model="bibtexInput" 
                            placeholder="{{ 'references.bibtex_placeholder'|trans }}"
                            rows="6"
                        ></textarea>
                        <div class="bibtex-actions">
                            <button type="button" class="btn btn-secondary btn-sm" @click="clearBibtex">
                                {{ 'references.clear'|trans }}
                            </button>
                            <button type="button" class="btn btn-primary btn-sm" @click="parseBibtex" :disabled="!bibtexInput.trim()">
                                <i class="fa fa-magic"></i> {{ 'references.parse_bibtex'|trans }}
                            </button>
                        </div>
                        <div v-if="bibtexError" class="bibtex-error">
                            <i class="fa fa-exclamation-circle"></i> ${ bibtexError }
                        </div>
                        <div v-if="bibtexSuccess" class="bibtex-success">
                            <i class="fa fa-check-circle"></i> {{ 'references.bibtex_parsed'|trans }}
                        </div>
                    </div>
                </div>

                <!-- File Upload Zone -->
                <div v-if="!uploadFile" 
                     class="upload-zone"
                     :class="{ 'drag-over': isDragOver }"
                     @dragover.prevent="isDragOver = true"
                     @dragleave.prevent="isDragOver = false"
                     @drop.prevent="handleFileDrop"
                     @click="triggerFileInput">
                    <i class="fa fa-cloud-upload upload-zone-icon"></i>
                    <div class="upload-zone-text">{{ 'references.drop_file_here'|trans }}</div>
                    <div class="upload-zone-hint">{{ 'references.upload_hint'|trans }}</div>
                </div>
                <input type="file" ref="fileInput" @change="handleFileSelect" accept=".pdf,.docx" style="display: none;">

                <!-- Selected File -->
                <div v-if="uploadFile" class="selected-file">
                    <i class="fa fa-file-pdf-o selected-file-icon"></i>
                    <span class="selected-file-name">${ uploadFile.name }</span>
                    <button class="selected-file-remove" @click="uploadFile = null">
                        <i class="fa fa-times"></i>
                    </button>
                </div>

                <!-- Metadata Form -->
                <div class="section-header">{{ 'references.basic_info'|trans }}</div>

                <!-- Language (mandatory, before title) -->
                <div class="form-group">
                    <label class="form-label" style="font-weight:700">{{ 'references.field_language'|trans }} *</label>
                    <div style="background:#fff3f3;border:1px solid #e74c3c;border-radius:6px;padding:8px 12px;margin-bottom:8px;font-size:0.82rem;color:#c0392b">
                        <i class="fa fa-exclamation-triangle"></i> {{ 'references.language_warning'|trans }}
                    </div>
                    <select class="form-select" v-model="uploadForm.language" @change="onLanguageChange('upload')">
                        <option value="" disabled>-- {{ 'references.select_language'|trans }} --</option>
                        {% for code, name in supportedLanguages %}
                        <option value="{{ code }}">{{ name }}</option>
                        {% endfor %}
                        <option value="other">{{ 'references.language_other'|trans }}</option>
                    </select>
                </div>
                <div class="form-group" v-if="uploadForm.language === 'other'">
                    <label class="form-label">{{ 'references.custom_language'|trans }}</label>
                    <input type="text" class="form-input" v-model="uploadForm.customLanguage" 
                           placeholder="{{ 'references.custom_language_hint'|trans }}">
                </div>

                <div class="form-group">
                    <label class="form-label">{{ 'references.field_title'|trans }} *</label>
                    <input type="text" class="form-input" v-model="uploadForm.title" required>
                </div>

                <div class="form-group">
                    <label class="form-label">{{ 'references.field_authors'|trans }}</label>
                    <input type="text" class="form-input" v-model="uploadForm.authors" 
                           placeholder="{{ 'references.authors_hint'|trans }}">
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">{{ 'references.field_year'|trans }}</label>
                        <input type="number" class="form-input" v-model="uploadForm.year" min="1900" max="2100">
                    </div>
                    <div class="form-group">
                        <label class="form-label">{{ 'references.field_type'|trans }}</label>
                        <select class="form-select" v-model="uploadForm.publication_type">
                            {% for key, label in publicationTypes %}
                            <option value="{{ key }}">{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <div class="section-header">{{ 'references.publication_details'|trans }}</div>
                <div class="form-group">
                    <label class="form-label">{{ 'references.field_publication_name'|trans }}</label>
                    <input type="text" class="form-input" v-model="uploadForm.publication_name">
                </div>

                <div class="form-row-3">
                    <div class="form-group">
                        <label class="form-label">{{ 'references.field_volume'|trans }}</label>
                        <input type="text" class="form-input" v-model="uploadForm.volume">
                    </div>
                    <div class="form-group">
                        <label class="form-label">{{ 'references.field_issue'|trans }}</label>
                        <input type="text" class="form-input" v-model="uploadForm.issue">
                    </div>
                    <div class="form-group">
                        <label class="form-label">{{ 'references.field_pages'|trans }}</label>
                        <input type="text" class="form-input" v-model="uploadForm.pages" placeholder="1-20">
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">{{ 'references.field_publisher'|trans }}</label>
                        <input type="text" class="form-input" v-model="uploadForm.publisher">
                    </div>
                    <div class="form-group">
                        <label class="form-label">{{ 'references.field_location'|trans }}</label>
                        <input type="text" class="form-input" v-model="uploadForm.location">
                    </div>
                </div>

                <div class="section-header">{{ 'references.identifiers'|trans }}</div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">DOI</label>
                        <input type="text" class="form-input" v-model="uploadForm.doi" placeholder="10.xxxx/xxxxx">
                    </div>
                    <div class="form-group">
                        <label class="form-label">ISBN</label>
                        <input type="text" class="form-input" v-model="uploadForm.isbn">
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">arXiv ID</label>
                        <input type="text" class="form-input" v-model="uploadForm.arxiv_id" placeholder="2301.xxxxx">
                    </div>
                    <div class="form-group">
                        <label class="form-label">URL</label>
                        <input type="url" class="form-input" v-model="uploadForm.url">
                    </div>
                </div>

                <div class="section-header">{{ 'references.additional_info'|trans }}</div>
                <div class="form-group">
                    <label class="form-label">{{ 'references.field_abstract'|trans }}</label>
                    <textarea class="form-textarea" v-model="uploadForm.abstract"></textarea>
                </div>



                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">{{ 'references.field_keywords'|trans }}</label>
                        <input type="text" class="form-input" v-model="uploadForm.keywords" 
                               placeholder="{{ 'references.keywords_hint'|trans }}">
                    </div>
                    <div class="form-group">
                        <label class="form-label">{{ 'references.field_folder'|trans }}</label>
                        <input type="text" class="form-input" v-model="uploadForm.folder">
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">{{ 'references.field_notes'|trans }}</label>
                    <textarea class="form-textarea" v-model="uploadForm.notes" 
                              placeholder="{{ 'references.notes_hint'|trans }}"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" @click="showUploadModal = false">{{ 'references.cancel'|trans }}</button>
                <button class="btn btn-primary" @click="uploadReference" :disabled="!uploadFile || !uploadForm.title || !uploadForm.language || uploading">
                    <span v-if="uploading" class="spinner"></span>
                    <span v-else>{{ 'references.upload'|trans }}</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Edit Modal -->
    <div v-if="showEditModal" class="modal-overlay" @click.self="showEditModal = false">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title">{{ 'references.edit_reference'|trans }}</h2>
                <button class="modal-close" @click="showEditModal = false">&times;</button>
            </div>
            <div class="modal-body">
                <!-- File Upload Section (shown when reference has no file) -->
                <div v-if="!editForm.hasFile" class="edit-file-upload-section">
                    <div class="section-header"><i class="fa fa-exclamation-triangle" style="color: #92400e;"></i> {{ 'references.attach_file'|trans }}</div>
                    <div class="edit-upload-zone"
                         @dragover.prevent="editDragOver = true"
                         @dragleave.prevent="editDragOver = false"
                         @drop.prevent="handleEditFileDrop($event)"
                         @click="$refs.editFileInput.click()"
                         :class="{ 'drag-over': editDragOver }">
                        <i class="fa fa-cloud-upload" style="font-size: 2rem; color: var(--ref-primary); margin-bottom: 8px;"></i>
                        <div style="font-size: 0.9rem; color: var(--ref-text);">{{ 'references.drop_file_here'|trans }}</div>
                        <div style="font-size: 0.75rem; color: var(--ref-text-muted);">{{ 'references.upload_hint'|trans }}</div>
                        <input type="file" ref="editFileInput" accept=".pdf,.docx" @change="handleEditFileSelect($event)" style="display:none">
                    </div>
                    <div v-if="editAttachFile" class="edit-file-selected">
                        <i class="fa fa-file-pdf-o"></i> ${ editAttachFile.name } (${ formatFileSize(editAttachFile.size) })
                        <button class="btn-remove-file" @click="editAttachFile = null">&times;</button>
                    </div>
                    <button v-if="editAttachFile" class="btn btn-primary btn-sm" @click="attachFileToReference" :disabled="attachingFile" style="margin-top: 8px;">
                        <span v-if="attachingFile" class="spinner"></span>
                        <span v-else><i class="fa fa-upload"></i> {{ 'references.upload_file'|trans }}</span>
                    </button>
                </div>

                <div class="section-header">{{ 'references.basic_info'|trans }}</div>
                <div class="form-group">
                    <label class="form-label">{{ 'references.field_title'|trans }} *</label>
                    <input type="text" class="form-input" v-model="editForm.title" required>
                </div>

                <div class="form-group">
                    <label class="form-label">{{ 'references.field_authors'|trans }}</label>
                    <input type="text" class="form-input" v-model="editForm.authors">
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">{{ 'references.field_year'|trans }}</label>
                        <input type="number" class="form-input" v-model="editForm.year" min="1900" max="2100">
                    </div>
                    <div class="form-group">
                        <label class="form-label">{{ 'references.field_type'|trans }}</label>
                        <select class="form-select" v-model="editForm.publication_type">
                            {% for key, label in publicationTypes %}
                            <option value="{{ key }}">{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <div class="section-header">{{ 'references.publication_details'|trans }}</div>
                <div class="form-group">
                    <label class="form-label">{{ 'references.field_publication_name'|trans }}</label>
                    <input type="text" class="form-input" v-model="editForm.publication_name">
                </div>

                <div class="form-row-3">
                    <div class="form-group">
                        <label class="form-label">{{ 'references.field_volume'|trans }}</label>
                        <input type="text" class="form-input" v-model="editForm.volume">
                    </div>
                    <div class="form-group">
                        <label class="form-label">{{ 'references.field_issue'|trans }}</label>
                        <input type="text" class="form-input" v-model="editForm.issue">
                    </div>
                    <div class="form-group">
                        <label class="form-label">{{ 'references.field_pages'|trans }}</label>
                        <input type="text" class="form-input" v-model="editForm.pages">
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">{{ 'references.field_publisher'|trans }}</label>
                        <input type="text" class="form-input" v-model="editForm.publisher">
                    </div>
                    <div class="form-group">
                        <label class="form-label">{{ 'references.field_location'|trans }}</label>
                        <input type="text" class="form-input" v-model="editForm.location">
                    </div>
                </div>

                <div class="section-header">{{ 'references.identifiers'|trans }}</div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">DOI</label>
                        <input type="text" class="form-input" v-model="editForm.doi">
                    </div>
                    <div class="form-group">
                        <label class="form-label">ISBN</label>
                        <input type="text" class="form-input" v-model="editForm.isbn">
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">arXiv ID</label>
                        <input type="text" class="form-input" v-model="editForm.arxiv_id">
                    </div>
                    <div class="form-group">
                        <label class="form-label">URL</label>
                        <input type="url" class="form-input" v-model="editForm.url">
                    </div>
                </div>

                <div class="section-header">{{ 'references.additional_info'|trans }}</div>
                <div class="form-group">
                    <label class="form-label">{{ 'references.field_abstract'|trans }}</label>
                    <textarea class="form-textarea" v-model="editForm.abstract"></textarea>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">{{ 'references.field_language'|trans }}</label>
                        <select class="form-select" v-model="editForm.language" @change="onLanguageChange('edit')">
                            {% for code, name in supportedLanguages %}
                            <option value="{{ code }}">{{ name }}</option>
                            {% endfor %}
                            <option value="other">{{ 'references.language_other'|trans }}</option>
                        </select>
                    </div>
                    <div class="form-group" v-if="editForm.language === 'other' || !isKnownLanguage(editForm.language)">
                        <label class="form-label">{{ 'references.custom_language'|trans }}</label>
                        <input type="text" class="form-input" v-model="editForm.customLanguage" 
                               placeholder="{{ 'references.custom_language_hint'|trans }}">
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">{{ 'references.field_keywords'|trans }}</label>
                        <input type="text" class="form-input" v-model="editForm.keywords">
                    </div>
                    <div class="form-group">
                        <label class="form-label">{{ 'references.field_folder'|trans }}</label>
                        <input type="text" class="form-input" v-model="editForm.folder">
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">{{ 'references.field_notes'|trans }}</label>
                    <textarea class="form-textarea" v-model="editForm.notes"></textarea>
                </div>

                <div v-if="editForm.summary" class="edit-summary-section">
                    <div class="section-header"><i class="fa fa-magic"></i> {{ 'references.ai_summary'|trans }}</div>
                    <div class="edit-summary-preview" v-html="editForm.summary"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" @click="showEditModal = false">{{ 'references.cancel'|trans }}</button>
                <button class="btn btn-primary" @click="saveEdit" :disabled="!editForm.title || saving">
                    <span v-if="saving" class="spinner"></span>
                    <span v-else>{{ 'references.save'|trans }}</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Move to Folder Modal -->
    <div v-if="showMoveModal" class="modal-overlay" @click.self="showMoveModal = false">
        <div class="modal-content" style="max-width: 400px;">
            <div class="modal-header">
                <h2 class="modal-title">{{ 'references.move_to_folder'|trans }}</h2>
                <button class="modal-close" @click="showMoveModal = false">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label">{{ 'references.select_folder'|trans }}</label>
                    <select class="form-select" v-model="moveFolder">
                        <option value="">{{ 'references.no_folder'|trans }}</option>
                        <option v-for="folder in folders" :key="folder.name" :value="folder.name">
                            ${ folder.name }
                        </option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">{{ 'references.or_create_new'|trans }}</label>
                    <input type="text" class="form-input" v-model="newFolderName" 
                           placeholder="{{ 'references.new_folder_name'|trans }}">
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" @click="showMoveModal = false">{{ 'references.cancel'|trans }}</button>
                <button class="btn btn-primary" @click="moveToFolder">{{ 'references.move'|trans }}</button>
            </div>
        </div>
    </div>

    <!-- Confirm Delete Modal -->
    <div v-if="showDeleteModal" class="modal-overlay" @click.self="showDeleteModal = false">
        <div class="modal-content" style="max-width: 400px;">
            <div class="modal-header">
                <h2 class="modal-title">{{ 'references.confirm_delete'|trans }}</h2>
                <button class="modal-close" @click="showDeleteModal = false">&times;</button>
            </div>
            <div class="modal-body">
                <p>{{ 'references.delete_warning'|trans }}</p>
                <p v-if="deleteTarget"><strong>${ deleteTarget.title }</strong></p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" @click="showDeleteModal = false">{{ 'references.cancel'|trans }}</button>
                <button class="btn btn-primary" style="background: var(--ref-danger);" @click="deleteReference" :disabled="deleting">
                    <span v-if="deleting" class="spinner"></span>
                    <span v-else>{{ 'references.delete'|trans }}</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Summary Modal -->
    <div v-if="showSummaryModal" class="modal-overlay" @click.self="closeSummary">
        <div class="modal-content summary-modal">
            <div class="modal-header">
            <div class="summary-header-left">
                <h2 class="modal-title">
                    <i class="fa fa-magic"></i>
                    {{ 'references.summary_modal_title'|trans }}
                </h2>
                <p class="summary-header-hint">{{ 'references.summary_modal_hint'|trans }}</p>
                <span class="summary-ref-title" v-if="summaryRef">${ summaryRef.title }</span>
            </div>
            <button class="modal-close" @click="closeSummary">&times;</button>
        </div>
        <div class="modal-body">
            <!-- Not yet generated -->
            <div v-if="!summaryContent && summaryStatus !== 'pending' && summaryStatus !== 'processing'" class="summary-empty">
                <div class="summary-empty-icon">
                    <i class="fa fa-magic fa-3x"></i>
                </div>
                <h3>{{ 'references.generate_summary'|trans }}</h3>
                <p>{{ 'references.summary_description'|trans }}</p>

                <div class="summary-language-confirm" v-if="summaryRef">
                    <i class="fa fa-language"></i>
                    <div>
                        <strong>{{ 'references.summary_language_label'|trans }}:</strong> ${ summaryRefLanguageName }
                        <br>
                        <small>{{ 'references.summary_language_hint'|trans }}</small>
                    </div>
                </div>

                <button class="btn btn-primary btn-generate-summary" @click="triggerSummarize" :disabled="summarizing">
                    <i class="fa fa-magic"></i>
                    {{ 'references.summarize_now'|trans }}
                </button>
            </div>

            <!-- Generating -->
            <div v-if="summaryStatus === 'pending' || summaryStatus === 'processing'" class="summary-generating">
                <div class="summary-loader">
                    <i class="fa fa-spinner fa-spin fa-3x"></i>
                    <h3>{{ 'references.summarizing'|trans }}</h3>
                    <p>{{ 'references.summarizing_description'|trans }}</p>
                    <div class="summary-steps">
                        <div class="summary-step" :class="{ active: summaryStatus === 'pending' }">
                            <i class="fa fa-check-circle"></i>
                            {{ 'references.summary_step_queued'|trans }}
                        </div>
                        <div class="summary-step" :class="{ active: summaryStatus === 'processing' }">
                            <i :class="summaryStatus === 'processing' ? 'fa fa-spinner fa-spin' : 'fa fa-circle-o'"></i>
                            {{ 'references.summary_step_analyzing'|trans }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Summary ready -->
            <div v-if="summaryContent && summaryStatus !== 'pending' && summaryStatus !== 'processing'" class="summary-editor-wrapper">
                <div class="summary-toolbar">
                    <button class="btn btn-sm btn-secondary" @click="triggerSummarize" :disabled="summarizing" title="{{ 'references.regenerate_summary'|trans }}">
                        <i :class="summarizing ? 'fa fa-spinner fa-spin' : 'fa fa-refresh'"></i>
                        {{ 'references.regenerate'|trans }}
                    </button>
                    <span v-if="summaryGeneratedAt" class="summary-date">
                        <i class="fa fa-clock-o"></i> ${ summaryGeneratedAt }
                    </span>
                </div>
                <div class="summary-editor-container">
                    <textarea id="summary-editor" v-model="summaryContent"></textarea>
                </div>
            </div>
        </div>
        <div class="modal-footer" v-if="summaryContent && summaryStatus !== 'pending' && summaryStatus !== 'processing'">
            <button class="btn btn-secondary" @click="copySummary">
                <i class="fa fa-copy"></i> {{ 'references.copy_summary'|trans }}
            </button>
            <button class="btn btn-secondary" @click="downloadSummary">
                <i class="fa fa-download"></i> {{ 'references.download_summary'|trans }}
            </button>
            <button class="btn btn-primary" @click="saveSummary" :disabled="savingSummary || summarySaved">
                <span v-if="savingSummary"><i class="fa fa-spinner fa-spin"></i></span>
                <span v-else-if="summarySaved"><i class="fa fa-check"></i> {{ 'references.saved'|trans }}</span>
                <span v-else><i class="fa fa-save"></i> {{ 'references.save_summary'|trans }}</span>
            </button>
            <button class="btn btn-secondary" @click="closeSummary">
                <i class="fa fa-times"></i> {{ 'references.close'|trans }}
            </button>
        </div>
    </div>
</div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.2/tinymce.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script>
<script>
const { createApp } = Vue;
const languageNames = {
    {% for code, name in supportedLanguages %}
    '{{ code }}': '{{ name }}',
    {% endfor %}
};

createApp({
    delimiters: ['${', '}'],
    data() {
        return {
            // Initial data from server
            references: {{ references|json_encode|raw }},
            folders: {{ folders|json_encode|raw }},
            storageStats: {{ storageStats|json_encode|raw }},
            
            // UI state
            loading: false,
            currentFolder: null,
            currentType: null,
            searchQuery: '',
            selectedIds: [],
            viewMode: 'grid',
            sortBy: 'date',
            
            // Modals
            showUploadModal: false,
            showEditModal: false,
            showMoveModal: false,
            showDeleteModal: false,
            
            // Upload form
            uploadFile: null,
            uploadForm: this.getEmptyForm(),
            uploading: false,
            isDragOver: false,
            
            // BibTeX import
            showBibtexInput: false,
            bibtexInput: '',
            bibtexError: '',
            bibtexSuccess: false,
            
            // Edit form
            editForm: {},
            editingId: null,
            saving: false,
            editAttachFile: null,
            editDragOver: false,
            attachingFile: false,
            
            // Move
            moveFolder: '',
            newFolderName: '',
            
            // Delete
            deleteTarget: null,
            deleting: false,
            
            // Debounce
            searchTimeout: null,

            // Summary
            showSummaryModal: false,
            summaryRef: null,
            summaryContent: '',
            summaryStatus: null,
            summaryGeneratedAt: null,
            summarizing: false,
            savingSummary: false,
            summarySaved: false,
            summaryPollTimer: null,
            summaryEditor: null,

            // Detail panel
            selectedRef: null,
            detailTab: 'summary',
            docxPreviewHtml: '',
            panelEditor: null,
            panelSummaryDirty: false,
            panelSaving: false,
            panelSaved: false,

            // Translation
            translating: false,
            translateTargetLang: '',
            showTranslateOptions: false,
        };
    },
    computed: {
        summaryRefLanguageName() {
            if (!this.summaryRef) return '';
            const lang = this.summaryRef.language || 'en';
            return languageNames[lang] || lang;
        },
        availableTranslateLanguages() {
            if (!this.selectedRef) return [];
            const refLang = this.selectedRef.language || 'en';
            const allLangs = [
                { code: 'en', name: 'English' },
                { code: 'ar', name: 'العربية' },
                { code: 'fr', name: 'Français' },
                { code: 'de', name: 'Deutsch' },
                { code: 'es', name: 'Español' },
                { code: 'tr', name: 'Türkçe' },
                { code: 'ru', name: 'Русский' },
                { code: 'zh', name: '中文' },
                { code: 'ja', name: '日本語' },
            ];
            return allLangs.filter(l => l.code !== refLang);
        },
        totalCount() {
            return this.references.length;
        },
        filteredReferences() {
            let result = [...this.references];
            
            // Filter by folder
            if (this.currentFolder) {
                result = result.filter(r => r.folder === this.currentFolder);
            }
            
            // Filter by type
            if (this.currentType) {
                result = result.filter(r => r.publication_type === this.currentType);
            }
            
            // Sort
            if (this.sortBy === 'title') {
                result.sort((a, b) => (a.title || '').localeCompare(b.title || ''));
            } else if (this.sortBy === 'year') {
                result.sort((a, b) => (b.year || 0) - (a.year || 0));
            } else { // date (default - most recent first)
                result.sort((a, b) => new Date(b.createdAt || 0) - new Date(a.createdAt || 0));
            }
            
            return result;
        }
    },
    mounted() {
        this.startOcrPolling();
        // Auto-select the most recent reference
        if (this.filteredReferences.length > 0) {
            this.selectReference(this.filteredReferences[0]);
        }
        // Warn before leaving page with unsaved changes
        window.addEventListener('beforeunload', this.onBeforeUnload);
        // Close translate dropdown on outside click
        document.addEventListener('click', (e) => {
            if (this.showTranslateOptions && !e.target.closest('.translate-dropdown') && !e.target.closest('.ai-btn')) {
                this.showTranslateOptions = false;
            }
        });
    },
    beforeUnmount() {
        this.stopOcrPolling();
        this.destroyPanelEditor();
        window.removeEventListener('beforeunload', this.onBeforeUnload);
    },
    methods: {
        getEmptyForm() {
            return {
                title: '',
                authors: '',
                year: null,
                publication_type: 'journal',
                publication_name: '',
                volume: '',
                issue: '',
                pages: '',
                publisher: '',
                location: '',
                doi: '',
                isbn: '',
                arxiv_id: '',
                url: '',
                abstract: '',
                keywords: '',
                folder: '',
                notes: '',
                language: '',
                customLanguage: ''
            };
        },
        
        // BibTeX Parser Methods
        parseBibtex() {
            this.bibtexError = '';
            this.bibtexSuccess = false;
            
            const bibtex = this.bibtexInput.trim();
            if (!bibtex) {
                this.bibtexError = '{{ 'references.bibtex_empty'|trans }}';
                return;
            }
            
            try {
                const parsed = this.parseBibtexEntry(bibtex);
                if (parsed) {
                    // Map BibTeX fields to form fields
                    this.mapBibtexToForm(parsed);
                    this.bibtexSuccess = true;
                    // Auto-collapse after successful parse
                    setTimeout(() => {
                        this.showBibtexInput = false;
                        this.bibtexSuccess = false;
                    }, 1500);
                }
            } catch (error) {
                this.bibtexError = error.message || '{{ 'references.bibtex_parse_error'|trans }}';
            }
        },
        
        parseBibtexEntry(bibtex) {
            // Match the entry type and key: @article{key,
            const entryMatch = bibtex.match(/@(\w+)\s*\{\s*([^,]*)\s*,/i);
            if (!entryMatch) {
                throw new Error('{{ 'references.bibtex_invalid_format'|trans }}');
            }
            
            const entryType = entryMatch[1].toLowerCase();
            const entryKey = entryMatch[2].trim();
            
            // Extract the content between the first { and last }
            const startIndex = bibtex.indexOf('{');
            const endIndex = bibtex.lastIndexOf('}');
            if (startIndex === -1 || endIndex === -1 || endIndex <= startIndex) {
                throw new Error('{{ 'references.bibtex_invalid_format'|trans }}');
            }
            
            const content = bibtex.substring(startIndex + 1, endIndex);
            
            // Parse fields - handle various formats including multi-line values
            const fields = {};
            // Regex to match field = {value} or field = "value" or field = value
            const fieldRegex = /(\w+)\s*=\s*(?:\{([^{}]*(?:\{[^{}]*\}[^{}]*)*)\}|"([^"]*)"|(\d+))/gi;
            
            let match;
            while ((match = fieldRegex.exec(content)) !== null) {
                const fieldName = match[1].toLowerCase();
                // Value can be in braces, quotes, or plain (for numbers)
                let value = match[2] || match[3] || match[4] || '';
                // Clean up the value - remove extra braces and normalize whitespace
                value = value.replace(/\s+/g, ' ').trim();
                // Remove surrounding braces if any
                value = value.replace(/^\{+|\}+$/g, '').trim();
                fields[fieldName] = value;
            }
            
            return {
                type: entryType,
                key: entryKey,
                fields: fields
            };
        },
        
        mapBibtexToForm(parsed) {
            const fields = parsed.fields;
            
            // Map entry type to publication type
            const typeMap = {
                'article': 'journal',
                'book': 'book',
                'inbook': 'book_chapter',
                'incollection': 'book_chapter',
                'inproceedings': 'conference',
                'conference': 'conference',
                'proceedings': 'conference',
                'phdthesis': 'thesis',
                'mastersthesis': 'thesis',
                'thesis': 'thesis',
                'techreport': 'report',
                'manual': 'report',
                'unpublished': 'preprint',
                'misc': 'other',
                'online': 'website'
            };
            
            this.uploadForm.publication_type = typeMap[parsed.type] || 'other';
            
            // Map standard fields
            if (fields.title) {
                this.uploadForm.title = fields.title;
            }
            
            if (fields.author) {
                // Convert "LastName, FirstName and LastName2, FirstName2" to "LastName, FirstName; LastName2, FirstName2"
                this.uploadForm.authors = fields.author.replace(/\s+and\s+/gi, '; ');
            }
            
            if (fields.year) {
                this.uploadForm.year = parseInt(fields.year, 10) || null;
            }
            
            // Journal/Book/Conference name
            if (fields.journal) {
                this.uploadForm.publication_name = fields.journal;
            } else if (fields.booktitle) {
                this.uploadForm.publication_name = fields.booktitle;
            } else if (fields.series) {
                this.uploadForm.publication_name = fields.series;
            }
            
            if (fields.volume) {
                this.uploadForm.volume = fields.volume;
            }
            
            if (fields.number || fields.issue) {
                this.uploadForm.issue = fields.number || fields.issue;
            }
            
            if (fields.pages) {
                // Normalize page format (e.g., "1--20" to "1-20")
                this.uploadForm.pages = fields.pages.replace(/--/g, '-');
            }
            
            if (fields.publisher) {
                this.uploadForm.publisher = fields.publisher;
            }
            
            if (fields.address || fields.location) {
                this.uploadForm.location = fields.address || fields.location;
            }
            
            if (fields.doi) {
                this.uploadForm.doi = fields.doi;
            }
            
            if (fields.isbn) {
                this.uploadForm.isbn = fields.isbn;
            }
            
            if (fields.issn) {
                // Store ISSN if needed
            }
            
            if (fields.eprint || fields.arxivid) {
                this.uploadForm.arxiv_id = fields.eprint || fields.arxivid;
            }
            
            if (fields.url || fields.howpublished) {
                let url = fields.url || fields.howpublished || '';
                // Clean up \url{} wrapper if present
                url = url.replace(/\\url\{([^}]*)\}/g, '$1');
                this.uploadForm.url = url;
            }
            
            if (fields.abstract) {
                this.uploadForm.abstract = fields.abstract;
            }
            
            if (fields.keywords) {
                this.uploadForm.keywords = fields.keywords;
            }
            
            if (fields.note || fields.annote) {
                this.uploadForm.notes = fields.note || fields.annote;
            }
            
            if (fields.language) {
                const lang = fields.language.toLowerCase();
                const langMap = {
                    'english': 'en',
                    'arabic': 'ar',
                    'german': 'de',
                    'french': 'fr',
                    'spanish': 'es',
                    'russian': 'ru',
                    'turkish': 'tr',
                    'chinese': 'zh',
                    'japanese': 'ja',
                    'czech': 'cs',
                    'italian': 'it'
                };
                if (langMap[lang]) {
                    this.uploadForm.language = langMap[lang];
                } else if (this.isKnownLanguage(lang)) {
                    this.uploadForm.language = lang;
                } else {
                    this.uploadForm.language = 'other';
                    this.uploadForm.customLanguage = fields.language;
                }
            }
        },
        
        clearBibtex() {
            this.bibtexInput = '';
            this.bibtexError = '';
            this.bibtexSuccess = false;
        },
        
        // Known language codes
        knownLanguages: ['en', 'ar', 'de', 'fr', 'es', 'ru', 'tr', 'zh', 'ja', 'cs', 'it'],
        
        isKnownLanguage(lang) {
            return ['en', 'ar', 'de', 'fr', 'es', 'ru', 'tr', 'zh', 'ja', 'cs', 'it'].includes(lang);
        },
        
        getPublicationIcon(type) {
            const icons = {
                'journal': 'fa fa-newspaper-o',
                'book': 'fa fa-book',
                'book_chapter': 'fa fa-bookmark',
                'conference': 'fa fa-users',
                'thesis': 'fa fa-graduation-cap',
                'report': 'fa fa-file-text-o',
                'website': 'fa fa-globe',
                'preprint': 'fa fa-clock-o',
                'other': 'fa fa-file-o'
            };
            return icons[type] || 'fa fa-file-text-o';
        },
        
        getTypeName(type) {
            const names = {
                'journal': '{{ 'references.type_journal'|trans }}',
                'book': '{{ 'references.type_book'|trans }}',
                'book_chapter': '{{ 'references.type_book_chapter'|trans }}',
                'conference': '{{ 'references.type_conference'|trans }}',
                'thesis': '{{ 'references.type_thesis'|trans }}',
                'report': '{{ 'references.type_report'|trans }}',
                'website': '{{ 'references.type_website'|trans }}',
                'preprint': '{{ 'references.type_preprint'|trans }}',
                'other': '{{ 'references.type_other'|trans }}'
            };
            return names[type] || names['journal'];
        },
        
        truncate(str, len) {
            if (!str) return '';
            return str.length > len ? str.substring(0, len) + '...' : str;
        },
        
        onLanguageChange(formType) {
            // Reset custom language when a known language is selected
            if (formType === 'upload' && this.uploadForm.language !== 'other') {
                this.uploadForm.customLanguage = '';
            } else if (formType === 'edit' && this.editForm.language !== 'other') {
                this.editForm.customLanguage = '';
            }
        },
        
        getLanguageValue(form) {
            // Return custom language if 'other' is selected, otherwise the selected language
            if (form.language === 'other') {
                return form.customLanguage || 'other';
            }
            return form.language;
        },
        
        selectFolder(folder) {
            this.currentFolder = folder;
            this.loadReferences();
        },
        
        filterByType(type) {
            this.currentType = type;
        },
        
        async loadReferences() {
            this.loading = true;
            try {
                const params = new URLSearchParams();
                if (this.currentFolder) params.append('folder', this.currentFolder);
                if (this.searchQuery) params.append('search', this.searchQuery);
                
                const response = await fetch(`{{ path('user_references_api_list') }}?${params}`);
                const data = await response.json();
                if (data.success) {
                    this.references = data.references;
                }
            } catch (error) {
                console.error('Failed to load references:', error);
            }
            this.loading = false;
        },
        
        debouncedSearch() {
            clearTimeout(this.searchTimeout);
            this.searchTimeout = setTimeout(() => {
                this.loadReferences();
            }, 300);
        },
        
        toggleSelect(id) {
            const index = this.selectedIds.indexOf(id);
            if (index > -1) {
                this.selectedIds.splice(index, 1);
            } else {
                this.selectedIds.push(id);
            }
        },
        
        triggerFileInput() {
            this.$refs.fileInput.click();
        },
        
        handleFileSelect(event) {
            const file = event.target.files[0];
            if (file && this.isAllowedFileType(file)) {
                this.uploadFile = file;
                // Auto-fill title from filename
                if (!this.uploadForm.title) {
                    this.uploadForm.title = file.name.replace(/\.(pdf|docx?)$/i, '');
                }
            }
        },
        
        handleFileDrop(event) {
            this.isDragOver = false;
            const file = event.dataTransfer.files[0];
            if (file && this.isAllowedFileType(file)) {
                this.uploadFile = file;
                if (!this.uploadForm.title) {
                    this.uploadForm.title = file.name.replace(/\.(pdf|docx?)$/i, '');
                }
            }
        },

        isAllowedFileType(file) {
            const allowed = ['application/pdf', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
            return allowed.includes(file.type);
        },
        
        async uploadReference() {
            if (!this.uploadFile || !this.uploadForm.title || !this.uploadForm.language) return;
            
            this.uploading = true;
            try {
                const formData = new FormData();
                formData.append('file', this.uploadFile);
                
                // Handle language - use custom if 'other' is selected
                const formToSend = { ...this.uploadForm };
                if (formToSend.language === 'other') {
                    formToSend.language = formToSend.customLanguage || 'other';
                }
                delete formToSend.customLanguage;
                
                Object.entries(formToSend).forEach(([key, value]) => {
                    if (value) formData.append(key, value);
                });
                
                const response = await fetch('{{ path('user_references_api_upload') }}', {
                    method: 'POST',
                    body: formData
                });
                
                const data = await response.json();
                if (data.success) {
                    this.references.unshift(data.reference);
                    this.showUploadModal = false;
                    this.uploadFile = null;
                    this.uploadForm = this.getEmptyForm();
                    this.updateFolders();
                    this.updateStorage();
                } else {
                    alert(data.error || 'Upload failed');
                }
            } catch (error) {
                console.error('Upload failed:', error);
                alert('Upload failed');
            }
            this.uploading = false;
        },
        
        viewReference(ref) {
            window.open(`{{ path('user_references_view', {id: 0}) }}`.replace('/0', `/${ref.id}`), '_blank');
        },

        selectReference(ref) {
            // Warn if unsaved changes
            if (this.panelSummaryDirty) {
                if (!confirm('{{ "references.unsaved_warning"|trans }}')) {
                    return;
                }
            }
            this.destroyPanelEditor();
            this.selectedRef = ref;
            this.docxPreviewHtml = '';
            this.panelSummaryDirty = false;
            this.panelSaved = false;
            this.detailTab = 'summary';
            // If no summary, auto-show preview if file is available
            if (!ref.summary && ref.hasFile) {
                this.detailTab = 'preview';
                if (ref.fileType === 'docx') {
                    this.loadDocxPreview(ref);
                }
            } else if (ref.summary) {
                this.$nextTick(() => this.initPanelEditor());
            }
        },

        switchToPreviewTab() {
            this.detailTab = 'preview';
            if (this.selectedRef && this.selectedRef.fileType === 'docx' && !this.docxPreviewHtml) {
                this.loadDocxPreview(this.selectedRef);
            }
        },

        getPreviewUrl(ref) {
            return `{{ path('user_references_view', {id: 0}) }}`.replace('/0', `/${ref.id}`);
        },

        async loadDocxPreview(ref) {
            if (typeof mammoth === 'undefined') {
                this.docxPreviewHtml = '<p style="color:var(--ref-danger)">mammoth.js library not loaded</p>';
                return;
            }
            try {
                this.docxPreviewHtml = '';
                const url = this.getPreviewUrl(ref);
                const response = await fetch(url);
                const arrayBuffer = await response.arrayBuffer();
                const result = await mammoth.convertToHtml({ arrayBuffer: arrayBuffer });
                this.docxPreviewHtml = result.value;
            } catch (err) {
                console.error('DOCX preview error:', err);
                this.docxPreviewHtml = '<p style="color:var(--ref-danger)">{{ "references.preview_error"|trans }}</p>';
            }
        },
        
        editReference(ref) {
            this.editForm = { ...ref };
            this.editAttachFile = null;
            this.editDragOver = false;
            this.attachingFile = false;
            // Handle custom language - if not in known list, show as 'other' with custom value
            if (ref.language && !this.isKnownLanguage(ref.language)) {
                this.editForm.customLanguage = ref.language;
                this.editForm.language = 'other';
            } else {
                this.editForm.customLanguage = '';
            }
            this.editingId = ref.id;
            this.showEditModal = true;
        },
        
        async saveEdit() {
            if (!this.editForm.title) return;
            
            this.saving = true;
            try {
                // Handle language - use custom if 'other' is selected
                const formToSend = { ...this.editForm };
                if (formToSend.language === 'other') {
                    formToSend.language = formToSend.customLanguage || 'other';
                }
                delete formToSend.customLanguage;
                
                const response = await fetch(`{{ path('user_references_api_update', {id: 0}) }}`.replace('/0', `/${this.editingId}`), {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(formToSend)
                });
                
                const data = await response.json();
                if (data.success) {
                    const index = this.references.findIndex(r => r.id === this.editingId);
                    if (index > -1) {
                        this.references[index] = data.reference;
                    }
                    // Update selectedRef if same reference
                    if (this.selectedRef && this.selectedRef.id === this.editingId) {
                        this.selectedRef = data.reference;
                    }
                    this.showEditModal = false;
                    this.updateFolders();
                } else {
                    alert(data.error || 'Save failed');
                }
            } catch (error) {
                console.error('Save failed:', error);
                alert('Save failed');
            }
            this.saving = false;
        },
        
        downloadReference(ref) {
            window.open(`{{ path('user_references_download', {id: 0}) }}`.replace('/0', `/${ref.id}`), '_blank');
        },

        handleEditFileDrop(e) {
            this.editDragOver = false;
            const file = e.dataTransfer.files[0];
            if (file && this.isAllowedFileType(file)) {
                this.editAttachFile = file;
            }
        },

        handleEditFileSelect(e) {
            const file = e.target.files[0];
            if (file) {
                this.editAttachFile = file;
            }
        },

        formatFileSize(bytes) {
            if (bytes < 1024) return bytes + ' B';
            if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
            return (bytes / 1048576).toFixed(1) + ' MB';
        },

        async attachFileToReference() {
            if (!this.editAttachFile || !this.editingId) return;

            this.attachingFile = true;
            try {
                const formData = new FormData();
                formData.append('file', this.editAttachFile);

                const response = await fetch(`{{ path('user_references_api_attach_file', {id: 0}) }}`.replace('/0', `/${this.editingId}`), {
                    method: 'POST',
                    body: formData
                });

                const data = await response.json();
                if (data.success) {
                    const index = this.references.findIndex(r => r.id === this.editingId);
                    if (index > -1) {
                        this.references[index] = data.reference;
                    }
                    this.editForm = { ...data.reference };
                    this.editAttachFile = null;
                    this.updateStorage();
                } else {
                    alert(data.error || 'Upload failed');
                }
            } catch (error) {
                console.error('Attach file failed:', error);
                alert('Upload failed');
            }
            this.attachingFile = false;
        },
        
        confirmDelete(ref) {
            this.deleteTarget = ref;
            this.showDeleteModal = true;
        },
        
        async deleteReference() {
            if (!this.deleteTarget) return;
            
            this.deleting = true;
            try {
                const response = await fetch(`{{ path('user_references_api_delete', {id: 0}) }}`.replace('/0', `/${this.deleteTarget.id}`), {
                    method: 'DELETE'
                });
                
                const data = await response.json();
                if (data.success) {
                    this.references = this.references.filter(r => r.id !== this.deleteTarget.id);
                    if (this.selectedRef && this.selectedRef.id === this.deleteTarget.id) {
                        this.selectedRef = null;
                    }
                    this.showDeleteModal = false;
                    this.deleteTarget = null;
                    this.updateFolders();
                    this.updateStorage();
                } else {
                    alert(data.error || 'Delete failed');
                }
            } catch (error) {
                console.error('Delete failed:', error);
                alert('Delete failed');
            }
            this.deleting = false;
        },
        
        async bulkDelete() {
            if (!confirm('{{ 'references.bulk_delete_confirm'|trans }}')) return;
            
            try {
                const response = await fetch('{{ path('user_references_api_bulk_delete') }}', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ ids: this.selectedIds })
                });
                
                const data = await response.json();
                if (data.success) {
                    this.references = this.references.filter(r => !this.selectedIds.includes(r.id));
                    this.selectedIds = [];
                    this.updateFolders();
                    this.updateStorage();
                }
            } catch (error) {
                console.error('Bulk delete failed:', error);
            }
        },
        
        async moveToFolder() {
            const folder = this.newFolderName || this.moveFolder;
            
            try {
                const response = await fetch('{{ path('user_references_api_bulk_move') }}', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ ids: this.selectedIds, folder: folder })
                });
                
                const data = await response.json();
                if (data.success) {
                    this.selectedIds.forEach(id => {
                        const ref = this.references.find(r => r.id === id);
                        if (ref) ref.folder = folder;
                    });
                    this.selectedIds = [];
                    this.showMoveModal = false;
                    this.moveFolder = '';
                    this.newFolderName = '';
                    this.updateFolders();
                }
            } catch (error) {
                console.error('Move failed:', error);
            }
        },
        
        async updateFolders() {
            try {
                const response = await fetch('{{ path('user_references_api_folders') }}');
                const data = await response.json();
                if (data.success) {
                    this.folders = data.folders;
                }
            } catch (error) {
                console.error('Failed to update folders:', error);
            }
        },
        
        async updateStorage() {
            try {
                const response = await fetch('{{ path('user_references_api_storage') }}');
                const data = await response.json();
                if (data.success) {
                    this.storageStats = data.storage;
                }
            } catch (error) {
                console.error('Failed to update storage:', error);
            }
        },

        startOcrPolling() {
            // Poll every 8 seconds for references still processing
            this.ocrPollInterval = setInterval(() => this.pollOcrStatus(), 8000);
        },

        stopOcrPolling() {
            if (this.ocrPollInterval) {
                clearInterval(this.ocrPollInterval);
                this.ocrPollInterval = null;
            }
        },

        async pollOcrStatus() {
            const processing = this.references.filter(r => 
                r.ocrStatus === 'processing' || r.ocrStatus === 'indexing' ||
                r.summaryStatus === 'pending' || r.summaryStatus === 'processing' ||
                r.summaryStatus === 'translating'
            );
            if (processing.length === 0) {
                return; // Nothing to poll
            }

            const ids = processing.map(r => r.id).join(',');
            try {
                const response = await fetch(`{{ path('user_references_api_ocr_status') }}?ids=${ids}`);
                const data = await response.json();
                if (data.statuses) {
                    for (const [id, status] of Object.entries(data.statuses)) {
                        const ref = this.references.find(r => r.id == id);
                        if (ref) {
                            ref.ocrStatus = status.ocrStatus;
                            ref.isProcessed = status.isProcessed;
                            // Update summary status
                            if (status.summaryStatus) {
                                const prevStatus = ref.summaryStatus;
                                ref.summaryStatus = status.summaryStatus;
                                if (status.summary) {
                                    ref.summary = status.summary;
                                }
                                // If summary just completed and this is the selected ref, init panel editor
                                if (status.summaryStatus === 'completed' && prevStatus !== 'completed' 
                                    && this.selectedRef && this.selectedRef.id == id) {
                                    this.selectedRef.summary = status.summary;
                                    this.selectedRef.summaryStatus = 'completed';
                                    this.detailTab = 'summary';
                                    this.$nextTick(() => this.initPanelEditor());
                                }
                            }
                        }
                    }
                }
            } catch (error) {
                console.error('OCR status poll failed:', error);
            }
        },

        // ===== Summary Methods =====
        async openSummary(ref) {
            this.summaryRef = ref;
            this.summaryContent = '';
            this.summaryStatus = ref.summaryStatus;
            this.summaryGeneratedAt = null;
            this.showSummaryModal = true;

            // Fetch existing summary
            try {
                const response = await fetch(`/myreferences/api/${ref.id}/summary`);
                const data = await response.json();
                if (data.summary) {
                    this.summaryContent = data.summary;
                    this.summaryGeneratedAt = data.summaryGeneratedAt;
                }
                this.summaryStatus = data.summaryStatus;

                // If currently generating, start polling
                if (this.summaryStatus === 'pending' || this.summaryStatus === 'processing') {
                    this.startSummaryPolling();
                } else if (this.summaryContent) {
                    this.$nextTick(() => this.initSummaryEditor());
                }
            } catch (error) {
                console.error('Failed to fetch summary:', error);
            }
        },

        async triggerSummarize() {
            if (!this.summaryRef || this.summarizing) return;
            this.summarizing = true;

            try {
                const response = await fetch(`/myreferences/api/${this.summaryRef.id}/summarize`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' }
                });
                const data = await response.json();
                if (data.success || data.status) {
                    this.summaryStatus = data.status || 'pending';
                    this.summaryContent = '';
                    this.destroySummaryEditor();

                    // Update reference in list
                    const ref = this.references.find(r => r.id === this.summaryRef.id);
                    if (ref) ref.summaryStatus = this.summaryStatus;

                    this.startSummaryPolling();
                } else {
                    alert(data.error || 'Failed to start summarization');
                }
            } catch (error) {
                console.error('Failed to trigger summarization:', error);
                alert('Failed to start summarization');
            } finally {
                this.summarizing = false;
            }
        },

        startSummaryPolling() {
            this.stopSummaryPolling();
            this.summaryPollTimer = setInterval(async () => {
                if (!this.summaryRef) {
                    this.stopSummaryPolling();
                    return;
                }

                try {
                    const response = await fetch(`/myreferences/api/${this.summaryRef.id}/summary`);
                    const data = await response.json();
                    this.summaryStatus = data.summaryStatus;

                    // Update reference in list
                    const ref = this.references.find(r => r.id === this.summaryRef.id);
                    if (ref) ref.summaryStatus = data.summaryStatus;
                    // Also update selectedRef
                    if (this.selectedRef && this.selectedRef.id === this.summaryRef.id) {
                        this.selectedRef.summaryStatus = data.summaryStatus;
                    }

                    if (data.summaryStatus === 'completed' && data.summary) {
                        this.summaryContent = data.summary;
                        this.summaryGeneratedAt = data.summaryGeneratedAt;
                        if (ref) ref.summary = data.summary;
                        if (this.selectedRef && this.selectedRef.id === this.summaryRef.id) {
                            this.selectedRef.summary = data.summary;
                            // Init panel editor if on summary tab
                            this.$nextTick(() => this.initPanelEditor());
                        }
                        this.stopSummaryPolling();
                        this.$nextTick(() => this.initSummaryEditor());
                    } else if (data.summaryStatus === 'failed') {
                        this.stopSummaryPolling();
                        this.summaryStatus = null; // reset to show generate button
                        alert('{{ 'references.summary_failed'|trans }}');
                    }
                } catch (error) {
                    console.error('Summary poll error:', error);
                }
            }, 4000);
        },

        stopSummaryPolling() {
            if (this.summaryPollTimer) {
                clearInterval(this.summaryPollTimer);
                this.summaryPollTimer = null;
            }
        },

        initSummaryEditor() {
            this.destroySummaryEditor();
            if (typeof tinymce !== 'undefined') {
                tinymce.init({
                    selector: '#summary-editor',
                    height: 450,
                    menubar: false,
                    directionality: document.documentElement.dir === 'rtl' ? 'rtl' : 'ltr',
                    plugins: 'lists link autolink wordcount directionality',
                    toolbar: 'undo redo | bold italic underline | bullist numlist | ltr rtl | link | removeformat',
                    content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.7; padding: 10px; }',
                    setup: (editor) => {
                        this.summaryEditor = editor;
                        editor.on('init', () => {
                            editor.setContent(this.summaryContent || '');
                        });
                    }
                });
            }
        },

        destroySummaryEditor() {
            if (this.summaryEditor) {
                this.summaryEditor.destroy();
                this.summaryEditor = null;
            } else if (typeof tinymce !== 'undefined') {
                tinymce.remove('#summary-editor');
            }
        },

        // ===== Panel inline summary editor =====
        initPanelEditor() {
            this.destroyPanelEditor();
            if (typeof tinymce === 'undefined' || !this.selectedRef) return;
            const summaryContent = this.selectedRef.summary || '';
            // Wait for DOM to be fully rendered
            setTimeout(() => {
                const el = document.getElementById('panel-summary-editor');
                if (!el) return;
                // Pre-fill textarea so TinyMCE reads content during init
                el.value = summaryContent;
                // Use viewport-based height
                const editorHeight = Math.max(300, window.innerHeight - 340);
                tinymce.init({
                    selector: '#panel-summary-editor',
                    height: editorHeight,
                    menubar: false,
                    directionality: document.documentElement.dir === 'rtl' ? 'rtl' : 'ltr',
                    plugins: 'lists link autolink wordcount directionality',
                    toolbar: 'undo redo | bold italic underline | bullist numlist | ltr rtl | link | removeformat',
                    content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.7; padding: 10px; color: #333; background: #fff; }',
                    init_instance_callback: (editor) => {
                        // Force content into the iframe body after full init
                        const body = editor.getBody();
                        if (body && (!body.textContent || body.textContent.trim() === '')) {
                            editor.setContent(summaryContent);
                        }
                        // Force visibility and repaint
                        const wrapper = editor.getContainer();
                        if (wrapper) {
                            wrapper.style.visibility = 'visible';
                        }
                        const iframe = editor.iframeElement;
                        if (iframe) {
                            iframe.style.visibility = 'visible';
                            iframe.style.display = 'block';
                        }
                        if (body) {
                            body.style.visibility = 'visible';
                            body.style.opacity = '1';
                        }
                    },
                    setup: (editor) => {
                        this.panelEditor = editor;
                        editor.on('init', () => {
                            editor.setContent(summaryContent);
                            this.panelSummaryDirty = false;
                        });
                        editor.on('change keyup', () => {
                            this.panelSummaryDirty = true;
                            this.panelSaved = false;
                        });
                    }
                });
            }, 200);
        },

        destroyPanelEditor() {
            if (this.panelEditor) {
                this.panelEditor.destroy();
                this.panelEditor = null;
            } else if (typeof tinymce !== 'undefined') {
                tinymce.remove('#panel-summary-editor');
            }
        },

        async savePanelSummary() {
            if (!this.selectedRef || this.panelSaving || !this.panelEditor) return;
            this.panelSaving = true;
            const content = this.panelEditor.getContent();
            try {
                const response = await fetch(`/myreferences/api/${this.selectedRef.id}/summary`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ summary: content })
                });
                const data = await response.json();
                if (data.success) {
                    // Update in references list
                    const ref = this.references.find(r => r.id === this.selectedRef.id);
                    if (ref) {
                        ref.summary = content;
                        ref.summaryStatus = 'completed';
                    }
                    this.selectedRef.summary = content;
                    this.selectedRef.summaryStatus = 'completed';
                    this.panelSummaryDirty = false;
                    this.panelSaved = true;
                    setTimeout(() => { this.panelSaved = false; }, 2000);
                } else {
                    alert(data.error || 'Save failed');
                }
            } catch (error) {
                console.error('Panel save failed:', error);
                alert('Save failed');
            } finally {
                this.panelSaving = false;
            }
        },

        onBeforeUnload(e) {
            if (this.panelSummaryDirty) {
                e.preventDefault();
                e.returnValue = '';
            }
        },

        async translateSummary(targetLang) {
            if (!this.selectedRef || !this.selectedRef.summary || this.translating) return;
            this.showTranslateOptions = false;
            this.translating = true;
            try {
                const response = await fetch(`/myreferences/api/${this.selectedRef.id}/translate-summary`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        targetLanguage: targetLang,
                        sourceLanguage: this.selectedRef.language || 'en',
                        persona: 'scientific'
                    })
                });
                const data = await response.json();
                if (data.success) {
                    // Update local status — polling will detect completion
                    this.selectedRef.summaryStatus = 'translating';
                    const ref = this.references.find(r => r.id === this.selectedRef.id);
                    if (ref) ref.summaryStatus = 'translating';
                    // Destroy editor while translating
                    this.destroyPanelEditor();
                } else {
                    alert(data.error || 'Translation failed');
                }
            } catch (error) {
                console.error('Translation failed:', error);
                alert('Translation failed');
            } finally {
                this.translating = false;
            }
        },

        async saveSummary() {
            if (!this.summaryRef || this.savingSummary) return;
            this.savingSummary = true;

            let content = this.summaryContent;
            if (this.summaryEditor) {
                content = this.summaryEditor.getContent();
            }

            try {
                const response = await fetch(`/myreferences/api/${this.summaryRef.id}/summary`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ summary: content })
                });
                const data = await response.json();
                if (data.success) {
                    this.summaryContent = content;
                    // Update in list
                    const ref = this.references.find(r => r.id === this.summaryRef.id);
                    if (ref) {
                        ref.summary = content;
                        ref.summaryStatus = 'completed';
                    }
                    // Update selectedRef if same
                    if (this.selectedRef && this.selectedRef.id === this.summaryRef.id) {
                        this.selectedRef.summary = content;
                        this.selectedRef.summaryStatus = 'completed';
                    }
                    // Show brief "Saved" feedback
                    this.summarySaved = true;
                    setTimeout(() => { this.summarySaved = false; }, 1500);
                }
            } catch (error) {
                console.error('Failed to save summary:', error);
                alert('Failed to save summary');
            } finally {
                this.savingSummary = false;
            }
        },

        async copySummary() {
            let content = this.summaryContent;
            if (this.summaryEditor) {
                content = this.summaryEditor.getContent({ format: 'text' });
            }
            try {
                await navigator.clipboard.writeText(content);
                // Brief feedback
                const btn = event.target.closest('button');
                if (btn) {
                    const original = btn.innerHTML;
                    btn.innerHTML = '<i class="fa fa-check"></i> {{ 'references.copied'|trans }}';
                    setTimeout(() => { btn.innerHTML = original; }, 1500);
                }
            } catch (e) {
                // Fallback
                const ta = document.createElement('textarea');
                ta.value = content;
                document.body.appendChild(ta);
                ta.select();
                document.execCommand('copy');
                document.body.removeChild(ta);
            }
        },

        downloadSummary(refId) {
            const id = refId || (this.summaryRef ? this.summaryRef.id : null);
            if (!id) return;
            window.open(`/myreferences/api/${id}/summary/download`, '_blank');
        },

        closeSummary() {
            this.stopSummaryPolling();
            this.destroySummaryEditor();
            this.showSummaryModal = false;
            this.summaryRef = null;
            this.summaryContent = '';
            this.summaryStatus = null;
        }
    }
}).mount('#references-app');
</script>
{% endblock %}