{% extends "layout.html" %}
{% block title %}{{ _('User Profile') }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-4 mb-4">
        <div class="card shadow-none border">
            <div class="card-body text-center">
                {% if user.avatar_url %}
                <img src="{{ user.avatar_url }}" alt="Avatar" class="rounded-circle shadow-sm mb-3" style="width: 120px; height: 120px; object-fit: cover;">
                {% else %}
                <div class="rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center shadow-sm mb-3 mx-auto" style="width: 120px; height: 120px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); font-size: 3rem;">
                    <i class="fas fa-user"></i>
                </div>
                {% endif %}
                <h4 class="fw-bold">{{ user.nickname or user.username }}</h4>
                <p class="text-muted small">@{{ user.username }}</p>
            </div>
        </div>
        
        <div class="card shadow-none border mt-4">
            <div class="card-header bg-white fw-bold">{{ _('Two-Factor Auth (TOTP)') }}</div>
            <div class="card-body text-center">
                {% if user.totp_enabled %}
                <div class="text-success mb-3"><i class="fas fa-check-circle fa-3x"></i></div>
                <p class="text-muted small">{{ _('TOTP is currently enabled for your account.') }}</p>
                <form method="post" action="{{ url_for('update_profile') }}">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="totp_action" value="disable">
                    <button type="submit" class="btn btn-outline-danger w-100" onclick="return confirm('{{ _('Are you sure you want to disable TOTP?') }}');">{{ _('Disable TOTP') }}</button>
                </form>
                {% else %}
                <p class="text-muted small">{{ _('Enhance your account security by enabling Two-Factor Authentication.') }}</p>
                <button class="btn btn-primary w-100" data-bs-toggle="modal" data-bs-target="#totpModal">{{ _('Enable TOTP') }}</button>
                {% endif %}
            </div>
        </div>
    </div>
    
    <div class="col-md-8">
        <div class="card shadow-none border">
            <div class="card-header bg-white fw-bold">{{ _('Profile Settings') }}</div>
            <div class="card-body">
                <!-- General Information Form -->
                <form method="post" action="{{ url_for('update_profile') }}" class="mb-5">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="form_action" value="general">
                    
                    <h6 class="fw-bold mb-3 border-bottom pb-2">{{ _('General Information') }}</h6>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label small text-muted">{{ _('Username') }}</label>
                            <input type="text" class="form-control bg-light" value="{{ user.username }}" disabled>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label small text-muted">{{ _('Nickname') }}</label>
                            <input type="text" name="nickname" class="form-control" value="{{ user.nickname or '' }}">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small text-muted">{{ _('Email Address') }}</label>
                        <input type="email" name="email" class="form-control" value="{{ user.email or '' }}" placeholder="you@example.com">
                    </div>
                    
                    <h6 class="fw-bold mb-3 border-bottom pb-2">{{ _('Preferences') }}</h6>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label small text-muted">{{ _('Language') }}</label>
                            <select name="language" class="form-select">
                                <option value="en" {% if user.language == 'en' %}selected{% endif %}>English</option>
                                <option value="it" {% if user.language == 'it' %}selected{% endif %}>Italiano</option>
                                <option value="fr" {% if user.language == 'fr' %}selected{% endif %}>Français</option>
                                <option value="es" {% if user.language == 'es' %}selected{% endif %}>Español</option>
                                <option value="de" {% if user.language == 'de' %}selected{% endif %}>Deutsch</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label small text-muted">{{ _('Timezone') }}</label>
                            <select name="timezone" class="form-select">
                                <option value="UTC" {% if user.timezone == 'UTC' %}selected{% endif %}>UTC</option>
                                <option value="Europe/Rome" {% if user.timezone == 'Europe/Rome' %}selected{% endif %}>Europe/Rome</option>
                                <option value="Europe/London" {% if user.timezone == 'Europe/London' %}selected{% endif %}>Europe/London</option>
                                <option value="Europe/Paris" {% if user.timezone == 'Europe/Paris' %}selected{% endif %}>Europe/Paris</option>
                                <option value="Europe/Berlin" {% if user.timezone == 'Europe/Berlin' %}selected{% endif %}>Europe/Berlin</option>
                                <option value="Europe/Madrid" {% if user.timezone == 'Europe/Madrid' %}selected{% endif %}>Europe/Madrid</option>
                                <option value="America/New_York" {% if user.timezone == 'America/New_York' %}selected{% endif %}>America/New_York</option>
                                <option value="America/Los_Angeles" {% if user.timezone == 'America/Los_Angeles' %}selected{% endif %}>America/Los_Angeles</option>
                                <option value="Asia/Tokyo" {% if user.timezone == 'Asia/Tokyo' %}selected{% endif %}>Asia/Tokyo</option>
                            </select>
                        </div>
                    </div>
                    
                    <h6 class="fw-bold mb-3 border-bottom pb-2 mt-2">{{ _('Notifications') }}</h6>
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" name="notify_on_login" id="notify_on_login" {% if user.notify_on_login %}checked{% endif %}>
                        <label class="form-check-label small" for="notify_on_login">{{ _('Send email on successful login') }}</label>
                    </div>
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" name="notify_on_failed_login" id="notify_on_failed_login" {% if user.notify_on_failed_login %}checked{% endif %}>
                        <label class="form-check-label small" for="notify_on_failed_login">{{ _('Send email on failed login attempts') }}</label>
                    </div>
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" name="notify_update_available" id="notify_update_available" {% if user.notify_update_available %}checked{% endif %}>
                        <label class="form-check-label small" for="notify_update_available">{{ _('Send alert/email when an update is available') }}</label>
                    </div>
                    <div class="form-check form-switch mb-4">
                        <input class="form-check-input" type="checkbox" name="notify_update_installed" id="notify_update_installed" {% if user.notify_update_installed %}checked{% endif %}>
                        <label class="form-check-label small" for="notify_update_installed">{{ _('Send alert/email when an update is successfully installed') }}</label>
                    </div>
                    
                    <div class="text-end">
                        <button type="submit" class="btn btn-primary fw-bold px-4">{{ _('Save General Settings') }}</button>
                    </div>
                </form>

                <!-- Avatar Form -->
                <form method="post" action="{{ url_for('update_profile') }}" enctype="multipart/form-data" class="mb-5">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="form_action" value="avatar">
                    <h6 class="fw-bold mb-3 border-bottom pb-2">{{ _('Profile Avatar') }}</h6>
                    <div class="row align-items-end mb-4">
                        <div class="col-md-9 mb-2">
                            <label class="form-label small text-muted">{{ _('Upload Avatar (Max 1MB)') }}</label>
                            <input type="file" name="avatar_file" class="form-control" accept="image/*" onchange="validateFileSize(this, 1024)">
                        </div>
                        <div class="col-md-3 mb-2 d-grid gap-2 d-md-flex justify-content-md-end">
                            <button type="submit" class="btn btn-primary fw-bold">{{ _('Update Avatar') }}</button>
                            <button type="submit" name="remove_avatar" value="1" class="btn btn-outline-danger" title="{{ _('Remove Avatar') }}" {% if not user.avatar_url %}disabled{% endif %}><i class="fas fa-trash"></i></button>
                        </div>
                    </div>
                </form>

                <!-- Password Form -->
                <form method="post" action="{{ url_for('update_profile') }}">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="form_action" value="password">
                    <h6 class="fw-bold mb-3 border-bottom pb-2">{{ _('Change Password') }}</h6>
                    <div class="mb-3">
                        <label class="form-label small text-muted">{{ _('Current Password') }}</label>
                        <input type="password" name="current_password" class="form-control" required>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label small text-muted">{{ _('New Password') }}</label>
                            <input type="password" name="new_password" class="form-control" required>
                        </div>
                        <div class="col-md-6 mb-4">
                            <label class="form-label small text-muted">{{ _('Confirm New Password') }}</label>
                            <input type="password" name="confirm_password" class="form-control" required>
                        </div>
                    </div>
                    
                    <div class="text-end">
                        <button type="submit" class="btn btn-warning fw-bold px-4">{{ _('Change Password') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- TOTP Modal -->
<div class="modal fade" id="totpModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form method="post" action="{{ url_for('update_profile') }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <input type="hidden" name="totp_action" value="enable">
            <input type="hidden" name="totp_secret" value="{{ totp_secret }}">
            
            <div class="modal-content">
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold">{{ _('Setup Two-Factor Auth') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <p class="small text-muted mb-4">{{ _('Scan this QR code with an authenticator app (e.g. Google Authenticator, Authy).') }}</p>
                    
                    {% if totp_uri %}
                    <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data={{ totp_uri|urlencode }}" alt="QR Code" class="img-thumbnail mb-4">
                    {% else %}
                    <p class="text-danger small">{{ _('TOTP generation failed.') }}</p>
                    {% endif %}
                    
                    <div class="mb-3 text-start">
                        <label class="small fw-bold">{{ _('Manual Secret Key') }}</label>
                        <input type="text" class="form-control text-center font-monospace bg-light" value="{{ totp_secret or '' }}" readonly>
                    </div>
                    
                    <div class="mb-3 text-start">
                        <label class="small fw-bold">{{ _('Verification Code') }}</label>
                        <input type="text" name="totp_code" class="form-control text-center font-monospace" placeholder="123456" required autocomplete="off">
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light shadow-sm border" data-bs-dismiss="modal">{{ _('Cancel') }}</button>
                    <button type="submit" class="btn btn-primary fw-bold shadow-sm">{{ _('Verify & Enable') }}</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
function validateFileSize(input, maxKB) {
    if (input.files && input.files[0]) {
        var sizeKB = input.files[0].size / 1024;
        if (sizeKB > maxKB) {
            alert("{{ _('The file is too large. The maximum size is') }} " + maxKB + "KB.");
            input.value = "";
        }
    }
}
</script>
{% endblock %}