@php use App\Models\Rutina; @endphp
<x-layouts.app :titulo="$rutina->titulo" seccion="ejercicio">
    <div class="-mt-2 flex flex-wrap gap-2">
        <span class="chip"><x-icono :nombre="Rutina::ICONOS[$rutina->tipo] ?? 'actividad'" class="h-4 w-4" /> {{ __('app.ejercicio.tipos.'.$rutina->tipo) }}</span>
        <span class="chip"><x-icono nombre="reloj" class="h-4 w-4" /> {{ $rutina->duracion_min }} min</span>
        @if ($rutina->pasos->isNotEmpty())
            <span class="chip bg-green-50 text-green-800"><x-icono nombre="voz" class="h-4 w-4" /> {{ __('app.ejercicio.guiada_voz') }}</span>
        @endif
    </div>

    {{-- Rutina guiada paso a paso --}}
    @if ($rutina->pasos->isNotEmpty())
        <a href="{{ route('ejercicio.guiada', $rutina) }}" class="btn-primario text-xl" style="min-height: 76px">
            <x-icono nombre="play" class="h-6 w-6 fill-current" /> {{ __('app.ejercicio.empezar_guiada') }}
        </a>
    @endif

    @if ($url = $rutina->urlVideoSegura())
        <div class="aspect-video overflow-hidden rounded-3xl bg-black shadow-suave">
            <iframe src="{{ $url }}" title="{{ $rutina->titulo }}" class="h-full w-full" loading="lazy"
                    allow="accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen" allowfullscreen
                    referrerpolicy="strict-origin-when-cross-origin"></iframe>
        </div>
    @elseif ($rutina->pasos->isEmpty())
        <div class="tarjeta space-y-2 py-8 text-center">
            <span class="mx-auto flex h-16 w-16 items-center justify-center rounded-3xl bg-slate-100 text-slate-500"><x-icono nombre="video" class="h-8 w-8" /></span>
            <p class="text-lg font-semibold">{{ __('app.ejercicio.sin_video') }}</p>
        </div>
    @endif

    @if ($rutina->descripcion)
        <p class="tarjeta text-lg">{{ $rutina->descripcion }}</p>
    @endif

    {{-- Vista previa de los pasos --}}
    @if ($rutina->pasos->isNotEmpty())
        <section class="tarjeta space-y-3">
            <h2>{{ __('app.ejercicio.pasos_rutina', ['n' => $rutina->pasos->count()]) }}</h2>
            <ol class="space-y-3">
                @foreach ($rutina->pasos as $paso)
                    <li class="flex gap-3">
                        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-green-50 font-bold text-green-700">{{ $loop->iteration }}</span>
                        <span>
                            <span class="block font-semibold">{{ $paso->titulo }}</span>
                            <span class="text-slate-600">
                                {{ $paso->segundos ? __('app.ejercicio.segundos', ['n' => $paso->segundos]) : __('app.ejercicio.repeticiones', ['n' => $paso->repeticiones]) }}
                            </span>
                        </span>
                    </li>
                @endforeach
            </ol>
        </section>
    @endif

    <div class="aviso-alerta">{{ __('app.ejercicio.aviso') }}</div>

    @if ($hechaHoy)
        <div class="aviso-ok flex items-center justify-center gap-2 text-lg"><x-icono nombre="check-circulo" class="h-6 w-6 text-green-600" /> {{ __('app.ejercicio.ya_hecha') }}</div>
    @else
        <form method="POST" action="{{ route('ejercicio.completar', $rutina) }}">
            @csrf
            <button type="submit" class="btn-secundario"><x-icono nombre="check-circulo" /> {{ __('app.ejercicio.complete') }}</button>
        </form>
    @endif

    <a href="{{ route('ejercicio.index') }}" class="btn-secundario">{{ __('app.comun.volver') }}</a>
</x-layouts.app>