{{-- AI Assistant Widget – data printed from PHP --}}
@php
    $initialDocked = !empty($initialDocked);
@endphp
<div class="ai-assistant-container{{ $initialDocked ? ' ai-docked-right-panel' : '' }}" id="aiAssistantContainer">
    <button type="button" class="ai-assistant-btn" id="aiAssistantBtn" aria-label="{{ t('ai-assistant-open', 'Abrir Asistente IA') }}"
        title="{{ t('ai-assistant', 'Asistente IA') }}">
        <span class="ai-ring" aria-hidden="true"></span>
        <img src="{{ asset('assets/BaykusBeyazIcon.webp') }}" class="ai-tab-icon" alt="{{ t('site-title', 'AstroSabio') }}" width="36" height="36">
    </button>
    <div class="ai-chat-window d-block shadow-lg rounded-4 overflow-hidden" id="aiChatWindow" aria-hidden="true">
        <div class="ai-chat-shell d-flex flex-column h-100">
            <div class="ai-chat-header d-flex align-items-center justify-content-between border-bottom px-3 py-2">
                <div class="ai-chat-header-left d-flex align-items-center gap-2 flex-grow-1 overflow-hidden">
                    <span class="ai-chat-title">
                        <i class="bi bi-robot"></i>
                       {{ t('ai-assistant', 'Asistente IA') }}
                    </span>
                    <span
                        id="aiChatContextBadge"
                        class="badge ai-chat-context-badge text-truncate d-none"
                        title=""
                    ></span>
                </div>
                <div class="ai-chat-header-actions d-flex align-items-center gap-2">
                    {{-- TTS Hoparlör Toggle --}}
                    <button type="button" id="aiTtsToggleBtn" class="btn btn-sm ai-tts-toggle-btn"
                        aria-label="{{ t('read-aloud', 'Lectura en voz alta') }}" title="{{ t('toggle-read-aloud', 'Activar/desactivar lectura en voz alta') }}" aria-pressed="false">
                        <i class="bi bi-volume-mute-fill" id="aiTtsIcon"></i>
                        <span class="ai-voice-wave" id="aiTtsWave" aria-hidden="true">
                            <span></span><span></span><span></span><span></span>
                        </span>
                    </button>
                    <button type="button" id="aiChatHistoryBtn" class="btn btn-sm ai-chat-history-btn"
                        aria-label="{{ t('history', 'Historial') }}">
                        <i class="bi bi-clock-history"></i>
                        <span class="d-none d-lg-inline ms-1">{{ t('history', 'Historial') }}</span>
                    </button>
                    <button type="button" id="aiChatCloseBtn" class="btn btn-outline-secondary btn-sm text-nowrap"
                        aria-label="{{ t('close', 'Cerrar') }}">
                        <i class="bi bi-x-lg" aria-hidden="true"></i>
                        <span class="d-none d-lg-inline ms-1">{{ t('close', 'Cerrar') }}</span>
                    </button>
                </div>
            </div>

            <!-- Master Slot Canlı Senkronizasyon & Anti-Halüsinasyon (Kullanıcı talebi: UI'da gizli, hesaplamalar içeride çalışır) -->
            <div class="ai-chat-master-bar px-3 py-2 border-bottom d-none" id="aiChatMasterBar" style="display: none !important;">
                <div class="ai-master-bar-main d-flex align-items-center justify-content-between gap-2">
                    <div class="ai-master-title-wrap d-flex align-items-center gap-2 overflow-hidden">
                        <span class="ai-master-badge text-truncate" id="aiMasterChartBadge">
                            <i class="bi bi-disc text-primary"></i> <span id="aiMasterChartTitleText">{{ t('natal-chart', 'Carta Natal') }}</span>
                        </span>
                        <span class="ai-master-shield-badge" title="100% sincronizado con la carta principal y protegido contra alucinaciones">
                            <i class="bi bi-shield-check text-success"></i> <span class="d-none d-sm-inline">{{ t('protected', 'Protegido') }}</span>
                        </span>
                    </div>
                    <div class="ai-master-db-status d-flex align-items-center" id="aiMasterDbStatus" title="Coincidencia con reglas de biblioteca">
                        <span class="badge bg-light text-dark border ai-db-pill">
                            <i class="bi bi-lightning-charge-fill text-warning"></i> <span id="aiMasterDbCountText">{{ t('knowledge-ready', 'Biblioteca Lista') }}</span>
                        </span>
                        <button type="button" class="btn btn-sm btn-link p-0 text-muted ms-1 ai-master-details-toggle" id="aiMasterDetailsToggle" aria-expanded="false" title="Mostrar/Ocultar Indicadores">
                            <i class="bi bi-chevron-down"></i>
                        </button>
                    </div>
                </div>
                <div class="ai-master-indicators-strip d-flex align-items-center gap-1 mt-1 flex-wrap small" id="aiMasterIndicatorsStrip">
                    <span class="ai-ind-chip" id="aiChipAsc" title="Signo Ascendente"><i class="bi bi-sunrise text-warning"></i> <strong id="aiChipAscVal">ASC</strong></span>
                    <span class="ai-ind-chip" id="aiChipSun" title="Posición Solar"><i class="bi bi-sun text-warning"></i> <strong id="aiChipSunVal">Sol</strong></span>
                    <span class="ai-ind-chip" id="aiChipMoon" title="Posición Lunar"><i class="bi bi-moon text-info"></i> <strong id="aiChipMoonVal">Luna</strong></span>
                    <span class="ai-ind-chip" id="aiChipHouses" title="Cúspides de Casas"><i class="bi bi-grid-3x3 text-muted"></i> <strong id="aiChipHousesVal">12 Casas</strong></span>
                    <span class="ai-ind-chip" id="aiChipPatterns" title="Patrones de Aspectos"><i class="bi bi-diagram-3 text-primary"></i> <strong id="aiChipPatternsVal">Patrones</strong></span>
                </div>
                <!-- Genişletilebilir Detay Paneli -->
                <div class="ai-master-expanded-dossier mt-2 pt-2 border-top small collapse" id="aiMasterExpandedDossier">
                    <div class="ai-dossier-grid mb-1">
                        <div class="row g-2">
                            <div class="col-12 col-sm-6">
                                <div class="p-2 rounded bg-light border">
                                    <div class="fw-bold text-muted mb-1" style="font-size: 11px;"><i class="bi bi-house-door"></i> {{ t('house-cusps', 'Cúspides de Casas') }}</div>
                                    <div id="aiDossierHousesText" class="text-dark font-monospace text-wrap" style="font-size: 10.5px; line-height: 1.4;">-</div>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6">
                                <div class="p-2 rounded bg-light border">
                                    <div class="fw-bold text-muted mb-1" style="font-size: 11px;"><i class="bi bi-diagram-3"></i> {{ t('planets-and-patterns', 'Planetas y Patrones de Aspectos') }}</div>
                                    <div id="aiDossierPatternsText" class="text-dark text-wrap" style="font-size: 10.5px; line-height: 1.4;">-</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="text-muted d-flex align-items-center gap-1 mt-1" style="font-size: 10.5px;">
                        <i class="bi bi-lock-fill text-success"></i>
                        <span>Los datos de la carta principal se leen directamente al preguntar; la protección contra alucinaciones está activa.</span>
                    </div>
                </div>
            </div>

            <div class="ai-chat-messages d-flex flex-column flex-grow-1 p-3" id="aiChatMessages"></div>
            <div class="ai-chat-history-panel p-2 d-none" id="aiChatHistoryPanel">
                <div class="ai-chat-history-toolbar">
                    <button type="button" class="btn btn-sm btn-outline-secondary d-none" id="aiChatHistoryBackBtn">
                        <i class="bi bi-arrow-left"></i> {{ t('list', 'Lista') }}
                    </button>
                    <input type="text" id="aiChatHistorySearch" class="form-control form-control-sm" placeholder="{{ t('search', 'Buscar') }}" />
                    <button type="button" class="btn btn-sm btn-primary" id="aiChatHistoryRefreshBtn">
                        <i class="bi bi-arrow-clockwise"></i>
                    </button>
                </div>
                <div class="ai-chat-history-list" id="aiChatHistoryList"></div>
                <div class="ai-chat-history-detail d-none" id="aiChatHistoryDetail">
                    <div class="ai-chat-history-session-meta" id="aiChatHistorySessionMeta"></div>
                    <div class="ai-chat-history-detail-messages" id="aiChatHistoryDetailMessages"></div>
                </div>
            </div>

            <div class="ai-chat-input-container d-flex align-items-center gap-2 border-top px-3 py-2">
                <div class="ai-chat-input-wrapper flex-grow-1">
                    <textarea
                        class="ai-chat-input form-control"
                        id="aiChatInput"
                        rows="1"
                        placeholder="{{ t('write-your-message', 'Pregunta lo que quieras sobre tu carta...') }}"
                        aria-label="{{ t('message-input', 'Entrada de mensaje') }}"
                    ></textarea>
                </div>
                {{-- Mikrofon Butonu (STT) --}}
                <button class="ai-mic-btn" id="aiMicBtn" type="button" aria-label="{{ t('voice-input', 'Entrada de voz') }}" title="{{ t('ask-by-voice', 'Preguntar por voz') }}"
                    style="display:none;">
                    <i class="bi bi-mic-fill" id="aiMicIcon"></i>
                    <span class="ai-mic-ring" id="aiMicRing" aria-hidden="true"></span>
                </button>
                <button class="ai-chat-send-btn" id="aiChatSendBtn" aria-label="{{ t('send', 'Enviar') }}" type="button">
                    <span class="ai-chat-send-glyph" aria-hidden="true">➤</span>
                </button>
            </div>
            <div class="ai-chat-disclaimer d-flex align-items-center justify-content-center text-center small">
                <i class="bi bi-info-circle" aria-hidden="true"></i>
                <span>{{ t('ai.ui.disclaimer_check_accuracy', 'La IA puede cometer errores. Verifica la información astrológica importante.') }}</span>
            </div>
        </div>
    </div>
</div>

{{-- Data from PHP (backend) --}}
<script>
    window.AI_STRINGS = @json($aiStrings ?? []);
    window.AI_ROUTES = {
        strings: '{{ $aiRoutes["strings"] ?? route("ai-assistant.strings") }}',
        context: '{{ $aiRoutes["context"] ?? route("ai-assistant.context") }}',
        contextAspects: '{{ $aiRoutes["contextAspects"] ?? route("ai-assistant.context-aspects") }}',
        checkChartRules: '{{ route("ai-assistant.check-chart-rules") }}',
        sendMessage: '{{ $aiRoutes["sendMessage"] ?? route("ai-assistant.send-message") }}',
        transcribe: '{{ route("ai-assistant.transcribe") }}',
        historySessions: '{{ route("ai-assistant.history.sessions") }}',
        historyDetailTemplate: '{{ route("ai-assistant.history.detail", ["turnUuid" => "__TURN_UUID__"]) }}'
    };
</script>
<script src="{{ asset_v('js/ai-assistant/index.js') }}" defer></script>