<x-app-layout>
    <x-slot name="title">{{ $player->username }}</x-slot>

    @php
        $elo   = $player->elo ?? 1200;
        $div   = getDivision($elo);
        $total = ($player->wins + $player->losses + $player->draws) ?: 1;
        $wr    = round($player->wins / $total * 100, 1);
        $isMe  = auth()->check() && auth()->id() === $player->id;
    @endphp

    <!-- Profile hero -->
    <div class="pes-hero mb-4">
        <div class="d-flex align-items-start justify-content-between flex-wrap gap-3" style="position:relative;z-index:1">
            <div class="d-flex align-items-center gap-3 flex-wrap">
                <div style="position:relative;flex-shrink:0">
                    <img src="{{ $player->avatar ?? 'https://ui-avatars.com/api/?name='.urlencode($player->username).'&background=fff&color=1d4ed8&size=128' }}"
                         style="width:64px;height:64px;border-radius:16px;border:3px solid rgba(255,255,255,.3);object-fit:cover" alt="">
                    <span style="position:absolute;bottom:-6px;right:-6px;font-size:20px">{{ $div['icon'] }}</span>
                </div>
                <div style="min-width:0">
                    <div class="pes-hero-title" style="word-break:break-word">{{ $player->username }}</div>
                    <div class="d-flex align-items-center gap-2 flex-wrap mt-1">
                        <span class="div-badge {{ $div['cls'] }}">{{ $div['name'] }}</span>
                        <span class="pes-hero-sub">Bergabung {{ $player->created_at->format('M Y') }}</span>
                    </div>
                    <!-- Quick stats -->
                    <div class="d-flex gap-2 gap-sm-3 mt-2 flex-wrap">
                        @foreach([['ELO',number_format($elo),'#60a5fa'],['W',$player->wins,'#4ade80'],['L',$player->losses,'#f87171'],['WR',$wr.'%','#facc15']] as [$l,$v,$c])
                        <div style="text-align:center;min-width:36px">
                            <div style="font-size:16px;font-weight:900;color:{{ $c }};font-family:'Plus Jakarta Sans',sans-serif;line-height:1.1">{{ $v }}</div>
                            <div style="font-size:10px;color:rgba(255,255,255,.5);font-weight:600;text-transform:uppercase;margin-top:1px">{{ $l }}</div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            @if($isMe)
            <a href="{{ route('profile.edit') }}" class="btn-pes-secondary" style="text-decoration:none;background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.2);flex-shrink:0">
                <i class="ti ti-edit"></i> Edit
            </a>
            @endif
        </div>
    </div>

    <div class="row g-4">
        <!-- Match history -->
        <div class="col-lg-8">
            <div class="pes-card">
                <div class="pes-card-header">
                    <div class="pes-card-header-left">
                        <div class="pes-card-icon" style="background:#eff6ff;color:#1d4ed8"><i class="ti ti-history"></i></div>
                        <span class="pes-card-title">Riwayat Match</span>
                    </div>
                </div>
                <div style="padding:0">
                    @forelse($matches as $match)
                        @php
                            $isHost  = $match->host_id === $player->id;
                            $myScore = $isHost ? $match->score_host : $match->score_guest;
                            $opScore = $isHost ? $match->score_guest : $match->score_host;
                            $opUser  = $isHost ? $match->guest : $match->host;
                            $won     = $match->winner_id === $player->id;
                            $draw    = is_null($match->winner_id) && $match->status === 'completed';
                            $ec      = $isHost ? ($match->elo_change_host ?? 0) : ($match->elo_change_guest ?? 0);
                        @endphp
                        <div class="d-flex align-items-center gap-3 px-3 py-3" style="border-bottom:1px solid #f1f5f9">
                            <div class="result-badge {{ $draw ? 'result-d' : ($won ? 'result-w' : 'result-l') }}">
                                {{ $draw ? 'D' : ($won ? 'W' : 'L') }}
                            </div>
                            <img src="{{ $opUser?->avatar ?? 'https://ui-avatars.com/api/?name=Player&background=1d4ed8&color=fff' }}"
                                 style="width:36px;height:36px;border-radius:10px;object-fit:cover" alt="">
                            <div class="flex-grow-1 overflow-hidden">
                                <div style="font-size:13px;font-weight:600;color:#0f172a" class="text-truncate">vs {{ $opUser?->username ?? 'Unknown' }}</div>
                                <div style="font-size:11px;color:#94a3b8">{{ $match->created_at->diffForHumans() }}</div>
                            </div>
                            <div style="text-align:right;flex-shrink:0">
                                <div style="font-size:15px;font-weight:800;color:#0f172a;font-family:'Plus Jakarta Sans',sans-serif">{{ $myScore }} – {{ $opScore }}</div>
                                @if($ec != 0)
                                <div style="font-size:11px;font-weight:700;color:{{ $ec > 0 ? '#16a34a' : '#dc2626' }}">{{ $ec > 0 ? '+' : '' }}{{ $ec }}</div>
                                @endif
                            </div>
                        </div>
                    @empty
                        <div style="padding:48px 20px;text-align:center;color:#94a3b8;font-size:14px">
                            <div style="font-size:36px;margin-bottom:10px">⚽</div>
                            Belum ada pertandingan
                        </div>
                    @endforelse
                </div>
                @if($matches->hasPages())
                <div style="padding:14px 20px;border-top:1px solid #f1f5f9">{{ $matches->links() }}</div>
                @endif
            </div>
        </div>

        <!-- Stats sidebar -->
        <div class="col-lg-4 d-flex flex-column gap-4">
            <div class="pes-card">
                <div class="pes-card-header">
                    <div class="pes-card-header-left">
                        <div class="pes-card-icon" style="background:#f0fdf4;color:#16a34a"><i class="ti ti-chart-bar"></i></div>
                        <span class="pes-card-title">Statistik</span>
                    </div>
                </div>
                <div class="pes-card-body">
                    @foreach([
                        ['Gol Dicetak', $player->goals_scored ?? 0],
                        ['Gol Kemasukan', $player->goals_conceded ?? 0],
                        ['Clean Sheet', $player->clean_sheets ?? 0],
                        ['Wins Streak Terpanjang', ($player->longest_win_streak ?? 0).'W'],
                        ['Lose Streak Terpanjang', ($player->longest_lose_streak ?? 0).'L'],
                        ['Total Match', $total],
                        ['Draws', $player->draws ?? 0],
                    ] as [$l,$v])
                    <div class="d-flex justify-content-between align-items-center py-2" style="border-bottom:1px solid #f8fafc">
                        <span style="font-size:12px;color:#64748b">{{ $l }}</span>
                        <span style="font-size:13px;font-weight:700;color:#0f172a">{{ $v }}</span>
                    </div>
                    @endforeach
                </div>
            </div>

            <div class="pes-card">
                <div class="pes-card-header">
                    <div class="pes-card-header-left">
                        <div class="pes-card-icon" style="background:#eef2ff;color:#4f46e5">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/></svg>
                        </div>
                        <span class="pes-card-title">Discord</span>
                    </div>
                </div>
                <div class="pes-card-body">
                    <div style="font-size:13px;color:#64748b">{{ $player->discord_username ?? $player->username }}</div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
