<x-layouts.app>
    @php
        $allowedVariants = ['fiche', 'pricing'];
        $assistantVariant = in_array($assistantVariant ?? null, $allowedVariants, true) ? $assistantVariant : 'fiche';
        $isPricingVariant = $assistantVariant === 'pricing';
        $defaultSessionMode = $isPricingVariant ? 'checker' : 'builder';

        $debugGroups = [
            [
                'group' => 'Plat Pépites',
                'items' => [
                    ['label' => 'Créer le plat', 'text' => 'Crée le plat Pépites Plat'],
                    ['label' => 'Ajoute Purée → Plat', 'text' => 'Ajoute 220 g de Purée de PDT dans Pépites Plat'],
                    ['label' => 'Ajoute Panage → Plat', 'text' => 'Ajoute 170 g de Panage dans Pépites Plat'],
                    ['label' => 'Ajoute Sauce → Plat', 'text' => 'Ajoute 50 mL de Sauce Barbecue dans Pépites Plat'],
                    ['label' => 'Terminer', 'text' => 'Terminer'],
                ],
            ],
            [
                'group' => 'Purée de PDT',
                'items' => [
                    ['label' => 'Créer Purée', 'text' => 'Crée la préparation Purée de PDT'],
                    ['label' => 'Purée ingrédients', 'text' => 'Ajoute 1 kg de Pomme de terre, 125 g de Beurre et 200 mL de Lait dans Purée de PDT'],
                ],
            ],
            [
                'group' => 'Marinade & Poulet mariné',
                'items' => [
                    ['label' => 'Créer Marinade', 'text' => 'Crée la préparation Marinade'],
                    ['label' => 'Ingrédients Marinade', 'text' => 'Ajoute 150 g d’Épices (mélange cajun) et 3 L de Lait dans Marinade'],
                    ['label' => 'Créer Poulet mariné', 'text' => 'Crée la préparation Poulet mariné'],
                    ['label' => 'Ingrédients Poulet mariné', 'text' => 'Ajoute 5,9 kg de Poulet net et 3,15 L de Marinade (perte 100%) dans Poulet mariné'],
                ],
            ],
            [
                'group' => 'Panage',
                'items' => [
                    ['label' => 'Créer Panage', 'text' => 'Crée la préparation Panage'],
                    ['label' => 'Ingrédients Panage', 'text' => 'Ajoute 250 g de Poulet, 40 g d’Œuf, 65 g de Chapelure et 45 g de Farine dans Panage'],
                ],
            ],
            [
                'group' => 'Sauce Barbecue',
                'items' => [
                    ['label' => 'Créer Sauce BBQ', 'text' => 'Crée la préparation Sauce Barbecue'],
                    ['label' => 'Ingrédients Sauce BBQ', 'text' => 'Ajoute 100 mL de Vinaigre de vin rouge, 5 mL de Worcestershire sauce, 230 g de Sucre cassonade, 480 g de Ketchup et 480 g d’Eau dans Sauce Barbecue'],
                ],
            ],
            [
                'group' => 'Définir les prix',
                'items' => [
                    ['label' => 'Prix Pomme de terre', 'text' => 'Crée l’ingrédient Pomme de terre à 11,86 € le kilo'],
                    ['label' => 'Prix Beurre', 'text' => 'Crée l’ingrédient Beurre à 2,33 € le kilo'],
                    ['label' => 'Prix Lait', 'text' => 'Crée l’ingrédient Lait à 2,00 € le litre'],
                    ['label' => 'Prix Poulet', 'text' => 'Crée l’ingrédient Poulet à 13,11 € le kilo'],
                    ['label' => 'Prix Œuf', 'text' => 'Crée l’ingrédient Œuf à 5,00 € le kilo'],
                    ['label' => 'Prix Chapelure', 'text' => 'Crée l’ingrédient Chapelure à 8,10 € le kilo'],
                    ['label' => 'Prix Farine', 'text' => 'Crée l’ingrédient Farine à 0,83 € le kilo'],
                    ['label' => 'Prix Épices', 'text' => 'Crée l’ingrédient Épices (mélange cajun) à 25,00 € le kilo'],
                    ['label' => 'Prix Sauce BBQ', 'text' => 'Crée l’ingrédient Sauce Barbecue à 5,18 € le litre'],
                ],
            ],
        ];

        $groupedAssistantPhrases = $debugGroups;
        $assistantTestPhrases = $groupedAssistantPhrases;

        $scenarioSteps = [];
        foreach ($debugGroups as $grp) {
            foreach ($grp['items'] as $item) {
                $scenarioSteps[] = $item['text'];
            }
        }

        $assistantTestScenarios = [
            [
                'label' => 'Fiche Pépites complète',
                'description' => 'Recrée Pépites Plat + toutes les préparations et les prix.',
                'steps' => $scenarioSteps,
            ],
        ];

        $intentDishId = request()->integer('dish_id') ?: null;
        $intentDishName = trim((string) request()->query('dish_name', ''));
        if ($intentDishName === '') {
            $intentDishName = null;
        }
    @endphp
    <x-slot name="head">
        <meta name="csrf-token" content="{{ csrf_token() }}">
    </x-slot>

    <x-app.container class="max-w-none h-screen px-3 pb-4">
        {{-- Racine + URLs pour le JS --}}
        <div id="assistantRoot"
             data-assistant-variant="{{ $assistantVariant }}"
             data-default-mode="{{ $defaultSessionMode }}"
             data-session-url="{{ route('realtime.session') }}"
             data-upsert-ingredient-url="{{ route('assistant.tools.upsert_ingredient.web') }}"
             data-upsert-preparation-url="{{ route('assistant.tools.upsert_preparation.web') }}"
             data-upsert-dish-url="{{ route('assistant.tools.upsert_dish.web') }}"
             data-add-ingredient-url="{{ route('assistant.tools.add_ingredient_to_target.web') }}"
              data-remove-component-url="{{ route('assistant.tools.remove_component_from_target.web') }}"
              data-update-component-waste-url="{{ route('assistant.tools.update_component_waste.web') }}"
              data-list-components-url="{{ route('assistant.tools.list_target_components.web') }}"
             data-breakdown-url="{{ route('assistant.tools.breakdown_target.web') }}"
             data-set-prep-waste-url="{{ route('assistant.tools.set_preparation_waste.web') }}"
             data-select-target-url="{{ route('assistant.tools.select_target.web') }}"
             data-rename-target-url="{{ route('assistant.tools.rename_target.web') }}"
             data-complete-pricing-url="{{ route('assistant.complete_pricing') }}"
             data-consistency-url="{{ route('assistant.consistency.analyze') }}"
             data-state-url="{{ route('assistant.state.show') }}"
             data-handoff-url="{{ route('assistant.handoff') }}"
             data-pricing-url="{{ route('assistant.prix') }}"
             @if($intentDishId) data-intent-dish-id="{{ $intentDishId }}" @endif
             @if($intentDishName) data-intent-dish-name="{{ $intentDishName }}" @endif
             class="mt-4">

            <div class="space-y-4">
                <div id="tabActions" class="space-y-4">
                    <audio id="remoteAudio" autoplay playsinline class="w-full"></audio>

                <div id="tabPrompt" class="space-y-3 hidden">
                    <div class="rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-3 space-y-2">
                        <h3 class="text-sm font-semibold text-zinc-800 dark:text-zinc-100">Consignes invariantes</h3>
                        <p class="text-xs text-zinc-500">Bloc imposé par l’équipe produit et non modifiable.</p>
                        <pre id="assistantPromptBase" class="w-full text-sm rounded border border-zinc-200 dark:border-zinc-700 bg-[#E6EFEA] dark:bg-zinc-950 p-2 font-mono whitespace-pre-wrap break-words text-zinc-800 dark:text-zinc-100">{{ trim(config('assistant.realtime.builder.base_instructions')) }}</pre>
                    </div>
                    <div class="rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-3">
                        <div class="flex items-center justify-between mb-2">
                            <h3 class="text-sm font-semibold text-zinc-800 dark:text-zinc-100">Consignes personnalisables</h3>
                            <label class="text-xs text-zinc-500 flex items-center gap-1">
                                Mode
                                <select id="assistantPromptMode" class="border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 rounded px-2 py-1 text-xs">
                                    <option value="builder">Builder</option>
                                    <option value="checker">Checker</option>
                                </select>
                            </label>
                        </div>
                        <p class="text-xs text-zinc-500 mb-2">Ce texte s’ajoute APRÈS le bloc invariant pour chaque session Realtime.</p>
                        <textarea id="assistantPromptInput" class="w-full h-48 text-sm rounded border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 p-2 font-mono" placeholder="Ajoutez des consignes spécifiques à votre établissement…"></textarea>
                        <div class="flex items-center gap-2 mt-2">
                            <x-button id="assistantPromptReloadBtn" type="button" size="sm" color="neutral">Recharger</x-button>
                            <x-button id="assistantPromptSaveBtn" type="button" size="sm">Enregistrer</x-button>
                            <span id="assistantPromptStatus" class="text-xs text-zinc-500"></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="space-y-3">
                <div id="assistantGraphSection" class="rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-3 flex flex-col h-[calc(100vh-100px)] {{ $isPricingVariant ? 'hidden' : '' }}">
                    <div id="assistantGraphWrap" class="relative mt-2 flex-1">
                        <div class="absolute left-4 top-4 z-10 max-w-xs">
                            <h3 class="text-sm font-semibold text-zinc-800 dark:text-zinc-100">Carte plat & préparations</h3>
                            <p class="text-xs text-zinc-500">Visualisez les liens entre le plat en cours et toutes les préparations évoquées.</p>
                            <span id="assistantGraphCount" class="text-[11px] uppercase tracking-wide text-zinc-400">0 carte</span>
                        </div>
                        <div class="absolute top-3 right-3 z-10 flex items-center gap-2 text-sm" id="assistantGraphControls">
                            @unless($isPricingVariant)
                                <span id="status"
                                      class="inline-flex items-center gap-2 text-xs px-3 py-1 rounded-full bg-zinc-100/90 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-200">
                                    <span id="statusDot" class="h-2 w-2 rounded-full bg-amber-500"></span>
                                    <span id="statusLabel">Prêt</span>
                                </span>
                                <x-button id="graphCheckBtn" type="button" size="sm" color="neutral">
                                    Contrôle cohérence
                                </x-button>
                            @endunless
                            <x-button id="graphStartBtn" type="button" size="sm">
                                Démarrer
                            </x-button>
                            <div id="graphActiveControls" class="hidden items-center gap-2">
                                <x-button id="graphStopBtn" type="button" size="sm" color="danger">
                                    Arrêter
                                </x-button>
                                <x-button id="graphFinishBtn" type="button" size="sm" color="secondary">
                                    Terminer
                                </x-button>
                            </div>
                        </div>
                        <svg id="assistantGraphLinks" class="pointer-events-none absolute inset-0 w-full h-full text-emerald-300 z-0" aria-hidden="true"></svg>
                        <div id="assistantGraphEmpty" class="absolute inset-0 flex items-center justify-center text-sm text-zinc-500"></div>
                        <div id="assistantGraphNodes" class="relative h-full w-full"></div>
                    </div>
                </div>
                <div id="assistantPriceSection" class="mt-4 rounded-lg border border-amber-200 dark:border-amber-600/60 bg-amber-50 dark:bg-amber-500/10 p-3 {{ $isPricingVariant ? '' : 'hidden' }}">
                    <div class="flex flex-wrap items-center justify-between gap-3">
                        <div>
                            <h3 class="text-sm font-semibold mb-1 text-zinc-800 dark:text-amber-200">Compléter les prix des ingrédients</h3>
                            <p class="text-xs text-zinc-600 dark:text-amber-200/80">Lorsque vous passez en checker, renseignez les coûts manquants avant validation.</p>
                        </div>
                        <div class="flex flex-wrap items-center gap-2">
                            <span id="assistantPriceSummary" class="text-xs font-medium text-amber-700 dark:text-amber-200 {{ $isPricingVariant ? 'hidden' : '' }}">0 ingrédient</span>
                            <div class="flex items-center gap-2 {{ $isPricingVariant ? '' : 'hidden' }}">
                                <x-button id="assistantPriceStartBtn" type="button" size="xs">
                                    Démarrer le checker
                                </x-button>
                                <x-button id="assistantPriceStopBtn" type="button" size="xs" color="danger" class="hidden" disabled>
                                    Arrêter
                                </x-button>
                            </div>
                            <x-button id="assistantPriceFinishBtn" type="button" size="xs" color="secondary" class="hidden" disabled>
                                Terminer
                            </x-button>
                        </div>
                    </div>
                    <div id="assistantPriceEmpty" class="text-sm text-amber-600 dark:text-amber-200 mt-4">
                        Sélectionnez un plat pour afficher ses ingrédients.
                    </div>
                    <div id="assistantPriceList" class="mt-3 grid gap-2 sm:grid-cols-2 xl:grid-cols-3"></div>
                </div>
            </div>

        </div>
        <div id="assistantDebugWrap"
             data-test-phrases='@json($groupedAssistantPhrases)'
             data-test-scenarios='@json($assistantTestScenarios)'
             class="mt-4 rounded-2xl border border-zinc-200 bg-white p-4 shadow dark:border-zinc-700 dark:bg-zinc-900">
            <div class="flex flex-wrap items-center justify-between gap-3">
                <div>
                    <h3 class="text-sm font-semibold text-zinc-800 dark:text-zinc-100">Mode debug & scénarios</h3>
                    <p class="text-xs text-zinc-500">Testez l’assistant sans parler, il continue et écrit sa réponse.</p>
                </div>
                <label class="flex items-center gap-2 text-xs text-zinc-500">
                    Debug
                    <button id="assistantDebugToggle" type="button" class="relative inline-flex h-6 w-11 items-center rounded-full border border-zinc-300 dark:border-zinc-700 bg-zinc-200 dark:bg-zinc-800 transition">
                        <span class="sr-only">Activer le mode debug</span>
                        <span class="inline-block h-4 w-4 rounded-full bg-white dark:bg-zinc-200 shadow translate-x-1 transition" aria-hidden="true"></span>
                    </button>
                </label>
            </div>
            <div id="assistantDebugPanel" class="mt-3 grid gap-4 lg:grid-cols-2 hidden">
                <div class="space-y-3">
                    <p id="assistantDebugNotice" class="text-xs text-amber-600 hidden"></p>
                    <div>
                        <p class="text-xs uppercase tracking-wide text-zinc-500">Phrases rapides</p>
                        <div id="assistantDebugPhrases" class="mt-2"></div>
                    </div>
                    <div>
                        <p class="text-xs uppercase tracking-wide text-zinc-500">Scénarios</p>
                        <div id="assistantDebugScenarios" class="mt-2 flex flex-wrap gap-2"></div>
                        <p class="text-[11px] text-zinc-500 mt-1">Chaque scénario envoie automatiquement l’ensemble des phrases.</p>
                    </div>
                    <div class="flex flex-col gap-2">
                        <input id="assistantDebugInput" type="text" class="flex-1 rounded-md border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 px-3 py-2 text-sm" placeholder="Tapez une phrase personnalisée…">
                        <x-button id="assistantDebugSendBtn" type="button" size="sm">
                            Envoyer
                        </x-button>
                    </div>
                </div>
                <div>
                    <p class="text-xs uppercase tracking-wide text-zinc-500">Transcript assistant</p>
                    <p class="text-xs text-zinc-500">Historique & appels API — visualisez chaque action de l’assistant et le retour du serveur.</p>
                    <div id="emptyHint" class="text-sm text-zinc-500 mt-3">
                        Aucune action pour le moment. Lancez l’assistant pour voir les appels.
                    </div>
                    <div id="actionsList" class="mt-3 space-y-2 max-h-56 overflow-y-auto"></div>
                    <div class="mt-4">
                        <div id="assistantTranscript" class="mt-2 min-h-[120px] max-h-64 overflow-y-auto space-y-1 rounded-md border border-dashed border-zinc-300 dark:border-zinc-700 bg-[#E6EFEA] dark:bg-zinc-900/60 px-3 py-2 text-sm"></div>
                        <p id="assistantTranscriptEmpty" class="text-[11px] text-zinc-500">Aucune réponse pour le moment.</p>
                    </div>
                </div>
            </div>
        </div>
    </x-app.container>
</x-layouts.app>