@extends('layouts.app')

@section('title', 'Il mio profilo - FranCoach')

@section('content')
    <div class="profile-page">
        <div class="dashboard-heading">
            <div>
                <x-breadcrumbs :items="[
                    ['label' => 'Dashboard', 'url' => route('athlete.dashboard')],
                    ['label' => 'Profilo'],
                ]" />
                <h1>Il mio profilo</h1>
                <p>Dati personali e informazioni del tuo percorso.</p>
            </div>
        </div>

        <section class="profile-identity card-francoach" aria-labelledby="profile-name">
            <div class="profile-identity__avatar">
                @if ($athlete->avatar_path)
                    <img src="{{ asset('storage/'.$athlete->avatar_path) }}" alt="Foto profilo di {{ $athlete->displayName() }}">
                @else
                    <span class="avatar-fallback">{{ francoach_initials($athlete->displayName()) }}</span>
                @endif
            </div>
            <div>
                <span class="badge rounded-pill text-bg-primary">Atleta</span>
                <h2 id="profile-name">{{ $athlete->displayName() }}</h2>
                <p>{{ $athlete->email }}{{ $athlete->phone ? ' · '.$athlete->phone : '' }}</p>
            </div>
            <dl>
                <div>
                    <dt>Inizio percorso</dt>
                    <dd>{{ $profile->started_coaching_on?->isoFormat('D MMM YYYY') ?? 'Non indicato' }}</dd>
                </div>
                <div>
                    <dt>Obiettivo principale</dt>
                    <dd>{{ $goals->firstWhere('is_primary', true)?->title ?? 'Non definito' }}</dd>
                </div>
                <div>
                    <dt>Esperienza</dt>
                    <dd>{{ $profile->experience_level?->label() ?? 'Non indicata' }}</dd>
                </div>
            </dl>
        </section>

        <nav class="profile-section-nav" aria-label="Sezioni profilo">
            <a href="#appearance">Aspetto</a>
            <a href="#personal">Dati personali</a>
            <a href="#goals">Obiettivi</a>
            <a href="#experience">Esperienza</a>
            <a href="#availability">Disponibilità</a>
            <a href="#equipment">Attrezzatura</a>
            <a href="#limitations">Limitazioni</a>
        </nav>

        <div class="row g-3 align-items-start">
            <div class="col-12 col-xl-7">
                <div id="appearance" class="mb-3">
                    <x-theme-settings :theme="app(\App\Services\UserThemeService::class)->get(auth()->user())" />
                </div>
                <section id="personal" class="profile-section card-francoach" aria-labelledby="personal-title">
                    <div class="profile-section__header">
                        <div>
                            <span class="dashboard-card__eyebrow">Modificabile</span>
                            <h2 id="personal-title">Dati personali e contatti</h2>
                        </div>
                        <span class="dashboard-card__icon"><i class="bi bi-person" aria-hidden="true"></i></span>
                    </div>
                    <form method="POST" action="{{ route('athlete.profile.update') }}" class="row g-3">
                        @csrf
                        @method('PUT')
                        <div class="col-md-6">
                            <label for="athlete-first-name" class="form-label">Nome</label>
                            <input id="athlete-first-name" name="first_name" class="form-control" required maxlength="100"
                                   value="{{ old('first_name', $athlete->first_name) }}">
                        </div>
                        <div class="col-md-6">
                            <label for="athlete-last-name" class="form-label">Cognome</label>
                            <input id="athlete-last-name" name="last_name" class="form-control" required maxlength="100"
                                   value="{{ old('last_name', $athlete->last_name) }}">
                        </div>
                        <div class="col-md-7">
                            <label for="athlete-email" class="form-label">Email</label>
                            <input id="athlete-email" name="email" type="email" class="form-control" required
                                   value="{{ old('email', $athlete->email) }}">
                        </div>
                        <div class="col-md-5">
                            <label for="athlete-phone" class="form-label">Telefono</label>
                            <input id="athlete-phone" name="phone" class="form-control" maxlength="30"
                                   value="{{ old('phone', $athlete->phone) }}">
                        </div>
                        <div class="col-md-4">
                            <label for="athlete-birth-date" class="form-label">Data di nascita</label>
                            <input id="athlete-birth-date" name="date_of_birth" type="date" class="form-control"
                                   value="{{ old('date_of_birth', $athlete->date_of_birth?->format('Y-m-d')) }}">
                        </div>
                        <div class="col-md-4">
                            <label for="athlete-gender" class="form-label">Sesso</label>
                            <select id="athlete-gender" name="gender" class="form-select">
                                <option value="">Non specificato</option>
                                @foreach ($options['genders'] as $gender)
                                    <option value="{{ $gender->value }}" @selected(old('gender', $athlete->gender?->value) === $gender->value)>
                                        {{ $gender->label() }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="athlete-height" class="form-label">Altezza (cm)</label>
                            <input id="athlete-height" name="height_cm" type="number" step="0.1" min="80" max="250" class="form-control"
                                   value="{{ old('height_cm', $athlete->height_cm) }}">
                        </div>
                        <div class="col-12 text-end">
                            <button type="submit" class="btn btn-primary">Salva modifiche</button>
                        </div>
                    </form>
                    <p class="profile-permission-note">
                        Ruolo, stato, dati operativi, limitazioni e attrezzatura sono gestiti dal coach.
                    </p>
                </section>

                <section id="goals" class="profile-section card-francoach" aria-labelledby="goals-title">
                    <div class="profile-section__header">
                        <div>
                            <span class="dashboard-card__eyebrow">Percorso</span>
                            <h2 id="goals-title">Obiettivi</h2>
                        </div>
                        <span class="dashboard-card__icon"><i class="bi bi-bullseye" aria-hidden="true"></i></span>
                    </div>
                    <div class="readonly-card-list">
                        @forelse ($goals as $goal)
                            <article>
                                <div>
                                    @if ($goal->is_primary)
                                        <span class="badge rounded-pill text-bg-primary">Principale</span>
                                    @endif
                                    <span class="badge rounded-pill text-bg-light">{{ $goal->status->label() }}</span>
                                </div>
                                <h3>{{ $goal->title }}</h3>
                                <p>{{ $goal->goal_type->label() }}</p>
                                @if ($goal->target_date)
                                    <small>Scadenza: {{ $goal->target_date->isoFormat('D MMM YYYY') }}</small>
                                @endif
                            </article>
                        @empty
                            <x-empty-state icon="bi-bullseye" title="Nessun obiettivo definito" />
                        @endforelse
                    </div>
                </section>
            </div>

            <div class="col-12 col-xl-5">
                <section id="experience" class="profile-section card-francoach" aria-labelledby="experience-title">
                    <div class="profile-section__header">
                        <div>
                            <span class="dashboard-card__eyebrow">Contesto</span>
                            <h2 id="experience-title">Esperienza</h2>
                        </div>
                        <span class="dashboard-card__icon"><i class="bi bi-stars" aria-hidden="true"></i></span>
                    </div>
                    <dl class="profile-data-list">
                        <div><dt>Professione</dt><dd>{{ $profile->profession ?? 'Non indicata' }}</dd></div>
                        <div><dt>Esperienza</dt><dd>{{ $profile->experience_level?->label() ?? 'Non indicata' }}</dd></div>
                        <div><dt>Attività</dt><dd>{{ $profile->activity_level?->label() ?? 'Non indicata' }}</dd></div>
                        <div><dt>Peso iniziale</dt><dd>{{ $profile->initial_weight_kg ? number_format((float) $profile->initial_weight_kg, 1, ',', '.').' kg' : 'Non indicato' }}</dd></div>
                    </dl>
                    @if ($profile->preferences)
                        <div class="profile-readonly-copy">
                            <strong>Preferenze</strong>
                            <p>{{ $profile->preferences }}</p>
                        </div>
                    @endif
                </section>

                <section id="availability" class="profile-section card-francoach" aria-labelledby="availability-title">
                    <div class="profile-section__header">
                        <div>
                            <span class="dashboard-card__eyebrow">Organizzazione</span>
                            <h2 id="availability-title">Disponibilità</h2>
                        </div>
                        <span class="dashboard-card__icon"><i class="bi bi-calendar-week" aria-hidden="true"></i></span>
                    </div>
                    <dl class="profile-data-list">
                        <div><dt>Luogo</dt><dd>{{ $profile->training_location ?? 'Non indicato' }}</dd></div>
                        <div><dt>Durata media</dt><dd>{{ $profile->average_workout_minutes ? $profile->average_workout_minutes.' minuti' : 'Non indicata' }}</dd></div>
                    </dl>
                    @if ($profile->available_days)
                        <div class="day-picker day-picker--readonly">
                            @foreach ($profile->available_days as $day)
                                <span>{{ mb_substr($options['days'][$day], 0, 3) }}</span>
                            @endforeach
                        </div>
                    @else
                        <x-empty-state icon="bi-calendar-x" title="Giorni non indicati" />
                    @endif
                </section>

                <section id="equipment" class="profile-section card-francoach" aria-labelledby="equipment-title">
                    <div class="profile-section__header">
                        <div>
                            <span class="dashboard-card__eyebrow">Allenamento</span>
                            <h2 id="equipment-title">Attrezzatura</h2>
                        </div>
                        <span class="dashboard-card__icon"><i class="bi bi-tools" aria-hidden="true"></i></span>
                    </div>
                    <div class="tag-list">
                        @forelse ($equipment as $item)
                            <span><i class="bi bi-check2" aria-hidden="true"></i>{{ $item->name }}</span>
                        @empty
                            <x-empty-state icon="bi-tools" title="Nessuna attrezzatura indicata" />
                        @endforelse
                    </div>
                </section>

                <section id="limitations" class="profile-section card-francoach" aria-labelledby="limitations-title">
                    <div class="profile-section__header">
                        <div>
                            <span class="dashboard-card__eyebrow">Informazioni del coach</span>
                            <h2 id="limitations-title">Limitazioni</h2>
                        </div>
                        <span class="dashboard-card__icon"><i class="bi bi-shield-exclamation" aria-hidden="true"></i></span>
                    </div>
                    <div class="readonly-card-list">
                        @forelse ($limitations as $limitation)
                            <article>
                                <div>
                                    <span class="badge rounded-pill {{ $limitation->status->value === 'active' ? 'text-bg-warning' : 'text-bg-success' }}">
                                        {{ $limitation->status->label() }}
                                    </span>
                                </div>
                                <h3>{{ $limitation->title }}</h3>
                                <p>{{ $limitation->description ?: $limitation->severity->label() }}</p>
                            </article>
                        @empty
                            <x-empty-state icon="bi-shield-check" title="Nessuna limitazione attiva" />
                        @endforelse
                    </div>
                </section>
            </div>
        </div>
    </div>
@endsection