@extends('layouts.master')

@section('content')
@php
$defaultLang = $languages->where('is_default', 1)->first()->code ?? 'en';
$currentLang = request('lang') ?? $defaultLang;
@endphp

<style>
    .material-symbols-outlined {
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

    .neon-glow {
        box-shadow: 0 0 15px rgba(0, 255, 157, 0.3);
    }

    .neon-border {
        border: 1px solid rgba(0, 255, 157, 0.2);
    }

    .terminal-bg {
        background: linear-gradient(180deg, #10141a 0%, #0d1117 100%);
    }

    .bg-primary {
        background-color: #00ff9d;
    }

    .text-surface,
    .text-on-surface {
        color: #fff;
    }
</style>
<main class=" pt-24 p-8  mx-auto min-h-screen">

    <!-- HEADER -->
    <header class="mb-12 flex items-end justify-between">
        <div class="space-y-1">
            <div class="flex items-center gap-2 text-[10px] font-bold text-primary tracking-[0.2em] mb-2">
                <span class="material-symbols-outlined text-sm">verified</span>
                <span>PLAYER_PROFILE_ACTIVE</span>
            </div>

            <h2 class="text-5xl font-black text-on-surface uppercase tracking-tighter">
                {{ $player->name }}
            </h2>

            <p class="text-on-surface-variant max-w-lg text-sm border-l-2 border-primary/20 pl-4 mt-4">
                Age: {{ $player->age }} | Qualification: {{ $player->qualification }} | Joined: {{ $player->created_at->format('M Y') }}
            </p>
        </div>

        <!-- <div class="flex gap-4">
            <button class="px-6 py-2.5 bg-surface-container text-xs font-bold uppercase rounded border border-outline">
                GENERATE_INTEL
            </button>
            <button class="px-6 py-2.5 bg-primary text-surface text-xs font-black uppercase rounded">
                SEND_MESSAGE
            </button>
        </div> -->
    </header>
    <div class="flex gap-2 mb-6">
        @foreach($languages as $l)
        <button type="button"
            onclick="switchLang('{{ $l->code }}')"
            class="lang-tab px-4 py-1.5 rounded-md border text-xs font-bold 
        {{ $lang == $l->code ? 'bg-primary text-white' : 'border-outline-variant' }}"
            data-lang="{{ $l->code }}">
            {{ strtoupper($l->code) }}
        </button>
        @endforeach
    </div>
    </div>
    <div class="grid grid-cols-12 gap-6">

        <!-- LEFT -->
        <div class="col-span-12 lg:col-span-4 space-y-6">

            <div class="bg-surface-container p-6 rounded-lg border border-outline">
                <img src="{{ !empty($player->image) ? asset($player->image) : asset('images/avatar.svg') }}" alt="Avatar" class="w-24 h-24 rounded-full mb-4 border border-outline-variant/20">
                <p class="text-xs uppercase text-primary">Leaderboard Rank</p>
                <p class="text-2xl font-bold">#{{ $rank }}</p>
            </div>

            <div class="bg-surface-container p-6 rounded-lg border border-outline">
                <p class="text-xs uppercase text-primary">Total Games</p>
                <p class="text-2xl font-bold">{{ count($sessions) }}</p>
            </div>
            <div class="bg-surface-container p-6 rounded-lg border border-outline">
                <p class="text-xs uppercase text-primary">Wishlist</p>
                <p class="text-2xl font-bold">{{ $wishlistCount }}</p>
            </div>

            <div class="bg-surface-container p-6 rounded-lg border border-outline">
                <p class="text-xs uppercase text-primary">Top Persona</p>
                <p class="text-lg font-bold">{{ $topPersonaName }}</p>
            </div>

            @if($wishlistCourses->count())
            <div class="bg-surface-container p-6 rounded-lg border border-outline">
                <p class="text-xs uppercase text-primary mb-2">Saved Courses</p>

                @foreach($wishlistCourses as $item)
                <div class="text-sm border-b border-outline/20 py-1">
                    {{ $item->course->name[$currentLang] ?? 'N/A' }}
                </div>
                @endforeach
            </div>
            @endif

            @if($wishlistPersonas->count())
            <div class="bg-surface-container p-6 rounded-lg border border-outline">
                <p class="text-xs uppercase text-primary mb-2">Saved Personas</p>

                @foreach($wishlistPersonas as $item)
                <div class="text-sm border-b border-outline/20 py-1">
                    {{ $item->persona->name[$currentLang] ?? 'N/A' }}
                </div>
                @endforeach
            </div>
            @endif
        </div>

        <!-- RIGHT -->
        <div class="col-span-12 lg:col-span-8 space-y-6">

            <!-- CHART -->
            <!-- <div class="bg-surface-container p-6 rounded-lg border border-outline">
                <h2 class="text-sm font-bold uppercase mb-4 text-primary">
                    Persona Evolution
                </h2>

                <canvas id="personaChart" height="120"></canvas>
            </div> -->

            <!-- GAME HISTORY -->
            <div class="bg-surface-container rounded-lg p-1 border border-outline shadow-2xl overflow-hidden">
                <div class="bg-surface p-8 rounded-[calc(0.5rem-1px)]">

                    <div class="flex items-center justify-between mb-8">
                        <h3 class="text-xl font-headline font-black text-on-surface tracking-tight uppercase">
                            GAME HISTORY
                        </h3>

                        <!-- <a class="text-[10px] font-black text-primary uppercase tracking-widest hover:underline flex items-center gap-1" href="#">
                ACCESS_FULL_HISTORY
                <span class="material-symbols-outlined text-xs">arrow_forward</span>
            </a> -->
                    </div>

                    <div class="space-y-2">

                        @foreach($sessions as $index => $session)

                        @php
                        $isCompleted = $session['is_completed'];
                        $personaName = $session['persona']['name'] ?? 'Unknown';
                        $confidence = $session['persona']['confidence'] ?? 0;

                        $likes = $session['likes'];
                        $dislikes = $session['dislikes'];
                        @endphp

                        <div class="grid grid-cols-12 items-center p-4 
                    {{ $isCompleted ? 'bg-surface-container-high/30 border-outline hover:border-primary/50' : 'border-transparent hover:border-outline/50' }} 
                    border rounded transition-all group cursor-pointer relative overflow-hidden">

                            {{-- Left accent bar --}}
                            @if($isCompleted)
                            <div class="absolute left-0 top-0 h-full w-1 bg-primary scale-y-0 group-hover:scale-y-100 transition-transform"></div>
                            @endif

                            {{-- Icon --}}
                            <div class="col-span-1 flex flex-col items-center gap-1">

                                <span class="material-symbols-outlined text-primary"
                                    style="font-variation-settings: 'FILL' 1;">
                                    favorite
                                </span>

                                <span class="text-[10px] text-primary font-bold">
                                    {{ $likes }}
                                </span>

                                <span class="material-symbols-outlined text-on-surface-variant/40">
                                    close
                                </span>

                                <span class="text-[10px] text-on-surface-variant">
                                    {{ $dislikes }}
                                </span>

                            </div>

                            {{-- Main Info --}}
                            <div class="col-span-5 flex items-center gap-4">

                                <div class="w-10 h-10 rounded bg-outline/30 overflow-hidden border border-outline/50 flex items-center justify-center">
                                    <span class="text-xs font-bold text-on-surface-variant">
                                        {{ $index + 1 }}
                                    </span>
                                </div>

                                <div>
                                    <!-- <p class="font-bold text-on-surface text-sm tracking-tight group-hover:text-primary transition-colors"> -->
                                    <p class="persona-name font-bold text-sm"
                                        data-name='@json($session["persona"]["name_raw"])'>
                                        {{ $session['persona']['name'] }}
                                    </p>
                                    <!-- </p> -->

                                    <p class="text-[9px] font-bold text-on-surface-variant uppercase tracking-tighter">
                                        CONFIDENCE: {{ $confidence }}%
                                    </p>
                                </div>
                            </div>

                            {{-- Time --}}
                            <div class="col-span-4 text-[10px] font-bold text-on-surface-variant/60 uppercase tracking-widest">
                                {{ $session['created_at'] }}
                            </div>

                            {{-- Status --}}
                            <div class="col-span-2 text-right">
                                @if($isCompleted)
                                <span class="text-[9px] font-black text-primary bg-primary/10 border border-primary/30 px-2.5 py-1 rounded uppercase tracking-[0.1em]">
                                    COMPLETED
                                </span>
                                @else
                                <span class="text-[9px] font-black text-on-surface-variant/60 bg-outline/10 border border-outline/30 px-2.5 py-1 rounded uppercase tracking-[0.1em]">
                                    IN_PROGRESS
                                </span>
                                @endif
                            </div>

                        </div>

                        @endforeach

                    </div>
                </div>
            </div>

        </div>

    </div>

</main>

@endsection


@section('scripts')

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    function switchLang(lang) {

        // tabs UI
        document.querySelectorAll('.lang-tab').forEach(btn => {
            btn.classList.remove('bg-primary', 'text-white');
            if (btn.dataset.lang === lang) {
                btn.classList.add('bg-primary', 'text-white');
            }
        });

        // persona translation
        document.querySelectorAll('.persona-name').forEach(el => {

            let nameObj = {};

            try {
                nameObj = JSON.parse(el.dataset.name || '{}');
            } catch (e) {}

            let text =
                nameObj[lang] ||
                nameObj['en'] ||
                Object.values(nameObj)[0] ||
                'Unknown';

            el.innerText = text;
        });

        // update URL (no reload)
        const url = new URL(window.location.href);
        url.searchParams.set('lang', lang);
        window.history.replaceState({}, '', url);
    }

    // default
    document.addEventListener('DOMContentLoaded', function() {
        switchLang('{{ $lang }}');
    });
</script>

@endsection