{% extends "settings/layout.html.twig" %}
{% trans_default_domain "Settings" %}

{% block settings_content %}
    {# Profile Completion Checklist #}
    {% include "settings/_completion_checklist.html.twig" %}

    {# Avatar & Basic Info #}
    <div class="settings-card">
        <h3 class="settings-card-title">{{ 'profile.photo_title'|trans }}</h3>
        <div class="avatar-upload">
            <img src="{{ user.webPath }}" alt="{{ user.firstName }}" class="avatar-preview" id="settingsAvatar">
            <div class="avatar-actions">
                <button type="button" class="btn-settings btn-settings-outline btn-settings-sm" onclick="document.getElementById('settingsAvatarInput').click()">
                    <i class="fa fa-camera"></i> {{ 'profile.change_photo'|trans }}
                </button>
                <input type="file" id="settingsAvatarInput" accept="image/jpeg,image/png,image/gif" style="display:none" onchange="uploadSettingsAvatar(this)">
                <span class="form-hint">{{ 'profile.photo_hint'|trans }}</span>
            </div>
        </div>
    </div>

    {# Personal Information #}
    <div class="settings-card">
        <h3 class="settings-card-title">{{ 'profile.personal_info'|trans }}</h3>
        <form id="profileForm" onsubmit="return false;">
            <div class="form-row">
                <div class="form-group">
                    <label>{{ 'profile.first_name'|trans }}</label>
                    <input type="text" class="form-input" name="firstName" value="{{ user.firstName }}" data-field="firstName">
                </div>
                <div class="form-group">
                    <label>{{ 'profile.last_name'|trans }}</label>
                    <input type="text" class="form-input" name="lastName" value="{{ user.lastName }}" data-field="lastName">
                </div>
            </div>

            <div class="form-group">
                <label>{{ 'profile.username'|trans }}</label>
                <input type="text" class="form-input" value="{{ user.username }}" disabled style="background: var(--bg-light); cursor: not-allowed;">
                <p class="form-hint">{{ 'profile.username_hint'|trans }}</p>
            </div>

            <div class="form-group">
                <label>{{ 'profile.bio'|trans }}</label>
                <textarea class="form-textarea" name="bio" data-field="bio" maxlength="500" placeholder="{{ 'profile.bio_placeholder'|trans }}">{{ user.bio }}</textarea>
                <p class="form-hint"><span id="bioCounter">{{ user.bio ? user.bio|length : 0 }}</span>/500</p>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label>{{ 'profile.gender'|trans }}</label>
                    <select class="form-select" name="gender" data-field="gender">
                        <option value="">—</option>
                        <option value="male" {{ user.gender == 'male' ? 'selected' : '' }}>{{ 'profile.gender_male'|trans }}</option>
                        <option value="female" {{ user.gender == 'female' ? 'selected' : '' }}>{{ 'profile.gender_female'|trans }}</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>{{ 'profile.birthdate'|trans }}</label>
                    <input type="date" class="form-input" name="birthdate" data-field="birthdate" value="{{ user.birthdate ? user.birthdate|date('Y-m-d') : '' }}">
                </div>
            </div>

            <div class="form-group">
                <label>{{ 'profile.phone'|trans }}</label>
                <input type="tel" class="form-input" name="cell" data-field="cell" value="{{ user.cell }}" placeholder="+963 ...">
            </div>

            <button type="button" class="btn-settings btn-settings-primary" onclick="saveProfileFields()">
                <i class="fa fa-check"></i> {{ 'profile.save'|trans }}
            </button>
        </form>
    </div>

    {# Academic Information #}
    <div class="settings-card">
        <h3 class="settings-card-title">{{ 'profile.academic_info'|trans }}</h3>
        <form id="academicForm" onsubmit="return false;">
            <div class="form-group">
                <label>{{ 'profile.study_degree'|trans }}</label>
                <select class="form-select" name="studyDegree" data-field="studyDegree">
                    <option value="">—</option>
                    <option value="student" {{ user.studyDegree == 'student' ? 'selected' : '' }}>{{ 'profile.degree_student'|trans }}</option>
                    <option value="bachelor" {{ user.studyDegree|lower == 'bachelor' ? 'selected' : '' }}>{{ 'profile.degree_bachelor'|trans }}</option>
                    <option value="master" {{ user.studyDegree|lower == 'master' ? 'selected' : '' }}>{{ 'profile.degree_master'|trans }}</option>
                    <option value="phd" {{ user.studyDegree|lower == 'phd' ? 'selected' : '' }}>{{ 'profile.degree_phd'|trans }}</option>
                    <option value="professor" {{ user.studyDegree|lower == 'professor' ? 'selected' : '' }}>{{ 'profile.degree_professor'|trans }}</option>
                </select>
            </div>

            <div class="form-group">
                <label>{{ 'profile.study_field'|trans }}</label>
                <div class="searchable-select" id="fieldSearchable">
                    <input type="hidden" id="studyFieldValue" value="{{ user.studyField ? user.studyField.id : '' }}">
                    <div class="searchable-input-wrap">
                        <input type="text" class="form-input searchable-input" id="fieldSearchInput"
                            autocomplete="off"
                            placeholder="{{ 'profile.study_field_search'|trans }}"
                            value="{% if user.studyField %}{% if app.request.locale == 'en' and user.studyField.englishFullName %}{{ user.studyField.englishFullName }}{% else %}{{ user.studyField.arabicFullName }}{% endif %}{% endif %}">
                        <span class="searchable-clear" id="fieldClearBtn" style="display:{% if user.studyField %}inline{% else %}none{% endif %}" onclick="clearStudyField()">&times;</span>
                    </div>
                    <div class="searchable-dropdown" id="fieldDropdown" style="display:none"></div>
                </div>
            </div>

            <div class="form-group">
                <label>{{ 'profile.work'|trans }}</label>
                <input type="text" class="form-input" name="work" data-field="work" value="{{ user.work }}" placeholder="{{ 'profile.work_placeholder'|trans }}">
                <p class="form-hint">{{ 'profile.work_hint'|trans }}</p>
            </div>

            <div class="form-group">
                <label>{{ 'profile.country'|trans }}</label>
                <select class="form-select" name="country" data-field="country">
                    <option value="">—</option>
                    {% for label, value in countries %}
                        <option value="{{ value }}" {{ user.country == value ? 'selected' : '' }}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="form-group">
                <label>{{ 'profile.address'|trans }}</label>
                <input type="text" class="form-input" name="address" data-field="address" value="{{ user.address }}" placeholder="{{ 'profile.address_placeholder'|trans }}">
            </div>

            <button type="button" class="btn-settings btn-settings-primary" onclick="saveAcademicFields()">
                <i class="fa fa-check"></i> {{ 'profile.save'|trans }}
            </button>
        </form>
    </div>

    {# Work Experience — LinkedIn-style #}
    <div class="settings-card">
        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; padding-bottom:14px; border-bottom:2px solid var(--primary-color);">
            <h3 style="font-size:18px; font-weight:700; color:var(--text-color); margin:0;">
                <i class="fa fa-briefcase"></i> {{ 'profile.work_experience_title'|trans }}
            </h3>
            <button type="button" class="btn-settings btn-settings-outline btn-settings-sm" onclick="showWorkForm()">
                <i class="fa fa-plus"></i> {{ 'profile.work_add'|trans }}
            </button>
        </div>

        {# Add/Edit form (hidden initially) #}
        <div id="workFormContainer" style="display:none; margin-bottom:20px;">
            <div style="background:var(--bg-light); border-radius:8px; padding:20px; border:1px solid var(--border-color);">
                <input type="hidden" id="workExpId" value="">
                <div class="form-row">
                    <div class="form-group">
                        <label>{{ 'profile.work_exp_title'|trans }} *</label>
                        <input type="text" class="form-input" id="workExpTitle" placeholder="{{ 'profile.work_exp_title_placeholder'|trans }}">
                    </div>
                    <div class="form-group">
                        <label>{{ 'profile.work_exp_company'|trans }} *</label>
                        <input type="text" class="form-input" id="workExpCompany" placeholder="{{ 'profile.work_exp_company_placeholder'|trans }}">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label>{{ 'profile.work_exp_start'|trans }}</label>
                        <input type="month" class="form-input" id="workExpStart">
                    </div>
                    <div class="form-group">
                        <label>{{ 'profile.work_exp_end'|trans }}</label>
                        <input type="month" class="form-input" id="workExpEnd">
                    </div>
                </div>
                <div class="form-group" style="margin-bottom:12px;">
                    <label style="display:inline-flex; align-items:center; gap:6px; text-transform:none; cursor:pointer;">
                        <input type="checkbox" id="workExpCurrent" onchange="toggleEndDate()">
                        {{ 'profile.work_exp_current'|trans }}
                    </label>
                </div>
                <div class="form-group">
                    <label>{{ 'profile.work_exp_desc'|trans }}</label>
                    <textarea class="form-textarea" id="workExpDesc" rows="2" placeholder="{{ 'profile.work_exp_desc_placeholder'|trans }}" style="min-height:60px;"></textarea>
                </div>
                <div style="display:flex; gap:8px;">
                    <button type="button" class="btn-settings btn-settings-primary btn-settings-sm" onclick="saveWorkExperience()">
                        <i class="fa fa-check"></i> {{ 'profile.save'|trans }}
                    </button>
                    <button type="button" class="btn-settings btn-settings-outline btn-settings-sm" onclick="hideWorkForm()">
                        {{ 'profile.work_cancel'|trans }}
                    </button>
                </div>
            </div>
        </div>

        {# Existing work experiences #}
        <div id="workExperiencesList">
            {% for exp in workExperiences %}
                <div class="work-exp-item" data-id="{{ exp.id }}">
                    <div class="work-exp-icon"><i class="fa fa-briefcase"></i></div>
                    <div class="work-exp-content">
                        <div class="work-exp-header">
                            <div>
                                <div class="work-exp-title">{{ exp.title }}</div>
                                <div class="work-exp-company">{{ exp.company }}</div>
                                <div class="work-exp-dates">
                                    {% if exp.startDate %}{{ exp.startDate|date('M Y') }}{% endif %}
                                    {% if exp.startDate %} — {% endif %}
                                    {% if exp.isCurrent %}
                                        <span style="color:var(--primary-color); font-weight:500;">{{ 'profile.work_exp_present'|trans }}</span>
                                    {% elseif exp.endDate %}
                                        {{ exp.endDate|date('M Y') }}
                                    {% endif %}
                                </div>
                            </div>
                            <div class="work-exp-actions">
                                <button type="button" class="btn-icon" onclick="editWorkExperience({{ exp.id }}, '{{ exp.title|e('js') }}', '{{ exp.company|e('js') }}', '{{ exp.startDate ? exp.startDate|date('Y-m') : '' }}', '{{ exp.endDate ? exp.endDate|date('Y-m') : '' }}', {{ exp.isCurrent ? 'true' : 'false' }}, '{{ exp.description|default('')|e('js') }}')" title="{{ 'profile.work_edit'|trans }}">
                                    <i class="fa fa-pencil"></i>
                                </button>
                                <button type="button" class="btn-icon btn-icon-danger" onclick="deleteWorkExperience({{ exp.id }})" title="{{ 'profile.work_delete'|trans }}">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </div>
                        </div>
                        {% if exp.description %}
                            <div class="work-exp-desc">{{ exp.description }}</div>
                        {% endif %}
                    </div>
                </div>
            {% else %}
                <div id="workExpEmpty" class="work-exp-empty">
                    <i class="fa fa-briefcase" style="font-size:24px; color:var(--text-muted); margin-bottom:8px;"></i>
                    <p>{{ 'profile.work_exp_empty'|trans }}</p>
                </div>
            {% endfor %}
        </div>
    </div>

    {# Social Links #}
    <div class="settings-card">
        <h3 class="settings-card-title">{{ 'profile.social_links'|trans }}</h3>
        <form id="socialForm" onsubmit="return false;">
            <div class="form-group">
                <label><i class="fa fa-linkedin-square" style="color: #0077b5;"></i> {{ 'profile.linkedin'|trans }}</label>
                <input type="url" class="form-input" name="linkedinUrl" data-field="linkedinUrl" value="{{ user.linkedinUrl }}" placeholder="https://linkedin.com/in/...">
            </div>
            <div class="form-group">
                <label><i class="fa fa-facebook-square" style="color: #1877f2;"></i> {{ 'profile.facebook'|trans }}</label>
                <input type="url" class="form-input" name="facebookUrl" data-field="facebookUrl" value="{{ user.facebookUrl }}" placeholder="https://facebook.com/...">
            </div>
            <button type="button" class="btn-settings btn-settings-primary" onclick="saveSocialFields()">
                <i class="fa fa-check"></i> {{ 'profile.save'|trans }}
            </button>
        </form>
    </div>

    {# Google Scholar Integration #}
    <div class="settings-card" id="scholarCard">
        <h3 class="settings-card-title">
            <i class="fa fa-graduation-cap" style="color: #4285f4;"></i>
            {{ 'scholar.section_title'|trans }}
        </h3>
        
        {% if scholarProfile is null %}
            {# Empty State — No Scholar linked #}
            <div id="scholarEmptyState">
                <p class="form-hint" style="margin-bottom: 16px;">{{ 'scholar.link_description'|trans }}</p>
                <div class="form-group">
                    <label>{{ 'scholar.input_label'|trans }}</label>
                    <input type="text" class="form-input" id="scholarInput" 
                        placeholder="{{ 'scholar.input_placeholder'|trans }}"
                        autocomplete="off">
                    <p class="form-hint">{{ 'scholar.input_hint'|trans }}</p>
                </div>
                <div id="scholarValidation" style="display: none; margin-bottom: 16px;">
                    <div class="scholar-preview" style="background: var(--bg-light); padding: 12px 16px; border-radius: 8px; display: flex; align-items: center; gap: 12px;">
                        <i class="fa fa-check-circle" style="color: #22c55e; font-size: 20px;"></i>
                        <div>
                            <div style="font-weight: 600;" id="scholarPreviewName"></div>
                            <div style="font-size: 13px; color: var(--text-muted);">{{ 'scholar.confirm_question'|trans }}</div>
                        </div>
                    </div>
                </div>
                <div id="scholarError" style="display: none; margin-bottom: 16px;">
                    <div style="background: #fef2f2; color: #dc2626; padding: 12px 16px; border-radius: 8px; font-size: 14px;">
                        <i class="fa fa-exclamation-circle"></i> <span id="scholarErrorText"></span>
                    </div>
                </div>
                <button type="button" class="btn-settings btn-settings-primary" id="scholarLinkBtn" onclick="validateOrLinkScholar()">
                    <i class="fa fa-link"></i> <span id="scholarLinkBtnText">{{ 'scholar.validate_btn'|trans }}</span>
                </button>
            </div>
        {% elseif scholarProfile.syncStatus == 'pending' or scholarProfile.syncStatus == 'syncing' %}
            {# Syncing State #}
            <div id="scholarSyncingState">
                <div style="background: #eff6ff; padding: 20px; border-radius: 8px; text-align: center;">
                    <div class="scholar-sync-spinner" style="margin-bottom: 12px;">
                        <i class="fa fa-spinner fa-spin fa-2x" style="color: #3b82f6;"></i>
                    </div>
                    <div style="font-weight: 600; margin-bottom: 4px;">{{ 'scholar.syncing_title'|trans }}</div>
                    <div style="font-size: 13px; color: var(--text-muted);">{{ 'scholar.syncing_hint'|trans }}</div>
                </div>
            </div>
        {% elseif scholarProfile.syncStatus == 'failed' %}
            {# Error State #}
            <div id="scholarErrorState">
                <div style="background: #fef2f2; padding: 16px; border-radius: 8px; margin-bottom: 16px;">
                    <div style="color: #dc2626; font-weight: 600; margin-bottom: 4px;">
                        <i class="fa fa-exclamation-triangle"></i> {{ 'scholar.sync_failed'|trans }}
                    </div>
                    <div style="font-size: 13px; color: #b91c1c;">{{ scholarProfile.syncError }}</div>
                </div>
                <div style="display: flex; gap: 12px;">
                    <button type="button" class="btn-settings btn-settings-primary" onclick="retryScholarSync()">
                        <i class="fa fa-refresh"></i> {{ 'scholar.retry_btn'|trans }}
                    </button>
                    <button type="button" class="btn-settings btn-settings-outline" onclick="unlinkScholar()">
                        {{ 'scholar.unlink_btn'|trans }}
                    </button>
                </div>
            </div>
        {% else %}
            {# Linked State — syncStatus == 'completed' #}
            <div id="scholarLinkedState">
                <div style="display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px;">
                    <div>
                        <div style="font-weight: 600; font-size: 16px; margin-bottom: 2px;">
                            <i class="fa fa-check-circle" style="color: #22c55e;"></i>
                            {{ scholarProfile.authorName }}
                        </div>
                        {% if scholarProfile.affiliation %}
                            <div style="color: var(--text-muted); font-size: 14px;">{{ scholarProfile.affiliation }}</div>
                        {% endif %}
                    </div>
                    <a href="https://scholar.google.com/citations?user={{ scholarProfile.scholarId }}" target="_blank" class="btn-settings btn-settings-outline btn-settings-sm">
                        {{ 'scholar.view_on_scholar'|trans }} <i class="fa fa-external-link"></i>
                    </a>
                </div>
                
                {# Metrics Grid #}
                <div class="scholar-metrics" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px;">
                    <div style="background: var(--bg-light); padding: 16px; border-radius: 8px; text-align: center;">
                        <div style="font-size: 24px; font-weight: 700; color: var(--primary-color);">{{ scholarProfile.citationsAll|number_format }}</div>
                        <div style="font-size: 13px; color: var(--text-muted);">{{ 'scholar.citations'|trans }}</div>
                    </div>
                    <div style="background: var(--bg-light); padding: 16px; border-radius: 8px; text-align: center;">
                        <div style="font-size: 24px; font-weight: 700; color: var(--primary-color);">{{ scholarProfile.hIndexAll }}</div>
                        <div style="font-size: 13px; color: var(--text-muted);">{{ 'scholar.h_index'|trans }}</div>
                    </div>
                    <div style="background: var(--bg-light); padding: 16px; border-radius: 8px; text-align: center;">
                        <div style="font-size: 24px; font-weight: 700; color: var(--primary-color);">{{ scholarProfile.i10IndexAll }}</div>
                        <div style="font-size: 13px; color: var(--text-muted);">{{ 'scholar.i10_index'|trans }}</div>
                    </div>
                </div>
                
                {# Sync Info & Actions #}
                <div style="display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--border-color);">
                    <div style="font-size: 13px; color: var(--text-muted);">
                        📚 {{ scholarProfile.publicationCount }} {{ 'scholar.publications'|trans }}
                        {% if scholarProfile.lastSyncedAt %}
                            · {{ 'scholar.last_synced'|trans }}: {{ scholarProfile.lastSyncedAt|date('M j, Y') }}
                        {% endif %}
                    </div>
                    <div style="display: flex; gap: 8px;">
                        <button type="button" class="btn-settings btn-settings-outline btn-settings-sm" onclick="syncScholarProfile()" id="scholarSyncBtn">
                            <i class="fa fa-refresh"></i> {{ 'scholar.sync_btn'|trans }}
                        </button>
                        <button type="button" class="btn-settings btn-settings-outline btn-settings-sm" style="color: #dc2626;" onclick="unlinkScholar()">
                            {{ 'scholar.unlink_btn'|trans }}
                        </button>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>

    {# Academic Interests #}
    <div class="settings-card">
        <h3 class="settings-card-title">{{ 'profile.interests_title'|trans }}</h3>
        <p class="form-hint" style="margin-bottom: 12px;">{{ 'profile.interests_hint'|trans }}</p>
        <div class="interests-container" id="interestsContainer" onclick="document.getElementById('interestsInput').focus()">
            {% for interest in user.interests %}
                <span class="interest-chip" data-value="{{ interest.context }}">
                    {{ interest.context }}
                    <span class="remove-chip" onclick="removeInterest(this)">&times;</span>
                </span>
            {% endfor %}
            <input type="text" class="interests-input" id="interestsInput" placeholder="{{ 'profile.interests_placeholder'|trans }}" onkeydown="handleInterestKey(event)">
        </div>
        <div style="margin-top: 12px;">
            <button type="button" class="btn-settings btn-settings-primary" onclick="saveInterests()">
                <i class="fa fa-check"></i> {{ 'profile.save'|trans }}
            </button>
        </div>
    </div>

<style>
/* Searchable select */
.searchable-select { position: relative; }
.searchable-input-wrap { position: relative; }
.searchable-input-wrap .form-input { padding-right: 30px; }
html[dir="rtl"] .searchable-input-wrap .form-input { padding-left: 30px; padding-right: 14px; }
.searchable-clear {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    cursor: pointer; font-size: 18px; color: var(--text-muted); line-height: 1;
}
html[dir="rtl"] .searchable-clear { right: auto; left: 10px; }
.searchable-clear:hover { color: #dc2626; }
.searchable-dropdown {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 100;
    background: #fff; border: 1px solid var(--border-color);
    border-radius: 0 0 8px 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    max-height: 260px; overflow-y: auto;
}
.searchable-option {
    padding: 10px 14px; cursor: pointer; font-size: 14px; color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
}
.searchable-option:last-child { border-bottom: none; }
.searchable-option:hover, .searchable-option.active { background: var(--primary-bg); color: var(--primary-color); }
.searchable-option.add-new {
    color: var(--primary-color); font-weight: 600; display: flex; align-items: center; gap: 6px;
}
.searchable-option .field-sub { font-size: 12px; color: var(--text-muted); }

/* Work experience */
.work-exp-item {
    display: flex; gap: 14px; padding: 16px 0;
    border-bottom: 1px solid var(--border-color);
}
.work-exp-item:last-child { border-bottom: none; }
.work-exp-icon {
    width: 40px; height: 40px; border-radius: 8px;
    background: var(--primary-bg); color: var(--primary-color);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.work-exp-content { flex: 1; min-width: 0; }
.work-exp-header { display: flex; justify-content: space-between; align-items: flex-start; }
.work-exp-title { font-size: 15px; font-weight: 600; color: var(--text-color); }
.work-exp-company { font-size: 14px; color: var(--text-muted); margin-top: 2px; }
.work-exp-dates { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.work-exp-desc { font-size: 13px; color: var(--text-color); margin-top: 8px; line-height: 1.5; }
.work-exp-actions { display: flex; gap: 4px; flex-shrink: 0; }
.btn-icon {
    width: 32px; height: 32px; border-radius: 6px; border: none;
    background: transparent; cursor: pointer; color: var(--text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.btn-icon:hover { background: var(--bg-light); color: var(--primary-color); }
.btn-icon-danger:hover { background: #fee2e2; color: #dc2626; }
.work-exp-empty {
    text-align: center; padding: 32px 16px; color: var(--text-muted); font-size: 14px;
}

/* Add new field modal */
.field-modal-overlay {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4); z-index: 200; align-items: center; justify-content: center;
}
.field-modal-overlay.show { display: flex; }
.field-modal {
    background: #fff; border-radius: var(--radius); padding: 28px; width: 400px;
    max-width: 90%; box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.field-modal h4 { margin: 0 0 16px; font-size: 16px; }
</style>

{# Add New Field Modal #}
<div class="field-modal-overlay" id="addFieldModal">
    <div class="field-modal">
        <h4><i class="fa fa-plus-circle"></i> {{ 'profile.field_add_title'|trans }}</h4>
        <div class="form-group">
            <label>{{ 'profile.field_arabic_name'|trans }}</label>
            <input type="text" class="form-input" id="newFieldArabic" placeholder="{{ 'profile.field_arabic_placeholder'|trans }}">
        </div>
        <div class="form-group">
            <label>{{ 'profile.field_english_name'|trans }}</label>
            <input type="text" class="form-input" id="newFieldEnglish" placeholder="{{ 'profile.field_english_placeholder'|trans }}">
        </div>
        <div style="display:flex; gap:8px; justify-content:flex-end;">
            <button type="button" class="btn-settings btn-settings-outline btn-settings-sm" onclick="closeAddFieldModal()">{{ 'profile.work_cancel'|trans }}</button>
            <button type="button" class="btn-settings btn-settings-primary btn-settings-sm" onclick="submitNewField()">
                <i class="fa fa-plus"></i> {{ 'profile.field_add_btn'|trans }}
            </button>
        </div>
    </div>
</div>

<script>
var T = {
    saved: '{{ 'toast.saved'|trans|e('js') }}',
    error: '{{ 'toast.error'|trans|e('js') }}',
    saving: '{{ 'toast.saving'|trans|e('js') }}',
    addNewField: '{{ 'profile.field_add_option'|trans|e('js') }}',
    noResults: '{{ 'profile.field_no_results'|trans|e('js') }}',
    confirmDelete: '{{ 'profile.work_confirm_delete'|trans|e('js') }}'
};

// Bio counter
(function() {
    var bioArea = document.querySelector('[data-field="bio"]');
    if (bioArea) {
        bioArea.addEventListener('input', function() {
            document.getElementById('bioCounter').textContent = this.value.length;
        });
    }
})();

// Avatar upload
function uploadSettingsAvatar(input) {
    if (!input.files || !input.files[0]) return;
    var file = input.files[0];
    if (file.size > 5000000) {
        showToast('{{ 'profile.photo_too_large'|trans|e('js') }}', 'error');
        return;
    }
    var fd = new FormData();
    fd.append('image', file);
    fetch('/api/user/profile/update-image', { method: 'POST', body: fd })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.success) {
            document.getElementById('settingsAvatar').src = data.imagePath + '?t=' + Date.now();
            showToast(T.saved, 'success');
        } else {
            showToast(data.message || T.error, 'error');
        }
    })
    .catch(function() { showToast(T.error, 'error'); });
}

// Save a single field
function saveField(field, value) {
    var fd = new FormData();
    fd.append('field', field);
    fd.append('value', value);
    return fetch('/api/user/profile/update', { method: 'POST', body: fd })
        .then(function(r) { return r.json(); });
}

// Save profile fields
function saveProfileFields() {
    var form = document.getElementById('profileForm');
    var inputs = form.querySelectorAll('[data-field]');
    var promises = [];
    inputs.forEach(function(input) {
        promises.push(saveField(input.getAttribute('data-field'), input.value));
    });
    Promise.all(promises).then(function(results) {
        var allOk = results.every(function(r) { return r.success; });
        if (allOk) showToast(T.saved, 'success');
        else showToast(T.error, 'error');
    }).catch(function() { showToast(T.error, 'error'); });
}

// ===== Searchable Study Field =====
var fieldSearchTimer = null;
var fieldDropdown = document.getElementById('fieldDropdown');
var fieldInput = document.getElementById('fieldSearchInput');
var fieldValue = document.getElementById('studyFieldValue');
var fieldClearBtn = document.getElementById('fieldClearBtn');

fieldInput.addEventListener('input', function() {
    clearTimeout(fieldSearchTimer);
    var q = this.value.trim();
    fieldSearchTimer = setTimeout(function() { searchFields(q); }, 200);
});

fieldInput.addEventListener('focus', function() {
    searchFields(this.value.trim());
});

// Close dropdown on outside click
document.addEventListener('click', function(e) {
    if (!document.getElementById('fieldSearchable').contains(e.target)) {
        fieldDropdown.style.display = 'none';
    }
});

function searchFields(q) {
    fetch('{{ path('app_settings_search_fields') }}?q=' + encodeURIComponent(q))
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (!data.success) return;
        renderFieldDropdown(data.fields, q);
    });
}

function renderFieldDropdown(fields, query) {
    fieldDropdown.innerHTML = '';
    if (fields.length === 0 && !query) {
        fieldDropdown.style.display = 'none';
        return;
    }
    fields.forEach(function(f) {
        var div = document.createElement('div');
        div.className = 'searchable-option';
        div.innerHTML = '<div>' + escHtml(f.label) + '</div>' +
            (f.arabicName !== f.englishName ? '<div class="field-sub">' + escHtml(f.englishName) + '</div>' : '');
        div.onclick = function() { selectField(f.id, f.label); };
        fieldDropdown.appendChild(div);
    });

    // "Add new" option always at end
    var addDiv = document.createElement('div');
    addDiv.className = 'searchable-option add-new';
    addDiv.innerHTML = '<i class="fa fa-plus-circle"></i> ' + T.addNewField;
    addDiv.onclick = function() {
        fieldDropdown.style.display = 'none';
        openAddFieldModal(query);
    };
    fieldDropdown.appendChild(addDiv);

    fieldDropdown.style.display = 'block';
}

function selectField(id, label) {
    fieldValue.value = id;
    fieldInput.value = label;
    fieldClearBtn.style.display = 'inline';
    fieldDropdown.style.display = 'none';
    // Auto-save
    var fd = new FormData();
    fd.append('fieldId', id);
    fetch('{{ path('app_settings_update_study_field') }}', { method: 'POST', body: fd })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.success) showToast(T.saved, 'success');
        else showToast(T.error, 'error');
    });
}

function clearStudyField() {
    fieldValue.value = '';
    fieldInput.value = '';
    fieldClearBtn.style.display = 'none';
    // Save clear
    var fd = new FormData();
    fd.append('fieldId', '');
    fetch('{{ path('app_settings_update_study_field') }}', { method: 'POST', body: fd });
}

// ===== Add New Field Modal =====
function openAddFieldModal(prefill) {
    document.getElementById('newFieldArabic').value = prefill || '';
    document.getElementById('newFieldEnglish').value = '';
    document.getElementById('addFieldModal').classList.add('show');
}

function closeAddFieldModal() {
    document.getElementById('addFieldModal').classList.remove('show');
}

function submitNewField() {
    var ar = document.getElementById('newFieldArabic').value.trim();
    var en = document.getElementById('newFieldEnglish').value.trim();
    if (!ar && !en) return;

    var fd = new FormData();
    fd.append('arabicName', ar);
    fd.append('englishName', en);
    fetch('{{ path('app_settings_create_field') }}', { method: 'POST', body: fd })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.success && data.field) {
            closeAddFieldModal();
            selectField(data.field.id, data.field.arabicName);
            showToast(T.saved, 'success');
        } else {
            showToast(data.message || T.error, 'error');
        }
    })
    .catch(function() { showToast(T.error, 'error'); });
}

// Save academic fields (including study field which uses the searchable component)
function saveAcademicFields() {
    var form = document.getElementById('academicForm');
    var promises = [];

    // Regular fields
    var inputs = form.querySelectorAll('[data-field]');
    inputs.forEach(function(input) {
        promises.push(saveField(input.getAttribute('data-field'), input.value));
    });

    // Study field (already auto-saved on selection, but save again to be safe)
    var selectedFieldId = fieldValue.value;
    var fieldFd = new FormData();
    fieldFd.append('fieldId', selectedFieldId);
    promises.push(
        fetch('{{ path('app_settings_update_study_field') }}', { method: 'POST', body: fieldFd })
        .then(function(r) { return r.json(); })
    );

    Promise.all(promises).then(function(results) {
        var allOk = results.every(function(r) { return r.success; });
        if (allOk) showToast(T.saved, 'success');
        else showToast(T.error, 'error');
    }).catch(function() { showToast(T.error, 'error'); });
}

// Save social links
function saveSocialFields() {
    var form = document.getElementById('socialForm');
    var inputs = form.querySelectorAll('[data-field]');
    var promises = [];
    inputs.forEach(function(input) {
        promises.push(saveField(input.getAttribute('data-field'), input.value));
    });
    Promise.all(promises).then(function(results) {
        var allOk = results.every(function(r) { return r.success; });
        if (allOk) showToast(T.saved, 'success');
        else showToast(T.error, 'error');
    }).catch(function() { showToast(T.error, 'error'); });
}

// ===== Work Experience =====
function showWorkForm(clear) {
    document.getElementById('workFormContainer').style.display = 'block';
    if (clear !== false) {
        document.getElementById('workExpId').value = '';
        document.getElementById('workExpTitle').value = '';
        document.getElementById('workExpCompany').value = '';
        document.getElementById('workExpStart').value = '';
        document.getElementById('workExpEnd').value = '';
        document.getElementById('workExpCurrent').checked = false;
        document.getElementById('workExpDesc').value = '';
        document.getElementById('workExpEnd').disabled = false;
    }
    document.getElementById('workExpTitle').focus();
}

function hideWorkForm() {
    document.getElementById('workFormContainer').style.display = 'none';
}

function toggleEndDate() {
    var current = document.getElementById('workExpCurrent').checked;
    var endInput = document.getElementById('workExpEnd');
    endInput.disabled = current;
    if (current) endInput.value = '';
}

function editWorkExperience(id, title, company, startDate, endDate, isCurrent, description) {
    document.getElementById('workExpId').value = id;
    document.getElementById('workExpTitle').value = title;
    document.getElementById('workExpCompany').value = company;
    document.getElementById('workExpStart').value = startDate;
    document.getElementById('workExpEnd').value = endDate;
    document.getElementById('workExpCurrent').checked = isCurrent;
    document.getElementById('workExpDesc').value = description;
    document.getElementById('workExpEnd').disabled = isCurrent;
    showWorkForm(false);
    document.getElementById('workFormContainer').scrollIntoView({ behavior: 'smooth', block: 'center' });
}

function saveWorkExperience() {
    var id = document.getElementById('workExpId').value;
    var title = document.getElementById('workExpTitle').value.trim();
    var company = document.getElementById('workExpCompany').value.trim();
    if (!title || !company) {
        showToast(T.error, 'error');
        return;
    }

    var fd = new FormData();
    fd.append('title', title);
    fd.append('company', company);
    fd.append('startDate', document.getElementById('workExpStart').value);
    fd.append('endDate', document.getElementById('workExpEnd').value);
    fd.append('isCurrent', document.getElementById('workExpCurrent').checked ? '1' : '0');
    fd.append('description', document.getElementById('workExpDesc').value.trim());

    var url = id
        ? '{{ path('app_settings_work_update', {id: '__ID__'}) }}'.replace('__ID__', id)
        : '{{ path('app_settings_work_add') }}';

    fetch(url, { method: 'POST', body: fd })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.success) {
            showToast(T.saved, 'success');
            hideWorkForm();
            location.reload(); // refresh to show updated list
        } else {
            showToast(data.message || T.error, 'error');
        }
    })
    .catch(function() { showToast(T.error, 'error'); });
}

function deleteWorkExperience(id) {
    if (!confirm(T.confirmDelete)) return;
    var url = '{{ path('app_settings_work_delete', {id: '__ID__'}) }}'.replace('__ID__', id);
    fetch(url, { method: 'POST' })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.success) {
            showToast(T.saved, 'success');
            var item = document.querySelector('.work-exp-item[data-id="' + id + '"]');
            if (item) item.remove();
            // Show empty if no more
            var remaining = document.querySelectorAll('.work-exp-item');
            if (remaining.length === 0) {
                document.getElementById('workExperiencesList').innerHTML =
                    '<div id="workExpEmpty" class="work-exp-empty">' +
                    '<i class="fa fa-briefcase" style="font-size:24px; color:var(--text-muted); margin-bottom:8px;"></i>' +
                    '<p>{{ 'profile.work_exp_empty'|trans|e('js') }}</p></div>';
            }
        } else {
            showToast(T.error, 'error');
        }
    });
}

// Interests
function removeInterest(el) {
    el.parentElement.remove();
}

function handleInterestKey(e) {
    if (e.key === 'Enter' || e.key === ',') {
        e.preventDefault();
        var val = e.target.value.trim().replace(',', '');
        if (val) {
            addInterestChip(val);
            e.target.value = '';
        }
    }
}

function addInterestChip(text) {
    var container = document.getElementById('interestsContainer');
    var input = document.getElementById('interestsInput');
    var existing = container.querySelectorAll('.interest-chip');
    for (var i = 0; i < existing.length; i++) {
        if (existing[i].getAttribute('data-value').toLowerCase() === text.toLowerCase()) return;
    }
    var chip = document.createElement('span');
    chip.className = 'interest-chip';
    chip.setAttribute('data-value', text);
    chip.innerHTML = text + ' <span class="remove-chip" onclick="removeInterest(this)">&times;</span>';
    container.insertBefore(chip, input);
}

function saveInterests() {
    var chips = document.querySelectorAll('#interestsContainer .interest-chip');
    var interests = [];
    chips.forEach(function(chip) { interests.push(chip.getAttribute('data-value')); });

    var pending = document.getElementById('interestsInput').value.trim();
    if (pending) {
        interests.push(pending);
        document.getElementById('interestsInput').value = '';
        addInterestChip(pending);
    }

    if (interests.length === 0) {
        showToast('{{ 'profile.interests_empty'|trans|e('js') }}', 'error');
        return;
    }

    fetch('{{ path('update_academic_interests') }}', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ interests: interests })
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.success) showToast(T.saved, 'success');
        else showToast(data.message || T.error, 'error');
    })
    .catch(function() { showToast(T.error, 'error'); });
}

function escHtml(str) {
    var div = document.createElement('div');
    div.textContent = str;
    return div.innerHTML;
}

// ===== Google Scholar Integration =====
var scholarValidated = false;
var scholarValidatedId = null;
var scholarValidatedName = null;

function validateOrLinkScholar() {
    var input = document.getElementById('scholarInput').value.trim();
    if (!input) {
        showScholarError('{{ 'scholar.error_empty'|trans|e('js') }}');
        return;
    }
    
    if (!scholarValidated) {
        // First step: validate the Scholar ID
        validateScholarId(input);
    } else {
        // Second step: link the profile
        linkScholarProfile();
    }
}

function validateScholarId(input) {
    var btn = document.getElementById('scholarLinkBtn');
    btn.disabled = true;
    btn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> {{ 'scholar.validating'|trans|e('js') }}';
    
    hideScholarError();
    document.getElementById('scholarValidation').style.display = 'none';
    
    fetch('/api/scholar/validate', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ scholar_id: input })
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        btn.disabled = false;
        if (data.valid) {
            scholarValidated = true;
            scholarValidatedId = input;
            scholarValidatedName = data.author_name;
            document.getElementById('scholarPreviewName').textContent = data.author_name;
            document.getElementById('scholarValidation').style.display = 'block';
            document.getElementById('scholarLinkBtnText').textContent = '{{ 'scholar.confirm_btn'|trans|e('js') }}';
            btn.innerHTML = '<i class="fa fa-check"></i> <span id="scholarLinkBtnText">{{ 'scholar.confirm_btn'|trans|e('js') }}</span>';
        } else {
            showScholarError(data.error || '{{ 'scholar.error_invalid'|trans|e('js') }}');
            btn.innerHTML = '<i class="fa fa-link"></i> <span id="scholarLinkBtnText">{{ 'scholar.validate_btn'|trans|e('js') }}</span>';
        }
    })
    .catch(function() {
        btn.disabled = false;
        btn.innerHTML = '<i class="fa fa-link"></i> <span id="scholarLinkBtnText">{{ 'scholar.validate_btn'|trans|e('js') }}</span>';
        showScholarError('{{ 'scholar.error_network'|trans|e('js') }}');
    });
}

function linkScholarProfile() {
    var btn = document.getElementById('scholarLinkBtn');
    btn.disabled = true;
    btn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> {{ 'scholar.linking'|trans|e('js') }}';
    
    fetch('/api/scholar/link', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ scholar_id: scholarValidatedId })
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.success) {
            showToast('{{ 'scholar.link_success'|trans|e('js') }}', 'success');
            // Reload page to show syncing state
            setTimeout(function() { location.reload(); }, 500);
        } else {
            btn.disabled = false;
            btn.innerHTML = '<i class="fa fa-check"></i> <span id="scholarLinkBtnText">{{ 'scholar.confirm_btn'|trans|e('js') }}</span>';
            showScholarError(data.error || '{{ 'scholar.error_link'|trans|e('js') }}');
        }
    })
    .catch(function() {
        btn.disabled = false;
        btn.innerHTML = '<i class="fa fa-check"></i> <span id="scholarLinkBtnText">{{ 'scholar.confirm_btn'|trans|e('js') }}</span>';
        showScholarError('{{ 'scholar.error_network'|trans|e('js') }}');
    });
}

function showScholarError(msg) {
    document.getElementById('scholarErrorText').textContent = msg;
    document.getElementById('scholarError').style.display = 'block';
}

function hideScholarError() {
    document.getElementById('scholarError').style.display = 'none';
}

function syncScholarProfile() {
    var btn = document.getElementById('scholarSyncBtn');
    btn.disabled = true;
    btn.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
    
    fetch('/api/scholar/sync', { method: 'POST' })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.success) {
            showToast('{{ 'scholar.sync_started'|trans|e('js') }}', 'success');
            setTimeout(function() { location.reload(); }, 1000);
        } else {
            btn.disabled = false;
            btn.innerHTML = '<i class="fa fa-refresh"></i> {{ 'scholar.sync_btn'|trans|e('js') }}';
            showToast(data.error || '{{ 'scholar.error_sync'|trans|e('js') }}', 'error');
        }
    })
    .catch(function() {
        btn.disabled = false;
        btn.innerHTML = '<i class="fa fa-refresh"></i> {{ 'scholar.sync_btn'|trans|e('js') }}';
        showToast('{{ 'scholar.error_network'|trans|e('js') }}', 'error');
    });
}

function retryScholarSync() {
    syncScholarProfile();
}

function unlinkScholar() {
    if (!confirm('{{ 'scholar.unlink_confirm'|trans|e('js') }}')) return;
    
    fetch('/api/scholar/unlink', { method: 'POST' })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.success) {
            showToast('{{ 'scholar.unlink_success'|trans|e('js') }}', 'success');
            setTimeout(function() { location.reload(); }, 500);
        } else {
            showToast(data.error || '{{ 'scholar.error_unlink'|trans|e('js') }}', 'error');
        }
    })
    .catch(function() {
        showToast('{{ 'scholar.error_network'|trans|e('js') }}', 'error');
    });
}

// Reset validation when input changes
document.addEventListener('DOMContentLoaded', function() {
    var scholarInput = document.getElementById('scholarInput');
    if (scholarInput) {
        scholarInput.addEventListener('input', function() {
            scholarValidated = false;
            scholarValidatedId = null;
            scholarValidatedName = null;
            document.getElementById('scholarValidation').style.display = 'none';
            document.getElementById('scholarLinkBtnText').textContent = '{{ 'scholar.validate_btn'|trans|e('js') }}';
            var btn = document.getElementById('scholarLinkBtn');
            btn.innerHTML = '<i class="fa fa-link"></i> <span id="scholarLinkBtnText">{{ 'scholar.validate_btn'|trans|e('js') }}</span>';
            hideScholarError();
        });
    }
    
    // Poll for sync completion if in syncing state
    {% if scholarProfile and (scholarProfile.syncStatus == 'pending' or scholarProfile.syncStatus == 'syncing') %}
    var pollCount = 0;
    var pollInterval = setInterval(function() {
        pollCount++;
        if (pollCount > 30) { // Stop after ~1.5 minutes
            clearInterval(pollInterval);
            return;
        }
        fetch('/api/scholar', { method: 'GET' })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.sync_status === 'completed' || data.sync_status === 'failed') {
                clearInterval(pollInterval);
                location.reload();
            }
        })
        .catch(function() {});
    }, 3000);
    {% endif %}
});
</script>
{% endblock %}