<div class="dashboard-container">
    <div class="dashboard-header">
        <div class="header-greeting">
            <h1>Добро пожалувати назад, <span class="username"><?= htmlspecialchars($user['username']) ?></span>!</h1>
            <p class="header-subtitle">Ваш статус: Рівень <?= floor($user['reputation'] / 100) ?> • <?= $user['reputation'] ?> очків репутації</p>
        </div>
        <div class="header-actions">
            <a href="/post/create" class="btn btn-primary btn-lg">
                <i class="fas fa-plus"></i> Нова тема
            </a>
        </div>
    </div>

    <div class="dashboard-grid">
        <div class="dashboard-main">
            <div class="stats-row">
                <div class="stat-card">
                    <div class="stat-icon" style="background: linear-gradient(135deg, #6366f1, #8b5cf6);">
                        <i class="fas fa-file-alt"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-value"><?= $stats['posts'] ?></div>
                        <div class="stat-label">Мої теми</div>
                    </div>
                </div>

                <div class="stat-card">
                    <div class="stat-icon" style="background: linear-gradient(135deg, #10b981, #34d399);">
                        <i class="fas fa-star"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-value"><?= $stats['reputation'] ?></div>
                        <div class="stat-label">Репутація</div>
                    </div>
                </div>

                <div class="stat-card">
                    <div class="stat-icon" style="background: linear-gradient(135deg, #f59e0b, #fbbf24);">
                        <i class="fas fa-bell"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-value" id="notif-count"><?= $stats['unread_notifications'] ?></div>
                        <div class="stat-label">Сповіщення</div>
                    </div>
                </div>

                <div class="stat-card">
                    <div class="stat-icon" style="background: linear-gradient(135deg, #ef4444, #f87171);">
                        <i class="fas fa-fire"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-value" id="streak-days">0</div>
                        <div class="stat-label">Серія днів</div>
                    </div>
                </div>
            </div>

            <div class="cards-section">
                <div class="section-header">
                    <h2>Свіжі теми</h2>
                    <a href="/u/<?= htmlspecialchars($user['username']) ?>" class="link-more">Переглянути все →</a>
                </div>

                <div class="posts-list">
                    <?php if (!empty($posts)): ?>
                        <?php foreach ($posts as $post): ?>
                        <div class="post-card" data-post-id="<?= $post['id'] ?>">
                            <div class="post-card-header">
                                <h3><a href="/post/<?= htmlspecialchars($post['slug']) ?>"><?= htmlspecialchars($post['title']) ?></a></h3>
                                <div class="post-meta">
                                    <span class="post-date"><?= date('d M Y', strtotime($post['created_at'])) ?></span>
                                    <span class="post-category"><?= htmlspecialchars($post['category_name']) ?></span>
                                </div>
                            </div>
                            <div class="post-stats-inline">
                                <span class="stat-inline"><i class="fas fa-comment"></i> <?= $post['comment_count'] ?? 0 ?></span>
                                <span class="stat-inline"><i class="fas fa-eye"></i> <?= $post['view_count'] ?? 0 ?></span>
                                <span class="stat-inline" id="score-<?= $post['id'] ?>"><i class="fas fa-arrow-up"></i> <?= $post['score'] ?? 0 ?></span>
                            </div>
                        </div>
                        <?php endforeach; ?>
                    <?php else: ?>
                    <div class="empty-state">
                        <i class="fas fa-inbox"></i>
                        <p>Ви ще не створили жодної теми</p>
                        <a href="/post/create" class="btn btn-primary">Створити першу тему</a>
                    </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <div class="dashboard-sidebar">
            <div class="sidebar-card activity-card" data-draggable>
                <div class="card-header"><span class="drag-handle" style="cursor:move;">☰</span>
                    <h3><i class="fas fa-bell"></i> Сповіщення</h3>
                    <a href="/notifications" class="link-text">Всі →</a>
                </div>
                <div class="notifications-list">
                    <?php if (!empty($notifications)): ?>
                        <?php foreach (array_slice($notifications, 0, 5) as $notif): ?>
                        <div class="notification-item">
                            <div class="notif-icon">
                                <i class="fas fa-comment-dots"></i>
                            </div>
                            <div class="notif-content">
                                <p><?= htmlspecialchars($notif['type']) ?></p>
                                <small><?= date('d M H:i', strtotime($notif['created_at'])) ?></small>
                            </div>
                        </div>
                        <?php endforeach; ?>
                    <?php else: ?>
                    <div class="empty-state-small">
                        <i class="fas fa-inbox"></i>
                        <p>Немає сповіщень</p>
                    </div>
                    <?php endif; ?>
                </div>
            </div>

            <div class="sidebar-card profile-card">
                <div class="card-header">
                    <h3><i class="fas fa-user"></i> Профіль</h3>
                </div>
                <div class="profile-info">
                    <div class="profile-avatar">
                        <?php 
                            $avatar = \App\Helpers\Asset::avatar($user['avatar'], $user['username'], 80);
                        ?>
                        <img src="<?= htmlspecialchars($avatar) ?>" alt="<?= htmlspecialchars($user['username']) ?>">
                    </div>
                    <div class="profile-details">
                        <div class="profile-username"><?= htmlspecialchars($user['username']) ?></div>
                        <div class="profile-email"><?= htmlspecialchars($user['email']) ?></div>
                        <div class="profile-reputation">
                            <i class="fas fa-star" style="color: #f59e0b;"></i> 
                            <?= $user['reputation'] ?? 0 ?> репутації
                        </div>
                    </div>
                </div>
                <div class="profile-actions">
                    <a href="/profile/edit" class="btn btn-outline-primary btn-sm w-full">
                        <i class="fas fa-edit"></i> Редагувати
                    </a>
                    <a href="/u/<?= htmlspecialchars($user['username']) ?>" class="btn btn-outline-secondary btn-sm w-full">
                        <i class="fas fa-external-link-alt"></i> Переглянути
                    </a>
                </div>
            </div>

            <div class="sidebar-card quick-actions">
                <div class="card-header">
                    <h3><i class="fas fa-zap"></i> Швидкі дії</h3>
                </div>
                <div class="actions-grid">
                    <a href="/post/create" class="action-btn">
                        <i class="fas fa-plus-circle"></i>
                        <span>Нова тема</span>
                    </a>
                    <a href="/messages" class="action-btn">
                        <i class="fas fa-envelope"></i>
                        <span>Повідомлення</span>
                    </a>
                    <a href="/notifications" class="action-btn">
                        <i class="fas fa-bell"></i>
                        <span>Сповіщення</span>
                    </a>
                    <a href="/profile/edit" class="action-btn">
                        <i class="fas fa-sliders-h"></i>
                        <span>Налаштування</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.dashboard-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.1));
    border-radius: 1rem;
    border: 1px solid rgba(99,102,241,0.2);
}

.header-greeting h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.header-greeting .username {
    background: linear-gradient(135deg, #6366f1, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.header-subtitle {
    font-size: 0.95rem;
    color: var(--text-muted);
}

.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 2rem;
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(99,102,241,0.5);
    box-shadow: 0 10px 25px rgba(99,102,241,0.1);
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.cards-section {
    margin-bottom: 2rem;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.section-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
}

.link-more {
    color: #6366f1;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s;
}

.link-more:hover {
    color: #4f46e5;
    transform: translateX(2px);
}

.posts-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.post-card {
    padding: 1.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.post-card:hover {
    border-color: rgba(99,102,241,0.5);
    box-shadow: 0 8px 16px rgba(99,102,241,0.1);
}

.post-card-header h3 {
    margin-bottom: 0.75rem;
}

.post-card-header a {
    color: var(--text);
    text-decoration: none;
    transition: color 0.3s;
}

.post-card-header a:hover {
    color: #6366f1;
}

.post-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.post-date, .post-category {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.post-category {
    background: rgba(99,102,241,0.1);
    color: #6366f1;
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
}

.post-stats-inline {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.stat-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.stat-inline i {
    color: #6366f1;
}

.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-muted);
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state p {
    margin-bottom: 1.5rem;
}

.dashboard-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.sidebar-card {
    padding: 1.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1rem;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.card-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-header h3 i {
    color: #6366f1;
}

.link-text {
    color: #6366f1;
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.3s;
}

.link-text:hover {
    color: #4f46e5;
}

.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 300px;
    overflow-y: auto;
}

.notification-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(99,102,241,0.05);
    border-radius: 0.5rem;
    transition: all 0.3s;
}

.notification-item:hover {
    background: rgba(99,102,241,0.1);
}

.notif-icon {
    color: #6366f1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background: rgba(99,102,241,0.1);
    flex-shrink: 0;
}

.notif-content p {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.notif-content small {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.empty-state-small {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
}

.empty-state-small i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.profile-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5rem;
}

.profile-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 1rem;
    border: 3px solid rgba(99,102,241,0.3);
}

.profile-details {
    text-align: center;
}

.profile-username {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.profile-email {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.profile-reputation {
    font-size: 0.9rem;
    color: #f59e0b;
    font-weight: 600;
}

.profile-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.btn-outline-primary,
.btn-outline-secondary {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    border: 1px solid;
    background: transparent;
    cursor: pointer;
    border-radius: 0.5rem;
    transition: all 0.3s;
    text-decoration: none;
}

.btn-outline-primary {
    border-color: #6366f1;
    color: #6366f1;
}

.btn-outline-primary:hover {
    background: rgba(99,102,241,0.1);
}

.btn-outline-secondary {
    border-color: var(--border);
    color: var(--text);
}

.btn-outline-secondary:hover {
    background: rgba(99,102,241,0.05);
}

.w-full {
    width: 100%;
}

.btn-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.quick-actions {
    margin-top: auto;
}

.actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.action-btn {
    padding: 0.75rem;
    background: rgba(99,102,241,0.1);
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: 0.5rem;
    text-align: center;
    text-decoration: none;
    color: var(--text);
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
}

.action-btn:hover {
    background: rgba(99,102,241,0.2);
    border-color: rgba(99,102,241,0.5);
    transform: translateY(-2px);
}

.action-btn i {
    color: #6366f1;
    font-size: 1.2rem;
}

@media (max-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dashboard-header {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }
    
    .actions-grid {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .dashboard-container {
        padding: 1rem;
    }
    
    .stats-row {
        grid-template-columns: 1fr;
    }
    
    .header-greeting h1 {
        font-size: 1.5rem;
    }
    
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .actions-grid {
        grid-template-columns: 1fr 1fr;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    updateQuickStats();
    setInterval(updateQuickStats, 30000);
});

function updateQuickStats() {
    fetch('/api/quick-stats')
        .then(r => r.json())
        .then(data => {
            document.getElementById('notif-count').textContent = data.unread_notifications;
            document.getElementById('streak-days').textContent = Math.floor(data.reputation / 50);
        })
        .catch(err => console.log('Stats update failed:', err));
}
</script>
