@php
    use App\Filament\Admin\Pages\Assistant;
    use App\Services\AI\AssistantService;
    use App\Support\AssistantMarkdown;

    $messages = $this->messages();
    $conversations = $this->conversations();
    $favoris = $this->favoris();
    $rebonds = $this->rebonds();
    $modeAnalyse = $this->mode === AssistantService::MODE_ANALYSE;
@endphp

<x-filament-panels::page>
    {{-- Assistant interne IA en lecture seule (Prompt 26 §4, écran refondu v1.5 §6). --}}
    <div
        class="socle-assistant mx-auto flex w-full max-w-3xl flex-col gap-4"
        x-data="assistantSocle(@js(route('assistant.progression', ['run' => 'RUNID'])))"
        x-on:assistant-repondu.window="auDernierMessage()"
    >
        {{-- ─────────── Barre : conversations, mode, nouvelle conversation ─────────── --}}
        <div class="flex flex-wrap items-center gap-2">
            <button
                type="button"
                wire:click="$toggle('listeConversationsOuverte')"
                class="socle-chip"
                aria-expanded="{{ $listeConversationsOuverte ? 'true' : 'false' }}"
            >
                <x-filament::icon icon="heroicon-o-chat-bubble-left-right" class="h-4 w-4" />
                <span>{{ __('ai.assistant.conversations') }}</span>
                <span class="tabular-nums opacity-60">({{ $conversations->count() }})</span>
            </button>

            <button type="button" wire:click="nouvelleConversation" class="socle-chip">
                <x-filament::icon icon="heroicon-o-plus" class="h-4 w-4" />
                <span>{{ __('ai.assistant.nouvelle') }}</span>
            </button>

            <button
                type="button"
                wire:click="basculerMode"
                @class(['socle-chip', 'socle-chip--actif' => $modeAnalyse])
                aria-pressed="{{ $modeAnalyse ? 'true' : 'false' }}"
            >
                <x-filament::icon icon="heroicon-o-presentation-chart-line" class="h-4 w-4" />
                <span>{{ __('ai.assistant.mode_analyse') }}</span>
            </button>

            @if ($this->conversationId)
                <a
                    href="{{ route('assistant.conversation-pdf', ['conversation' => $this->conversationId]) }}"
                    class="socle-chip"
                >
                    <x-filament::icon icon="heroicon-o-arrow-down-tray" class="h-4 w-4" />
                    <span>{{ __('ai.assistant.export_pdf') }}</span>
                </a>
            @endif
        </div>

        @if ($listeConversationsOuverte)
            <div class="socle-carte divide-y divide-gray-100 p-0 dark:divide-white/10">
                @forelse ($conversations as $conv)
                    <div class="flex items-center gap-2 px-3 py-2">
                        <button
                            type="button"
                            wire:click="ouvrirConversation({{ $conv->id }})"
                            @class([
                                'min-w-0 flex-1 truncate text-left text-sm',
                                'font-semibold text-primary-700 dark:text-primary-300' => $conv->id === $this->conversationId,
                                'text-gray-700 dark:text-gray-200' => $conv->id !== $this->conversationId,
                            ])
                        >
                            {{ $conv->titreAffiche() }}
                        </button>
                        <span class="shrink-0 text-xs text-gray-400">
                            {{ optional($conv->last_message_at)->format('d/m') }}
                        </span>
                        <button
                            type="button"
                            wire:click="supprimerConversation({{ $conv->id }})"
                            wire:confirm="{{ __('ai.assistant.confirmer_suppression') }}"
                            class="shrink-0 rounded-lg p-2 text-gray-400 hover:text-danger-600"
                            aria-label="{{ __('ai.assistant.supprimer') }}"
                        >
                            <x-filament::icon icon="heroicon-o-trash" class="h-4 w-4" />
                        </button>
                    </div>
                @empty
                    <p class="px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                        {{ __('ai.assistant.aucune_conversation') }}
                    </p>
                @endforelse
            </div>
        @endif

        {{-- ─────────── Le fil ─────────── --}}
        <div class="flex flex-col gap-4" id="socle-fil">
            @forelse ($messages as $message)
                @if ($message->role === 'user')
                    <div class="flex items-start justify-end gap-2">
                        <div class="socle-bulle-question">{{ $message->content }}</div>
                        <button
                            type="button"
                            wire:click="epingler({{ $message->id }})"
                            class="mt-1 shrink-0 rounded-lg p-2 text-gray-400 hover:text-primary-600"
                            title="{{ __('ai.assistant.epingler') }}"
                            aria-label="{{ __('ai.assistant.epingler') }}"
                        >
                            <x-filament::icon icon="heroicon-o-star" class="h-4 w-4" />
                        </button>
                    </div>
                @else
                    @php
                        $chiffres = AssistantMarkdown::chiffresCles($message->content);
                        $outils = Assistant::outilsLisibles($message->tools);
                    @endphp

                    <div class="socle-carte" x-data="{ detailsOuverts: false }">
                        {{-- Les chiffres AVANT la prose : la réponse doit se lire d'un coup d'œil. --}}
                        @if (! empty($chiffres))
                            <div class="mb-3 grid grid-cols-2 gap-2 sm:grid-cols-4">
                                @foreach ($chiffres as $tuile)
                                    <div class="socle-tuile">
                                        <div class="socle-tuile__montant">{{ $tuile['montant'] }}</div>
                                        <div class="socle-tuile__libelle">{{ $tuile['libelle'] }}</div>
                                    </div>
                                @endforeach
                            </div>
                        @endif

                        {{-- Markdown rendu et ASSAINI (le contenu vient d'un modèle : jamais de HTML brut). --}}
                        <div
                            @class(['socle-md', 'socle-md--analyse' => $message->mode === 'analyse'])
                            x-ref="reponse{{ $message->id }}"
                        >{!! AssistantMarkdown::html($message->content) !!}</div>

                        <div class="mt-3 flex flex-wrap items-center gap-x-3 gap-y-2 border-t border-gray-100 pt-3 dark:border-white/10">
                            <button
                                type="button"
                                class="socle-lien"
                                x-on:click="copier($refs['reponse{{ $message->id }}'])"
                            >
                                <x-filament::icon icon="heroicon-o-clipboard-document" class="h-4 w-4" />
                                <span x-text="copie ? @js(__('ai.assistant.copie')) : @js(__('ai.assistant.copier'))">{{ __('ai.assistant.copier') }}</span>
                            </button>

                            <a href="{{ route('assistant.message-pdf', ['message' => $message->id]) }}" class="socle-lien">
                                <x-filament::icon icon="heroicon-o-document-arrow-down" class="h-4 w-4" />
                                <span>{{ __('ai.assistant.pdf') }}</span>
                            </a>

                            @if (! empty($message->tool_calls))
                                <button type="button" class="socle-lien" x-on:click="detailsOuverts = ! detailsOuverts">
                                    <x-filament::icon icon="heroicon-o-magnifying-glass" class="h-4 w-4" />
                                    <span>{{ __('ai.assistant.voir_donnees') }}</span>
                                </button>
                            @endif
                        </div>

                        @if (! empty($outils))
                            <p class="mt-2 flex flex-wrap items-center gap-x-1.5 gap-y-1 text-xs text-gray-500 dark:text-gray-400">
                                <span>{{ __('ai.assistant.tools_used') }} :</span>
                                @foreach ($outils as $outil)
                                    @if ($outil['url'])
                                        <a href="{{ $outil['url'] }}" class="socle-outil">{{ $outil['libelle'] }}</a>
                                    @else
                                        <span class="socle-outil socle-outil--muet">{{ $outil['libelle'] }}</span>
                                    @endif
                                @endforeach
                            </p>
                        @endif

                        @if (! empty($message->tool_calls))
                            <div x-show="detailsOuverts" x-cloak class="mt-3 space-y-2">
                                @foreach ($message->tool_calls as $appel)
                                    <details class="socle-detail">
                                        <summary>{{ $appel['libelle'] ?? ($appel['outil'] ?? '—') }}</summary>
                                        <div class="mt-2 space-y-2">
                                            <div>
                                                <p class="socle-detail__titre">{{ __('ai.assistant.entree') }}</p>
                                                <pre class="socle-json">{{ json_encode($appel['entree'] ?? [], JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) }}</pre>
                                            </div>
                                            <div>
                                                <p class="socle-detail__titre">{{ __('ai.assistant.sortie') }}</p>
                                                <pre class="socle-json">{{ json_encode($appel['sortie'] ?? [], JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) }}</pre>
                                            </div>
                                        </div>
                                    </details>
                                @endforeach
                            </div>
                        @endif

                        {{-- L'avertissement n'occupe plus le haut de la page : il est là où il sert. --}}
                        <p class="mt-3 text-[11px] italic text-gray-400 dark:text-gray-500">{{ __('ai.disclaimer') }}</p>
                    </div>
                @endif
            @empty
                <div class="socle-carte border-dashed text-center text-sm text-gray-500 dark:text-gray-400">
                    {{ __('ai.assistant.empty') }}
                </div>
            @endforelse

            {{-- L'erreur s'affiche DANS le fil, la question n'est pas perdue. --}}
            @if ($erreur)
                <div class="socle-carte border-danger-200 bg-danger-50/60 dark:border-danger-500/30 dark:bg-danger-500/10">
                    <p class="text-sm font-semibold text-danger-700 dark:text-danger-300">
                        {{ __('ai.assistant.echec') }}
                    </p>
                    <p class="mt-1 text-sm text-danger-700/90 dark:text-danger-200/90">{{ $erreur }}</p>
                    @if ($questionEnErreur)
                        <p class="mt-2 text-xs text-gray-600 dark:text-gray-300">
                            {{ __('ai.assistant.question_conservee') }} « {{ $questionEnErreur }} »
                        </p>
                    @endif
                    <div class="mt-3">
                        <x-filament::button size="sm" color="danger" wire:click="reessayer" wire:loading.attr="disabled">
                            {{ __('ai.assistant.reessayer') }}
                        </x-filament::button>
                    </div>
                </div>
            @endif

            {{-- Progression RÉELLE : on sait quels outils sont appelés, on le dit. --}}
            <div wire:loading.flex wire:target="submit,askSuggestion,askAnalyse,askRebond,askFavori,reessayer" class="socle-carte flex-col gap-3">
                <div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
                    <span class="socle-pulse"></span>
                    <span x-text="etapeCourante || @js(__('ai.assistant.thinking'))">{{ __('ai.assistant.thinking') }}</span>
                </div>
                <template x-if="etapes.length">
                    <ul class="space-y-1 text-xs text-gray-500 dark:text-gray-400">
                        <template x-for="(etape, i) in etapes" :key="i">
                            <li class="flex items-center gap-2">
                                <x-filament::icon icon="heroicon-o-check-circle" class="h-3.5 w-3.5 text-success-500" />
                                <span x-text="etape"></span>
                            </li>
                        </template>
                    </ul>
                </template>
                <div>
                    <x-filament::button size="xs" color="gray" wire:click="arreter" wire:loading.attr="disabled" wire:target="arreter">
                        {{ __('ai.assistant.arreter') }}
                    </x-filament::button>
                </div>
            </div>

            <div id="socle-bas-du-fil"></div>
        </div>

        {{-- ─────────── Rebonds contextuels ─────────── --}}
        @if (! empty($rebonds))
            <div class="socle-rangee" role="group" aria-label="{{ __('ai.assistant.rebonds') }}">
                @foreach ($rebonds as $rebond)
                    <button type="button" wire:click="askRebond(@js($rebond))" wire:loading.attr="disabled" class="socle-pastille">
                        {{ $rebond }}
                    </button>
                @endforeach
            </div>
        @endif

        {{-- ─────────── Favoris ─────────── --}}
        @if ($favoris->isNotEmpty())
            <div class="socle-rangee" role="group" aria-label="{{ __('ai.assistant.favoris') }}">
                @foreach ($favoris as $favori)
                    <span class="socle-pastille socle-pastille--favori">
                        <button type="button" wire:click="askFavori({{ $favori->id }})" wire:loading.attr="disabled" class="text-left">
                            {{ $favori->question }}
                        </button>
                        <button
                            type="button"
                            wire:click="retirerFavori({{ $favori->id }})"
                            class="shrink-0 opacity-60 hover:opacity-100"
                            aria-label="{{ __('ai.assistant.retirer_favori') }}"
                        >
                            <x-filament::icon icon="heroicon-o-x-mark" class="h-3.5 w-3.5" />
                        </button>
                    </span>
                @endforeach
            </div>
        @endif

        {{-- ─────────── Suggestions : toujours accessibles, repliées, par thème ─────────── --}}
        <div>
            <button
                type="button"
                wire:click="$toggle('suggestionsOuvertes')"
                class="socle-lien"
                aria-expanded="{{ $suggestionsOuvertes ? 'true' : 'false' }}"
            >
                <x-filament::icon
                    :icon="$suggestionsOuvertes ? 'heroicon-o-chevron-up' : 'heroicon-o-chevron-down'"
                    class="h-4 w-4"
                />
                <span>{{ __('ai.assistant.suggestions') }}</span>
            </button>

            @if ($suggestionsOuvertes)
                <div class="mt-2 space-y-3">
                    @if ($modeAnalyse)
                        <div>
                            <p class="socle-theme">{{ __('ai.assistant.questions_strategiques') }}</p>
                            <div class="socle-rangee">
                                @foreach (Assistant::QUESTIONS_ANALYSE as $index => $question)
                                    <button type="button" wire:click="askAnalyse({{ $index }})" wire:loading.attr="disabled" class="socle-pastille">
                                        {{ $question }}
                                    </button>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    @foreach (Assistant::SUGGESTIONS as $theme => $questions)
                        <div>
                            <p class="socle-theme">{{ $theme }}</p>
                            <div class="socle-rangee">
                                @foreach ($questions as $index => $question)
                                    <button
                                        type="button"
                                        wire:click="askSuggestion(@js($theme), {{ $index }})"
                                        wire:loading.attr="disabled"
                                        class="socle-pastille"
                                    >
                                        {{ $question }}
                                    </button>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>

        {{-- ─────────── Saisie collante ─────────── --}}
        <form
            class="socle-saisie"
            x-on:submit.prevent="lancer()"
        >
            <div class="flex items-end gap-2">
                <textarea
                    wire:model="question"
                    x-ref="champ"
                    rows="2"
                    x-on:keydown.enter.exact.prevent="lancer()"
                    x-on:focus="setTimeout(() => $el.scrollIntoView({ block: 'center', behavior: 'smooth' }), 250)"
                    placeholder="{{ $modeAnalyse ? __('ai.assistant.placeholder_analyse') : __('ai.assistant.placeholder') }}"
                    class="socle-champ"
                    aria-label="{{ __('ai.assistant.placeholder') }}"
                ></textarea>

                <button
                    type="button"
                    x-show="dicteeDisponible"
                    x-cloak
                    x-on:click="dicter()"
                    :class="dicteeEnCours ? 'socle-bouton-icone socle-bouton-icone--actif' : 'socle-bouton-icone'"
                    class="socle-bouton-icone"
                    aria-label="{{ __('ai.assistant.dicter') }}"
                    title="{{ __('ai.assistant.dicter') }}"
                >
                    <x-filament::icon icon="heroicon-o-microphone" class="h-5 w-5" />
                </button>

                <button
                    type="submit"
                    class="socle-bouton-envoi"
                    wire:loading.attr="disabled"
                    wire:target="submit,askSuggestion,askAnalyse,askRebond,askFavori,reessayer"
                    aria-label="{{ __('ai.assistant.send') }}"
                >
                    <x-filament::icon icon="heroicon-o-paper-airplane" class="h-5 w-5" />
                    <span class="hidden sm:inline">{{ __('ai.assistant.send') }}</span>
                </button>
            </div>
        </form>
    </div>

    @script
    <script>
        Alpine.data('assistantSocle', (gabaritProgression) => ({
            etapes: [],
            etapeCourante: '',
            copie: false,
            dicteeDisponible: false,
            dicteeEnCours: false,
            reconnaissance: null,
            sondage: null,

            init() {
                const Moteur = window.SpeechRecognition || window.webkitSpeechRecognition;
                // Repli silencieux : un navigateur sans reconnaissance vocale n'affiche pas le bouton.
                this.dicteeDisponible = typeof Moteur === 'function';
                this.auDernierMessage();
            },

            /** Envoi : identifiant d'exécution côté navigateur, puis sondage de la progression. */
            async lancer() {
                const runId = (crypto.randomUUID?.() ?? String(Date.now()) + '-' + Math.random().toString(36).slice(2))
                    .replace(/[^A-Za-z0-9-]/g, '');

                this.etapes = [];
                this.etapeCourante = '';
                this.sonder(runId);

                try {
                    await this.$wire.set('runId', runId, false);
                    await this.$wire.submit();
                } finally {
                    this.arreterSondage();
                }
            },

            sonder(runId) {
                this.arreterSondage();

                this.sondage = setInterval(async () => {
                    try {
                        const reponse = await fetch(gabaritProgression.replace('RUNID', runId), {
                            headers: { Accept: 'application/json' },
                        });

                        if (! reponse.ok) return;

                        const donnees = await reponse.json();
                        this.etapes = donnees.etapes ?? [];

                        if (this.etapes.length) {
                            this.etapeCourante = @js(__('ai.assistant.consultation')) + ' ' + this.etapes[this.etapes.length - 1] + '…';
                        }
                    } catch (e) {
                        // Le sondage est un confort : son échec ne doit jamais gêner la réponse.
                    }
                }, 900);
            },

            arreterSondage() {
                if (this.sondage) {
                    clearInterval(this.sondage);
                    this.sondage = null;
                }
            },

            auDernierMessage() {
                this.$nextTick(() => {
                    document.getElementById('socle-bas-du-fil')?.scrollIntoView({ behavior: 'smooth', block: 'end' });
                });
            },

            async copier(element) {
                const texte = element?.innerText ?? '';

                try {
                    await navigator.clipboard.writeText(texte);
                } catch (e) {
                    const zone = document.createElement('textarea');
                    zone.value = texte;
                    document.body.appendChild(zone);
                    zone.select();
                    document.execCommand('copy');
                    zone.remove();
                }

                this.copie = true;
                setTimeout(() => (this.copie = false), 2000);
            },

            dicter() {
                const Moteur = window.SpeechRecognition || window.webkitSpeechRecognition;

                if (typeof Moteur !== 'function') return;

                if (this.dicteeEnCours) {
                    this.reconnaissance?.stop();
                    return;
                }

                this.reconnaissance = new Moteur();
                this.reconnaissance.lang = 'fr-FR';
                this.reconnaissance.interimResults = false;
                this.reconnaissance.continuous = false;

                this.reconnaissance.onresult = (evenement) => {
                    const dit = evenement.results?.[0]?.[0]?.transcript ?? '';
                    const actuel = this.$refs.champ.value;
                    this.$refs.champ.value = actuel ? actuel + ' ' + dit : dit;
                    this.$refs.champ.dispatchEvent(new Event('input'));
                };

                this.reconnaissance.onerror = () => (this.dicteeEnCours = false);
                this.reconnaissance.onend = () => (this.dicteeEnCours = false);

                this.dicteeEnCours = true;
                this.reconnaissance.start();
            },
        }));
    </script>
    @endscript
</x-filament-panels::page>