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

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

{% block og_title %}{{ 'related_work.title'|trans({}, 'RelatedWork') }} — Shamra Academia{% endblock %}
{% block og_description %}{{ 'related_work.description'|trans({}, 'RelatedWork') }}{% endblock %}
{% block metaDescription %}{{ 'related_work.description'|trans({}, 'RelatedWork') }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        :root {
            --rw-primary: #7c3aed;
            --rw-primary-light: #ede9fe;
            --rw-primary-dark: #5b21b6;
            --rw-bg: #f8f9fa;
            --rw-card: #ffffff;
            --rw-border: #e2e8f0;
            --rw-text: #1a202c;
            --rw-text-secondary: #64748b;
            --rw-success: #10b981;
            --rw-error: #ef4444;
            --rw-warning: #f59e0b;
        }

        .rw-page {
            display: flex;
            height: calc(100vh - 60px);
            background: var(--rw-bg);
            direction: rtl;
        }

        /* ── Sidebar ────────────────────────────────────── */
        .rw-sidebar {
            width: 280px;
            min-width: 280px;
            background: var(--rw-card);
            border-left: 1px solid var(--rw-border);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .rw-sidebar-header {
            padding: 16px;
            border-bottom: 1px solid var(--rw-border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .rw-sidebar-header h3 {
            margin: 0;
            font-size: 16px;
            color: var(--rw-text);
        }

        .rw-new-btn {
            background: var(--rw-primary);
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 6px 14px;
            font-size: 13px;
            cursor: pointer;
            transition: background 0.2s;
        }
        .rw-new-btn:hover { background: var(--rw-primary-dark); }

        .rw-project-list {
            flex: 1;
            overflow-y: auto;
            padding: 8px;
        }

        .rw-project-item {
            padding: 12px;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.15s;
            margin-bottom: 4px;
            border: 2px solid transparent;
        }
        .rw-project-item:hover { background: var(--rw-primary-light); }
        .rw-project-item.active { background: var(--rw-primary-light); border-color: var(--rw-primary); }

        .rw-project-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--rw-text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 4px;
        }

        .rw-project-meta {
            font-size: 12px;
            color: var(--rw-text-secondary);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .rw-status-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
        }
        .rw-status-draft { background: #e2e8f0; color: #475569; }
        .rw-status-clarifying { background: #fef3c7; color: #92400e; }
        .rw-status-processing { background: #dbeafe; color: #1d4ed8; }
        .rw-status-completed { background: #d1fae5; color: #065f46; }
        .rw-status-failed { background: #fee2e2; color: #991b1b; }

        /* ── Main Content ───────────────────────────────── */
        .rw-main {
            flex: 1;
            overflow-y: auto;
            padding: 32px;
        }

        .rw-create-form {
            max-width: 700px;
            margin: 60px auto;
            text-align: center;
        }

        .rw-create-form h2 {
            font-size: 28px;
            color: var(--rw-text);
            margin-bottom: 8px;
        }

        .rw-create-form p {
            color: var(--rw-text-secondary);
            margin-bottom: 24px;
            font-size: 15px;
        }

        .rw-topic-input {
            width: 100%;
            min-height: 80px;
            padding: 16px;
            border: 2px solid var(--rw-border);
            border-radius: 12px;
            font-size: 16px;
            font-family: inherit;
            resize: vertical;
            direction: rtl;
            transition: border-color 0.2s;
        }
        .rw-topic-input:focus { outline: none; border-color: var(--rw-primary); }

        /* ── Advanced Options ──────────────────────────── */
        .rw-advanced-panel {
            margin-top: 16px;
            border: 1px solid var(--rw-border);
            border-radius: 12px;
            padding: 16px;
            background: #fafbfc;
        }

        .rw-advanced-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 14px;
            font-size: 14px;
            font-weight: 600;
            color: var(--rw-text);
        }
        .rw-advanced-header .rw-pro-badge {
            background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
            color: #fff;
            font-size: 10px;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 10px;
            letter-spacing: 0.5px;
        }

        .rw-upgrade-banner {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            margin-bottom: 14px;
            background: linear-gradient(135deg, #ede9fe 0%, #fef3c7 100%);
            border-radius: 8px;
            font-size: 13px;
            color: #5b21b6;
        }
        .rw-upgrade-banner .fa-lock { font-size: 14px; }
        .rw-upgrade-link {
            margin-right: auto;
            font-weight: 600;
            color: var(--rw-primary);
            text-decoration: underline;
        }

        .rw-option-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }
        .rw-option-grid.rw-options-disabled {
            opacity: 0.5;
            pointer-events: none;
        }
        .rw-option-group {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .rw-option-label {
            font-size: 13px;
            font-weight: 600;
            color: var(--rw-text);
        }
        .rw-option-description {
            font-size: 12px;
            color: var(--rw-text-secondary);
            margin-bottom: 4px;
        }
        .rw-option-select {
            padding: 8px 10px;
            border: 1px solid var(--rw-border);
            border-radius: 8px;
            font-size: 13px;
            background: #fff;
            color: var(--rw-text);
        }
        .rw-option-select:focus { outline: none; border-color: var(--rw-primary); }

        .rw-option-toggles {
            grid-column: 1 / -1;
        }
        .rw-toggle-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 0;
            font-size: 13px;
            color: var(--rw-text);
            cursor: pointer;
        }
        .rw-toggle-item input[type="checkbox"] {
            accent-color: var(--rw-primary);
            width: 16px;
            height: 16px;
        }

        .rw-radio-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            font-size: 13px;
            color: var(--rw-text);
            cursor: pointer;
            border: 1px solid var(--rw-border);
            border-radius: 8px;
            transition: border-color 0.2s, background 0.2s;
        }
        .rw-radio-item:has(input:checked) {
            border-color: var(--rw-primary);
            background: var(--rw-primary-light);
        }
        .rw-radio-item input[type="radio"] {
            accent-color: var(--rw-primary);
            width: 16px;
            height: 16px;
        }

        .rw-deeper-options {
            padding: 8px 0 0 28px;
            display: flex;
            flex-direction: column;
            gap: 2px;
            transition: opacity 0.2s;
        }
        .rw-deeper-options.rw-disabled {
            opacity: 0.35;
            pointer-events: none;
        }
        .rw-sub-option {
            padding: 4px 0;
        }

        @media (max-width: 768px) {
            .rw-option-grid { grid-template-columns: 1fr; }
        }

        .rw-form-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 16px;
            gap: 12px;
        }

        .rw-lang-section {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .rw-lang-label {
            font-size: 13px;
            color: var(--rw-text-secondary);
            white-space: nowrap;
        }

        .rw-create-action {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .rw-credit-cost {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 14px;
            font-weight: 600;
            color: var(--rw-text-secondary);
            cursor: default;
            transition: all 0.2s;
        }
        .rw-credit-cost #credit-cost-value {
            font-size: 16px;
            font-weight: 700;
            color: var(--rw-text);
        }
        .rw-coin { font-size: 18px; line-height: 1; }

        .rw-lang-toggle {
            display: flex;
            border: 1px solid var(--rw-border);
            border-radius: 8px;
            overflow: hidden;
        }

        .rw-lang-btn {
            padding: 8px 16px;
            border: none;
            background: transparent;
            cursor: pointer;
            font-size: 13px;
            transition: all 0.15s;
        }
        .rw-lang-btn.active { background: var(--rw-primary); color: #fff; }

        .rw-generate-btn {
            background: linear-gradient(135deg, #8b5cf6, #6d28d9);
            color: #fff;
            border: none;
            border-radius: 10px;
            padding: 12px 32px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.15s, box-shadow 0.15s;
        }
        .rw-generate-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(109,40,217,0.3); }
        .rw-generate-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }

        /* ── Clarification Q&A ──────────────────────────── */
        .rw-clarifications {
            max-width: 700px;
            margin: 32px auto;
        }

        .rw-clarification-card {
            background: var(--rw-card);
            border: 1px solid var(--rw-border);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 16px;
        }

        .rw-clarification-q {
            font-size: 15px;
            font-weight: 600;
            color: var(--rw-text);
            margin-bottom: 4px;
        }

        .rw-clarification-hint {
            font-size: 13px;
            color: var(--rw-text-secondary);
            margin-bottom: 12px;
        }

        .rw-clarification-input {
            width: 100%;
            padding: 10px 14px;
            border: 1px solid var(--rw-border);
            border-radius: 8px;
            font-size: 14px;
            font-family: inherit;
            direction: inherit;
        }
        .rw-clarification-input:focus { outline: none; border-color: var(--rw-primary); }

        /* ── Reference Library Tip ──────────────────────── */
        .rw-ref-tip {
            max-width: 700px;
            margin: 20px auto;
            background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
            border: 1px solid #ddd6fe;
            border-radius: 12px;
            padding: 20px;
        }

        .rw-ref-tip h4 {
            margin: 0 0 8px;
            font-size: 15px;
            color: var(--rw-primary-dark);
        }

        .rw-ref-tip p {
            font-size: 13px;
            color: #4c1d95;
            margin: 0 0 12px;
            line-height: 1.6;
        }

        .rw-ref-tip-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .rw-ref-tip-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--rw-primary);
            color: #fff;
            padding: 8px 16px;
            border-radius: 8px;
            font-size: 13px;
            text-decoration: none;
            transition: background 0.2s;
        }
        .rw-ref-tip-link:hover { background: var(--rw-primary-dark); color: #fff; }

        .rw-ref-tip-dismiss {
            background: none;
            border: none;
            color: #7c3aed;
            font-size: 12px;
            cursor: pointer;
        }

        /* ── Agent Steps Timeline ───────────────────────── */
        .rw-timeline {
            max-width: 700px;
            margin: 24px auto;
        }

        .rw-timeline-step {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 10px 0;
            opacity: 0;
            animation: rwFadeIn 0.3s ease forwards;
        }

        @keyframes rwFadeIn {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .rw-timeline-step.instant { animation: none; opacity: 1; }

        .rw-step-icon {
            font-size: 20px;
            width: 32px;
            text-align: center;
            flex-shrink: 0;
        }

        .rw-step-content {
            flex: 1;
        }

        .rw-step-message {
            font-size: 14px;
            color: var(--rw-text);
        }

        .rw-step-spinner {
            display: inline-block;
            width: 14px;
            height: 14px;
            border: 2px solid var(--rw-border);
            border-top-color: var(--rw-primary);
            border-radius: 50%;
            animation: rwSpin 0.8s linear infinite;
            margin-left: 8px;
            vertical-align: middle;
        }

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

        .rw-step-check {
            color: var(--rw-success);
            margin-left: 8px;
        }

        /* ── Content Area ───────────────────────────────── */
        .rw-content-area {
            max-width: 700px;
            margin: 24px auto;
        }

        .rw-title-edit {
            width: 100%;
            font-size: 22px;
            font-weight: 700;
            border: none;
            border-bottom: 2px solid transparent;
            padding: 8px 0;
            color: var(--rw-text);
            background: transparent;
            font-family: inherit;
            direction: inherit;
            transition: border-color 0.2s;
        }
        .rw-title-edit:focus { outline: none; border-bottom-color: var(--rw-primary); }

        .rw-content-text {
            font-size: 15px;
            line-height: 1.8;
            color: var(--rw-text);
            white-space: pre-wrap;
        }

        .rw-content-text h2, .rw-content-text h3 {
            margin-top: 24px;
            margin-bottom: 12px;
            color: var(--rw-text);
        }

        .rw-content-edit {
            width: 100%;
            min-height: 400px;
            padding: 16px;
            border: 1px solid var(--rw-border);
            border-radius: 12px;
            font-size: 15px;
            line-height: 1.8;
            font-family: inherit;
            resize: vertical;
            direction: inherit;
        }

        .rw-actions-bar {
            display: flex;
            gap: 8px;
            margin-top: 16px;
            flex-wrap: wrap;
        }

        .rw-action-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            border-radius: 8px;
            border: 1px solid var(--rw-border);
            background: var(--rw-card);
            color: var(--rw-text);
            font-size: 13px;
            cursor: pointer;
            transition: all 0.15s;
        }
        .rw-action-btn:hover { background: var(--rw-primary-light); border-color: var(--rw-primary); }
        .rw-action-btn.danger:hover { background: #fee2e2; border-color: var(--rw-error); color: var(--rw-error); }

        /* ── References Panel ───────────────────────────── */
        .rw-refs-panel {
            width: 300px;
            min-width: 300px;
            background: var(--rw-card);
            border-right: 1px solid var(--rw-border);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .rw-refs-header {
            padding: 16px;
            border-bottom: 1px solid var(--rw-border);
            font-size: 15px;
            font-weight: 600;
            color: var(--rw-text);
        }

        .rw-refs-list {
            flex: 1;
            overflow-y: auto;
            padding: 8px;
        }

        .rw-ref-card {
            padding: 12px;
            border: 1px solid var(--rw-border);
            border-radius: 8px;
            margin-bottom: 8px;
            transition: border-color 0.15s;
        }
        .rw-ref-card:hover { border-color: var(--rw-primary); }

        .rw-ref-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--rw-text);
            margin-bottom: 4px;
            line-height: 1.4;
        }

        .rw-ref-title a { color: inherit; text-decoration: none; }
        .rw-ref-title a:hover { color: var(--rw-primary); text-decoration: underline; }

        .rw-ref-meta {
            font-size: 11px;
            color: var(--rw-text-secondary);
            display: flex;
            gap: 8px;
            align-items: center;
            flex-wrap: wrap;
        }

        .rw-source-badge {
            display: inline-block;
            padding: 1px 6px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
        }
        .rw-source-shamra { background: #ede9fe; color: #5b21b6; }
        .rw-source-arxiv { background: #fee2e2; color: #991b1b; }
        .rw-source-user_library { background: #d1fae5; color: #065f46; }

        .rw-score-bar {
            width: 40px;
            height: 4px;
            background: #e2e8f0;
            border-radius: 2px;
            overflow: hidden;
        }
        .rw-score-fill {
            height: 100%;
            border-radius: 2px;
            background: var(--rw-success);
        }

        /* ── Typing cursor animation ────────────────────── */
        .rw-typing-cursor::after {
            content: '▊';
            animation: rwBlink 0.7s infinite;
            color: var(--rw-primary);
        }
        @keyframes rwBlink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }

        /* ── Citation links ─────────────────────────────── */
        .rw-cite-link {
            color: var(--rw-primary);
            text-decoration: none;
            font-weight: 600;
            cursor: pointer;
        }
        .rw-cite-link:hover {
            text-decoration: underline;
        }

        /* ── Responsive ─────────────────────────────────── */
        @media (max-width: 1024px) {
            .rw-refs-panel { display: none; }
        }
        @media (max-width: 768px) {
            .rw-page { flex-direction: column; height: auto; }
            .rw-sidebar { width: 100%; min-width: auto; max-height: 200px; border-left: none; border-bottom: 1px solid var(--rw-border); }
            .rw-project-list { display: flex; overflow-x: auto; gap: 8px; padding: 8px; }
            .rw-project-item { min-width: 180px; flex-shrink: 0; }
            .rw-main { padding: 16px; }
        }
    </style>
{% endblock %}

{% block body %}
<div class="rw-page" id="rw-app">

    {# ── Sidebar ─────────────────────────────────────────── #}
    <div class="rw-sidebar">
        <div class="rw-sidebar-header">
            <h3>{{ 'related_work.my_projects'|trans({}, 'RelatedWork') }}</h3>
            <button class="rw-new-btn" onclick="showCreateForm()">
                <i class="fa fa-plus"></i> {{ 'related_work.new'|trans({}, 'RelatedWork') }}
            </button>
        </div>
        <div class="rw-project-list" id="project-list">
            {% for project in projects %}
                <div class="rw-project-item {% if activeProject is defined and activeProject and activeProject.slug == project.slug %}active{% endif %}"
                     onclick="loadProject('{{ project.slug }}')" data-slug="{{ project.slug }}">
                    <div class="rw-project-title">{{ project.title }}</div>
                    <div class="rw-project-meta">
                        <span>{{ project.createdAt|date('Y/m/d') }}</span>
                        <span class="rw-status-badge rw-status-{{ project.status }}">
                            {% if project.status == 'draft' %}📝{% elseif project.status == 'processing' %}⏳{% elseif project.status == 'completed' %}✅{% elseif project.status == 'failed' %}❌{% else %}🔄{% endif %}
                        </span>
                    </div>
                </div>
            {% endfor %}
            {% if projects is empty %}
                <p style="text-align:center;color:var(--rw-text-secondary);padding:24px;font-size:14px;">
                    {{ 'related_work.no_projects'|trans({}, 'RelatedWork') }}
                </p>
            {% endif %}
        </div>
    </div>

    {# ── Main Content ────────────────────────────────────── #}
    <div class="rw-main" id="rw-main-content">

        {# ── Create Form (default when no project is active) ── #}
        <div class="rw-create-form" id="create-form" {% if activeProject is defined and activeProject %}style="display:none"{% endif %}>
            <h2>{{ 'related_work.create_title'|trans({}, 'RelatedWork') }}</h2>
            <p>{{ 'related_work.create_subtitle'|trans({}, 'RelatedWork') }}</p>

            <textarea class="rw-topic-input" id="topic-input"
                      placeholder="{{ 'related_work.topic_placeholder'|trans({}, 'RelatedWork') }}"></textarea>

            {# ── Advanced Options (always visible, disabled for trial) ── #}
            <div class="rw-advanced-panel" id="advanced-panel">
                <div class="rw-advanced-header">
                    <i class="fa fa-sliders"></i>
                    <span>{{ 'related_work.advanced_options'|trans({}, 'RelatedWork') }}</span>
                    {% if not isPaidTier %}
                        <span class="rw-pro-badge">PRO</span>
                    {% endif %}
                </div>

                {% if not isPaidTier %}
                    <div class="rw-upgrade-banner">
                        <i class="fa fa-lock"></i>
                        {{ 'related_work.upgrade_to_unlock'|trans({}, 'RelatedWork') }}
                        <a href="/subscription" class="rw-upgrade-link">{{ 'related_work.upgrade_now'|trans({}, 'RelatedWork') }}</a>
                    </div>
                {% endif %}

                <div class="rw-option-grid {% if not isPaidTier %}rw-options-disabled{% endif %}">
                    {# Paper count #}
                    <div class="rw-option-group">
                        <label class="rw-option-label">{{ 'related_work.opt_max_papers'|trans({}, 'RelatedWork') }}</label>
                        <div class="rw-option-description">{{ 'related_work.opt_max_papers_desc'|trans({}, 'RelatedWork') }}</div>
                        <select id="opt-max-papers" class="rw-option-select" {% if not isPaidTier %}disabled{% endif %}>
                            <option value="0">{{ 'related_work.opt_auto'|trans({}, 'RelatedWork') }}</option>
                            <option value="5">5</option>
                            <option value="10">10</option>
                            <option value="15">15</option>
                            <option value="20">20</option>
                            <option value="30">30</option>
                        </select>
                    </div>

                    {# Target length #}
                    <div class="rw-option-group">
                        <label class="rw-option-label">{{ 'related_work.opt_length'|trans({}, 'RelatedWork') }}</label>
                        <div class="rw-option-description">{{ 'related_work.opt_length_desc'|trans({}, 'RelatedWork') }}</div>
                        <select id="opt-target-length" class="rw-option-select" {% if not isPaidTier %}disabled{% endif %}>
                            <option value="short">{{ 'related_work.opt_length_short'|trans({}, 'RelatedWork') }}</option>
                            <option value="medium" selected>{{ 'related_work.opt_length_medium'|trans({}, 'RelatedWork') }}</option>
                            <option value="long">{{ 'related_work.opt_length_long'|trans({}, 'RelatedWork') }}</option>
                            <option value="comprehensive">{{ 'related_work.opt_length_comprehensive'|trans({}, 'RelatedWork') }}</option>
                        </select>
                    </div>

                    {# Analysis depth — radio: review-only vs deeper #}
                    <div class="rw-option-group rw-option-toggles">
                        <label class="rw-option-label">{{ 'related_work.opt_focus'|trans({}, 'RelatedWork') }}</label>

                        <label class="rw-radio-item">
                            <input type="radio" name="analysis-depth" value="review" id="opt-review-only" checked onchange="updateDepthMode()" {% if not isPaidTier %}disabled{% endif %}>
                            <span>{{ 'related_work.opt_review_only'|trans({}, 'RelatedWork') }}</span>
                        </label>

                        <label class="rw-radio-item">
                            <input type="radio" name="analysis-depth" value="deeper" id="opt-deeper" onchange="updateDepthMode()" {% if not isPaidTier %}disabled{% endif %}>
                            <span>{{ 'related_work.opt_deeper'|trans({}, 'RelatedWork') }}</span>
                        </label>

                        <div class="rw-deeper-options rw-disabled" id="deeper-options">
                            <label class="rw-toggle-item rw-sub-option">
                                <input type="checkbox" id="opt-methodology" checked {% if not isPaidTier %}disabled{% endif %}>
                                <span>{{ 'related_work.opt_methodology'|trans({}, 'RelatedWork') }}</span>
                            </label>

                            <label class="rw-toggle-item rw-sub-option">
                                <input type="checkbox" id="opt-findings" checked {% if not isPaidTier %}disabled{% endif %}>
                                <span>{{ 'related_work.opt_findings'|trans({}, 'RelatedWork') }}</span>
                            </label>

                            <label class="rw-toggle-item rw-sub-option">
                                <input type="checkbox" id="opt-gaps" checked {% if not isPaidTier %}disabled{% endif %}>
                                <span>{{ 'related_work.opt_gaps'|trans({}, 'RelatedWork') }}</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="rw-form-actions">
                <div class="rw-lang-section">
                    <span class="rw-lang-label">{{ 'related_work.lang_label'|trans({}, 'RelatedWork') }}</span>
                    <div class="rw-lang-toggle">
                        <button class="rw-lang-btn active" data-lang="ar" onclick="setLanguage('ar', this)">العربية</button>
                        <button class="rw-lang-btn" data-lang="en" onclick="setLanguage('en', this)">English</button>
                    </div>
                </div>
                <div class="rw-create-action">
                    <span class="rw-credit-cost" id="credit-cost-display" title="{{ 'related_work.credits'|trans({}, 'RelatedWork') }}">
                        {{ 'related_work.cost_label'|trans({}, 'RelatedWork') }}
                        <span class="rw-coin">🪙</span>
                        <span id="credit-cost-value">{{ creditsBasic }}</span>
                    </span>
                    <button class="rw-generate-btn" onclick="startProject()" id="create-btn">
                        {{ 'related_work.create_btn'|trans({}, 'RelatedWork') }}
                    </button>
                </div>
            </div>
        </div>

        {# ── Project View (rendered by JS) ── #}
        <div id="project-view" {% if activeProject is not defined or not activeProject %}style="display:none"{% endif %}>
            {# Timeline #}
            <div class="rw-timeline" id="agent-timeline"></div>

            {# Content area #}
            <div class="rw-content-area" id="content-area">
                <input type="text" class="rw-title-edit" id="project-title" value=""
                       onblur="saveTitle()" placeholder="{{ 'related_work.title_placeholder'|trans({}, 'RelatedWork') }}">

                <div class="rw-content-text" id="project-content"></div>

                <div class="rw-actions-bar" id="actions-bar" style="display:none">
                    <button class="rw-action-btn" onclick="copyContent()"><i class="fa fa-copy"></i> {{ 'related_work.copy'|trans({}, 'RelatedWork') }}</button>
                    <button class="rw-action-btn" onclick="toggleEdit()"><i class="fa fa-edit"></i> {{ 'related_work.edit'|trans({}, 'RelatedWork') }}</button>
                    <button class="rw-action-btn danger" onclick="deleteProject()"><i class="fa fa-trash"></i> {{ 'related_work.delete'|trans({}, 'RelatedWork') }}</button>
                </div>
            </div>

            {# Clarifications form (shown during clarification phase) #}
            <div class="rw-clarifications" id="clarifications-area" style="display:none"></div>

            {# Reference Library Tip #}
            <div class="rw-ref-tip" id="ref-library-tip" style="display:none">
                <h4>📚 {{ 'related_work.boost_title'|trans({}, 'RelatedWork') }}</h4>
                <p>{{ 'related_work.boost_body'|trans({}, 'RelatedWork') }}</p>
                <p id="ref-count-text" style="font-weight:600;margin-bottom:12px;"></p>
                <div class="rw-ref-tip-actions">
                    <a href="/myreferences" target="_blank" class="rw-ref-tip-link">
                        📂 {{ 'related_work.open_library'|trans({}, 'RelatedWork') }}
                    </a>
                    <button class="rw-ref-tip-dismiss" onclick="dismissRefTip()">{{ 'related_work.hide'|trans({}, 'RelatedWork') }}</button>
                </div>
            </div>
        </div>
    </div>

    {# ── References Panel ────────────────────────────────── #}
    <div class="rw-refs-panel" id="refs-panel" style="display:none">
        <div class="rw-refs-header" id="refs-header">
            {{ 'related_work.references'|trans({}, 'RelatedWork') }}
        </div>
        <div class="rw-refs-list" id="refs-list"></div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
    (function() {
        'use strict';

        let currentSlug = {{ activeProject is defined and activeProject ? ("'" ~ activeProject.slug ~ "'")|raw : 'null' }};
        let currentLanguage = 'ar';
        let isEditing = false;
        let eventSource = null;

        // ── Initialize ─────────────────────────────────────
        {% if activeProject is defined and activeProject %}
            loadProjectData({{ activeProject.toArray()|json_encode(constant('JSON_UNESCAPED_UNICODE'))|raw }});
        {% endif %}

        // ── Navigation ─────────────────────────────────────
        window.showCreateForm = function() {
            currentSlug = null;
            document.getElementById('create-form').style.display = 'block';
            document.getElementById('project-view').style.display = 'none';
            document.getElementById('refs-panel').style.display = 'none';
            // Remove active class from sidebar items
            document.querySelectorAll('.rw-project-item').forEach(function(el) { el.classList.remove('active'); });
            // Update URL without reload
            history.pushState(null, '', '/related-work');
        };

        window.loadProject = function(slug) {
            fetch('/related-work/api/' + slug)
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    if (data.project) {
                        currentSlug = slug;
                        loadProjectData(data.project);
                        // Update URL
                        history.pushState(null, '', '/related-work/' + slug);
                        // Highlight sidebar
                        document.querySelectorAll('.rw-project-item').forEach(function(el) {
                            el.classList.toggle('active', el.dataset.slug === slug);
                        });
                    }
                });
        };

        function loadProjectData(project) {
            document.getElementById('create-form').style.display = 'none';
            document.getElementById('project-view').style.display = 'block';

            currentSlug = project.slug;
            currentLanguage = project.language || 'ar';

            // Title
            var titleEl = document.getElementById('project-title');
            titleEl.value = project.title;
            titleEl.style.direction = currentLanguage === 'ar' ? 'rtl' : 'ltr';

            // Content area
            var contentEl = document.getElementById('project-content');
            contentEl.style.direction = currentLanguage === 'ar' ? 'rtl' : 'ltr';

            // Agent steps timeline
            renderTimeline(project.agentSteps || [], true);

            if (project.status === 'completed') {
                currentReferences = project.references || [];
                contentEl.innerHTML = formatMarkdown(project.content || '', currentReferences);
                document.getElementById('actions-bar').style.display = 'flex';
                document.getElementById('clarifications-area').style.display = 'none';
                document.getElementById('ref-library-tip').style.display = 'none';
                renderReferences(project.references || []);
            } else if (project.status === 'draft' || project.status === 'clarifying') {
                contentEl.innerHTML = '';
                document.getElementById('actions-bar').style.display = 'none';
                document.getElementById('refs-panel').style.display = 'none';
                // Show clarification form
                startClarification(project);
            } else if (project.status === 'failed') {
                contentEl.innerHTML = '<div style="text-align:center;padding:40px;color:var(--rw-error);">' +
                    '<i class="fa fa-exclamation-triangle" style="font-size:32px;margin-bottom:12px;"></i>' +
                    '<p>' + (project.errorMessage || 'Generation failed') + '</p>' +
                    '<button class="rw-generate-btn" onclick="retryGeneration()" style="margin-top:16px;">إعادة المحاولة</button>' +
                    '</div>';
                document.getElementById('actions-bar').style.display = 'flex';
            } else if (project.status === 'processing') {
                contentEl.innerHTML = '<p style="color:var(--rw-text-secondary);text-align:center;">جارٍ المعالجة...</p>';
            }
        }

        // ── Credits: Basic vs Advanced ──────────────────
        var CREDITS_BASIC = {{ creditsBasic }};
        var CREDITS_ADVANCED = {{ creditsAdvanced }};

        function updateCreditDisplay() {
            var isReview = document.getElementById('opt-review-only').checked;
            var cost = isReview ? CREDITS_BASIC : CREDITS_ADVANCED;
            var el = document.getElementById('credit-cost-value');
            if (el) el.textContent = cost;
        }

        // ── Advanced Options: Depth Mode ────────────────
        window.updateDepthMode = function() {
            var isReview = document.getElementById('opt-review-only').checked;
            var deeperPanel = document.getElementById('deeper-options');
            if (isReview) {
                deeperPanel.classList.add('rw-disabled');
            } else {
                deeperPanel.classList.remove('rw-disabled');
                // Ensure at least one sub-option is checked
                var methodology = document.getElementById('opt-methodology');
                var findings = document.getElementById('opt-findings');
                var gaps = document.getElementById('opt-gaps');
                if (!methodology.checked && !findings.checked && !gaps.checked) {
                    methodology.checked = true;
                    findings.checked = true;
                    gaps.checked = true;
                }
            }
            updateCreditDisplay();
        };

        function getAdvancedOptions() {
            var isReview = document.getElementById('opt-review-only').checked;
            return {
                max_papers: parseInt(document.getElementById('opt-max-papers').value) || 0,
                target_length: document.getElementById('opt-target-length').value || 'medium',
                review_only: isReview,
                include_methodology: isReview ? false : document.getElementById('opt-methodology').checked,
                include_findings: isReview ? false : document.getElementById('opt-findings').checked,
                find_gaps: isReview ? false : document.getElementById('opt-gaps').checked,
            };
        }

        // ── Create Project ─────────────────────────────────
        window.startProject = function() {
            var topic = document.getElementById('topic-input').value.trim();
            if (!topic) return;

            var btn = document.getElementById('create-btn');
            btn.disabled = true;
            btn.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';

            var payload = {topic: topic, language: currentLanguage};
            {% if isPaidTier %}
            payload.options = getAdvancedOptions();
            {% endif %}

            fetch('/related-work/api/create', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(payload)
            })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (data.error) {
                    showCreditModal(data);
                    btn.disabled = false;
                    btn.textContent = "{{ 'related_work.create_btn'|trans({}, 'RelatedWork') }}";
                    return;
                }
                currentSlug = data.slug;
                // Add to sidebar
                addProjectToSidebar(data.project);
                // Start clarification
                loadProjectData(data.project);
                // Clear form
                document.getElementById('topic-input').value = '';
                btn.disabled = false;
                btn.textContent = "{{ 'related_work.create_btn'|trans({}, 'RelatedWork') }}";
                history.pushState(null, '', '/related-work/' + data.slug);
            })
            .catch(function() {
                btn.disabled = false;
                btn.textContent = "{{ 'related_work.create_btn'|trans({}, 'RelatedWork') }}";
            });
        };

        // ── Clarification ──────────────────────────────────
        function startClarification(project) {
            var area = document.getElementById('clarifications-area');
            area.style.display = 'block';
            area.innerHTML = '<p style="text-align:center;"><i class="fa fa-spinner fa-spin"></i> {{ "related_work.analyzing"|trans({}, "RelatedWork") }}...</p>';

            fetch('/related-work/api/clarify', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({topic: project.researchTopic, language: project.language})
            })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (data.sufficient) {
                    area.style.display = 'none';
                    showRefLibraryTip();
                    showGenerateButton([]);
                    return;
                }

                var html = '';
                var clarifications = data.clarifications || [];
                for (var i = 0; i < clarifications.length; i++) {
                    var c = clarifications[i];
                    html += '<div class="rw-clarification-card">' +
                        '<div class="rw-clarification-q">' + escapeHtml(c.question) + '</div>' +
                        '<div class="rw-clarification-hint">' + escapeHtml(c.hint || '') + '</div>' +
                        '<input type="text" class="rw-clarification-input" data-id="' + escapeHtml(c.id) + '" ' +
                        'placeholder="{{ "related_work.answer_placeholder"|trans({}, "RelatedWork") }}">' +
                        '</div>';
                }

                area.innerHTML = html;
                showRefLibraryTip();
                showGenerateButton(clarifications);
            });
        }

        function showRefLibraryTip() {
            if (localStorage.getItem('rw_hide_ref_tip') === '1') return;

            var tip = document.getElementById('ref-library-tip');
            tip.style.display = 'block';

            // Fetch reference count
            fetch('/myreferences/api/list?limit=1')
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    var count = data.total || 0;
                    var text = document.getElementById('ref-count-text');
                    if (currentLanguage === 'ar') {
                        text.textContent = '📄 لديك حالياً ' + count + ' مرجع في مكتبتك.';
                    } else {
                        text.textContent = '📄 You currently have ' + count + ' references in your library.';
                    }
                })
                .catch(function() {});
        }

        function showGenerateButton(clarifications) {
            var area = document.getElementById('clarifications-area');
            var btnHtml = '<div style="text-align:center;margin-top:24px;">' +
                '<button class="rw-generate-btn" id="gen-btn" onclick="startGeneration()">' +
                '{{ "related_work.generate_btn"|trans({}, "RelatedWork") }}' +
                '</button></div>';
            area.insertAdjacentHTML('beforeend', btnHtml);
        }

        window.dismissRefTip = function() {
            document.getElementById('ref-library-tip').style.display = 'none';
            localStorage.setItem('rw_hide_ref_tip', '1');
        };

        // Refresh ref count when tab regains focus
        document.addEventListener('visibilitychange', function() {
            if (!document.hidden && document.getElementById('ref-library-tip').style.display !== 'none') {
                showRefLibraryTip();
            }
        });

        // ── Generation (SSE) ───────────────────────────────
        window.startGeneration = function() {
            if (!currentSlug) return;

            var genBtn = document.getElementById('gen-btn');
            if (genBtn) {
                genBtn.disabled = true;
                genBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
            }

            // Collect clarification answers
            var answers = [];
            document.querySelectorAll('.rw-clarification-input').forEach(function(input) {
                if (input.value.trim()) {
                    answers.push({id: input.dataset.id, answer: input.value.trim()});
                }
            });

            // Hide clarifications & ref tip
            document.getElementById('clarifications-area').style.display = 'none';
            document.getElementById('ref-library-tip').style.display = 'none';

            // Clear timeline and content
            document.getElementById('agent-timeline').innerHTML = '';
            document.getElementById('project-content').innerHTML = '';
            document.getElementById('actions-bar').style.display = 'none';

            // Start SSE
            var contentBuffer = '';
            var contentEl = document.getElementById('project-content');
            contentEl.classList.add('rw-typing-cursor');

            // We use fetch + ReadableStream for POST-based SSE since EventSource only supports GET
            fetch('/related-work/api/' + currentSlug + '/generate', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({clarifications: answers})
            }).then(function(response) {
                if (!response.ok) {
                    return response.json().then(function(data) {
                        if (data.type === 'no_credits' || data.type === 'inactive') {
                            showCreditModal(data);
                            contentEl.classList.remove('rw-typing-cursor');
                            throw new Error('__handled__');
                        }
                        throw new Error(data.error || 'Failed');
                    });
                }
                var reader = response.body.getReader();
                var decoder = new TextDecoder();
                var buffer = '';

                function read() {
                    reader.read().then(function(result) {
                        if (result.done) {
                            contentEl.classList.remove('rw-typing-cursor');
                            return;
                        }

                        buffer += decoder.decode(result.value, {stream: true});
                        var lines = buffer.split('\n');
                        buffer = lines.pop(); // Keep incomplete line in buffer

                        for (var i = 0; i < lines.length; i++) {
                            var line = lines[i].trim();
                            if (line.indexOf('data: ') === 0) {
                                try {
                                    var event = JSON.parse(line.substring(6));
                                    handleSSEEvent(event, contentEl);
                                    if (event.type === 'content') {
                                        contentBuffer += event.chunk;
                                    }
                                } catch(e) {}
                            }
                        }
                        read();
                    });
                }
                read();
            }).catch(function(err) {
                contentEl.classList.remove('rw-typing-cursor');
                if (err.message === '__handled__') return;
                contentEl.innerHTML = '<div style="color:var(--rw-error);text-align:center;padding:20px;">' +
                    '<i class="fa fa-exclamation-triangle"></i> ' + escapeHtml(err.message) + '</div>';
            });
        };

        function showCreditModal(data) {
            var existing = document.getElementById('credit-modal-overlay');
            if (existing) existing.remove();

            var isNoCredits = data.type === 'no_credits';
            var icon = isNoCredits ? '💳' : '⚠️';
            var title = isNoCredits ? 'رصيدك غير كافٍ' : 'الاشتراك غير فعّال';
            var msg = data.error || '';
            var btnText = isNoCredits ? 'ترقية الاشتراك' : 'تفعيل الاشتراك';
            var btnUrl = '/subscription';

            var html = '<div id="credit-modal-overlay" style="position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;">' +
                '<div style="background:#fff;border-radius:16px;max-width:420px;width:100%;padding:40px 32px;text-align:center;direction:rtl;box-shadow:0 20px 60px rgba(0,0,0,0.15);">' +
                '<div style="font-size:48px;margin-bottom:16px;">' + icon + '</div>' +
                '<h2 style="font-size:20px;color:#1f2937;margin-bottom:12px;font-weight:700;">' + title + '</h2>' +
                '<p style="font-size:14px;color:#6b7280;line-height:1.8;margin-bottom:24px;">' + escapeHtml(msg) + '</p>' +
                (isNoCredits && data.available !== undefined ? '<div style="background:#faf5ff;border-radius:10px;padding:12px;margin-bottom:20px;">' +
                    '<div style="display:flex;justify-content:space-between;font-size:13px;color:#6b7280;margin-bottom:6px;"><span>الرصيد المتبقي</span><span style="font-weight:600;color:#ef4444;">' + data.available + ' / ' + (data.available + (data.required || 0)) + '</span></div>' +
                    '<div style="background:#e5e7eb;border-radius:4px;height:6px;overflow:hidden;"><div style="background:#ef4444;height:100%;width:100%;border-radius:4px;"></div></div>' +
                '</div>' : '') +
                '<a href="' + btnUrl + '" style="display:inline-block;background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;padding:12px 32px;border-radius:10px;font-size:15px;font-weight:700;text-decoration:none;margin-bottom:12px;">' + btnText + '</a>' +
                '<br><button onclick="document.getElementById(\'credit-modal-overlay\').remove()" style="background:none;border:none;color:#6b7280;font-size:13px;cursor:pointer;padding:8px;font-family:inherit;">إغلاق</button>' +
                '</div></div>';

            document.body.insertAdjacentHTML('beforeend', html);
        }

        window.retryGeneration = function() {
            // Reset project status via update, then start generation
            fetch('/related-work/api/' + currentSlug + '/update', {
                method: 'PUT',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({})
            }).then(function() {
                startGeneration();
            });
        };

        function handleSSEEvent(event, contentEl) {
            switch (event.type) {
                case 'step':
                    addTimelineStep(event);
                    break;
                case 'content':
                    contentEl.innerHTML = formatMarkdown(contentEl.textContent + event.chunk);
                    break;
                case 'complete':
                    contentEl.classList.remove('rw-typing-cursor');
                    document.getElementById('actions-bar').style.display = 'flex';
                    // Reload project to get full data (references, etc.)
                    loadProject(currentSlug);
                    break;
                case 'error':
                    contentEl.classList.remove('rw-typing-cursor');
                    contentEl.innerHTML = '<div style="color:var(--rw-error);text-align:center;padding:20px;">' +
                        '<i class="fa fa-exclamation-triangle"></i> ' + escapeHtml(event.message) + '</div>';
                    break;
            }
        }

        // ── Timeline Rendering ─────────────────────────────
        function renderTimeline(steps, instant) {
            var timeline = document.getElementById('agent-timeline');
            timeline.innerHTML = '';
            if (!steps || steps.length === 0) return;

            for (var i = 0; i < steps.length; i++) {
                addTimelineStep({
                    icon: steps[i].icon || '⚙️',
                    message: steps[i].message || steps[i].action || '',
                    agent: steps[i].agent
                }, instant);
            }
        }

        function addTimelineStep(event, instant) {
            var timeline = document.getElementById('agent-timeline');
            var step = document.createElement('div');
            step.className = 'rw-timeline-step' + (instant ? ' instant' : '');
            step.innerHTML = '<div class="rw-step-icon">' + (event.icon || '⚙️') + '</div>' +
                '<div class="rw-step-content"><span class="rw-step-message">' + escapeHtml(event.message || '') + '</span>' +
                (instant ? '<span class="rw-step-check">✓</span>' : '<span class="rw-step-spinner"></span>') +
                '</div>';
            timeline.appendChild(step);

            // Complete previous step
            var allSteps = timeline.querySelectorAll('.rw-timeline-step');
            if (allSteps.length > 1 && !instant) {
                var prev = allSteps[allSteps.length - 2];
                var spinner = prev.querySelector('.rw-step-spinner');
                if (spinner) spinner.outerHTML = '<span class="rw-step-check">✓</span>';
            }

            timeline.scrollTop = timeline.scrollHeight;
        }

        // ── References Panel ───────────────────────────────
        function renderReferences(refs) {
            var panel = document.getElementById('refs-panel');
            var list = document.getElementById('refs-list');
            var header = document.getElementById('refs-header');

            if (!refs || refs.length === 0) {
                panel.style.display = 'none';
                return;
            }

            panel.style.display = 'flex';
            header.textContent = '{{ "related_work.references"|trans({}, "RelatedWork") }} (' + refs.length + ')';
            list.innerHTML = '';

            for (var i = 0; i < refs.length; i++) {
                var ref = refs[i];
                var sourceClass = 'rw-source-' + (ref.source || 'unknown');
                var sourceLabel = ref.source === 'shamra' ? 'Shamra' : (ref.source === 'arxiv' ? 'ArXiv' : (ref.source === 'user_library' ? 'My Library' : ref.source));
                var score = ref.relevance_score ? Math.round(ref.relevance_score * 100) : null;

                var card = document.createElement('div');
                card.className = 'rw-ref-card';
                card.innerHTML = '<div class="rw-ref-title">' +
                    (ref.url ? '<a href="' + escapeHtml(ref.url) + '" target="_blank">[' + (i+1) + '] ' + escapeHtml(ref.title) + '</a>'
                             : '[' + (i+1) + '] ' + escapeHtml(ref.title)) +
                    '</div>' +
                    '<div class="rw-ref-meta">' +
                        '<span class="rw-source-badge ' + sourceClass + '">' + sourceLabel + '</span>' +
                        (ref.authors ? '<span>' + escapeHtml(ref.authors.substring(0, 40)) + '</span>' : '') +
                        (ref.year ? '<span>' + ref.year + '</span>' : '') +
                        (score ? '<div class="rw-score-bar"><div class="rw-score-fill" style="width:' + score + '%"></div></div>' : '') +
                    '</div>';
                list.appendChild(card);
            }
        }

        // ── Actions ────────────────────────────────────────
        window.saveTitle = function() {
            if (!currentSlug) return;
            var title = document.getElementById('project-title').value.trim();
            if (!title) return;

            fetch('/related-work/api/' + currentSlug + '/update', {
                method: 'PUT',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({title: title})
            });
        };

        window.copyContent = function() {
            var content = document.getElementById('project-content').textContent;
            navigator.clipboard.writeText(content).then(function() {
                var btn = event.target.closest('.rw-action-btn');
                var orig = btn.innerHTML;
                btn.innerHTML = '<i class="fa fa-check"></i> {{ "related_work.copied"|trans({}, "RelatedWork") }}';
                setTimeout(function() { btn.innerHTML = orig; }, 2000);
            });
        };

        window.toggleEdit = function() {
            var contentEl = document.getElementById('project-content');
            if (!isEditing) {
                var markdown = contentEl.textContent;
                contentEl.innerHTML = '<textarea class="rw-content-edit" id="content-editor">' + escapeHtml(markdown) + '</textarea>';
                isEditing = true;
            } else {
                var editor = document.getElementById('content-editor');
                var newContent = editor.value;
                contentEl.innerHTML = formatMarkdown(newContent, currentReferences);
                isEditing = false;

                // Save
                fetch('/related-work/api/' + currentSlug + '/update', {
                    method: 'PUT',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({content: newContent})
                });
            }
        };

        window.deleteProject = function() {
            if (!currentSlug) return;
            if (!confirm("{{ 'related_work.delete_confirm'|trans({}, 'RelatedWork') }}")) return;

            fetch('/related-work/api/' + currentSlug, {method: 'DELETE'})
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    if (data.success) {
                        // Remove from sidebar
                        var item = document.querySelector('.rw-project-item[data-slug="' + currentSlug + '"]');
                        if (item) item.remove();
                        showCreateForm();
                    }
                });
        };

        window.setLanguage = function(lang, btn) {
            currentLanguage = lang;
            document.querySelectorAll('.rw-lang-btn').forEach(function(b) { b.classList.remove('active'); });
            btn.classList.add('active');
            document.getElementById('topic-input').style.direction = lang === 'ar' ? 'rtl' : 'ltr';
        };

        // ── Helpers ────────────────────────────────────────
        function addProjectToSidebar(project) {
            var list = document.getElementById('project-list');
            var emptyMsg = list.querySelector('p');
            if (emptyMsg) emptyMsg.remove();

            var item = document.createElement('div');
            item.className = 'rw-project-item active';
            item.dataset.slug = project.slug;
            item.onclick = function() { loadProject(project.slug); };
            item.innerHTML = '<div class="rw-project-title">' + escapeHtml(project.title) + '</div>' +
                '<div class="rw-project-meta"><span>' + new Date().toLocaleDateString() + '</span>' +
                '<span class="rw-status-badge rw-status-draft">📝</span></div>';

            // Remove active from others, prepend new
            document.querySelectorAll('.rw-project-item').forEach(function(el) { el.classList.remove('active'); });
            list.prepend(item);
        }

        function formatMarkdown(text, references) {
            if (!text) return '';
            var html = text
                // Remove horizontal rules (---) that LLM sometimes adds around headings
                .replace(/^---+\s*$/gm, '')
                // Handle headings that may have the # on one line and text on the next
                .replace(/^#{3}\s*\n([^\n]+)/gm, '### $1')
                .replace(/^#{2}\s*\n([^\n]+)/gm, '## $1')
                .replace(/^#{1}\s*\n([^\n]+)/gm, '## $1')
                // Standard markdown headings (### before ## before # to avoid over-matching)
                .replace(/^### (.+)$/gm, '<h3>$1</h3>')
                .replace(/^## (.+)$/gm, '<h2>$1</h2>')
                .replace(/^# (.+)$/gm, '<h2>$1</h2>')
                // Bold
                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
                // Markdown links
                .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank">$1</a>')
                // Paragraphs
                .replace(/\n\n/g, '</p><p>')
                .replace(/\n/g, '<br>');

            // Make reference citations clickable: [1], [2,3], [4-6]
            if (references && references.length) {
                html = html.replace(/\[(\d+)\]/g, function(match, num) {
                    var idx = parseInt(num) - 1;
                    var ref = references[idx];
                    if (ref && ref.url && ref.source !== 'user_library') {
                        return '<a href="' + escapeHtml(ref.url) + '" target="_blank" class="rw-cite-link">[' + num + ']</a>';
                    }
                    return match;
                });
            }

            return html;
        }

        // Store references globally for formatMarkdown
        var currentReferences = [];

        function escapeHtml(text) {
            if (!text) return '';
            var div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }
    })();
    </script>
{% endblock %}