@extends('layouts.app')

@section('title', '{{ $rewardCycle->name }}')

@push('styles')
<style>
    .cycle-hero { background:linear-gradient(135deg,#0d3d26,#00a651);border-radius:14px;padding:1.75rem 2rem;color:#fff;margin-bottom:1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem; }
    .cycle-hero h2 { font-size:1.4rem;font-weight:800;margin-bottom:.35rem; }
    .cycle-hero-meta { display:flex;gap:1.5rem;font-size:.82rem;opacity:.85;flex-wrap:wrap; }
    .cycle-hero-meta i { margin-right:.3rem; }
    .status-pill { display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .85rem;border-radius:20px;font-size:.75rem;font-weight:700; }
    .status-active { background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3); }
    .status-closed { background:rgba(0,0,0,.2);color:rgba(255,255,255,.8); }
    .active-dot { width:6px;height:6px;border-radius:50%;background:#4ade80;animation:pulse 1.5s infinite; }
    @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

    .two-col { display:grid;grid-template-columns:1fr 1fr;gap:1.25rem; }
    .card { background:#fff;border:1px solid var(--gray-200);border-radius:14px;overflow:hidden; }
    .card-header { padding:1rem 1.5rem;border-bottom:1px solid var(--gray-100);display:flex;align-items:center;justify-content:space-between; }
    .card-header h3 { font-size:.9rem;font-weight:700;color:var(--gray-900);display:flex;align-items:center;gap:.45rem; }
    .card-header h3 i { color:var(--green); }
    .card-body { padding:1.25rem 1.5rem; }

    .winner-row { display:flex;align-items:center;gap:.75rem;padding:.7rem 1.5rem;border-bottom:1px solid var(--gray-100); }
    .winner-row:last-child { border-bottom:none; }
    .w-avatar { width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,var(--green),var(--green-dark));display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:800;color:#fff;flex-shrink:0; }
    .w-name { flex:1;font-size:.85rem;font-weight:600;color:var(--gray-800); }
    .w-award { font-size:.75rem;color:var(--gray-500); }
    .w-medal { font-size:1.2rem; }

    .close-form { padding:1.25rem 1.5rem;border-top:1px solid var(--gray-100); }
    .btn-danger { padding:.6rem 1.3rem;background:#ef4444;color:#fff;border:none;border-radius:8px;font-size:.82rem;font-weight:700;cursor:pointer;transition:background .15s;display:inline-flex;align-items:center;gap:.4rem; }
    .btn-danger:hover { background:#dc2626; }

    .empty-winners { text-align:center;padding:2rem;color:var(--gray-400);font-size:.82rem; }
    .empty-winners i { font-size:1.75rem;display:block;margin-bottom:.5rem; }

    @media (max-width:700px) { .two-col { grid-template-columns:1fr; } }
</style>
@endpush

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title">{{ $rewardCycle->name }}</h1>
        <p class="page-subtitle">Reward cycle details and winner assignments.</p>
    </div>
    <div style="display:flex;gap:.6rem;">
        <a href="{{ route('admin.rewards.leaderboard', $rewardCycle) }}" class="btn-secondary">
            <i class="fas fa-trophy"></i> Cycle Leaderboard
        </a>
        <a href="{{ route('admin.rewards.index') }}" class="btn-secondary">
            <i class="fas fa-arrow-left"></i> Back
        </a>
    </div>
</div>

{{-- Cycle hero --}}
<div class="cycle-hero">
    <div>
        <h2>{{ $rewardCycle->name }}</h2>
        <div class="cycle-hero-meta">
            <span><i class="fas fa-calendar-day"></i> {{ $rewardCycle->start_date->format('d M Y') }}</span>
            <span><i class="fas fa-flag-checkered"></i> {{ $rewardCycle->end_date->format('d M Y') }}</span>
            <span><i class="fas fa-clock"></i> {{ $rewardCycle->start_date->diffInDays($rewardCycle->end_date) }} days</span>
            @if($rewardCycle->closed_at)
            <span><i class="fas fa-lock"></i> Closed {{ $rewardCycle->closed_at->format('d M Y') }}</span>
            @endif
        </div>
    </div>
    <div>
        @if($rewardCycle->status === 'active')
            <span class="status-pill status-active"><span class="active-dot"></span> Active</span>
        @else
            <span class="status-pill status-closed"><i class="fas fa-lock" style="font-size:.7rem;"></i> Closed</span>
        @endif
    </div>
</div>

<div class="two-col">

    {{-- Winners --}}
    <div class="card">
        <div class="card-header">
            <h3><i class="fas fa-trophy"></i> Winners</h3>
            <span style="font-size:.75rem;color:var(--gray-400);">{{ $rewardCycle->winners->count() }} winner{{ $rewardCycle->winners->count() !== 1 ? 's' : '' }}</span>
        </div>

        @if($rewardCycle->winners->count())
            @foreach($rewardCycle->winners->sortBy('rank') as $winner)
            <div class="winner-row">
                <div class="w-medal">
                    @if($winner->rank === 1) 🥇
                    @elseif($winner->rank === 2) 🥈
                    @elseif($winner->rank === 3) 🥉
                    @else <span style="font-size:.8rem;color:var(--gray-500);">#{{ $winner->rank }}</span>
                    @endif
                </div>
                <div class="w-avatar">{{ strtoupper(substr($winner->user?->name ?? '?', 0, 1)) }}</div>
                <div>
                    <div class="w-name">{{ $winner->user?->name ?? 'Unknown' }}</div>
                    <div class="w-award">{{ $winner->award_category ?? 'General Winner' }}</div>
                </div>
                @if($winner->points_at_close)
                <div style="font-size:.9rem;font-weight:800;color:var(--green);">{{ $winner->points_at_close }} pts</div>
                @endif
            </div>
            @endforeach
        @else
        <div class="empty-winners">
            <i class="fas fa-trophy"></i>
            <p>
                @if($rewardCycle->status === 'active')
                    Winners will be assigned after the cycle closes.
                    <br><a href="{{ route('admin.rewards.leaderboard', $rewardCycle) }}" style="color:var(--green);font-weight:600;">View current standings</a>
                @else
                    No winners assigned for this cycle yet.
                @endif
            </p>
        </div>
        @endif
    </div>

    {{-- Cycle actions --}}
    <div>
        <div class="card">
            <div class="card-header"><h3><i class="fas fa-sliders"></i> Cycle Actions</h3></div>
            <div class="card-body" style="display:flex;flex-direction:column;gap:.75rem;">

                <a href="{{ route('admin.rewards.leaderboard', $rewardCycle) }}" class="btn-primary" style="justify-content:center;">
                    <i class="fas fa-chart-bar"></i> View Cycle Leaderboard
                </a>

                @if($rewardCycle->status === 'active')
                <div style="background:#fef2f2;border:1px solid #fecaca;border-radius:10px;padding:1rem;">
                    <div style="font-size:.82rem;font-weight:700;color:#dc2626;margin-bottom:.35rem;">
                        <i class="fas fa-triangle-exclamation"></i> Close Cycle
                    </div>
                    <p style="font-size:.78rem;color:#7f1d1d;line-height:1.5;margin-bottom:.75rem;">
                        Closing this cycle is permanent. It will mark the cycle as closed so you can assign winners.
                        A new cycle can then be created.
                    </p>
                    <form method="POST" action="{{ route('admin.rewards.close', $rewardCycle) }}" onsubmit="return confirm('Close this reward cycle? This cannot be undone.')">
                        @csrf
                        <button type="submit" class="btn-danger">
                            <i class="fas fa-lock"></i> Close Cycle
                        </button>
                    </form>
                </div>
                @else
                <div style="background:var(--gray-50);border:1px solid var(--gray-200);border-radius:10px;padding:1rem;font-size:.82rem;color:var(--gray-500);">
                    <i class="fas fa-lock"></i> This cycle is closed. No further changes can be made.
                </div>
                @endif

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

</div>

@endsection