{% extends "base.html" %}

{% block title %}Profil Saya | D'Tector.AI{% endblock %}

{% block extra_css %}
<style>
    .profile-container {
        min-height: 100vh;
        background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
        padding: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .profile-card {
        max-width: 600px;
        width: 100%;
        background: #1e293b;
        border-radius: 2rem;
        border: 1px solid #334155;
        overflow: hidden;
    }
    .profile-header {
        background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        padding: 2rem;
        text-align: center;
    }
    .profile-avatar {
        width: 100px;
        height: 100px;
        background: #0f172a;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        border: 4px solid white;
        font-size: 2.5rem;
        font-weight: bold;
        color: #3b82f6;
    }
    .profile-name { font-size: 1.5rem; font-weight: 700; color: white; }
    .profile-email { color: #cbd5e1; font-size: 0.875rem; }
    .profile-body { padding: 2rem; }
    .info-row { display: flex; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid #334155; }
    .info-label { color: #94a3b8; font-weight: 500; }
    .info-value { color: #e2e8f0; font-weight: 500; cursor: pointer; }
    .info-value:hover { color: #3b82f6; }
    .btn-back { display: inline-flex; align-items: center; gap: 0.5rem; background: #334155; color: white; padding: 0.75rem 1.5rem; border-radius: 0.75rem; text-decoration: none; }
    .btn-back-primary { background: #3b82f6; }
</style>
{% endblock %}

{% block content %}
<div class="profile-container">
    <div class="profile-card">
        <div class="profile-header">
            <div class="profile-avatar"><span id="avatarInitial">U</span></div>
            <h2 class="profile-name" id="fullNameDisplay">Memuat...</h2>
            <p class="profile-email" id="emailDisplay">memuat...</p>
        </div>

        <div class="profile-body">
            <div class="info-row"><span class="info-label"><i class="fas fa-user"></i> Username</span><span class="info-value" id="usernameDisplay">-</span></div>
            <div class="info-row"><span class="info-label"><i class="fas fa-envelope"></i> Email</span><span class="info-value" id="emailValue" onclick="editField('email')">-</span></div>
            <div class="info-row"><span class="info-label"><i class="fas fa-calendar"></i> Bergabung sejak</span><span class="info-value" id="joinedDate">-</span></div>
            <div class="info-row"><span class="info-label"><i class="fas fa-chart-line"></i> Total Deteksi</span><span class="info-value" id="totalDetections">0</span></div>

            <div style="display: flex; gap: 1rem; margin-top: 2rem;">
                <a href="/change-password" class="btn-back btn-back-primary"><i class="fas fa-key"></i> Ubah Password</a>
                <a href="/dashboard" class="btn-back"><i class="fas fa-arrow-left"></i> Kembali</a>
            </div>
        </div>
    </div>
</div>

<script>
    let currentUser = null;

    async function loadProfile() {
        const response = await fetch('/api/auth/me');
        if (response.status === 401) { window.location.href = '/login'; return; }
        const user = await response.json();
        if (!user.error) {
            currentUser = user;
            document.getElementById('avatarInitial').textContent = (user.full_name || user.username).charAt(0).toUpperCase();
            document.getElementById('fullNameDisplay').textContent = user.full_name || user.username;
            document.getElementById('emailDisplay').textContent = user.email;
            document.getElementById('usernameDisplay').textContent = user.username;
            document.getElementById('emailValue').textContent = user.email;
        }
    }

    async function editField(field) {
        const newValue = prompt('Masukkan nama lengkap baru:', currentUser?.full_name || '');
        if (newValue && newValue !== currentUser?.full_name) {
            const response = await fetch('/api/auth/update-profile', {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ full_name: newValue })
            });
            const result = await response.json();
            if (result.success) {
                alert('Profil berhasil diperbarui!');
                loadProfile();
            } else {
                alert('Gagal memperbarui profil');
            }
        }
    }

    async function loadStats() {
        const response = await fetch('/api/stats');
        const stats = await response.json();
        document.getElementById('totalDetections').textContent = stats.total || 0;
    }

    document.addEventListener('DOMContentLoaded', () => {
        loadProfile();
        loadStats();
    });
</script>
{% endblock %}