{% extends 'admin/base.html' %}
{% block title %}{{ t('profile.title') }}{% endblock %}
{% block content %}

<form method="POST">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

<div class="page-header--with-action">
    <div class="page-header__content">
        <h2>👤 {{ t('profile.title') }}</h2>
    </div>
    <button type="submit" class="btn btn-primary">💾 {{ t('profile.save_profile') }}</button>
</div>


        
        <div class="role-info">
            {{ t('profile.your_role') }} <strong>{{ t('users.role_' + current_user.role) }}</strong>
            · {{ t('profile.member_since') }} {{ current_user.created_at|format_date }}
        </div>

        <!-- Public Profile -->
        <div class="settings-section">
            <h3>✍️ {{ t('profile.author_profile') }}</h3>
            <div class="help-text section-subtitle">{{ t('profile.author_help') }}</div>
            
            <div class="form-group">
                <label for="display_name">{{ t('profile.display_name') }}</label>
                <input type="text" id="display_name" name="display_name" 
                       value="{{ current_user.display_name or '' }}" 
                       placeholder="{{ current_user.username }}">
                <div class="help-text">{{ t('profile.display_name_help') }}</div>
            </div>
            
            <div class="form-group">
                <label for="bio">{{ t('profile.bio') }}</label>
                <textarea id="bio" name="bio" placeholder="{{ t('profile.bio_placeholder') }}">{{ current_user.bio or '' }}</textarea>
                <div class="help-text">{{ t('profile.bio_help') }}</div>
            </div>
            
            <div class="form-group">
                <label for="avatar_url">{{ t('profile.avatar_url') }}</label>
                <div class="flex gap-2 items-center">
                    <input type="text" id="avatar_url" name="avatar_url" 
                           value="{{ current_user.avatar_url or '' }}" 
                           placeholder="{{ t('profile.avatar_placeholder') }}" class="flex-1" readonly>
                    <button type="button" class="btn-pick-image" onclick="pickProfileImage()">📷 {{ t('common.choose') }}</button>
                </div>
                {% if current_user.avatar_url %}
                <div class="profile-avatar-wrap" id="avatarWrap">
                    <img src="{{ current_user.avatar_url }}" alt="Avatar" class="profile-avatar-preview" id="avatarPreview">
                    <button type="button" class="profile-avatar-remove" onclick="clearAvatar()" title="{{ t('common.remove') }}">✕</button>
                </div>
                {% endif %}
                <div class="help-text">{{ t('profile.avatar_help') }}</div>
            </div>
        </div>

        <!-- Author Links (AEO) -->
        <div class="settings-section">
            <h3>🔗 {{ t('profile.author_links') }}</h3>
            <div class="help-text section-subtitle">{{ t('profile.author_links_help') }}</div>
            
            <div class="form-group">
                <label for="linkedin_url">{{ t('profile.linkedin_url') }}</label>
                <input type="url" id="linkedin_url" name="linkedin_url" 
                       value="{{ current_user.linkedin_url or '' }}" 
                       placeholder="https://linkedin.com/in/yourprofile">
            </div>
            
            <div class="form-group">
                <label for="website_url">{{ t('profile.website_url') }}</label>
                <input type="url" id="website_url" name="website_url" 
                       value="{{ current_user.website_url or '' }}" 
                       placeholder="https://yoursite.com">
            </div>
            
            <div class="form-group">
                <label for="github_url">{{ t('profile.github_url') }}</label>
                <input type="url" id="github_url" name="github_url" 
                       value="{{ current_user.github_url or '' }}" 
                       placeholder="https://github.com/yourprofile">
            </div>
        </div>

        <!-- Account Settings -->
        <div class="settings-section">
            <h3>🔒 {{ t('profile.account_settings') }}</h3>
            
            <div class="form-group">
                <label>{{ t('profile.username') }}</label>
                <input type="text" value="{{ current_user.username }}" disabled>
                <div class="help-text">{{ t('profile.username_unchangeable') }}</div>
            </div>
            
            <div class="form-group">
                <label for="email">{{ t('profile.email') }}</label>
                <input type="email" id="email" name="email" value="{{ current_user.email }}">
            </div>
            
            <div class="form-group">
                <label for="admin_language">🌍 {{ t('profile.admin_language') }}</label>
                <select id="admin_language" name="admin_language">
                    {% for lang in available_languages %}
                    <option value="{{ lang.code }}" {% if current_user.admin_language == lang.code %}selected{% endif %}>{{ lang.name }}</option>
                    {% endfor %}
                </select>
                <div class="help-text">{{ t('profile.admin_language_help') }}</div>
            </div>
            
            <div class="form-group">
                <label for="admin_theme">🎨 {{ t('profile.admin_theme') }}</label>
                <select id="admin_theme" name="admin_theme">
                    <option value="light" {% if current_user.admin_theme == 'light' %}selected{% endif %}>☀️ {{ t('profile.theme_light') }}</option>
                    <option value="dark" {% if current_user.admin_theme == 'dark' %}selected{% endif %}>🌙 {{ t('profile.theme_dark') }}</option>
                    <option value="system" {% if (current_user.admin_theme or 'system') == 'system' %}selected{% endif %}>💻 {{ t('profile.theme_system') }}</option>
                </select>
                <div class="help-text">{{ t('profile.admin_theme_help') }}</div>
            </div>
            
            <div class="form-group">
                <label for="current_password">🔑 {{ t('profile.current_password') }}</label>
                <input type="password" id="current_password" name="current_password" placeholder="{{ t('profile.current_password_placeholder') }}" autocomplete="current-password">
                <div class="help-text">{{ t('profile.current_password_help') }}</div>
            </div>
            
            <div class="form-group">
                <label for="new_password">{{ t('profile.new_password') }}</label>
                <input type="password" id="new_password" name="new_password" placeholder="{{ t('profile.new_password_placeholder') }}" autocomplete="new-password">
            </div>
            
            <div class="form-group">
                <label for="confirm_password">{{ t('profile.confirm_password') }}</label>
                <input type="password" id="confirm_password" name="confirm_password" placeholder="{{ t('profile.confirm_password_placeholder') }}" autocomplete="new-password">
                <div class="help-text">{{ t('profile.password_help') }}</div>
            </div>
        </div>

</form>

<script>
function clearAvatar() {
    document.getElementById('avatar_url').value = '';
    var wrap = document.getElementById('avatarWrap');
    if (wrap) wrap.remove();
}

function pickProfileImage() {
    if (typeof openImagePicker === 'function') {
        openImagePicker(function(url) {
            document.getElementById('avatar_url').value = url;
            // Update or create preview
            var wrap = document.getElementById('avatarWrap');
            if (wrap) {
                wrap.querySelector('img').src = url;
            } else {
                var container = document.getElementById('avatar_url').closest('.form-group');
                var helpText = container.querySelector('.help-text');
                wrap = document.createElement('div');
                wrap.className = 'profile-avatar-wrap';
                wrap.id = 'avatarWrap';
                wrap.innerHTML = '<img src="' + url + '" alt="Avatar" class="profile-avatar-preview" id="avatarPreview">' +
                    '<button type="button" class="profile-avatar-remove" onclick="clearAvatar()" title="{{ t("common.remove") }}">✕</button>';
                container.insertBefore(wrap, helpText);
            }
        });
    } else {
        fetch('/admin/media/api/list').then(function(r){return r.json();}).then(function(imgs){
            var modal = document.createElement('div');
            modal.className = 'image-picker-overlay';
            var mc = document.createElement('div');
            mc.className = 'image-picker-modal';
            var html = '<div class="image-picker-header"><h2>{{ t("profile.select_avatar") }}</h2><button class="image-picker-close" onclick="this.closest(\'.image-picker-overlay\').remove()">&times;</button></div>';
            if (imgs.length === 0) {
                html += '<div class="image-picker-empty">';
                html += '<div class="empty-state-icon">🖼️</div>';
                html += '<p>{{ t("media.no_images") }}</p>';
                html += '<a href="/admin/media/upload" class="btn btn-primary mt-3">{{ t("media.upload_first") }}</a>';
                html += '</div>';
            } else {
                html += '<div class="image-picker-grid">';
                imgs.forEach(function(i){
                    html += '<div class="image-picker-item" onclick="document.getElementById(\'avatar_url\').value=\'' + i.url + '\';this.closest(\'.image-picker-overlay\').remove();"><img src="' + i.url + '"></div>';
                });
                html += '</div>';
            }
            mc.innerHTML = html;
            modal.appendChild(mc);
            modal.addEventListener('click', function(e){ if(e.target===modal) modal.remove(); });
            document.body.appendChild(modal);
        });
    }
}
</script>
{% endblock %}