{{--
    Card variazione energetica: genera una NUOVA dieta assistita via Gemini
    scalando solo le quantità. Richiede dal componente il trait VariazioneEnergiaAssistita.
    Supporta input kcal assolute e slider delta, sincronizzati.
--}}
@php
    $kcalMinService = \App\Services\PianoAlimentareVariazioneEnergiaService::KCAL_MIN;
    $deltaMinService = \App\Services\PianoAlimentareVariazioneEnergiaService::DELTA_MIN;
    $deltaMaxService = \App\Services\PianoAlimentareVariazioneEnergiaService::DELTA_MAX;
    $anteprima = $this->anteprimaVariazioneEnergia;
    $delta = (int) ($deltaKcalVariazione ?? 0);
    $kcalAttuali = (int) ($anteprima['kcal_medie_attuali'] ?? 0);
    $kcalTarget = (int) ($kcalTargetVariazione ?: ($anteprima['kcal_medie_target'] ?? 0) ?: ($kcalAttuali + $delta));
    $haCrediti = (bool) $this->haCreditiVariazioneEnergia;
    $crediti = (int) $this->creditiVariazioneEnergia;
    $kcalMinInput = $kcalAttuali > 0
        ? max($kcalMinService, $kcalAttuali + $deltaMinService)
        : $kcalMinService;
    $kcalMaxInput = $kcalAttuali > 0
        ? $kcalAttuali + $deltaMaxService
        : $deltaMaxService;
@endphp

<div class="card card-outline card-primary mb-3"
     wire:key="variazione-energia-card"
     wire:init="sincronizzaKcalTargetIniziale">
    <div class="card-header py-2">
        <h3 class="card-title mb-0">
            <i class="fas fa-balance-scale mr-1"></i>
            Variazione energia (nuova dieta)
        </h3>
    </div>
    <div class="card-body">
        <p class="small text-muted mb-3">
            Digita il nuovo apporto calorico oppure usa lo slider: verrà creata una <strong>nuova dieta</strong>
            con le stesse pietanze e quantità aggiornate tramite AI. Il piano attuale resta invariato.
            Costo: <strong>{{ $crediti }}</strong> {{ $crediti === 1 ? 'credito' : 'crediti' }}.
        </p>

        @unless($haCrediti)
            <div class="alert alert-warning py-2 small">
                <i class="fas fa-ban mr-1"></i>
                Crediti insufficienti: la generazione della nuova dieta non è disponibile.
            </div>
        @endunless

        <div class="border rounded p-2 p-md-3 bg-light">
            <div class="d-flex flex-wrap justify-content-between align-items-end gap-2 mb-3">
                <div class="form-group mb-0" style="min-width: 11rem; max-width: 14rem;">
                    <label for="kcalTargetVariazione" class="form-label small fw-semibold mb-1">
                        Nuovo apporto (kcal / giorno)
                    </label>
                    <div class="input-group input-group-sm">
                        <input type="number"
                               id="kcalTargetVariazione"
                               class="form-control"
                               min="{{ $kcalMinInput }}"
                               max="{{ $kcalMaxInput }}"
                               step="10"
                               wire:model.live.debounce.400ms="kcalTargetVariazione"
                               @disabled(!$haCrediti)
                               aria-describedby="kcalTargetVariazioneHelp">
                        <div class="input-group-append">
                            <span class="input-group-text">kcal</span>
                        </div>
                    </div>
                    <small id="kcalTargetVariazioneHelp" class="text-muted">
                        @if($kcalAttuali > 0)
                            Attuale: {{ $kcalAttuali }} kcal medie (range {{ $kcalMinInput }}–{{ $kcalMaxInput }})
                        @else
                            Range consentito rispetto alle kcal medie del piano (±1000).
                        @endif
                    </small>
                </div>

                <button type="button"
                        class="btn btn-primary btn-sm"
                        wire:click="apriConfermaVariazioneEnergia"
                        wire:loading.attr="disabled"
                        wire:target="apriConfermaVariazioneEnergia,generaNuovaDietaConVariazioneEnergia"
                        @disabled(!$haCrediti || $delta === 0)
                        title="{{ $haCrediti ? 'Genera una nuova dieta con le quantità aggiornate' : 'Crediti insufficienti' }}">
                    <span wire:loading.remove wire:target="apriConfermaVariazioneEnergia,generaNuovaDietaConVariazioneEnergia">
                        <i class="fas fa-magic mr-1"></i> Genera nuova dieta
                    </span>
                    <span wire:loading wire:target="apriConfermaVariazioneEnergia,generaNuovaDietaConVariazioneEnergia">
                        Preparazione...
                    </span>
                </button>
            </div>

            <div class="w-100">
                <div class="d-flex justify-content-between align-items-center mb-1">
                    <label class="form-label small fw-semibold mb-0">Delta energia (kcal / giorno)</label>
                    <span class="small text-muted">
                        <strong>{{ $kcalTarget }} kcal/giorno</strong>
                        ({{ $delta >= 0 ? '+' : '' }}{{ $delta }})
                    </span>
                </div>
                <input type="range"
                       min="-1000"
                       max="1000"
                       step="10"
                       class="form-range delta-energia-slider"
                       wire:model.live="deltaKcalVariazione"
                       @disabled(!$haCrediti)>
                <div class="d-flex justify-content-between small text-muted">
                    <span>-1000</span>
                    <span class="text-center">
                        @if($kcalAttuali > 0)
                            da {{ $kcalAttuali }} kcal medie
                        @else
                            —
                        @endif
                    </span>
                    <span>+1000</span>
                </div>
            </div>
            <small class="text-muted d-block mt-2">
                Gemini modifica solo le quantità (grammi/porzioni) di principale e alternative su tutti i giorni; i nomi degli alimenti restano invariati.
            </small>
        </div>
    </div>
</div>

{{-- Modale conferma / esito --}}
<div class="modal fade" id="confermaVariazioneEnergiaModal" tabindex="-1" role="dialog"
     aria-labelledby="confermaVariazioneEnergiaModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confermaVariazioneEnergiaModalLabel">
                    @if($variazioneEnergiaRiuscita)
                        <i class="fas fa-check-circle text-success mr-2"></i>
                        Nuova dieta pronta
                    @else
                        <i class="fas fa-balance-scale mr-2"></i>
                        Genera nuova dieta
                    @endif
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Chiudi">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                @if($variazioneEnergiaRiuscita)
                    <div class="alert alert-success">
                        <i class="fas fa-check-circle mr-1"></i>
                        Nuova dieta generata con le quantità aggiornate.
                    </div>
                    <p class="mb-2">
                        Verrai reindirizzato automaticamente al nuovo piano.
                        Se il redirect non parte, usa il pulsante qui sotto.
                    </p>
                    @if($urlPianoVariazioneEnergia)
                        <a href="{{ $urlPianoVariazioneEnergia }}" class="btn btn-success btn-block">
                            <i class="fas fa-external-link-alt mr-1"></i>
                            Apri la nuova dieta
                        </a>
                    @endif
                @else
                    <p class="mb-2">
                        Verrà creata una <strong>nuova dieta</strong> a circa
                        <strong>{{ $kcalTarget }} kcal/giorno</strong>
                        (delta <strong>{{ $delta >= 0 ? '+' : '' }}{{ $delta }} kcal</strong>
                        @if($kcalAttuali > 0)
                            rispetto a {{ $kcalAttuali }} kcal medie
                        @endif
                        ).
                    </p>
                    <p class="mb-2 small text-muted">
                        Solo le quantità degli alimenti verranno aggiornate; i nomi restano gli stessi.
                        Il piano attuale non verrà modificato.
                    </p>
                    <div class="alert alert-info mb-0">
                        <i class="fas fa-coins mr-1"></i>
                        L'operazione consuma <strong>{{ $crediti }}</strong>
                        {{ $crediti === 1 ? 'credito' : 'crediti' }}.
                    </div>
                @endif
            </div>
            <div class="modal-footer">
                @if($variazioneEnergiaRiuscita)
                    @if($urlPianoVariazioneEnergia)
                        <a href="{{ $urlPianoVariazioneEnergia }}" class="btn btn-success">
                            <i class="fas fa-arrow-right mr-1"></i> Vai al nuovo piano
                        </a>
                    @endif
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Chiudi</button>
                @else
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="fas fa-times mr-1"></i> Annulla
                    </button>
                    <button type="button"
                            class="btn btn-primary"
                            wire:click="generaNuovaDietaConVariazioneEnergia"
                            wire:loading.attr="disabled"
                            wire:target="generaNuovaDietaConVariazioneEnergia">
                        <i class="fas fa-check mr-1"></i> Sì, genera nuova dieta
                    </button>
                @endif
            </div>
        </div>
    </div>
</div>

<div class="bozza-ricalcolo-overlay" wire:loading.flex wire:target="generaNuovaDietaConVariazioneEnergia">
    <div class="text-center text-white">
        <i class="fas fa-spinner fa-spin fa-3x mb-3"></i>
        <h5 class="mb-1">Generazione nuova dieta...</h5>
        <p class="mb-0 small">Stiamo aggiornando le quantità per il nuovo apporto calorico.</p>
    </div>
</div>

@script
<script>
    $wire.on('apri-conferma-variazione-energia', function () {
        $('#confermaVariazioneEnergiaModal').modal('show');
    });

    $wire.on('chiudi-conferma-variazione-energia', function () {
        $('#confermaVariazioneEnergiaModal').modal('hide');
        $('body').removeClass('modal-open');
        $('.modal-backdrop').remove();
    });

    $wire.on('mostra-esito-variazione-energia', function () {
        setTimeout(function () {
            $('#confermaVariazioneEnergiaModal').modal('show');
        }, 50);
    });
</script>
@endscript