@extends('layouts.app')

@section('title', 'Trang chủ')

@section('content')
<div class="max-w-[1280px] mx-auto w-full pb-10 px-2 lg:px-8">

    <div class="mb-6 pl-1">
        <h1 class="text-[28px] font-extrabold text-[#1a2b49] flex items-center gap-2 mb-1.5 tracking-tight">
            Hey {{ Auth::check() ? (Auth::user()->name ?? 'Minh Anh') : 'Minh Anh' }}! <span class="text-2xl animate-bounce">👋</span>
        </h1>
        <p class="text-gray-500 font-medium text-[14px]">Cảm ơn bạn đã góp phần tạo nên một tập thể tuyệt vời!</p>
    </div>

    <div class="mb-6">
        <x-hero-banner />
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <x-stat-card
            title="Thanks đã nhận"
            value="{{ $receivedCount }}"
            iconBgClass="bg-purple-50"
            iconColorClass="text-purple-500">
            <svg class="w-[26px] h-[26px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
            </svg>
        </x-stat-card>

        <x-stat-card
            title="Thanks đã gửi"
            value="{{ $sentCount }}"
            iconBgClass="bg-blue-50"
            iconColorClass="text-blue-500">
            <svg class="w-[26px] h-[26px] transform -rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
            </svg>
        </x-stat-card>


        @if(Auth::check() && Auth::user()->role == config('constants.ROLE_ADMIN'))
            <x-stat-card
                title="Thứ hạng"
                value="#{{ $currentRank > 0 ? $currentRank : '-' }}"
                iconBgClass="bg-green-50"
                iconColorClass="text-green-500">
                <svg class="w-[26px] h-[26px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                </svg>
            </x-stat-card>
        @else
            <x-stat-card
                title="Thứ hạng"
                value="Không có quyền xem"
                iconBgClass="bg-amber-50"
                iconColorClass="text-amber-500">
                <svg class="w-[26px] h-[26px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                </svg>
            </x-stat-card>
        @endif
    </div>

    <div class="flex flex-col gap-6 lg:flex-row lg:items-stretch lg:gap-8">

        <div class="flex-1 min-w-0 flex flex-col gap-6">

            <div class="bg-white rounded-[24px] shadow-[0_10px_30px_rgba(15,23,42,0.05)] p-6 flex flex-col">
                <div class="flex items-center justify-between mb-4 pl-1 pr-1">
                    <h3 class="text-[17px] font-extrabold text-[#1a2b49]">Thanks gần đây</h3>
                    <a href="{{ route('user.received') }}" class="text-[13px] font-bold text-[#3462f7] hover:text-blue-800">Xem tất cả</a>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 flex-1">
                    <x-thank-card
                        title="GREAT JOB!"
                        message="Cảm ơn bạn đã luôn nhiệt tình giúp đỡ và đồng hành cùng mọi người. Chúc bạn một ngày làm việc thật vui vẻ và tràn đầy năng lượng!"
                        :isLiked="false"
                        bgClass="bg-gradient-to-br from-[#FFFDF7] to-[#FFF5DD]"
                        titleColorClass="text-[#FFB800]"
                        textColorClass="text-[#4B5563]"
                    />

                    <x-thank-card
                        title="YOU ROCK!"
                        message="Sự cống hiến và tinh thần làm việc trách nhiệm của bạn luôn là nguồn cảm hứng lớn. Cảm ơn vì những nỗ lực không ngừng nghỉ của bạn!"
                        :isLiked="true"
                        bgClass="bg-gradient-to-br from-[#FCFAFF] to-[#F5F0FF]"
                        titleColorClass="text-[#8B5CF6]"
                        textColorClass="text-[#4B5563]"
                    />

                    <x-thank-card
                        title="THANK YOU!"
                        message="Rất vui và may mắn khi được làm việc cùng một người đồng nghiệp tuyệt vời. Cảm ơn bạn vì tất cả những đóng góp tích cực cho tập thể!"
                        :isLiked="false"
                        bgClass="bg-gradient-to-br from-[#FBFEFF] to-[#EDF8FF]"
                        titleColorClass="text-[#4DA6FF]"
                        textColorClass="text-[#4B5563]"
                    />
                </div>
            </div>

            <div class="w-full mt-4">
                <x-info-card />
            </div>
        </div>

        <div class="w-full lg:w-[32%] lg:min-w-[340px] lg:max-w-[400px] flex flex-col gap-6">

            <div class="bg-white rounded-[24px] shadow-[0_10px_30px_rgba(15,23,42,0.05)] p-6 flex flex-col h-full relative overflow-hidden">
                <div class="flex items-center justify-between mb-3 pl-1 pr-1">
                    <h3 class="text-[17px] font-extrabold text-[#1a2b49]">Bảng xếp hạng</h3>
                    @if(Auth::check() && Auth::user()->role == config('constants.ROLE_ADMIN'))
                        <a href="{{ route('user.ranking') }}" class="text-[13px] font-bold text-[#3462f7] hover:text-blue-800">Xem tất cả</a>
                    @endif
                </div>

                @if(Auth::check() && Auth::user()->role == config('constants.ROLE_ADMIN'))
                    <div class="inline-flex bg-[#F5F7FB] rounded-xl p-1 mb-4 w-fit space-x-2">
                        <button id="tab-received" onclick="switchRankingTab('received')" class="cursor-pointer flex items-center justify-center gap-2 w-[120px] py-2 rounded-[10px] transition-all bg-white shadow-[0_2px_4px_rgba(0,0,0,0.04)] text-[#3462f7] font-bold text-[14px]">
                            <svg class="w-[18px] h-[18px]" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M17.5 4h-11c-1.38 0-2.5 1.12-2.5 2.5V8c0 2.21 1.79 4 4 4h.34c1.17 2.19 3.52 3.56 6.16 3.56s4.99-1.37 6.16-3.56h.34c2.21 0 4-1.79 4-4v-1.5c0-1.38-1.12-2.5-2.5-2.5zm-11 6c-.55 0-1-.45-1-1V6.5c0-.28.22-.5.5-.5h2v4H6.5zm11 0h-2v-4h2c.28 0 .5.22.5.5V9c0 .55-.45 1-1 1zM11 16h2v4H-2v-4zm-2 4h6v2H9v-2z"/>
                                <path fill="#ffffff" d="M12 11.5L10 7h4z"/>
                            </svg>
                            TOP Nhận
                        </button>
                        <button id="tab-sent" onclick="switchRankingTab('sent')" class="cursor-pointer flex items-center justify-center gap-2 w-[120px] py-2 rounded-[10px] transition-all text-[#64748b] hover:text-gray-800 font-bold text-[14px]">
                            <svg class="w-[18px] h-[18px]" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M22 2L11 13"></path>
                                <path d="M22 2L15 22L11 13L2 9L22 2Z"></path>
                            </svg>
                            TOP Gửi
                        </button>
                    </div>

                    <div id="ranking-list-container" class="flex-1 flex flex-col mb-2">
                        <!-- Pre-rendered ranking lists -->
                        <div id="ranking-received-content" class="flex-1 flex flex-col">
                            @include('user.partials.ranking_list', ['rankers' => array_slice($receivedRankers, 0, 4), 'currentUserRankItem' => $receivedCurrentUserRankItem])
                        </div>
                        <div id="ranking-sent-content" class="hidden flex-1 flex flex-col">
                            @include('user.partials.ranking_list', ['rankers' => array_slice($sentRankers, 0, 4), 'currentUserRankItem' => $sentCurrentUserRankItem])
                        </div>
                    </div>
                @else
                    <div class="relative flex-1 flex flex-col h-full min-h-[220px]">
                        <!-- Blur container -->
                        <div class="filter blur-[5px] select-none pointer-events-none opacity-40 flex-1 flex flex-col">
                            <div class="inline-flex bg-[#F5F7FB] rounded-xl p-1 mb-4 w-fit space-x-2">
                                <button class="flex items-center justify-center gap-2 w-[120px] py-2 rounded-[10px] bg-white text-[#3462f7] font-bold text-[14px]">TOP Nhận</button>
                                <button class="flex items-center justify-center gap-2 w-[120px] py-2 rounded-[10px] text-[#64748b] font-bold text-[14px]">TOP Gửi</button>
                            </div>
                            <div class="space-y-3.5">
                                <div class="flex items-center gap-3 p-3 rounded-2xl bg-gray-50/80 border border-gray-100">
                                    <div class="w-10 h-10 bg-gray-200 rounded-full"></div>
                                    <div class="flex-1 space-y-2">
                                        <div class="h-3.5 bg-gray-200 rounded w-24"></div>
                                        <div class="h-2.5 bg-gray-200 rounded w-16"></div>
                                    </div>
                                </div>
                                <div class="flex items-center gap-3 p-3 rounded-2xl bg-gray-50/80 border border-gray-100">
                                    <div class="w-10 h-10 bg-gray-200 rounded-full"></div>
                                    <div class="flex-1 space-y-2">
                                        <div class="h-3.5 bg-gray-200 rounded w-28"></div>
                                        <div class="h-2.5 bg-gray-200 rounded w-12"></div>
                                    </div>
                                </div>
                                <div class="flex items-center gap-3 p-3 rounded-2xl bg-gray-50/80 border border-gray-100">
                                    <div class="w-10 h-10 bg-gray-200 rounded-full"></div>
                                    <div class="flex-1 space-y-2">
                                        <div class="h-3.5 bg-gray-200 rounded w-20"></div>
                                        <div class="h-2.5 bg-gray-200 rounded w-14"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Overlay -->
                        <div class="absolute inset-0 flex flex-col items-center justify-center bg-white/40 backdrop-blur-[1px] rounded-2xl z-10 p-4 text-center">
                            <div class="w-14 h-14 bg-amber-500 text-white rounded-full flex items-center justify-center shadow-lg shadow-amber-500/30 mb-3.5 transform transition-transform hover:scale-105 duration-300">
                                <svg class="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                                </svg>
                            </div>
                            <h4 class="text-sm font-extrabold text-[#1a2b49] mb-1">Không có quyền xem</h4>
                            <p class="text-[11px] text-gray-500 font-semibold max-w-[200px] leading-relaxed">Bảng xếp hạng đã bị ẩn với tài khoản thành viên.</p>
                        </div>
                    </div>
                @endif
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function switchRankingTab(tab) {
        const receivedTab = document.getElementById('tab-received');
        const sentTab = document.getElementById('tab-sent');
        const receivedContent = document.getElementById('ranking-received-content');
        const sentContent = document.getElementById('ranking-sent-content');

        if (!receivedTab || !sentTab || !receivedContent || !sentContent) return;

        const activeClass = 'flex items-center justify-center gap-2 w-[120px] py-2 rounded-[10px] transition-all bg-white shadow-[0_2px_4px_rgba(0,0,0,0.04)] text-[#3462f7] font-bold text-[14px]';
        const inactiveClass = 'flex items-center justify-center gap-2 w-[120px] py-2 rounded-[10px] transition-all text-[#64748b] hover:text-gray-800 font-bold text-[14px]';

        if (tab === 'received') {
            receivedTab.className = activeClass;
            sentTab.className = inactiveClass;
            receivedContent.classList.remove('hidden');
            sentContent.classList.add('hidden');
        } else {
            sentTab.className = activeClass;
            receivedTab.className = inactiveClass;
            sentContent.classList.remove('hidden');
            receivedContent.classList.add('hidden');
        }
    }
</script>
@endpush