{% extends '@syndexAcademic/main_layout.html.twig' %}

{% trans_default_domain "Academia" %}

{% set route = app.request.attributes.get('_route') %}

{% block title %}
    {{ 'title'|trans({'par' : 'academia.engine'|trans}) }}
{% endblock %}

{% block metaKeywords %}{{ 'keywords'|trans({}, 'Academia') }}{% endblock %}

{% block metaDescription %}{{ 'web_short'|trans({}, 'Academia') }}{% endblock %}

{% block cache_meta_block %}
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate, post-check=0, pre-check=0" />
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="pragma" content="no-cache" />
{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{{ asset('bundles/syndexacademic/css/filters.css') }}?v2"/>
    <style>
        /* Search/Chat Mode Toggle */
        .search-mode-toggle {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-bottom: 15px;
        }
        
        .search-mode-btn {
            padding: 10px 24px;
            border: 2px solid #e5e5e5;
            border-radius: 25px;
            background: #fff;
            color: #555;
            font-size: 1.1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: inherit;
        }
        
        .search-mode-btn:hover {
            border-color: #00a550;
            color: #00a550;
        }
        
        .search-mode-btn.active {
            background: #00a550;
            border-color: #00a550;
            color: #fff;
        }
        
        .search-mode-btn.chat-mode {
            background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
            border-color: transparent;
            color: #fff;
        }
        
        .search-mode-btn.chat-mode:hover {
            background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
        }
        
        .search-mode-btn.chat-mode.active {
            background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
            box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);
        }

        .search-mode-btn.related-work-mode {
            background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
            border-color: transparent;
            color: #fff;
        }
        .search-mode-btn.related-work-mode:hover {
            background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
        }
        
        /* Search/Chat Panels */
        .search-panel, .chat-panel {
            display: none;
            max-width: 700px;
            margin: 0 auto;
        }
        
        .search-panel.active, .chat-panel.active {
            display: block;
        }
        
        /* Chat Panel Styles */
        .chat-container {
            background: #fff;
            border-radius: 12px;
            border: 1px solid #e5e5e5;
            overflow: hidden;
        }
        
        .chat-messages {
            max-height: 400px;
            overflow-y: auto;
            padding: 20px;
            display: none;
        }
        
        .chat-messages.has-messages {
            display: block;
        }
        
        .chat-message {
            margin-bottom: 16px;
            padding: 14px 18px;
            border-radius: 12px;
            line-height: 1.7;
        }
        
        .chat-message.user {
            background: #f0f9f4;
            border: 1px solid #d4edda;
            margin-left: 40px;
        }
        
        .chat-message.assistant {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            margin-right: 20px;
        }
        
        .chat-message-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
            font-size: 0.9rem;
            color: #666;
        }
        
        .chat-message-header i {
            color: #00a550;
        }
        
        .chat-message-content {
            font-size: 1rem;
        }
        
        .chat-message-content p {
            margin: 0 0 10px 0;
        }
        
        .chat-message-content a {
            color: #00a550;
        }
        
        .chat-input-area {
            padding: 20px;
            border-top: 1px solid #e5e5e5;
            background: #fafafa;
        }
        
        .chat-input-wrapper {
            display: flex;
            gap: 12px;
            align-items: flex-end;
        }
        
        .chat-input {
            flex: 1;
            padding: 14px 18px;
            border: 2px solid #e5e5e5;
            border-radius: 25px;
            font-size: 1rem;
            resize: none;
            min-height: 48px;
            max-height: 120px;
            font-family: inherit;
            transition: border-color 0.3s;
        }
        
        .chat-input:focus {
            outline: none;
            border-color: #8b5cf6;
        }
        
        .chat-submit-btn {
            padding: 12px 24px;
            background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
            color: #fff;
            border: none;
            border-radius: 25px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s;
            min-width: 100px;
            justify-content: center;
        }
        
        .chat-submit-btn:hover {
            background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
            transform: translateY(-2px);
        }
        
        .chat-submit-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }
        
        .chat-submit-btn .spinner {
            display: none;
            animation: spin 1s linear infinite;
        }
        
        .chat-submit-btn.loading .spinner {
            display: inline-block;
        }
        
        .chat-submit-btn.loading .send-icon {
            display: none;
        }
        
        /* Chat Examples */
        .chat-examples {
            padding: 15px 20px;
            font-size: 0.95rem;
            color: #666;
        }
        
        .chat-examples-title {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 10px;
        }
        
        .chat-examples-title i {
            color: #8b5cf6;
        }
        
        .chat-example-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .chat-example-chip {
            padding: 8px 14px;
            background: #f3f0ff;
            color: #6d28d9;
            border-radius: 20px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s;
            border: none;
        }
        
        .chat-example-chip:hover {
            background: #ede9fe;
            transform: translateY(-1px);
        }
        
        /* Chat Actions */
        .chat-actions {
            display: flex;
            gap: 10px;
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid #e9ecef;
        }
        
        .chat-action-btn {
            padding: 6px 14px;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 0.85rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
        }
        
        .chat-action-btn:hover {
            border-color: #00a550;
            color: #00a550;
        }
        
        /* RTL Support for Arabic */
        .chat-message.rtl {
            direction: rtl;
            text-align: right;
        }
        
        .chat-message.rtl .chat-message-header {
            flex-direction: row-reverse;
        }
        
        /* Thinking Indicator */
        .chat-thinking {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 40px 20px;
            color: #666;
        }
        
        .thinking-animation {
            font-size: 2.5rem;
            margin-bottom: 12px;
            animation: bounce 1s ease-in-out infinite;
        }
        
        .thinking-text {
            font-size: 0.95rem;
            color: #8b5cf6;
        }
        
        .thinking-dots {
            display: inline-flex;
            gap: 4px;
        }
        
        .thinking-dots span {
            width: 6px;
            height: 6px;
            background: #8b5cf6;
            border-radius: 50%;
            animation: dotPulse 1.4s ease-in-out infinite;
        }
        
        .thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
        .thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
        
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px); }
        }
        
        @keyframes dotPulse {
            0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
            40% { transform: scale(1); opacity: 1; }
        }
        
        /* Toast Notification */
        .toast-notification {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%) translateY(-100px);
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            padding: 16px 24px;
            z-index: 9999;
            opacity: 0;
            transition: all 0.3s ease;
            max-width: 400px;
            text-align: center;
        }
        
        .toast-notification.show {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
        }
        
        .toast-notification.success {
            border-right: 4px solid #00a550;
        }
        
        .toast-notification.error {
            border-right: 4px solid #dc3545;
        }
        
        .toast-notification i {
            margin-left: 8px;
            font-size: 1.2rem;
        }
        
        .toast-notification.success i {
            color: #00a550;
        }
        
        .toast-notification.error i {
            color: #dc3545;
        }
        
        .toast-notification a {
            color: #8b5cf6;
            text-decoration: none;
            font-weight: 500;
            margin-right: 8px;
        }
        
        .toast-notification a:hover {
            text-decoration: underline;
        }
        
        /* Login/Upgrade Prompts */
        .chat-login-prompt, .chat-upgrade-prompt {
            text-align: center;
            padding: 30px 20px;
        }
        
        .chat-login-prompt i, .chat-upgrade-prompt i {
            font-size: 3rem;
            color: #8b5cf6;
            margin-bottom: 15px;
        }
        
        .chat-login-prompt h4, .chat-upgrade-prompt h4 {
            margin: 0 0 10px;
            color: #333;
        }
        
        .chat-login-prompt p, .chat-upgrade-prompt p {
            color: #666;
            margin: 0 0 20px;
        }
        
        .chat-login-prompt .btn, .chat-upgrade-prompt .btn {
            background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
            color: #fff;
            padding: 12px 30px;
            border-radius: 8px;
            text-decoration: none;
            display: inline-block;
        }
        
        /* Credits Display */
        .chat-credits {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.85rem;
            color: #666;
            padding: 0 20px 10px;
        }
        
        .chat-credits i {
            color: #8b5cf6;
        }
        
        /* Feedback Buttons */
        .chat-feedback {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-left: auto;
        }
        
        .feedback-btn {
            padding: 6px 10px;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 0.9rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
            transition: all 0.2s;
        }
        
        .feedback-btn:hover {
            border-color: #8b5cf6;
        }
        
        .feedback-btn.like.active {
            background: #dcfce7;
            border-color: #22c55e;
            color: #16a34a;
        }
        
        .feedback-btn.dislike.active {
            background: #fee2e2;
            border-color: #ef4444;
            color: #dc2626;
        }
        
        .feedback-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        /* Smile Animation for Like */
        .feedback-smile {
            display: none;
            position: absolute;
            font-size: 2rem;
            animation: smileFloat 1s ease-out forwards;
        }
        
        .feedback-smile.show {
            display: block;
        }
        
        @keyframes smileFloat {
            0% { transform: scale(0.5); opacity: 0; }
            50% { transform: scale(1.2); opacity: 1; }
            100% { transform: scale(1) translateY(-20px); opacity: 0; }
        }
        
        /* Feedback Modal */
        .feedback-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 10000;
        }
        
        .feedback-modal-overlay.show {
            display: flex;
        }
        
        .feedback-modal {
            background: #fff;
            border-radius: 16px;
            padding: 24px;
            max-width: 450px;
            width: 90%;
            margin: auto;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            animation: modalSlideIn 0.3s ease;
            direction: rtl;
            text-align: right;
        }
        
        @keyframes modalSlideIn {
            from { transform: translateY(-20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        .feedback-modal h4 {
            margin: 0 0 8px;
            font-size: 1.2rem;
            color: #333;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .feedback-modal h4 i {
            color: #f59e0b;
        }
        
        .feedback-modal p {
            color: #666;
            margin: 0 0 16px;
            font-size: 0.95rem;
        }
        
        .feedback-modal textarea {
            width: 100%;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 12px;
            font-size: 0.95rem;
            resize: vertical;
            min-height: 100px;
            font-family: inherit;
        }
        
        .feedback-modal textarea:focus {
            outline: none;
            border-color: #8b5cf6;
        }
        
        .feedback-modal-actions {
            display: flex;
            gap: 10px;
            margin-top: 16px;
            justify-content: flex-end;
        }
        
        .feedback-modal-btn {
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 0.95rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .feedback-modal-btn.cancel {
            background: #f5f5f5;
            border: 1px solid #ddd;
            color: #666;
        }
        
        .feedback-modal-btn.cancel:hover {
            background: #eee;
        }
        
        .feedback-modal-btn.submit {
            background: #8b5cf6;
            border: none;
            color: #fff;
        }
        
        .feedback-modal-btn.submit:hover {
            background: #7c3aed;
        }
        
        .feedback-modal-btn.skip {
            background: transparent;
            border: none;
            color: #999;
            text-decoration: underline;
        }
        
        /* Research Section */
        .research-section {
            margin: 30px 0;
        }
        
        .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #00a550;
        }
        
        .section-header h2 {
            margin: 0;
            font-size: 1.5rem;
            color: #333;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .section-header h2 i {
            color: #00a550;
        }
        
        .section-subtitle {
            color: #666;
            font-size: 0.95rem;
            margin: 0;
        }
        
        /* Research Tabs */
        .research-tabs {
            display: flex;
            gap: 8px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        
        .research-tab {
            padding: 10px 20px;
            border: 2px solid #e5e5e5;
            border-radius: 25px;
            background: #fff;
            color: #555;
            font-size: 1.35rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 6px;
            font-family: inherit;
        }
        
        .research-tab:hover {
            border-color: #00a550;
            color: #00a550;
        }
        
        .research-tab.active {
            background: #00a550;
            border-color: #00a550;
            color: #fff;
        }
        
        .research-tab i {
            font-size: 1.2rem;
        }
        
        /* Loading state */
        .research-grid.loading {
            opacity: 0.4;
            pointer-events: none;
            min-height: 200px;
            position: relative;
        }
        
        .research-grid-loader {
            display: none;
            text-align: center;
            padding: 60px 20px;
            color: #00a550;
        }
        
        .research-grid-loader.visible {
            display: block;
        }
        
        .research-grid-loader i {
            font-size: 2rem;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            100% { transform: rotate(360deg); }
        }
        
        /* Research Grid */
        .research-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 20px;
        }
        
        .research-card {
            background: #fff;
            border: 1px solid #e5e5e5;
            border-radius: 12px;
            padding: 20px;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .research-card:hover {
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            transform: translateY(-3px);
            border-color: #00a550;
        }
        
        .research-card-title {
            font-size: 1.8rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 14px;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .research-card-title a {
            color: inherit;
            text-decoration: none;
        }
        
        .research-card-title a:hover {
            color: #00a550;
        }
        
        .research-card-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            margin-bottom: 14px;
            font-size: 1.35rem;
            color: #666;
        }
        
        .research-card-meta span {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .research-card-meta i {
            color: #00a550;
        }
        
        .research-card-stats {
            display: flex;
            gap: 18px;
            font-size: 1.35rem;
            color: #888;
        }
        
        .research-card-stats span {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .research-card-abstract {
            font-size: 1.4rem;
            color: #555;
            line-height: 1.8;
            margin-bottom: 16px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-align: justify;
        }
        
        /* Members Section */
        .members-section {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 30px;
            margin: 40px 0 20px 0;
        }
        
        .members-header {
            text-align: center;
            margin-bottom: 25px;
        }
        
        .members-header h3 {
            font-size: 1.3rem;
            color: #333;
            margin: 0 0 5px 0;
        }
        
        .members-header p {
            color: #666;
            margin: 0;
            font-size: 0.95rem;
        }
        
        .members-grid {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 20px;
        }
        
        .member-card {
            text-align: center;
            padding: 15px;
            background: white;
            border-radius: 10px;
            min-width: 140px;
            transition: all 0.3s ease;
        }
        
        .member-card:hover {
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transform: translateY(-3px);
        }
        
        .member-card img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 10px;
            border: 3px solid #00a550;
        }
        
        .member-card .member-name {
            font-weight: 600;
            color: #333;
            font-size: 0.9rem;
            margin-bottom: 3px;
        }
        
        .member-card .member-name a {
            color: inherit;
            text-decoration: none;
        }
        
        .member-card .member-name a:hover {
            color: #00a550;
        }
        
        .member-card .member-field {
            font-size: 0.8rem;
            color: #666;
        }
        
        /* Playground Banner */
        .playground-promo {
            background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
            border-radius: 12px;
            padding: 25px 30px;
            margin: 30px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: white;
        }
        
        .playground-promo h3 {
            margin: 0 0 8px 0;
            font-size: 1.3rem;
        }
        
        .playground-promo p {
            margin: 0;
            opacity: 0.9;
        }
        
        .playground-promo .btn {
            background: white;
            color: #7c3aed;
            padding: 12px 25px;
            border-radius: 8px;
            font-weight: 600;
            text-decoration: none;
        }
        
        .playground-promo .btn:hover {
            background: #f0f0f0;
        }
        
        /* CTA for non-logged users */
        .cta-register {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border: 2px dashed #00a550;
            border-radius: 12px;
            padding: 30px;
            text-align: center;
            margin: 20px 0;
        }
        
        .cta-register h3 {
            color: #333;
            margin: 0 0 10px 0;
        }
        
        .cta-register p {
            color: #666;
            margin: 0 0 20px 0;
        }
        
        .cta-register .btn {
            background: #00a550;
            color: white;
            padding: 12px 30px;
            border-radius: 8px;
            font-weight: 600;
            text-decoration: none;
            display: inline-block;
        }
        
        .cta-register .btn:hover {
            background: #008a42;
            color: white;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .homepage-hero {
                padding: 25px 20px;
            }
            
            .homepage-hero h1 {
                font-size: 1.5rem;
            }
            
            .homepage-hero .stats {
                gap: 20px;
            }
            
            .research-grid {
                grid-template-columns: 1fr;
            }
            
            .research-tabs {
                gap: 6px;
            }
            
            .research-tab {
                padding: 8px 14px;
                font-size: 1.2rem;
            }
            
            .playground-promo {
                flex-direction: column;
                text-align: center;
                gap: 20px;
            }
            
            .members-grid {
                gap: 15px;
            }
            
            .member-card {
                min-width: 120px;
            }
        }
    </style>
{% endblock %}

{% block body %}
    {{ parent() }}

    {# Share Modal for posting to feed #}
    <div class="feedback-modal-overlay" id="share-modal">
        <div class="feedback-modal">
            <h4><i class="fa fa-share-alt"></i> {{ 'research_chat.share_to_feed'|trans({}, 'Academia')|default('مشاركة في المنشورات') }}</h4>
            <p>{{ 'research_chat.share_intro_desc'|trans({}, 'Academia')|default('أضف مقدمة للمنشور (اختياري)') }}</p>
            <textarea id="share-intro-text" placeholder="{{ 'research_chat.share_intro_placeholder'|trans({}, 'Academia')|default('أريد مشاركة هذه المعلومات المفيدة عن...') }}" rows="3"></textarea>
            <div class="feedback-modal-actions">
                <button type="button" class="feedback-modal-btn cancel" id="share-cancel">{{ 'research_chat.feedback_cancel'|trans({}, 'Academia')|default('إلغاء') }}</button>
                <button type="button" class="feedback-modal-btn submit" id="share-submit">{{ 'research_chat.share'|trans({}, 'Academia')|default('مشاركة') }}</button>
            </div>
        </div>
    </div>

    {# Feedback Modal for Dislike #}
    <div class="feedback-modal-overlay" id="feedback-modal">
        <div class="feedback-modal">
            <h4><i class="fa fa-comment-alt"></i> {{ 'research_chat.feedback_title'|trans({}, 'Academia')|default('أخبرنا المزيد') }}</h4>
            <p>{{ 'research_chat.feedback_desc'|trans({}, 'Academia')|default('ما الذي يمكننا تحسينه؟ (اختياري)') }}</p>
            <textarea id="feedback-comment" placeholder="{{ 'research_chat.feedback_placeholder'|trans({}, 'Academia')|default('لم تكن الإجابة دقيقة، أحتاج معلومات عن...') }}"></textarea>
            <div class="feedback-modal-actions">
                <button type="button" class="feedback-modal-btn skip" id="feedback-skip">{{ 'research_chat.feedback_skip'|trans({}, 'Academia')|default('تخطي') }}</button>
                <button type="button" class="feedback-modal-btn cancel" id="feedback-cancel">{{ 'research_chat.feedback_cancel'|trans({}, 'Academia')|default('إلغاء') }}</button>
                <button type="button" class="feedback-modal-btn submit" id="feedback-submit">{{ 'research_chat.feedback_submit'|trans({}, 'Academia')|default('إرسال') }}</button>
            </div>
        </div>
    </div>

    {# studyField popup disabled — studyField removed from registration, academic interests used instead #}

    <div class="container">
        
        {# Hero Search Section #}
        <div class="homepage-hero" style="background: #fff; border-radius: 12px; padding: 20px 20px 25px; margin-bottom: 20px; text-align: center; border: 1px solid #e0e0e0;">
            <img src="{{ asset('img/shamra-academia-logo.png') }}" alt="Shamra Academia" style="height: 120px; margin-bottom: 10px;">
            <p style="color: #555; margin-bottom: 15px; font-size: 1.1rem;">{{ 'web_short'|trans({}, 'Academia') }}</p>
            
            {# Search/Chat Mode Toggle #}
            <div class="search-mode-toggle">
                <button type="button" class="search-mode-btn active" data-mode="search">
                    <i class="fa fa-search"></i>
                    {{ 'research_chat.search_tab'|trans({}, 'Academia')|default('بحث') }}
                </button>
                <button type="button" class="search-mode-btn chat-mode" data-mode="chat">
                    <i class="fa fa-magic"></i>
                    {{ 'research_chat.chat_tab'|trans({}, 'Academia')|default('اسألني') }}
                </button>
                <a href="{{ path('app_related_work_index') }}" class="search-mode-btn related-work-mode" style="text-decoration:none;">
                    <i class="fa fa-sitemap"></i>
                    كتابة دراسة مرجعيّة
                </a>
            </div>
            
            {# Search Panel #}
            <div class="search-panel active" id="search-panel">
                <form action="{{ path('shamra_academia_filter') }}" method="get" style="max-width: 600px; margin: 0 auto;">
                    <div class="input-group" style="box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-radius: 25px; overflow: hidden; border: 1px solid #ddd;">
                        <input type="text" name="title" class="form-control" 
                               placeholder="{{ 'search.msg'|trans({}, 'Academia') }}" 
                               style="height: 46px; font-size: 1rem; border: none; padding: 0 20px;">
                        <input type="hidden" name="type" value="0">
                        <span class="input-group-btn">
                            <button class="btn btn-success" type="submit" style="height: 46px; padding: 0 25px; background: #00a550; border: none;">
                                <i class="fa fa-search" style="font-size: 1.1rem;"></i>
                            </button>
                        </span>
                    </div>
                </form>
            </div>
            
            {# Chat Panel #}
            <div class="chat-panel" id="chat-panel">
                {% if isLoggedIn %}
                    <div class="chat-container" id="research-chat-container">
                        {# Messages Area #}
                        <div class="chat-messages" id="chat-messages"></div>
                        
                        {# Example Questions #}
                        <div class="chat-examples" id="chat-examples">
                            <div class="chat-examples-title">
                                <i class="fa fa-lightbulb-o"></i>
                                <span>{{ 'research_chat.examples_title'|trans({}, 'Academia')|default('أمثلة يمكنك تجربتها:') }}</span>
                            </div>
                            <div class="chat-example-chips">
                                <button type="button" class="chat-example-chip" data-question="ما هي أحدث تقنيات الذكاء الاصطناعي في المجال الطبي؟">
                                    الذكاء الاصطناعي في الطب
                                </button>
                                <button type="button" class="chat-example-chip" data-question="اشرح لي أهم نتائج أبحاث تغير المناخ">
                                    أبحاث تغير المناخ
                                </button>
                                <button type="button" class="chat-example-chip" data-question="ما هي التحديات الرئيسية في معالجة اللغة العربية الطبيعية؟">
                                    معالجة اللغة العربية
                                </button>
                            </div>
                        </div>
                        
                        {# Credits Display #}
                        <div class="chat-credits" id="chat-credits" style="display: none;">
                            <i class="fa fa-bolt"></i>
                            <span>{{ 'research_chat.credits_label'|trans({}, 'Academia')|default('الرصيد المتبقي:') }}</span>
                            <strong id="credits-count">--</strong>
                        </div>
                        
                        {# Input Area #}
                        <div class="chat-input-area">
                            <div class="chat-input-wrapper">
                                <textarea class="chat-input" id="chat-input" 
                                          placeholder="{{ 'research_chat.placeholder'|trans({}, 'Academia')|default('اسأل أي سؤال عن الأبحاث العلمية...') }}"
                                          rows="1"></textarea>
                                <button type="button" class="chat-submit-btn" id="chat-submit">
                                    <i class="fa fa-spinner spinner"></i>
                                    <i class="fa fa-paper-plane send-icon"></i>
                                    <span>{{ 'research_chat.send'|trans({}, 'Academia')|default('إرسال') }}</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    {# Upgrade prompt for users without credits #}
                    <div class="chat-upgrade-prompt" id="chat-upgrade-prompt" style="display: none;">
                        <i class="fa fa-bolt"></i>
                        <h4>{{ 'research_chat.upgrade_title'|trans({}, 'Academia')|default('رصيدك غير كافٍ') }}</h4>
                        <p>{{ 'research_chat.upgrade_desc'|trans({}, 'Academia')|default('قم بترقية اشتراكك للحصول على المزيد من الأرصدة') }}</p>
                        <a href="{{ path('shamra_academia_subscription') }}" class="btn">
                            {{ 'research_chat.upgrade_btn'|trans({}, 'Academia')|default('ترقية الاشتراك') }}
                        </a>
                    </div>
                {% else %}
                    {# Login prompt for anonymous users #}
                    <div class="chat-container">
                        <div class="chat-login-prompt">
                            <i class="fa fa-user-circle"></i>
                            <h4>{{ 'research_chat.login_title'|trans({}, 'Academia')|default('سجل دخولك للبدء') }}</h4>
                            <p>{{ 'research_chat.login_desc'|trans({}, 'Academia')|default('ميزة اسألني متاحة للمستخدمين المسجلين فقط') }}</p>
                            <a href="{{ path('app_login') }}" class="btn">
                                {{ 'research_chat.login_btn'|trans({}, 'Academia')|default('تسجيل الدخول') }}
                            </a>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
        
        {# Playground Promo #}
        <div class="playground-promo">
            <div>
                <h3><i class="fa fa-magic"></i> {{ 'playground_banner.title'|trans({}, 'Academia')|default('جرب Playground الآن!') }}</h3>
                <p>{{ 'playground_banner.description'|trans({}, 'Academia')|default('أداة ذكية للترجمة والتلخيص والكتابة الأكاديمية') }}</p>
            </div>
            <a href="{{ path('playground_index') }}" class="btn">
                {{ 'playground_banner.cta'|trans({}, 'Academia')|default('جرب الآن') }} <i class="fa fa-arrow-{{ app.request.locale == 'ar' ? 'left' : 'right' }}"></i>
            </a>
        </div>
        
        {# CTA for non-logged users #}
        {% if not isLoggedIn %}
            <div class="cta-register">
                <h3><i class="fa fa-user-plus"></i> انضم إلى مجتمع الباحثين</h3>
                <p>سجل الآن للحصول على توصيات مخصصة بناءً على اهتماماتك الأكاديمية</p>
                <a href="{{ path('app_register') }}" class="btn">تسجيل حساب جديد</a>
            </div>
        {% endif %}
        
        {# Research Section with Tabs #}
        <div class="research-section">
            <div class="section-header">
                <div>
                    <h2>
                        {% if isLoggedIn %}
                            <i class="fa fa-lightbulb-o"></i> {{ sectionTitle }}
                        {% else %}
                            <i class="fa fa-fire"></i> {{ sectionTitle }}
                        {% endif %}
                    </h2>
                    <p class="section-subtitle">{{ sectionSubtitle }}</p>
                </div>
            </div>
            
            <div class="research-tabs">
                {% if isLoggedIn %}
                <button class="research-tab active" data-tab="interests">
                    <i class="fa fa-lightbulb-o"></i> {{ 'homepage.tab.interests'|trans({}, 'Academia')|default('مقترحة لك') }}
                </button>
                {% endif %}
                <button class="research-tab{{ not isLoggedIn ? ' active' : '' }}" data-tab="trending">
                    <i class="fa fa-bolt"></i> {{ 'homepage.tab.trending'|trans({}, 'Academia')|default('رائج الآن') }}
                </button>
                <button class="research-tab" data-tab="recent">
                    <i class="fa fa-clock-o"></i> {{ 'homepage.tab.recent'|trans({}, 'Academia')|default('أحدث الأبحاث') }}
                </button>
            </div>
            
            <div class="research-grid" id="research-grid">
                {% for research in matchedResearches %}
                    <div class="research-card">
                        <h3 class="research-card-title">
                            <a href="{{ path('shamra_academia_research_show', {'slug': research.slug}) }}">
                                {{ research.arabicTitle|default(research.englishTitle) }}
                            </a>
                        </h3>
                        <div class="research-card-meta">
                            {% if research.arabicCategory is defined and research.arabicCategory %}
                                <span><i class="fa fa-folder-o"></i> {{ research.arabicCategory }}</span>
                            {% endif %}
                            {% if research.arabicPublisher is defined and research.arabicPublisher %}
                                <span><i class="fa fa-building-o"></i> {{ research.arabicPublisher }}</span>
                            {% endif %}
                            {% if research.publicationDate is defined and research.publicationDate %}
                                <span><i class="fa fa-calendar-o"></i> {{ research.publicationDate }}</span>
                            {% endif %}
                        </div>
                        {% set abstractText = research.arabicAbstract|default(research.englishAbstract)|default(null) %}
                        {% if abstractText %}
                            <div class="research-card-abstract">
                                {{ abstractText|striptags|slice(0, 250) }}{% if abstractText|length > 250 %}...{% endif %}
                            </div>
                        {% endif %}
                        <div class="research-card-stats">
                            {% if research.hits is defined and research.hits %}
                                <span><i class="fa fa-eye"></i> {{ research.hits }} مشاهدة</span>
                            {% endif %}
                        </div>
                    </div>
                {% else %}
                    <div class="col-12 text-center" style="padding: 40px;">
                        <i class="fa fa-search fa-3x" style="color: #ccc; margin-bottom: 15px;"></i>
                        <p style="color: #888;">{{ 'homepage.noResult'|trans({},'Academia') }}</p>
                    </div>
                {% endfor %}
            </div>
        </div>
        
        {# Members Section - Horizontal at bottom #}
        <div class="members-section">
            <div class="members-header">
                <h3><i class="fa fa-users"></i> {{ 'user.last'|trans({}, 'Academia')|default('أحدث الأعضاء') }}</h3>
                <p>انضم إلى مجتمع الباحثين العرب</p>
            </div>
            <div class="members-grid">
                {% for user in lastUsers %}
                    <div class="member-card">
                        <a href="{{ path('user_profile_show', {'username': user.username}) }}">
                            <img src="{{ user.webPath }}" alt="{{ user.firstName }}">
                        </a>
                        <div class="member-name">
                            <a href="{{ path('user_profile_show', {'username': user.username}) }}">
                                {{ user.firstName }} {{ user.lastName }}
                            </a>
                        </div>
                        {% if user.studyField %}
                            <div class="member-field">
                                {{ app.request.locale == 'en' ? user.studyField.englishFullName : user.studyField.arabicFullName }}
                            </div>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
        </div>
        
    </div>

{% endblock %}

{% block javascripts %}
<script src="{{ asset('bundles/syndexacademic/js/homepage.js') }}?v=2.1"></script>
<script>
    $(document).ready(function () {
        $('#close-popup-modal').on('click', function() {
            $('#popup-loginModal').remove();
            $('#pop_up_fade_modal').remove();
        });
        
        $("#fos_user_profile_form_studyField").select2({width:'100%'});
        
        // Search/Chat mode toggle
        $('.search-mode-btn').on('click', function() {
            var $btn = $(this);
            var mode = $btn.data('mode');
            
            $('.search-mode-btn').removeClass('active');
            $btn.addClass('active');
            
            if (mode === 'search') {
                $('#search-panel').addClass('active');
                $('#chat-panel').removeClass('active');
            } else {
                $('#chat-panel').addClass('active');
                $('#search-panel').removeClass('active');
                // Check access when switching to chat
                checkChatAccess();
            }
        });
        
        // Research Chat functionality
        var currentChatId = null;
        var isCheckedAccess = false;
        
        function checkChatAccess() {
            if (isCheckedAccess) return;
            
            $.ajax({
                url: '/api/research-chat/access',
                type: 'GET',
                success: function(response) {
                    isCheckedAccess = true;
                    if (response.canUse) {
                        $('#research-chat-container').show();
                        $('#chat-upgrade-prompt').hide();
                        $('#chat-credits').show();
                        $('#credits-count').text(response.creditsAvailable);
                    } else {
                        $('#research-chat-container').hide();
                        $('#chat-upgrade-prompt').show();
                    }
                },
                error: function(xhr) {
                    if (xhr.status === 401) {
                        // Not logged in - already handled by template
                    } else if (xhr.status === 402) {
                        $('#research-chat-container').hide();
                        $('#chat-upgrade-prompt').show();
                    }
                }
            });
        }
        
        // Chat example chips
        $('.chat-example-chip').on('click', function() {
            var question = $(this).data('question');
            $('#chat-input').val(question);
            submitChat();
        });
        
        // Auto-resize textarea
        $('#chat-input').on('input', function() {
            this.style.height = 'auto';
            this.style.height = Math.min(this.scrollHeight, 120) + 'px';
        });
        
        // Enter to submit (Shift+Enter for newline)
        $('#chat-input').on('keydown', function(e) {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                submitChat();
            }
        });
        
        // Submit button click
        $('#chat-submit').on('click', function() {
            submitChat();
        });
        
        function submitChat() {
            var $input = $('#chat-input');
            var $btn = $('#chat-submit');
            var question = $input.val().trim();
            
            if (!question || $btn.hasClass('loading')) return;
            
            // Show loading state
            $btn.addClass('loading').prop('disabled', true);
            
            // Add user message to UI immediately
            addMessage('user', question);
            $input.val('').trigger('input');
            
            // Hide examples after first message
            $('#chat-examples').hide();
            
            // Show thinking indicator
            showThinking();
            
            // Determine endpoint (new chat vs follow-up)
            var url = currentChatId 
                ? '/api/research-chat/' + currentChatId + '/message'
                : '/api/research-chat';
            
            $.ajax({
                url: url,
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({ question: question }),
                success: function(response) {
                    hideThinking();
                    $btn.removeClass('loading').prop('disabled', false);
                    
                    if (!currentChatId && response.id) {
                        currentChatId = response.id;
                    }
                    
                    // Show assistant response
                    if (response.messages) {
                        // New chat - show last assistant message
                        var lastMsg = response.messages[response.messages.length - 1];
                        if (lastMsg.role === 'assistant') {
                            addMessage('assistant', lastMsg.content, lastMsg.metadata, lastMsg.id);
                        }
                    } else if (response.message) {
                        // Follow-up message
                        addMessage('assistant', response.message.content, response.message.metadata, response.message.id);
                    }
                    
                    // Update credits
                    if (response.creditsRemaining !== undefined) {
                        $('#credits-count').text(response.creditsRemaining);
                    }
                },
                error: function(xhr) {
                    hideThinking();
                    $btn.removeClass('loading').prop('disabled', false);
                    
                    var errorMsg = 'حدث خطأ. يرجى المحاولة مرة أخرى.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMsg = xhr.responseJSON.message;
                    }
                    
                    if (xhr.status === 402) {
                        // Insufficient credits
                        $('#research-chat-container').hide();
                        $('#chat-upgrade-prompt').show();
                    } else {
                        addMessage('assistant', errorMsg, null, null, true);
                    }
                }
            });
        }
        
        // Track current pending feedback
        var pendingFeedbackMessageId = null;
        
        function addMessage(role, content, metadata, messageId, isError) {
            var $messages = $('#chat-messages');
            
            // Show messages container
            $messages.addClass('has-messages');
            
            var roleLabel = role === 'user' ? '{{ 'research_chat.you'|trans({}, 'Academia')|default('أنت') }}' : '{{ 'research_chat.ai_name'|trans({}, 'Academia')|default('شمرا أكاديميا') }}';
            var roleIcon = role === 'user' ? 'fa-user' : 'fa-graduation-cap';
            
            var htmlContent = role === 'assistant' ? formatMarkdown(content) : escapeHtml(content);
            var isRtl = isArabic(content);
            var rtlClass = isRtl ? ' rtl' : '';
            
            var $message = $('<div class="chat-message ' + role + rtlClass + (isError ? ' error' : '') + '">' +
                '<div class="chat-message-header">' +
                    '<i class="fa ' + roleIcon + '"></i>' +
                    '<span>' + roleLabel + '</span>' +
                '</div>' +
                '<div class="chat-message-content">' + htmlContent + '</div>' +
            '</div>');
            
            // Add action buttons for assistant messages
            if (role === 'assistant' && !isError && currentChatId) {
                var $actions = $('<div class="chat-actions">' +
                    '<button class="chat-action-btn copy-btn"><i class="fa fa-copy"></i> {{ 'research_chat.copy'|trans({}, 'Academia')|default('نسخ') }}</button>' +
                    '<button class="chat-action-btn share-btn"><i class="fa fa-share-alt"></i> {{ 'research_chat.share'|trans({}, 'Academia')|default('مشاركة') }}</button>' +
                    '<div class="chat-feedback">' +
                        '<button class="feedback-btn like" data-message-id="' + messageId + '" title="{{ 'research_chat.helpful'|trans({}, 'Academia')|default('مفيد') }}"><i class="fa fa-thumbs-up"></i></button>' +
                        '<button class="feedback-btn dislike" data-message-id="' + messageId + '" title="{{ 'research_chat.not_helpful'|trans({}, 'Academia')|default('غير مفيد') }}"><i class="fa fa-thumbs-down"></i></button>' +
                        '<span class="feedback-smile">😊</span>' +
                    '</div>' +
                '</div>');
                
                $actions.find('.copy-btn').on('click', function() {
                    copyToClipboard(content);
                    $(this).html('<i class="fa fa-check"></i> {{ 'research_chat.copied'|trans({}, 'Academia')|default('تم النسخ') }}');
                    setTimeout(function() { 
                        $actions.find('.copy-btn').html('<i class="fa fa-copy"></i> {{ 'research_chat.copy'|trans({}, 'Academia')|default('نسخ') }}'); 
                    }, 2000);
                });
                
                $actions.find('.share-btn').on('click', function() {
                    shareChat();
                });
                
                // Feedback button handlers
                $actions.find('.feedback-btn.like').on('click', function() {
                    var msgId = $(this).data('message-id');
                    var $btn = $(this);
                    var $container = $btn.closest('.chat-feedback');
                    
                    submitFeedback(msgId, 'like', '', function(success) {
                        if (success) {
                            $container.find('.feedback-btn').addClass('disabled').prop('disabled', true);
                            $btn.addClass('active');
                            // Show smile animation
                            var $smile = $container.find('.feedback-smile');
                            $smile.addClass('show');
                            setTimeout(function() { $smile.removeClass('show'); }, 1000);
                        }
                    });
                });
                
                $actions.find('.feedback-btn.dislike').on('click', function() {
                    var msgId = $(this).data('message-id');
                    pendingFeedbackMessageId = msgId;
                    // Show feedback modal
                    $('#feedback-comment').val('');
                    $('#feedback-modal').addClass('show');
                });
                
                $message.append($actions);
            }
            
            $messages.append($message);
            
            // Scroll to bottom
            $messages.scrollTop($messages[0].scrollHeight);
        }
        
        function submitFeedback(messageId, feedback, comment, callback) {
            $.ajax({
                url: '/api/research-chat/message/' + messageId + '/feedback',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({ feedback: feedback, comment: comment }),
                success: function(response) {
                    callback(true);
                },
                error: function(xhr) {
                    console.error('Feedback error:', xhr);
                    callback(false);
                }
            });
        }
        
        // Feedback modal handlers
        $(document).ready(function() {
            $('#feedback-cancel').on('click', function() {
                $('#feedback-modal').removeClass('show');
                pendingFeedbackMessageId = null;
            });
            
            $('#feedback-skip').on('click', function() {
                if (pendingFeedbackMessageId) {
                    submitFeedback(pendingFeedbackMessageId, 'dislike', '', function(success) {
                        if (success) {
                            var $btn = $('.feedback-btn.dislike[data-message-id="' + pendingFeedbackMessageId + '"]');
                            $btn.closest('.chat-feedback').find('.feedback-btn').addClass('disabled').prop('disabled', true);
                            $btn.addClass('active');
                        }
                    });
                }
                $('#feedback-modal').removeClass('show');
                pendingFeedbackMessageId = null;
            });
            
            $('#feedback-submit').on('click', function() {
                var comment = $('#feedback-comment').val().trim();
                if (pendingFeedbackMessageId) {
                    submitFeedback(pendingFeedbackMessageId, 'dislike', comment, function(success) {
                        if (success) {
                            var $btn = $('.feedback-btn.dislike[data-message-id="' + pendingFeedbackMessageId + '"]');
                            $btn.closest('.chat-feedback').find('.feedback-btn').addClass('disabled').prop('disabled', true);
                            $btn.addClass('active');
                            showToast('success', '{{ 'research_chat.feedback_thanks'|trans({}, 'Academia')|default('شكراً على ملاحظاتك!') }}');
                        }
                    });
                }
                $('#feedback-modal').removeClass('show');
                pendingFeedbackMessageId = null;
            });
            
            // Close modal on overlay click
            $('#feedback-modal').on('click', function(e) {
                if (e.target === this) {
                    $(this).removeClass('show');
                    pendingFeedbackMessageId = null;
                }
            });
        });
        
        function formatMarkdown(text) {
            // Simple markdown formatting
            text = escapeHtml(text);
            
            // Bold
            text = text.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
            
            // Links [text](url)
            text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>');
            
            // Line breaks
            text = text.replace(/\n/g, '<br>');
            
            // Horizontal rule
            text = text.replace(/---/g, '<hr>');
            
            return text;
        }
        
        function escapeHtml(text) {
            var div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }
        
        function copyToClipboard(text) {
            if (navigator.clipboard) {
                navigator.clipboard.writeText(text);
            } else {
                var $temp = $('<textarea>').val(text).appendTo('body').select();
                document.execCommand('copy');
                $temp.remove();
            }
        }
        
        function isArabic(text) {
            // Check if text contains Arabic characters
            var arabicPattern = /[\u0600-\u06FF\u0750-\u077F]/;
            var arabicChars = (text.match(/[\u0600-\u06FF\u0750-\u077F]/g) || []).length;
            var latinChars = (text.match(/[a-zA-Z]/g) || []).length;
            return arabicChars > latinChars;
        }
        
        function showToast(message, type, link) {
            // Remove existing toast
            $('.toast-notification').remove();
            
            var icon = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle';
            var linkHtml = link ? '<a href="' + link + '" target="_blank">{{ 'research_chat.view_post'|trans({}, 'Academia')|default('عرض المنشور') }}</a>' : '';
            
            var $toast = $('<div class="toast-notification ' + type + '">' +
                '<i class="fa ' + icon + '"></i>' +
                '<span>' + message + '</span> ' +
                linkHtml +
            '</div>');
            
            $('body').append($toast);
            
            setTimeout(function() { $toast.addClass('show'); }, 10);
            setTimeout(function() {
                $toast.removeClass('show');
                setTimeout(function() { $toast.remove(); }, 300);
            }, 5000);
        }
        
        function showThinking() {
            var $messages = $('#chat-messages');
            $messages.addClass('has-messages');
            
            var $thinking = $('<div class="chat-thinking" id="thinking-indicator">' +
                '<div class="thinking-animation">🤓</div>' +
                '<div class="thinking-text">' +
                    '{{ 'research_chat.thinking'|trans({}, 'Academia')|default('شمرا أكاديميا يفكر') }}' +
                    ' <span class="thinking-dots"><span></span><span></span><span></span></span>' +
                '</div>' +
            '</div>');
            
            $messages.append($thinking);
            $messages.scrollTop($messages[0].scrollHeight);
        }
        
        function hideThinking() {
            $('#thinking-indicator').remove();
        }
        
        function shareChat() {
            if (!currentChatId) return;
            
            // Show share modal
            $('#share-intro-text').val('');
            $('#share-modal').addClass('show');
        }
        
        function doShareChat(introText) {
            $.ajax({
                url: '/api/research-chat/' + currentChatId + '/share',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({ introText: introText }),
                success: function(response) {
                    var postUrl = '/post/' + response.postSlug;
                    showToast('{{ 'research_chat.share_success'|trans({}, 'Academia')|default('تمت المشاركة بنجاح!') }}', 'success', postUrl);
                },
                error: function(xhr) {
                    var msg = '{{ 'research_chat.share_error'|trans({}, 'Academia')|default('فشلت المشاركة') }}';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        msg = xhr.responseJSON.message;
                    }
                    showToast(msg, 'error');
                }
            });
        }
        
        // Share modal handlers
        $(document).ready(function() {
            $('#share-cancel').on('click', function() {
                $('#share-modal').removeClass('show');
            });
            
            $('#share-submit').on('click', function() {
                var introText = $('#share-intro-text').val().trim();
                $('#share-modal').removeClass('show');
                doShareChat(introText);
            });
            
            // Close modal on overlay click
            $('#share-modal').on('click', function(e) {
                if (e.target === this) {
                    $(this).removeClass('show');
                }
            });
        });
        
        // Homepage tab AJAX switching
        var tabCache = {};
        var activeTabRequest = null;
        $('.research-tab').on('click', function() {
            var $btn = $(this);
            var tab = $btn.data('tab');
            var $grid = $('#research-grid');
            
            // Don't reload active tab
            if ($btn.hasClass('active')) return;
            
            // Update active tab button
            $('.research-tab').removeClass('active');
            $btn.addClass('active');
            
            // Check cache first
            if (tabCache[tab]) {
                $grid.html(tabCache[tab]);
                return;
            }

            // Cancel stale in-flight request if user switches tabs quickly
            if (activeTabRequest && activeTabRequest.readyState !== 4) {
                activeTabRequest.abort();
            }
            
            // Show loading state
            $grid.addClass('loading');
            $grid.html('<div class="research-grid-loader visible"><i class="fa fa-spinner"></i></div>');
            
            activeTabRequest = $.ajax({
                url: '{{ path("academia_homepage_tab", {"type": "interests"}) }}'.replace('interests', tab),
                type: 'GET',
                dataType: 'json',
                timeout: 15000,
                success: function(response) {
                    tabCache[tab] = response.html;
                    $grid.removeClass('loading').html(response.html);
                },
                error: function(xhr, status) {
                    if (status === 'abort') return;
                    $grid.removeClass('loading').html(
                        '<div class="col-12 text-center" style="padding: 40px;">' +
                        '<i class="fa fa-exclamation-circle fa-3x" style="color: #ccc; margin-bottom: 15px;"></i>' +
                        '<p style="color: #888;">حدث خطأ أثناء تحميل البيانات</p></div>'
                    );
                },
                complete: function() {
                    activeTabRequest = null;
                }
            });
        });
    });
</script>
{% if not userman.has_subscribtion() %}
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3326822702504482" crossorigin="anonymous"></script>
{% endif %}
{% endblock %}