@extends('layouts.app')
@section('title', $user->name . ' — Profil')
@section('page-title', '👤 Profil')

@section('content')

        {{-- Hero Profil --}}
        <div class="profile-header-card">
            <!-- Avatar / Inisial Nama -->
            <div class="profile-avatar-wrapper">
                <div class="profile-avatar">
                    {{ strtoupper(substr($user->name, 0, 1)) }}
                </div>
            </div>

            <!-- Informasi Profil -->
            <div class="profile-info-details">
                <div class="profile-name-row">
                    <h2 class="profile-display-name">{{ $user->name }}</h2>
                    <!-- Class badge disesuaikan secara dinamis mengikuti role user -->
                    <span class="profile-badge-role badge-role-{{ $user->role }}">{{ $user->role }}</span>
                </div>
                
                <div class="profile-meta-row">
                    <div class="meta-item">
                        <i class="meta-icon">📧</i>
                        <span class="meta-text">{{ $user->email }}</span>
                    </div>
                    
                    @if($user->nim)
                    <div class="meta-item">
                        <i class="meta-icon">🪪</i>
                        <span class="meta-text">{{ $user->nim }}</span>
                    </div>
                    @endif
                    
                    <div class="meta-item">
                        <i class="meta-icon">📅</i>
                        <span class="meta-text">Bergabung {{ $user->created_at->format('M Y') }}</span>
                    </div>
                </div>

                {{-- Kolom Bio --}}
                @if($user->bio)
                <p class="profile-bio-text">{{ $user->bio }}</p>
                @endif
            </div>
        </div>

        {{-- Stats row --}}
        <div class="profile-stats">
            <div class="profile-stat">
                <div class="profile-stat-val">{{ number_format($user->total_points) }}</div>
                <div class="profile-stat-lbl">Total Poin</div>
            </div>
            <div class="profile-stat">
                <div class="profile-stat-val">{{ $user->posts->count() }}</div>
                <div class="profile-stat-lbl">Diskusi</div>
            </div>
            <div class="profile-stat">
                <div class="profile-stat-val" style="color:var(--success)">{{ $verifiedAnswersCount }}</div>
                <div class="profile-stat-lbl">Verified Jawaban</div>
            </div>
            <div class="profile-stat">
                <div class="profile-stat-val">{{ $user->uploads->count() }}</div>
                <div class="profile-stat-lbl">Materi Upload</div>
            </div>
            <div class="profile-stat">
                <div class="profile-stat-val">{{ $user->badges->count() }}</div>
                <div class="profile-stat-lbl">Badge</div>
            </div>
        </div>
    </div>

    {{-- Edit profil (hanya diri sendiri) --}}
    @if(auth()->id() === $user->id)
    <div style="flex-shrink:0">
        {{-- Tombol edit bisa diarahkan ke halaman edit jika sudah ada --}}
        <span style="font-size:.72rem;color:var(--text-muted);font-family:var(--font-mono)">// profil kamu</span>
    </div>
    @endif
</div>

<div style="display:grid;grid-template-columns:1fr 280px;gap:16px;align-items:flex-start">

    {{-- Kolom kiri: Diskusi & Materi terbaru --}}
    <div style="display:flex;flex-direction:column;gap:16px">

        {{-- Diskusi Terbaru --}}
        <div class="dashboard-card">
            <div class="card-header">
                <h3>💬 Diskusi Terbaru</h3>
                <a href="{{ route('forum.index') }}" class="btn btn-ghost btn-sm">Lihat Forum</a>
            </div>
            @forelse($user->posts as $post)
            <a href="{{ route('forum.show',$post) }}" class="post-list-item">
                <div class="post-meta-left">
                    @if($post->is_solved)
                    <span class="badge-solved">✅</span>
                    @else
                    <span class="badge-unsolved">❓</span>
                    @endif
                    <div>
                        <div class="post-title">{{ $post->title }}</div>
                        <div class="post-meta-text">
                            {{ $post->course->name }} · {{ $post->created_at->diffForHumans() }}
                        </div>
                    </div>
                </div>
                <span class="post-comments">{{ $post->comments_count ?? 0 }} 💬</span>
            </a>
            @empty
            <div class="empty-state">Belum ada diskusi yang dibuat.</div>
            @endforelse
        </div>

        {{-- Materi yang diupload (dosen/admin) --}}
        @if($user->isDosen() || $user->isAdmin())
        <div class="dashboard-card">
            <div class="card-header">
                <h3>📚 Materi Diupload</h3>
            </div>
            @forelse($user->uploads as $mat)
            <a href="{{ route('vault.show',$mat) }}" class="material-list-item">
                <span class="material-icon">{{ $mat->type_icon }}</span>
                <div>
                    <div class="material-title">{{ $mat->title }}</div>
                    <div class="material-meta">
                        {{ $mat->course->name ?? '-' }} · {{ $mat->file_size_formatted }} · ⬇ {{ $mat->download_count }}x
                    </div>
                </div>
            </a>
            @empty
            <div class="empty-state">Belum ada materi yang diunggah.</div>
            @endforelse
        </div>
        @endif

    </div>

    {{-- Kolom kanan: Badge --}}
    <div style="display:flex;flex-direction:column;gap:14px">

        <div class="dashboard-card">
            <div class="card-header">
                <h3>🎖️ Badge Diraih</h3>
                <span style="font-size:.72rem;color:var(--text-muted)">{{ $user->badges->count() }} badge</span>
            </div>

            @forelse($user->badges as $ub)
            <div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border)">
                <span style="font-size:1.4rem">{{ $ub->badge->icon }}</span>
                <div style="flex:1">
                    <div style="font-size:.82rem;font-weight:700">{{ $ub->badge->name }}</div>
                    <div style="font-size:.7rem;color:var(--text-muted)">{{ $ub->badge->description }}</div>
                </div>
                <div style="font-size:.65rem;color:var(--text-muted);font-family:var(--font-mono);white-space:nowrap">
                    {{ $ub->awarded_at?->format('d M Y') }}
                </div>
            </div>
            @empty
            <div class="empty-state" style="padding:16px">
                <div style="font-size:1.5rem;margin-bottom:6px">🌱</div>
                <p style="font-size:.78rem">Belum ada badge.</p>
                <a href="{{ route('gamification.index') }}" class="btn btn-outline btn-sm" style="margin-top:10px">
                    Lihat semua badge
                </a>
            </div>
            @endforelse
        </div>

        {{-- Check-in streak info --}}
        <div class="dashboard-card">
            <div class="card-header"><h3>🔥 Aktivitas</h3></div>
            <div style="padding:14px;display:flex;flex-direction:column;gap:8px">
                @php
                    $totalCheckins = $user->checkIns()->count();
                    $lastCheckIn   = $user->checkIns()->latest()->first();
                @endphp
                <div style="display:flex;justify-content:space-between;font-size:.82rem">
                    <span style="color:var(--text-muted)">Total check-in</span>
                    <span style="font-family:var(--font-mono);color:var(--accent);font-weight:700">{{ $totalCheckins }}x</span>
                </div>
                <div style="display:flex;justify-content:space-between;font-size:.82rem">
                    <span style="color:var(--text-muted)">Check-in terakhir</span>
                    <span style="font-size:.75rem;color:var(--text-secondary)">
                        {{ $lastCheckIn ? $lastCheckIn->created_at->diffForHumans() : '-' }}
                    </span>
                </div>
                <div style="display:flex;justify-content:space-between;font-size:.82rem">
                    <span style="color:var(--text-muted)">Total poin</span>
                    <span style="font-family:var(--font-mono);color:var(--accent);font-weight:700">
                        ⚡ {{ number_format($user->total_points) }}
                    </span>
                </div>
            </div>
        </div>

    </div>
</div>

@endsection