@php use App\Models\Rutina; @endphp
<x-layouts.app :titulo="__('app.nav.ejercicio')" seccion="ejercicio">
    {{-- Hoy --}}
    @if ($hoy)
        @if ($hoy['actividad'] === 'descanso')
            <section class="tarjeta flex items-center gap-4">
                <span class="icono-caja h-14 w-14"><x-icono nombre="corazon" class="h-7 w-7" /></span>
                <div>
                    <p class="sobretitulo">{{ __('app.ejercicio.hoy') }}</p>
                    <p class="text-xl font-bold">{{ __('app.ejercicio.actividades.descanso') }}</p>
                    <p class="text-slate-600">{{ __('app.ejercicio.descanso_texto') }}</p>
                </div>
            </section>
        @elseif ($hoy['rutina'])
            <a href="{{ route($hoy['rutina']->tieneGuia() ? 'ejercicio.guiada' : 'ejercicio.show', $hoy['rutina']) }}"
               class="relative block overflow-hidden rounded-3xl bg-gradient-to-br from-green-600 via-green-700 to-teal-800 p-6 text-white shadow-xl shadow-green-900/20">
                <div class="pointer-events-none absolute -right-10 -top-10 h-40 w-40 rounded-full bg-white/10"></div>
                <p class="flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-green-100">
                    <x-icono :nombre="Rutina::ICONOS[$hoy['actividad']] ?? 'actividad'" class="h-5 w-5" />
                    {{ __('app.ejercicio.hoy') }} · {{ __('app.ejercicio.actividades.'.$hoy['actividad']) }}
                </p>
                <p class="mt-3 text-[28px] font-extrabold leading-tight tracking-tight">{{ $hoy['rutina']->titulo }}</p>
                <p class="mt-1 text-green-50">{{ $hoy['rutina']->duracion_min }} min @if ($hoy['rutina']->tieneGuia()) · {{ __('app.ejercicio.guiada_voz') }} @endif</p>
                <span class="mt-5 inline-flex items-center gap-2 rounded-2xl bg-white px-5 py-3 font-bold text-green-800">
                    @if ($hoy['hecha'])
                        <x-icono nombre="check-circulo" /> {{ __('app.ejercicio.hecha') }}
                    @else
                        <x-icono nombre="play" class="h-5 w-5 fill-current" /> {{ __('app.ejercicio.empezar') }}
                    @endif
                </span>
            </a>
        @endif
    @endif

    {{-- Pasos del día --}}
    <section class="tarjeta space-y-4">
        <div class="flex items-center gap-4">
            <x-anillo :porcentaje="$porcentajePasos" :tam="104">
                <x-icono nombre="caminar" class="h-7 w-7 text-green-700" />
            </x-anillo>
            <div>
                <p class="sobretitulo">{{ __('app.ejercicio.pasos_hoy') }}</p>
                <p class="valor-grande">{{ number_format($pasosHoy) }}</p>
                <p class="text-slate-600">{{ __('app.ejercicio.de_meta_pasos', ['meta' => number_format($metaPasos)]) }}</p>
            </div>
        </div>

        <form method="POST" action="{{ route('ejercicio.pasos') }}" class="grid grid-cols-3 gap-2">
            @csrf
            <input type="hidden" name="modo" value="sumar">
            @foreach ([500, 1000, 2000] as $cantidad)
                <button type="submit" name="pasos" value="{{ $cantidad }}"
                        class="min-h-[56px] rounded-2xl bg-green-50 font-semibold text-green-900 ring-1 ring-green-100 hover:bg-green-100">+{{ number_format($cantidad) }}</button>
            @endforeach
        </form>

        <details class="rounded-2xl ring-1 ring-slate-200">
            <summary class="flex min-h-[56px] cursor-pointer items-center gap-2 px-4 font-semibold"><x-icono nombre="celular" class="h-5 w-5" /> {{ __('app.ejercicio.escribir_total') }}</summary>
            <form method="POST" action="{{ route('ejercicio.pasos') }}" class="flex items-end gap-2 p-3 pt-0">
                @csrf
                <input type="hidden" name="modo" value="total">
                <div class="flex-1">
                    <x-campo name="pasos" type="number" :label="__('app.ejercicio.total_celular')" :value="$pasosHoy ?: null" min="0" max="100000" inputmode="numeric" />
                </div>
                <button type="submit" class="min-h-[56px] rounded-2xl bg-green-600 px-5 font-semibold text-white">{{ __('app.comun.guardar_corto') }}</button>
            </form>
        </details>

        <div>
            <p class="mb-2 flex justify-between text-sm text-slate-600">
                <span>{{ __('app.ejercicio.ultimos_14') }}</span>
                <span>{{ __('app.ejercicio.semana_total', ['n' => number_format($pasosSemana)]) }}</span>
            </p>
            <div class="h-44">
                <canvas data-grafica="{{ json_encode(['tipo' => 'bar', 'titulo' => __('app.ejercicio.pasos'), 'unidad' => ''] + $graficaPasos) }}"
                        role="img" aria-label="{{ __('app.ejercicio.ultimos_14') }}"></canvas>
            </div>
        </div>
    </section>

    {{-- Mi semana --}}
    <section class="tarjeta space-y-3">
        <div class="flex items-center justify-between gap-3">
            <div>
                <h2>{{ __('app.ejercicio.mi_semana') }}</h2>
                <p class="text-slate-600">{{ __('app.ejercicio.de_meta', ['hechas' => $hechas, 'meta' => $meta]) }}</p>
            </div>
            <a href="{{ route('ejercicio.plan') }}" class="chip min-h-[44px] px-4">{{ __('app.ejercicio.editar_plan') }}</a>
        </div>
        <div class="barra"><div class="barra-relleno" style="width: {{ $meta ? min(100, round($hechas / $meta * 100)) : 0 }}%"></div></div>
        <ul class="space-y-2">
            @foreach ($semana as $d)
                <li>
                    <a href="{{ $d['rutina'] ? route('ejercicio.show', $d['rutina']) : '#' }}"
                       @class(['flex min-h-[60px] items-center gap-3 rounded-2xl p-3', 'bg-green-50 ring-2 ring-green-600' => $d['dia']->isToday(), 'bg-slate-50' => ! $d['dia']->isToday()])>
                        <span class="w-14 shrink-0 font-bold">{{ __('app.dias_cortos.'.$d['dia']->dayOfWeek) }} {{ $d['dia']->day }}</span>
                        <x-icono :nombre="Rutina::ICONOS[$d['actividad']] ?? 'actividad'" class="h-5 w-5 text-green-700" />
                        <span class="flex-1 leading-snug">
                            <span class="block font-semibold">{{ __('app.ejercicio.actividades.'.$d['actividad']) }}</span>
                            @if ($d['actividad'] === 'caminata' && $d['pasos'])
                                <span class="text-sm text-slate-600">{{ number_format($d['pasos']) }} {{ __('app.ejercicio.pasos_min') }}</span>
                            @elseif ($d['rutina'])
                                <span class="text-sm text-slate-600">{{ $d['rutina']->titulo }}</span>
                            @endif
                        </span>
                        @if ($d['hecha'])
                            <x-icono nombre="check-circulo" class="h-7 w-7 text-green-600" />
                        @endif
                    </a>
                </li>
            @endforeach
        </ul>
    </section>

    {{-- Programa de yoga de 7 días --}}
    @if ($programaYoga->isNotEmpty())
        <section class="tarjeta space-y-3">
            <h2 class="flex items-center gap-3"><span class="icono-caja"><x-icono nombre="yoga" /></span> {{ __('app.ejercicio.yoga_7') }}</h2>
            <p class="text-slate-600">{{ __('app.ejercicio.yoga_7_texto') }}</p>
            <ul class="space-y-2">
                @foreach ($programaYoga as $rutina)
                    @php $esHoy = $rutina->dia_programa === today()->isoWeekday(); @endphp
                    <li>
                        <a href="{{ route('ejercicio.show', $rutina) }}"
                           @class(['flex min-h-[60px] items-center gap-3 rounded-2xl p-3', 'bg-green-50 ring-2 ring-green-600' => $esHoy, 'bg-slate-50' => ! $esHoy])>
                            <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-white font-bold text-green-700 ring-1 ring-green-100">{{ $rutina->dia_programa }}</span>
                            <span class="flex-1 font-semibold leading-snug">{{ \Illuminate\Support\Str::after($rutina->titulo, '· ') }}</span>
                            @if (in_array($rutina->dia_programa, $yogaHecho, true))
                                <x-icono nombre="check-circulo" class="h-7 w-7 text-green-600" />
                            @else
                                <x-icono nombre="flecha" class="h-5 w-5 text-slate-400" />
                            @endif
                        </a>
                    </li>
                @endforeach
            </ul>
        </section>
    @endif

    {{-- Más rutinas --}}
    <section class="space-y-3">
        <h2>{{ __('app.ejercicio.todas') }}</h2>
        @foreach ($otrasRutinas as $rutina)
            <a href="{{ route('ejercicio.show', $rutina) }}" class="tarjeta flex min-h-[84px] items-center gap-4">
                <span class="icono-caja h-14 w-14"><x-icono :nombre="Rutina::ICONOS[$rutina->tipo] ?? 'actividad'" class="h-7 w-7" /></span>
                <span class="flex-1">
                    <span class="block text-lg font-bold leading-snug">{{ $rutina->titulo }}</span>
                    <span class="text-slate-600">{{ __('app.ejercicio.tipos.'.$rutina->tipo) }} · {{ $rutina->duracion_min }} min</span>
                    @if ($rutina->pasos_count)
                        <span class="chip ml-1 bg-green-50 text-green-800"><x-icono nombre="voz" class="h-4 w-4" /> {{ __('app.ejercicio.guiada') }}</span>
                    @endif
                </span>
                <span class="flex h-11 w-11 items-center justify-center rounded-full bg-green-600 text-white"><x-icono nombre="play" class="h-5 w-5 fill-current" /></span>
            </a>
        @endforeach
    </section>

    <p class="text-center text-slate-600">{{ __('app.ejercicio.aviso') }}</p>

    @vite('resources/js/graficas.js')
</x-layouts.app>