@extends('layouts.app')

@section('title', 'Dashboard Atleta - FranCoach')

@section('content')
<div class="dashboard-page">
    <div class="dashboard-heading">
        <div>
            <x-breadcrumbs :items="[['label' => 'Dashboard']]" />
            <h1>{{ $dashboard['greeting'] }}</h1>
            <p>Allenamento, alimentazione e aggiornamenti in un’unica vista.</p>
        </div>
        <span class="dashboard-heading__date">
            <i class="bi bi-calendar3" aria-hidden="true"></i>
            {{ now()->isoFormat('dddd D MMMM') }}
        </span>
    </div>

    @if($access->status === 'grace_period' || ($access->remainingDays !== null && $access->remainingDays <= 7))
        <div class="alert alert-warning d-flex justify-content-between align-items-center gap-3" role="status">
            <span>
                @if($access->status === 'grace_period')
                    Il tuo accesso è nel periodo di tolleranza fino al {{ francoach_format_date($access->gracePeriodEnd) }}.
                @elseif($access->remainingDays === 1)
                    Il tuo accesso scade domani.
                @else
                    Il tuo accesso scade tra {{ $access->remainingDays }} giorni.
                @endif
            </span>
            <a href="{{ route('athlete.subscription.show') }}" class="btn btn-sm btn-outline-dark">Dettagli</a>
        </div>
    @endif

    <section class="mb-4" aria-labelledby="plan-progress-title">
        <div class="d-flex flex-wrap justify-content-between align-items-end gap-2 mb-3">
            <div>
                <span class="dashboard-card__eyebrow">Piano di allenamento</span>
                <h2 class="h4 mb-0" id="plan-progress-title">{{ $dashboard['activePlan']['name'] ?? 'Nessun piano attivo' }}</h2>
            </div>
            @if ($dashboard['activePlan'])
                <a href="{{ route('athlete.plans.show') }}" class="btn btn-sm btn-outline-primary">Apri piano</a>
            @endif
        </div>
        <div class="row g-3">
            <div class="col-6 col-lg-4">
                <x-dashboard-stat
                    label="Workout completati"
                    :value="$dashboard['planProgress']['completed'].' / '.$dashboard['planProgress']['total']"
                    icon="bi-check2-circle"
                    tone="success"
                    detail="Sul totale del piano" />
            </div>
            <div class="col-6 col-lg-4">
                <x-dashboard-stat
                    label="Da completare"
                    :value="$dashboard['planProgress']['remaining']"
                    icon="bi-hourglass-split"
                    tone="warning"
                    detail="Workout rimanenti" />
            </div>
            <div class="col-12 col-lg-4">
                <x-dashboard-stat
                    label="Avanzamento"
                    :value="is_null($dashboard['planProgress']['percent']) ? '—' : $dashboard['planProgress']['percent'].'%'"
                    icon="bi-bullseye"
                    tone="primary"
                    :detail="$dashboard['planProgress']['total'] ? 'Aggiornato agli allenamenti conclusi' : 'Nessun workout pianificato'" />
            </div>
        </div>
    </section>

    <div class="row g-3 mb-4">
        <div class="col-12 col-xl-8">
            <section class="athlete-hero h-100" aria-labelledby="featured-workout-title">
                <div class="athlete-hero__content">
                    @if ($dashboard['featuredWorkout'])
                        <span class="athlete-hero__eyebrow">{{ $dashboard['featuredWorkout']['eyebrow'] }}</span>
                        <h2 id="featured-workout-title">{{ $dashboard['featuredWorkout']['name'] }}</h2>
                        <p class="text-capitalize">{{ $dashboard['featuredWorkout']['date'] }} · {{ $dashboard['featuredWorkout']['status'] }}</p>
                        <a href="{{ $dashboard['featuredWorkout']['url'] }}" class="btn btn-primary rounded-pill px-4">
                            <i class="bi bi-play-fill me-1" aria-hidden="true"></i>Apri workout
                        </a>
                    @else
                        <span class="athlete-hero__eyebrow">Workout</span>
                        <h2 id="featured-workout-title">Nessun allenamento da svolgere</h2>
                        <p>Non risultano altri workout pianificati nel piano attivo.</p>
                        <a href="{{ route('athlete.plans.show') }}" class="btn btn-outline-light rounded-pill px-4">Consulta il piano</a>
                    @endif
                </div>
                <span class="athlete-hero__graphic" aria-hidden="true"><i class="bi bi-lightning-charge-fill"></i></span>
            </section>
        </div>
        <div class="col-12 col-xl-4">
            <section class="dashboard-card card-francoach h-100" aria-labelledby="active-plan-title">
                <div class="dashboard-card__header">
                    <div>
                        <span class="dashboard-card__eyebrow">Scheda attiva</span>
                        <h2 id="active-plan-title">Il mio piano</h2>
                    </div>
                    <span class="dashboard-card__icon"><i class="bi bi-journal-check" aria-hidden="true"></i></span>
                </div>
                @if ($dashboard['activePlan'])
                    <strong class="d-block fs-5 mb-2">{{ $dashboard['activePlan']['name'] }}</strong>
                    <p class="text-body-secondary mb-3">{{ $dashboard['activePlan']['description'] ?: 'Versione '.$dashboard['activePlan']['version'].' attiva dal '.$dashboard['activePlan']['startDate'] }}</p>
                    @if ($dashboard['planProgress']['total'])
                        <div class="progress" role="progressbar" aria-label="Avanzamento piano" aria-valuenow="{{ $dashboard['planProgress']['percent'] }}" aria-valuemin="0" aria-valuemax="100">
                            <div class="progress-bar" style="width: {{ $dashboard['planProgress']['percent'] }}%"></div>
                        </div>
                    @endif
                @else
                    <x-empty-state icon="bi-journal-x" title="Nessuna scheda attiva" message="Il coach non ha ancora assegnato un piano." />
                @endif
            </section>
        </div>
    </div>

    <div class="row g-3">
        <div class="col-12 col-xl-8">
            <section class="dashboard-card card-francoach h-100" aria-labelledby="nutrition-today-title">
                <div class="dashboard-card__header">
                    <div>
                        <span class="dashboard-card__eyebrow">Piano alimentare</span>
                        <h2 id="nutrition-today-title">
                            {{ $dashboard['nutrition'] ? $dashboard['nutrition']['dateLabel'].' · '.$dashboard['nutrition']['dayTitle'] : 'Alimentazione del giorno' }}
                        </h2>
                    </div>
                    @if ($dashboard['nutrition'])
                        <a href="{{ $dashboard['nutrition']['url'] }}" class="btn btn-sm btn-outline-primary">Vedi giornata</a>
                    @endif
                </div>
                @if ($dashboard['nutrition'])
                    <p class="text-body-secondary">{{ $dashboard['nutrition']['planName'] }}</p>
                    <div class="list-group list-group-flush rounded-4 overflow-hidden">
                        @forelse ($dashboard['nutrition']['meals'] as $meal)
                            <div class="list-group-item bg-transparent d-flex justify-content-between align-items-start gap-3 px-0 py-3">
                                <span>
                                    <strong class="d-block">{{ $meal['title'] }}</strong>
                                    @if ($meal['summary'])<small class="text-body-secondary">{{ $meal['summary'] }}</small>@endif
                                </span>
                                @if ($meal['time'])<span class="badge text-bg-light">{{ $meal['time'] }}</span>@endif
                            </div>
                        @empty
                            <x-empty-state icon="bi-cup-hot" title="Nessun altro pasto previsto" />
                        @endforelse
                    </div>
                @else
                    <x-empty-state icon="bi-clipboard2-heart" title="Nessun piano alimentare attivo" message="Il piano comparirà appena sarà assegnato dal coach." />
                @endif
            </section>
        </div>

        <div class="col-12 col-xl-4">
            <section class="dashboard-card card-francoach h-100" aria-labelledby="notifications-title">
                <div class="dashboard-card__header">
                    <div>
                        <span class="dashboard-card__eyebrow">Aggiornamenti</span>
                        <h2 id="notifications-title">Ultime notifiche</h2>
                    </div>
                    @if ($dashboard['notifications']['unreadCount'])
                        <span class="badge rounded-pill text-bg-primary">{{ $dashboard['notifications']['unreadCount'] }} nuove</span>
                    @endif
                </div>
                @forelse ($dashboard['notifications']['items'] as $notification)
                    <article class="notification-preview {{ $notification['isUnread'] ? 'is-unread' : '' }}">
                        <strong>{{ $notification['title'] }}</strong>
                        @if ($notification['body'])<p>{{ $notification['body'] }}</p>@endif
                        <small>{{ $notification['date'] }}</small>
                    </article>
                @empty
                    <x-empty-state icon="bi-bell-slash" title="Nessuna notifica" />
                @endforelse
                <a href="{{ route('notifications.index') }}" class="btn btn-link px-0 mt-2">Vedi tutte</a>
            </section>
        </div>
    </div>
</div>
@endsection