@extends('layouts.public')

@section('meta_title', $user->name . ' - Kullanıcı Profili')

@section('content')
<style>
/* ── Profile Container ──────────────────────────────── */
.profile-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.profile-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    margin-bottom: 32px;
}

/* ── Sidebar ────────────────────────────────────────── */
.profile-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.profile-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* ── Badges Grid ────────────────────────────────────── */
.badges-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

.badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    text-align: center;
    transition: all 0.2s;
    cursor: pointer;
}

.badge-item:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transform: translateY(-2px);
}

.badge-item.badge-rare {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-color: #fcd34d;
}

.badge-item.badge-rare:hover {
    box-shadow: 0 4px 12px rgba(252, 211, 77, 0.3);
}

.badge-icon {
    font-size: 24px;
    display: block;
}

.badge-name {
    font-size: 11px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.2;
}

/* ── Activity List ──────────────────────────────────── */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s;
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-item:hover {
    background: #f8fafc;
}

.activity-icon {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.activity-content {
    flex: 1;
    min-width: 0;
}

.activity-title {
    display: block;
    color: #2563eb;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-title:hover {
    text-decoration: underline;
}

.activity-time {
    font-size: 12px;
    color: #94a3b8;
}

.avatar-section {
    text-align: center;
}

.avatar-display {
    width: 140px;
    height: 140px;
    margin: 0 auto 16px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 48px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    border: 3px solid white;
}

.avatar-display img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-name {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
}

.user-bio {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 16px;
}

.user-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
}

.stat-item {
    text-align: center;
}

.stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

.stat-label {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 4px;
}

.profile-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f1f5f9;
}

.profile-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 13px;
}

.info-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-label {
    color: #64748b;
    font-weight: 600;
}

.info-value {
    color: #1e293b;
}

.role-badge {
    display: inline-block;
    padding: 4px 10px;
    background: #dbeafe;
    color: #1d4ed8;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.role-badge.admin {
    background: #fef3c7;
    color: #92400e;
}

.role-badge.moderator {
    background: #dcfce7;
    color: #166534;
}

/* ── Main Content ───────────────────────────────────── */
.profile-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.profile-content-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.card-header {
    padding: 20px 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
}

.card-header h2 {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.card-body {
    padding: 24px;
}

.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.25);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(29, 78, 216, 0.35);
}

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 768px) {
    .profile-grid {
        grid-template-columns: 1fr;
    }

    .user-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #94a3b8;
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.empty-state-text {
    font-size: 14px;
}
</style>

<div class="profile-wrapper">
    <div class="profile-grid">
        {{-- Sidebar --}}
        <aside class="profile-sidebar">
            {{-- Avatar Card --}}
            <div class="profile-card">
                <div class="avatar-section">
                    <div class="avatar-display">
                        @if($user->avatar)
                            <img src="{{ $user->avatar_url }}" alt="{{ $user->name }}">
                        @else
                            {{ substr($user->name, 0, 1) }}
                        @endif
                    </div>
                    <div class="user-name">{{ $user->name }}</div>
                    @if($user->bio)
                        <div class="user-bio">{{ Str::limit($user->bio, 100) }}</div>
                    @endif
                </div>
            </div>

            {{-- Stats Card --}}
            <div class="profile-card">
                <div class="profile-card-title">📊 İstatistikler</div>
                <div class="user-stats">
                    <div class="stat-item">
                        <div class="stat-value">{{ $stats['forum_topics'] }}</div>
                        <div class="stat-label">Konu</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">{{ $stats['forum_posts'] }}</div>
                        <div class="stat-label">Mesaj</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">{{ $stats['forum_likes_received'] }}</div>
                        <div class="stat-label">Beğeni</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">{{ $stats['blog_comments'] }}</div>
                        <div class="stat-label">Yorum</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">{{ $stats['interview_attempts'] }}</div>
                        <div class="stat-label">Sınav</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">{{ $user->points ?? 0 }}</div>
                        <div class="stat-label">Puan</div>
                    </div>
                </div>
            </div>

            {{-- Info Card --}}
            <div class="profile-card">
                <div class="profile-card-title">ℹ️ Bilgi</div>
                <div class="profile-info">
                    <div class="info-row">
                        <span class="info-label">Rol:</span>
                        <span class="role-badge {{ $user->role }}">
                            {{ $user->role === 'admin' ? 'Yönetici' : ($user->role === 'moderator' ? 'Moderatör' : 'Üye') }}
                        </span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Katılış:</span>
                        <span class="info-value">{{ $user->created_at->translatedFormat('d M Y') }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">E-posta:</span>
                        <span class="info-value">
                            @if($user->hasVerifiedEmail())
                                <span style="color: #059669;">✓</span> Doğrulanmış
                            @else
                                <span style="color: #dc2626;">!</span> Doğrulanmamış
                            @endif
                        </span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Süre:</span>
                        <span class="info-value">{{ $user->created_at->diffForHumans() }}</span>
                    </div>
                </div>
            </div>

            {{-- Badges Card --}}
            @if(count($badges) > 0)
            <div class="profile-card">
                <div class="profile-card-title">🏆 Rozetler</div>
                <div class="badges-grid">
                    @foreach($badges as $badge)
                    <div class="badge-item {{ !empty($badge['rare']) ? 'badge-rare' : '' }}" title="{{ $badge['description'] }}">
                        <span class="badge-icon">{{ $badge['icon'] }}</span>
                        <span class="badge-name">{{ $badge['name'] }}</span>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif
        </aside>

        {{-- Main Content --}}
        <main class="profile-main">
            {{-- Action Card --}}
            @if($isOwnProfile)
            <div class="profile-content-card">
                <div class="card-header">
                    <h2>⚙️ Profil Ayarları</h2>
                </div>
                <div class="card-body">
                    <p style="color: #64748b; margin-bottom: 16px;">
                        Kendi profilinizi görüntülüyorsunuz. Profil bilgilerinizi düzenlemek için aşağıdaki butona tıklayın.
                    </p>
                    <a href="{{ route('profile.edit') }}" class="btn btn-primary">
                        ✏️ Profili Düzenle
                    </a>
                </div>
            </div>
            @endif

            {{-- Recent Activity --}}
            <div class="profile-content-card">
                <div class="card-header">
                    <h2>📜 Son Aktiviteler</h2>
                </div>
                @if($recentActivity->count() > 0)
                    <div class="activity-list">
                        @foreach($recentActivity as $activity)
                        <div class="activity-item">
                            <span class="activity-icon">{{ $activity['icon'] }}</span>
                            <div class="activity-content">
                                <a href="{{ $activity['url'] }}" class="activity-title">{{ $activity['title'] }}</a>
                                <div class="activity-time">{{ $activity['created_at']->diffForHumans() }}</div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                @else
                    <div class="empty-state">
                        <div class="empty-state-icon">📭</div>
                        <div class="empty-state-text">
                            Henüz herhangi bir aktivite yok.
                        </div>
                    </div>
                @endif
            </div>
        </main>
    </div>
</div>

@endsection
