{{-- ============================================================
     resources/views/user/games/spin.blade.php
     ============================================================ --}}
@extends('layouts.app')
@section('title','Spin & Earn')

@push('styles')
<style>
.spin-container { display:flex; flex-direction:column; align-items:center; padding:20px; }
.wheel-wrap { position:relative; width:300px; height:300px; margin:0 auto 24px; }
#wheel { width:300px; height:300px; border-radius:50%; border:6px solid #fff; box-shadow:0 8px 30px rgba(0,0,0,.2); transition:transform 5s cubic-bezier(.17,.67,.12,.99); }
.wheel-pointer { position:absolute; top:-16px; left:50%; transform:translateX(-50%); font-size:28px; z-index:10; filter:drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.spin-btn { width:140px; height:140px; border-radius:50%; background:linear-gradient(135deg,#1A73E8,#1557B0); border:6px solid #fff; color:#fff; font-size:16px; font-weight:800; cursor:pointer; box-shadow:0 8px 20px rgba(26,115,232,.4); transition:.2s; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.spin-btn:hover:not(:disabled) { transform:translate(-50%,-50%) scale(1.05); }
.spin-btn:disabled { opacity:.6; cursor:not-allowed; }
.cooldown-info { background:var(--primary-light); color:var(--primary); padding:12px 20px; border-radius:12px; font-size:13px; font-weight:600; text-align:center; margin-bottom:16px; }
.prizes-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; width:100%; }
.prize-item { padding:10px 14px; border-radius:10px; display:flex; align-items:center; gap:10px; }
.prize-dot { width:14px; height:14px; border-radius:50%; flex-shrink:0; }
</style>
@endpush

@section('content')
<div class="page-header"><h2>🎡 Spin & Earn</h2><p>Spin the wheel to win up to 1,000 points!</p></div>

<div class="spin-container">
    @if(!$canSpin && $nextSpin)
    <div class="cooldown-info">
        <i class="fa fa-clock"></i> Next spin available: <strong id="countdown">{{ $nextSpin->format('h:i A') }}</strong><br>
        <small>{{ $nextSpin->diffForHumans() }}</small>
    </div>
    @endif

    <div class="wheel-wrap">
        <div class="wheel-pointer">▼</div>
        <canvas id="wheel" width="300" height="300"></canvas>
        <button id="spin-btn" class="spin-btn" onclick="doSpin()" {{ !$canSpin ? 'disabled' : '' }}>
            {{ $canSpin ? 'SPIN!' : 'Used' }}
        </button>
    </div>

    <div style="width:100%;max-width:340px;">
        <div class="section-title" style="margin-bottom:10px;">Prize Table</div>
        <div class="prizes-grid">
            @foreach($items as $item)
            <div class="prize-item" style="background:{{ $item->color }}18;">
                <div class="prize-dot" style="background:{{ $item->color }};"></div>
                <div>
                    <div style="font-weight:700;font-size:14px;">{{ $item->label }}</div>
                    <div style="font-size:11px;color:var(--text-muted);">{{ $item->probability }}% chance</div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>

{{-- Win Modal --}}
<div id="win-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;align-items:center;justify-content:center;flex-direction:column;">
    <div style="background:#fff;border-radius:24px;padding:40px 32px;text-align:center;max-width:300px;width:90%;box-shadow:0 25px 60px rgba(0,0,0,.3);">
        <div id="win-emoji" style="font-size:64px;margin-bottom:12px;">🎉</div>
        <div id="win-title" style="font-size:22px;font-weight:800;color:var(--text);margin-bottom:8px;"></div>
        <div id="win-msg" style="font-size:14px;color:var(--text-muted);margin-bottom:24px;"></div>
        <button onclick="location.reload()" class="btn btn-primary btn-block btn-lg">Awesome! 🚀</button>
    </div>
</div>
@endsection

@push('scripts')
<script>
const items = @json($items);
const canSpin = {{ $canSpin ? 'true' : 'false' }};

// Draw wheel
const canvas = document.getElementById('wheel');
const ctx = canvas.getContext('2d');
const cx = 150, cy = 150, r = 144;
const arc = (2*Math.PI) / items.length;

items.forEach((item,i) => {
    const start = i*arc - Math.PI/2;
    ctx.beginPath();
    ctx.moveTo(cx,cy);
    ctx.arc(cx,cy,r,start,start+arc);
    ctx.closePath();
    ctx.fillStyle = item.color;
    ctx.fill();
    ctx.strokeStyle = '#fff';
    ctx.lineWidth = 2;
    ctx.stroke();

    ctx.save();
    ctx.translate(cx,cy);
    ctx.rotate(start + arc/2);
    ctx.textAlign = 'right';
    ctx.fillStyle = '#fff';
    ctx.font = 'bold 12px Inter,sans-serif';
    ctx.shadowColor='rgba(0,0,0,.3)';
    ctx.shadowBlur=4;
    ctx.fillText(item.label, r-10, 5);
    ctx.restore();
});

// Center circle
ctx.beginPath();
ctx.arc(cx,cy,55,0,2*Math.PI);
ctx.fillStyle='#fff';
ctx.fill();
ctx.strokeStyle='rgba(0,0,0,.1)';
ctx.lineWidth=2;
ctx.stroke();

let spinning = false;
let currentRotation = 0;

async function doSpin(){
    if(spinning || !canSpin) return;
    spinning = true;
    const btn = document.getElementById('spin-btn');
    btn.disabled = true;
    btn.innerHTML = '<div style="width:24px;height:24px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;"></div>';

    try {
        const r = await post('{{ route('spin.go') }}');
        if(r.success){
            const winner = items.findIndex(it => it.id === r.item.id);
            const sliceAngle = 360/items.length;
            const targetAngle = 360*8 + (360 - winner*sliceAngle - sliceAngle/2);
            currentRotation += targetAngle;
            canvas.style.transform = `rotate(${currentRotation}deg)`;

            setTimeout(()=>{
                document.getElementById('win-emoji').textContent = r.item.is_lose ? '😅' : '🎉';
                document.getElementById('win-title').textContent = r.item.label;
                document.getElementById('win-msg').textContent = r.message;
                document.getElementById('win-modal').style.display='flex';
                spinning = false;
            }, 5200);
        } else {
            toast(r.error,'error');
            btn.disabled = false;
            btn.textContent = 'SPIN!';
            spinning = false;
        }
    } catch(e) {
        toast('Something went wrong','error');
        btn.disabled = false;
        btn.textContent = 'SPIN!';
        spinning = false;
    }
}
</script>
@endpush