<x-app-layout>
    <x-slot name="title">Match History</x-slot>

    <div class="pes-hero mb-4">
        <div style="position:relative;z-index:1">
            <div class="pes-hero-title"><i class="ti ti-history" style="font-size:22px"></i> Riwayat Match</div>
            <div class="pes-hero-sub">Semua pertandingan kamu</div>
        </div>
    </div>

    @php $user = auth()->user(); @endphp

    <div class="pes-card">
        <div style="overflow-x:auto">
            <table class="pes-table">
                <thead>
                    <tr>
                        <th>Lawan</th>
                        <th>Hasil</th>
                        <th>Skor</th>
                        <th class="d-none d-sm-table-cell">ELO</th>
                        <th class="d-none d-md-table-cell">Tanggal</th>
                        <th style="width:40px"></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($matches as $match)
                        @php
                            $isHost  = $match->host_id === $user->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 === $user->id;
                            $draw    = is_null($match->winner_id) && $match->status === 'completed';
                            $ec      = $isHost ? ($match->elo_change_host ?? 0) : ($match->elo_change_guest ?? 0);
                        @endphp
                        <tr>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <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>
                                        <div style="font-size:13px;font-weight:600;color:#0f172a">{{ $opUser?->username ?? 'Unknown' }}</div>
                                        @php $od = getDivision($opUser?->elo ?? 1200); @endphp
                                        <span class="div-badge {{ $od['cls'] }}" style="font-size:10px;padding:1px 6px">{{ $od['name'] }}</span>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <span style="display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;
                                    {{ $draw ? 'background:#f1f5f9;color:#64748b' : ($won ? 'background:#f0fdf4;color:#15803d' : 'background:#fef2f2;color:#dc2626') }}">
                                    {{ $draw ? 'Draw' : ($won ? '✓ Menang' : '✗ Kalah') }}
                                </span>
                            </td>
                            <td style="font-size:15px;font-weight:800;font-family:'Plus Jakarta Sans',sans-serif;color:#0f172a">{{ $myScore }} – {{ $opScore }}</td>
                            <td class="d-none d-sm-table-cell" style="font-size:12px;font-weight:700;{{ $ec > 0 ? 'color:#16a34a' : ($ec < 0 ? 'color:#dc2626' : 'color:#94a3b8') }}">
                                {{ $ec != 0 ? ($ec > 0 ? '+' : '').$ec : '—' }}
                            </td>
                            <td class="d-none d-md-table-cell" style="font-size:12px;color:#64748b">
                                {{ $match->created_at->format('d M Y') }}<br>
                                <span style="color:#94a3b8">{{ $match->created_at->format('H:i') }}</span>
                            </td>
                            <td>
                                <a href="{{ route('match.show', $match->id) }}" class="btn-pes-ghost" style="padding:6px 10px;text-decoration:none">
                                    <i class="ti ti-chevron-right"></i>
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" style="text-align:center;padding:56px 20px">
                                <div style="font-size:40px;margin-bottom:12px">⚽</div>
                                <div style="font-size:14px;color:#64748b;margin-bottom:12px">Belum ada pertandingan</div>
                                <a href="{{ route('matchmaking.index') }}" class="btn-pes-primary" style="text-decoration:none">
                                    Cari Lawan Sekarang
                                </a>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($matches->hasPages())
        <div style="padding:14px 20px;border-top:1px solid #f1f5f9">{{ $matches->links() }}</div>
        @endif
    </div>
</x-app-layout>
