@extends('layouts.child')
@section('content')
@php $level = auth()->user()->level() @endphp
<div class="text-center mb-8">
  <div class="text-5xl mb-2">{{ $level['icon'] }}</div>
  <h1 class="text-2xl font-bold text-indigo-700">Hallo, {{ auth()->user()->name }}! 👋</h1>
  <p class="text-slate-500 mt-1">Du bist: <span class="{{ $level['color'] }} font-bold">{{ $level['label'] }}</span></p>
  @if($streak >= 3)
  <div class="mt-3 inline-flex items-center gap-2 bg-orange-100 text-orange-700 rounded-full px-4 py-1.5 text-sm font-bold">
    🔥 {{ $streak }}er-Serie! +5 Bonusmünzen pro Antwort
  </div>
  @elseif($streak > 0)
  <div class="mt-3 inline-flex items-center gap-2 bg-sky-100 text-sky-700 rounded-full px-4 py-1.5 text-sm font-medium">
    ✨ {{ $streak }} richtige Antworten in Folge!
  </div>
  @endif
</div>

<div class="grid grid-cols-2 gap-4 mb-8">
  <div class="bg-white rounded-2xl shadow-sm border border-amber-200 p-5 text-center">
    <div class="text-4xl font-black text-amber-500">{{ auth()->user()->points }}</div>
    <div class="text-sm text-slate-500 mt-1 font-medium">🪙 Münzen</div>
    @if($level['next'])
    <div class="mt-3">
      <div class="text-xs text-slate-400 mb-1">Nächstes Level in {{ $level['next'] - auth()->user()->points }} Münzen</div>
      <div class="bg-slate-200 rounded-full h-2"><div class="bg-amber-400 h-2 rounded-full transition-all" style="width:{{ $level['progress'] }}%"></div></div>
    </div>
    @endif
  </div>
  @if($pendingRedemptions > 0)
  <a href="{{ route('rewards.index') }}" class="bg-green-50 border border-green-300 rounded-2xl p-5 text-center hover:bg-green-100 transition">
    <div class="text-4xl font-black text-green-600">{{ $pendingRedemptions }}</div>
    <div class="text-sm text-slate-500 mt-1 font-medium">🎁 Einlösung wartet</div>
  </a>
  @else
  <a href="{{ route('rewards.index') }}" class="bg-white rounded-2xl shadow-sm border border-slate-200 p-5 text-center hover:border-indigo-300 transition">
    <div class="text-4xl">🎁</div>
    <div class="text-sm text-slate-500 mt-1 font-medium">Belohnungen</div>
  </a>
  @endif
</div>

<h2 class="font-bold text-slate-700 text-lg mb-4">📚 Fächer</h2>
<div class="grid grid-cols-3 gap-4 mb-8">
@foreach($subjects as $s)
@php $colors = ['green'=>'from-green-400 to-emerald-500','blue'=>'from-blue-400 to-indigo-500','orange'=>'from-orange-400 to-amber-500'] @endphp
<a href="{{ route('learn.quiz', $s->slug) }}" class="bg-gradient-to-br {{ $colors[$s->color] ?? 'from-violet-400 to-purple-500' }} rounded-2xl p-5 text-white text-center hover:scale-105 transition-transform shadow-sm">
  <div class="text-3xl mb-2">{{ $s->icon }}</div>
  <div class="font-bold text-sm">{{ $s->name }}</div>
  <div class="text-white/80 text-xs mt-1">{{ $s->correct }} ✓</div>
</a>
@endforeach
</div>

@if($recentAttempts->count())
<h2 class="font-bold text-slate-700 text-lg mb-4">⏱️ Zuletzt gespielt</h2>
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
@foreach($recentAttempts as $a)
<div class="flex items-center justify-between px-5 py-3 {{ !$loop->last ? 'border-b border-slate-100' : '' }}">
  <div class="flex items-center gap-3">
    <span class="text-lg">{{ $a->is_correct ? '✅' : '❌' }}</span>
    <div>
      <div class="text-sm font-medium text-slate-700 line-clamp-1">{{ Str::limit($a->question->question_text, 40) }}</div>
      <div class="text-xs text-slate-400">{{ $a->question->subject->name }}</div>
    </div>
  </div>
  @if($a->points_earned > 0)<span class="text-xs font-bold text-amber-500">+{{ $a->points_earned }} 🪙</span>@endif
</div>
@endforeach
</div>
@endif
@endsection