@extends('user.layout')

@section('title', 'Leadership Dashboard')

@push('head')
<style>
    :root {
        --rank-primary: #0a66ff;
        --rank-primary-light: #e8f0fe;
        --rank-primary-soft: #d4e2fc;
        --rank-bg: #f5f9ff;
        --rank-card-bg: #ffffff;
        --rank-text: #0b1a33;
        --rank-muted: #5a6d86;
        --rank-border: #e2ebf6;
        --rank-shadow: 0 4px 16px rgba(10, 102, 255, 0.06);
        --rank-shadow-hover: 0 8px 30px rgba(10, 102, 255, 0.12);
        --rank-radius: 18px;
        --rank-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .rank-dashboard {
        padding: 20px 14px 100px;
        background: var(--rank-bg);
        min-height: 100vh;
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
    }

    .rank-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    /* ===== Header Card ===== */
    .rank-header-card {
        background: linear-gradient(145deg, #ffffff 0%, #f0f7ff 100%);
        border: 1px solid var(--rank-border);
        border-radius: var(--rank-radius);
        padding: 24px 22px;
        margin-bottom: 28px;
        box-shadow: var(--rank-shadow);
        position: relative;
        overflow: hidden;
    }

    .rank-header-card::before {
        content: '';
        position: absolute;
        top: -40%;
        right: -10%;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        background: rgba(10, 102, 255, 0.04);
        pointer-events: none;
    }

    .rank-header-content {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        position: relative;
        z-index: 2;
    }

    .rank-user-info {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .rank-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 3px solid var(--rank-primary);
        object-fit: cover;
        background: var(--rank-primary-light);
        flex-shrink: 0;
    }

    .rank-user-name {
        font-size: 22px;
        font-weight: 800;
        margin: 0;
        color: var(--rank-text);
        letter-spacing: -0.3px;
    }

    .rank-user-sub {
        font-size: 13px;
        color: var(--rank-muted);
        margin: 4px 0 0;
    }

    .rank-user-sub strong {
        color: var(--rank-primary);
        font-weight: 700;
    }

    .rank-badge-large {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: var(--rank-primary);
        color: #fff;
        padding: 10px 22px 10px 18px;
        border-radius: 40px;
        font-size: 15px;
        font-weight: 700;
        box-shadow: 0 4px 12px rgba(10, 102, 255, 0.25);
        border: none;
    }

    .rank-badge-large .rank-icon {
        font-size: 22px;
    }

    /* ===== Stats Grid ===== */
    .rank-stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        margin-bottom: 28px;
    }

    .rank-stat-card {
        background: var(--rank-card-bg);
        border-radius: var(--rank-radius);
        padding: 18px 16px;
        border: 1px solid var(--rank-border);
        box-shadow: var(--rank-shadow);
        transition: transform var(--rank-transition), box-shadow var(--rank-transition);
    }

    .rank-stat-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--rank-shadow-hover);
    }

    .rank-stat-label {
        font-size: 11px;
        font-weight: 600;
        color: var(--rank-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 6px;
    }

    .rank-stat-value {
        font-size: 24px;
        font-weight: 800;
        color: var(--rank-text);
        line-height: 1.2;
    }

    .rank-stat-value .currency {
        font-size: 15px;
        opacity: 0.7;
        font-weight: 600;
    }

    /* ===== Progress Section ===== */
    .rank-progress-section {
        background: var(--rank-card-bg);
        border-radius: var(--rank-radius);
        padding: 22px 20px;
        margin-bottom: 28px;
        border: 1px solid var(--rank-border);
        box-shadow: var(--rank-shadow);
    }

    .rank-progress-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        flex-wrap: wrap;
        gap: 6px;
    }

    .rank-progress-title {
        font-size: 15px;
        font-weight: 700;
        color: var(--rank-text);
        margin: 0;
    }

    .rank-progress-percent {
        font-size: 16px;
        font-weight: 800;
        color: var(--rank-primary);
        background: var(--rank-primary-light);
        padding: 2px 12px;
        border-radius: 30px;
    }

    .rank-progress-bar {
        width: 100%;
        height: 8px;
        background: var(--rank-border);
        border-radius: 20px;
        overflow: hidden;
        margin: 4px 0 8px;
    }

    .rank-progress-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--rank-primary), #4a8aff);
        border-radius: 20px;
        transition: width 0.7s ease;
    }

    .rank-progress-detail {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
        color: var(--rank-muted);
        flex-wrap: wrap;
        gap: 4px;
    }

    .rank-progress-detail strong {
        color: var(--rank-text);
        font-weight: 700;
    }

    /* ===== Achievement Timeline ===== */
    .rank-timeline {
        background: var(--rank-card-bg);
        border-radius: var(--rank-radius);
        padding: 20px;
        border: 1px solid var(--rank-border);
        box-shadow: var(--rank-shadow);
        margin-bottom: 28px;
    }

    .rank-timeline-title {
        font-size: 17px;
        font-weight: 800;
        margin: 0 0 18px;
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--rank-text);
    }

    .rank-timeline-title .count-badge {
        font-size: 13px;
        font-weight: 400;
        color: var(--rank-muted);
        margin-left: auto;
    }

    .rank-timeline-item {
        display: flex;
        gap: 14px;
        padding: 14px 0;
        border-bottom: 1px solid var(--rank-border);
        align-items: flex-start;
    }

    .rank-timeline-item:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .rank-timeline-icon {
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: var(--rank-primary-light);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: var(--rank-primary);
    }

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

    .rank-timeline-name {
        font-weight: 700;
        font-size: 15px;
        margin: 0 0 3px;
        color: var(--rank-text);
    }

    .rank-timeline-name .badge {
        font-size: 10px;
        font-weight: 700;
        padding: 2px 10px;
        border-radius: 30px;
        margin-left: 6px;
        vertical-align: middle;
    }

    .badge-gifted {
        background: #fef3c7;
        color: #b45309;
    }

    .badge-refunded {
        background: #fee2e2;
        color: #b91c1c;
    }

    .rank-timeline-meta {
        font-size: 12px;
        color: var(--rank-muted);
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 3px;
    }

    .rank-timeline-meta .btn-outline-primary {
        font-size: 10px;
        padding: 3px 12px;
        border-radius: 30px;
        border: 1px solid var(--rank-primary);
        color: var(--rank-primary);
        background: transparent;
        text-decoration: none;
        font-weight: 600;
        transition: 0.2s;
    }

    .rank-timeline-meta .btn-outline-primary:hover {
        background: var(--rank-primary);
        color: #fff;
    }

    /* ===== Empty State ===== */
    .rank-empty {
        text-align: center;
        padding: 40px 20px;
        color: var(--rank-muted);
    }

    .rank-empty-icon {
        font-size: 48px;
        opacity: 0.3;
        margin-bottom: 12px;
    }

    /* ===== Max Rank Banner ===== */
    .rank-max-banner {
        background: linear-gradient(135deg, #fef3c7, #fde68a);
        border: 1px solid #f59e0b;
        border-radius: var(--rank-radius);
        padding: 18px 22px;
        margin-bottom: 28px;
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
    }

    .rank-max-banner .icon {
        font-size: 32px;
    }

    .rank-max-banner .title {
        font-weight: 800;
        font-size: 18px;
        color: #78350f;
        margin: 0;
    }

    .rank-max-banner .sub {
        font-size: 14px;
        color: #92400e;
        margin: 2px 0 0;
    }

    /* ===== Responsive ===== */
    @media (min-width: 576px) {
        .rank-stats-grid {
            grid-template-columns: repeat(4, 1fr);
        }
        .rank-dashboard {
            padding: 28px 18px 100px;
        }
    }

    @media (min-width: 768px) {
        .rank-header-card {
            padding: 28px 30px;
        }
        .rank-user-name {
            font-size: 26px;
        }
        .rank-avatar {
            width: 72px;
            height: 72px;
        }
    }

    @media (max-width: 400px) {
        .rank-header-content {
            flex-direction: column;
            align-items: flex-start;
        }
        .rank-badge-large {
            align-self: flex-start;
        }
    }
</style>
@endpush

@section('content')

<div class="rank-dashboard">
    <div class="rank-container">

        {{-- Header Card --}}
        <div class="rank-header-card">
            <div class="rank-header-content">
                <div class="rank-user-info">
                    @if($user->profile_photo)
                        <img src="{{ asset($user->profile_photo) }}" alt="{{ $user->name }}" class="rank-avatar">
                    @else
                        <div class="rank-avatar" style="display:flex;align-items:center;justify-content:center;background:var(--rank-primary-light);color:var(--rank-primary);font-weight:900;font-size:24px;">
                            {{ strtoupper(substr($user->name, 0, 1)) }}
                        </div>
                    @endif
                    <div>
                        <h1 class="rank-user-name">{{ $user->name }}</h1>
                        <p class="rank-user-sub">রেফারেল কোড: <strong>{{ $user->referral_code }}</strong></p>
                    </div>
                </div>
                <div class="rank-badge-large">
                    <span class="rank-icon">{{ config("ranks.levels.{$currentRankLevel}.icon", '🏆') }}</span>
                    <span>{{ $currentRankName }}</span>
                </div>
            </div>
        </div>

        {{-- Stats Grid --}}
        <div class="rank-stats-grid">
            <div class="rank-stat-card">
                <div class="rank-stat-label">বর্তমান র‍্যাঙ্ক</div>
                <div class="rank-stat-value">{{ $currentRankName }}</div>
            </div>
            <div class="rank-stat-card">
                <div class="rank-stat-label">ডাইরেক্ট রেফারেল</div>
                <div class="rank-stat-value">{{ number_format($countableDirect) }}</div>
            </div>
            <div class="rank-stat-card">
                <div class="rank-stat-label">মোট নেটওয়ার্ক</div>
                <div class="rank-stat-value">{{ number_format($user->total_network ?? 0) }}</div>
            </div>
            <div class="rank-stat-card">
                <div class="rank-stat-label">মোট অ্যাচিভমেন্ট</div>
                <div class="rank-stat-value">{{ number_format($user->rank_achievement_count ?? 0) }}</div>
            </div>
        </div>

        {{-- Next Rank Progress --}}
        @if($nextRankLevel)
            @php
                $nextRankConfig = config("ranks.levels.{$nextRankLevel}", []);
                $hasDirect = isset($nextRankConfig['target_direct']);
                $hasSub = isset($nextRankConfig['target_sub_count']);
            @endphp
            <div class="rank-progress-section">
                <div class="rank-progress-header">
                    <span class="rank-progress-title">
                        {{ $nextRankConfig['icon'] ?? '🚀' }} 
                        পরবর্তী: {{ $nextRankName }}
                    </span>
                    <span class="rank-progress-percent">{{ $progress }}%</span>
                </div>
                <div class="rank-progress-bar">
                    <div class="rank-progress-fill" style="width: {{ $progress }}%;"></div>
                </div>
                <div class="rank-progress-detail">
                    <span>টার্গেট পূরণের অগ্রগতি</span>
                    <span>
                        @if($hasDirect)
                            <strong>{{ $countableDirect }}</strong> / {{ $nextRankConfig['target_direct'] }}
                        @elseif($hasSub)
                            <strong>{{ $user->getCountableSubRankCount($nextRankConfig['target_sub_rank'] ?? 0) }}</strong> 
                            / {{ $nextRankConfig['target_sub_count'] }}
                        @endif
                    </span>
                </div>
            </div>
        @else
            <div class="rank-max-banner">
                <span class="icon">👑</span>
                <div>
                    <div class="title">আপনি সর্বোচ্চ র‍্যাঙ্কে পৌঁছেছেন!</div>
                    <div class="sub">আপনি গ্র্যান্ডমাস্টার লিডার, অভিনন্দন! 🎉</div>
                </div>
            </div>
        @endif

        {{-- Achievement Timeline --}}
        <div class="rank-timeline">
            <div class="rank-timeline-title">
                <span>📜 লিডারশিপ হিস্টোরি</span>
                <span class="count-badge">মোট: {{ $achievements->count() }}টি</span>
            </div>

            @if($achievements->count())
                @foreach($achievements as $ach)
                    <div class="rank-timeline-item">
                        <div class="rank-timeline-icon">
                            {{ config("ranks.levels.{$ach->rank_level}.icon", '🏆') }}
                        </div>
                        <div class="rank-timeline-content">
                            <div class="rank-timeline-name">
                                {{ $ach->rank_name }}
                                @if($ach->achievement_type === 'gifted')
                                    <span class="badge badge-gifted">উপহার</span>
                                @endif
                                @if($ach->is_refunded)
                                    <span class="badge badge-refunded">রিফান্ড</span>
                                @endif
                            </div>
                            <div class="rank-timeline-meta">
                                <span>📅 {{ $ach->claimed_at->format('d M Y, h:i A') }}</span>
                                @if($ach->bonus_amount > 0)
                                    <span>💰 ৳{{ number_format($ach->bonus_amount, 2) }}</span>
                                @endif
                                <span>👥 {{ number_format($ach->network_size) }} জন</span>
                                @if($ach->banner_image_url)
                                    <a href="{{ route('user.rank.achievement.show', $ach->id) }}" class="btn-outline-primary">
                                        ব্যানার দেখুন
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            @else
                <div class="rank-empty">
                    <div class="rank-empty-icon">🏁</div>
                    <p>আপনি এখনও কোনো লিডারশিপ অর্জন করেননি।</p>
                    <p style="font-size:13px;">আরো রেফারেল যোগ করে আপনার যাত্রা শুরু করুন!</p>
                </div>
            @endif
        </div>

    </div>
</div>

@endsection