@extends('layouts.app')
@section('title', __('ui.challenge_title').' — Coaster World')

@section('content')
@php
    $scopeIcons = ['personal' => '🎯', 'friends' => '🤝', 'group' => '👥', 'community' => '🌍'];
    $typeIcons = ['rides' => '🎡', 'coasters' => '🎢', 'new_coasters' => '✨', 'parks' => '🏰', 'manufacturers' => '⚙️'];
@endphp

<section class="challenge-hero">
    <div class="container challenge-hero-grid">
        <div>
            <span class="eyebrow">{{ __('ui.challenge_kicker') }}</span>
            <h1>{{ __('ui.challenge_title') }}</h1>
            <p>{{ __('ui.challenge_intro') }}</p>
            <div class="challenge-hero-actions">
                <a class="button button-primary" href="#challenge-create">{{ __('ui.challenge_create') }}</a>
                <a class="button button-ghost" href="{{ route('rankings.index', ['metric' => 'challenges']) }}">{{ __('ui.challenge_rankings') }}</a>
            </div>
        </div>
        <div class="challenge-hero-orbit" aria-hidden="true"><span>🏆</span><i>⚡</i></div>
    </div>
</section>

<section class="section challenge-stats-section">
    <div class="container challenge-stat-grid">
        <article><span>🔥</span><strong>{{ $activeCount }}</strong><small>{{ __('ui.challenge_stat_active') }}</small></article>
        <article><span>✅</span><strong>{{ $completedCount }}</strong><small>{{ __('ui.challenge_stat_completed') }}</small></article>
        <article><span>🏆</span><strong>{{ $officialCompleted }}</strong><small>{{ __('ui.challenge_stat_official') }}</small></article>
    </div>
</section>

@if(session('challenge_status'))
<section class="container"><div class="status-banner success">{{ session('challenge_status') }}</div></section>
@endif
@if($errors->any())
<section class="container"><div class="status-banner error">{{ $errors->first() }}</div></section>
@endif

<section class="section challenge-filter-section">
    <div class="container">
        <div class="challenge-filter-bar">
            <div>
                <span>{{ __('ui.challenge_filter_scope') }}</span>
                <div class="challenge-pills">
                    @foreach(['all', 'personal', 'friends', 'group', 'community'] as $scopeKey)
                        <a href="{{ route('challenges.index', ['scope' => $scopeKey, 'period' => $period]) }}" class="{{ $scope === $scopeKey ? 'is-active' : '' }}">
                            {{ $scopeKey === 'all' ? '✦' : $scopeIcons[$scopeKey] }} {{ __('ui.challenge_scope_'.$scopeKey) }}
                        </a>
                    @endforeach
                </div>
            </div>
            <div>
                <span>{{ __('ui.challenge_filter_period') }}</span>
                <div class="challenge-pills">
                    @foreach(['all', 'week', 'month', 'custom'] as $periodKey)
                        <a href="{{ route('challenges.index', ['scope' => $scope, 'period' => $periodKey]) }}" class="{{ $period === $periodKey ? 'is-active' : '' }}">
                            {{ __('ui.challenge_period_'.$periodKey) }}
                        </a>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section section-soft challenge-list-section">
    <div class="container">
        <div class="section-heading split-heading">
            <div>
                <span class="eyebrow">{{ __('ui.challenge_live_kicker') }}</span>
                <h2>{{ __('ui.challenge_live_title') }}</h2>
                <p>{{ __('ui.challenge_live_intro') }}</p>
            </div>
        </div>

        <div class="challenge-card-grid">
            @forelse($items as $challenge)
                @php
                    $participant = $myParticipants->get($challenge->id);
                    $target = max(1, (int) data_get($challenge->rules, 'target_score', 1));
                    $score = (int) ($participant?->score ?? 0);
                    $progress = min(100, (int) round(($score / $target) * 100));
                    $joined = $participant && in_array($participant->status, ['accepted', 'active', 'completed'], true);
                    $completed = $participant?->status === 'completed';
                    $ended = $challenge->status === 'completed' || $challenge->ends_at?->isPast();
                    $systemTitleKey = 'challenge_official_'.$challenge->period_kind.'_'.$challenge->challenge_type.'_title';
                    $systemTextKey = 'challenge_official_'.$challenge->period_kind.'_'.$challenge->challenge_type.'_text';
                    $title = $challenge->is_system && __($systemTitleKey) !== $systemTitleKey ? __($systemTitleKey) : $challenge->name;
                    $description = $challenge->is_system && __($systemTextKey) !== $systemTextKey ? __($systemTextKey) : $challenge->description;
                    $ranking = $challenge->participants->sortByDesc('score')->values();
                @endphp
                <article class="challenge-card {{ $joined ? 'is-joined' : '' }} {{ $completed ? 'is-completed' : '' }} {{ $challenge->is_system ? 'is-official' : '' }}">
                    <div class="challenge-card-top">
                        <div class="challenge-card-icon">{{ $typeIcons[$challenge->challenge_type] ?? '⚡' }}</div>
                        <div class="challenge-card-heading">
                            <div class="challenge-card-badges">
                                <span>{{ $scopeIcons[$challenge->scope] ?? '🎯' }} {{ __('ui.challenge_scope_'.$challenge->scope) }}</span>
                                <span>{{ __('ui.challenge_period_'.$challenge->period_kind) }}</span>
                                @if($challenge->is_system)<b>✓ {{ __('ui.challenge_official') }}</b>@endif
                            </div>
                            <h3>{{ $title }}</h3>
                            @if($description)<p>{{ $description }}</p>@endif
                        </div>
                    </div>

                    <div class="challenge-goal-row">
                        <div><small>{{ __('ui.challenge_goal') }}</small><strong>{{ $target }} {{ __('ui.challenge_type_'.$challenge->challenge_type) }}</strong></div>
                        <div><small>{{ __('ui.challenge_ends') }}</small><strong>{{ $challenge->ends_at?->locale(app()->getLocale())->diffForHumans() ?: '—' }}</strong></div>
                        @if($challenge->group)<div><small>{{ __('ui.challenge_scope_group') }}</small><strong>{{ $challenge->group->name }}</strong></div>@endif
                    </div>

                    @if($challenge->is_system)
                        <div class="challenge-reward">
                            <span>✦ {{ (int) $challenge->reward_xp }} XP</span>
                            @if($challenge->reward_badge_key)<span>🏆 {{ __('ui.challenge_reward_badge') }}</span>@endif
                        </div>
                    @endif

                    @if($joined)
                        <div class="challenge-progress-block">
                            <div><span>{{ __('ui.challenge_your_progress') }}</span><strong>{{ $score }} / {{ $target }}</strong></div>
                            <div class="challenge-progress-track"><i style="width: {{ $progress }}%"></i></div>
                            @if($completed)<b class="challenge-complete-badge">🏆 {{ __('ui.challenge_completed') }}</b>@endif
                        </div>
                    @endif

                    @if($ranking->isNotEmpty())
                        <div class="challenge-mini-ranking">
                            <span>{{ __('ui.challenge_leaders') }}</span>
                            <div>
                                @foreach($ranking->take(3) as $ranked)
                                    <small>{{ ['🥇','🥈','🥉'][$loop->index] }} {{ $ranked->user?->username ? '@'.$ranked->user->username : ($ranked->user?->name ?: '—') }} <b>{{ $ranked->score }}</b></small>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <div class="challenge-card-actions">
                        @if(!$ended && !$joined)
                            <form method="post" action="{{ route('challenges.join', $challenge) }}">@csrf<button class="button button-primary" type="submit">{{ __('ui.challenge_join') }}</button></form>
                        @elseif(!$ended && $joined && !$completed && $challenge->scope !== 'personal')
                            <form method="post" action="{{ route('challenges.leave', $challenge) }}">@csrf @method('DELETE')<button class="button button-ghost" type="submit">{{ __('ui.challenge_leave') }}</button></form>
                        @endif
                        @if(!$challenge->is_system && !$ended && (int) $challenge->created_by_user_id === (int) auth()->id())
                            <form method="post" action="{{ route('challenges.close', $challenge) }}">@csrf<button class="button button-ghost" type="submit">{{ __('ui.challenge_close') }}</button></form>
                        @endif
                    </div>
                </article>
            @empty
                <div class="empty-state challenge-empty"><span>⚡</span><h3>{{ __('ui.challenge_empty_title') }}</h3><p>{{ __('ui.challenge_empty_text') }}</p></div>
            @endforelse
        </div>
    </div>
</section>

<section class="section challenge-create-section" id="challenge-create">
    <div class="container">
        <div class="challenge-create-card">
            <div class="challenge-create-copy">
                <span class="eyebrow">{{ __('ui.challenge_create_kicker') }}</span>
                <h2>{{ __('ui.challenge_create_title') }}</h2>
                <p>{{ __('ui.challenge_create_intro') }}</p>
                <div class="challenge-create-note">🛡️ {{ __('ui.challenge_custom_reward_note') }}</div>
            </div>
            <form method="post" action="{{ route('challenges.store') }}" class="challenge-create-form">
                @csrf
                <label><span>{{ __('ui.challenge_name') }}</span><input name="name" maxlength="140" value="{{ old('name') }}" required></label>
                <label class="is-wide"><span>{{ __('ui.challenge_description') }}</span><textarea name="description" maxlength="320" rows="3">{{ old('description') }}</textarea></label>
                <label><span>{{ __('ui.challenge_type') }}</span><select name="challenge_type" required>@foreach($types as $type)<option value="{{ $type }}" @selected(old('challenge_type') === $type)>{{ $typeIcons[$type] }} {{ __('ui.challenge_type_'.$type) }}</option>@endforeach</select></label>
                <label><span>{{ __('ui.challenge_scope') }}</span><select name="scope" required><option value="personal">🎯 {{ __('ui.challenge_scope_personal') }}</option><option value="friends" @selected(old('scope') === 'friends')>🤝 {{ __('ui.challenge_scope_friends') }}</option><option value="group" @selected(old('scope') === 'group')>👥 {{ __('ui.challenge_scope_group') }}</option></select></label>
                <label><span>{{ __('ui.challenge_group') }}</span><select name="group_id"><option value="">—</option>@foreach($groups as $group)<option value="{{ $group->id }}" @selected((string) old('group_id') === (string) $group->id)>{{ $group->name }}</option>@endforeach</select></label>
                <label><span>{{ __('ui.challenge_period') }}</span><select name="period_kind"><option value="week">{{ __('ui.challenge_period_week') }}</option><option value="month" @selected(old('period_kind') === 'month')>{{ __('ui.challenge_period_month') }}</option><option value="custom" @selected(old('period_kind') === 'custom')>{{ __('ui.challenge_period_custom') }}</option></select></label>
                <label><span>{{ __('ui.challenge_custom_days') }}</span><input type="number" name="custom_days" min="1" max="90" value="{{ old('custom_days', 7) }}"></label>
                <label><span>{{ __('ui.challenge_target') }}</span><input type="number" name="target_score" min="1" max="250" value="{{ old('target_score', 5) }}" required></label>
                <div class="challenge-create-submit"><button class="button button-primary" type="submit">⚡ {{ __('ui.challenge_create_submit') }}</button></div>
            </form>
        </div>
    </div>
</section>
@endsection