<x-filament-panels::page>
    <style>
        .ai-wrap { display: grid; grid-template-columns: 240px 1fr; gap: 16px; min-height: 70vh; }
        @media (max-width: 768px) { .ai-wrap { grid-template-columns: 1fr; } }
        .ai-side {
            background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px;
            padding: 12px; overflow-y: auto;
        }
        .dark .ai-side { background: #1f2937; border-color: #374151; }
        .ai-new-btn {
            width: 100%; padding: 8px 12px; border-radius: 6px;
            background: #3b82f6; color: white; font-size: 13px; font-weight: 500;
            border: none; cursor: pointer; margin-bottom: 12px;
        }
        .ai-new-btn:hover { background: #2563eb; }

        .ai-chat-item {
            padding: 8px 10px; border-radius: 6px; margin-bottom: 4px;
            font-size: 12px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 6px;
        }
        .ai-chat-item:hover { background: #fff; }
        .dark .ai-chat-item:hover { background: #374151; }
        .ai-chat-item.active { background: #fff; border: 1px solid #3b82f6; }
        .dark .ai-chat-item.active { background: #111827; }
        .ai-chat-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .ai-del { color: #9ca3af; cursor: pointer; padding: 2px 4px; border-radius: 4px; font-size: 14px; border: none; background: none; }
        .ai-del:hover { color: #dc2626; background: #fef2f2; }

        .ai-main {
            background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
            display: flex; flex-direction: column;
        }
        .dark .ai-main { background: #1f2937; border-color: #374151; }

        .ai-messages {
            flex: 1; overflow-y: auto; padding: 16px;
            display: flex; flex-direction: column; gap: 12px;
            min-height: 400px;
        }
        .ai-msg { max-width: 85%; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5; }
        .ai-msg-user {
            align-self: flex-end;
            background: #3b82f6; color: white;
            border-bottom-right-radius: 4px;
        }
        .ai-msg-assistant {
            align-self: flex-start;
            background: #f3f4f6; color: #1f2937;
            border-bottom-left-radius: 4px;
        }
        .dark .ai-msg-assistant { background: #374151; color: #f9fafb; }
        .ai-msg pre { white-space: pre-wrap; word-wrap: break-word; margin: 0; font-family: inherit; }
        .ai-msg-meta { font-size: 10px; color: #9ca3af; margin-top: 4px; }

        .ai-empty { text-align: center; color: #9ca3af; padding: 60px 20px; }

        .ai-form {
            border-top: 1px solid #e5e7eb;
            padding: 12px; display: flex; gap: 8px;
        }
        .dark .ai-form { border-color: #374151; }
        .ai-input {
            flex: 1; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 8px;
            font-size: 13px; font-family: inherit; resize: none; min-height: 40px;
        }
        .dark .ai-input { background: #111827; border-color: #374151; color: #f9fafb; }
        .ai-send {
            padding: 10px 20px; background: #3b82f6; color: white;
            border: none; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500;
        }
        .ai-send:hover { background: #2563eb; }
        .ai-send:disabled { opacity: 0.5; cursor: not-allowed; }

        .ai-loading {
            align-self: flex-start;
            color: #9ca3af; font-size: 13px;
            padding: 10px 14px;
            display: flex; align-items: center; gap: 6px;
        }
        .ai-loading .dot { width: 6px; height: 6px; background: #9ca3af; border-radius: 50%; animation: ai-bounce 1.4s infinite; }
        .ai-loading .dot:nth-child(2) { animation-delay: 0.2s; }
        .ai-loading .dot:nth-child(3) { animation-delay: 0.4s; }
        @keyframes ai-bounce { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }
    </style>

    @php
        $chat = $this->getChat();
        $chats = $this->getChats();
        $usage = $this->getUsage();
        $totalTokens = collect($usage)->sum(fn ($u) => $u['tokens_in'] + $u['tokens_out']);
        $totalCalls = collect($usage)->sum('calls');
    @endphp

    @if ($totalCalls > 0)
        <div style="margin-bottom:12px;padding:10px 14px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;font-size:12px;color:#1e3a8a;">
            <strong>Tokens consumate luna aceasta:</strong>
            {{ number_format($totalTokens) }} tokens · {{ $totalCalls }} cereri
            @foreach ($usage as $provider => $u)
                · {{ strtoupper($provider) }}: {{ number_format($u['tokens_in'] + $u['tokens_out']) }}
            @endforeach
        </div>
    @endif

    <div class="ai-wrap" x-data x-init="$nextTick(() => { const m = $refs.msgs; if (m) m.scrollTop = m.scrollHeight; })">
        {{-- Sidebar: chat history --}}
        <div class="ai-side">
            <button type="button" class="ai-new-btn" wire:click="newChat">+ Conversație nouă</button>
            @forelse ($chats as $c)
                <div class="ai-chat-item {{ $c->id === $chatId ? 'active' : '' }}">
                    <span class="ai-chat-title" wire:click="selectChat({{ $c->id }})" style="cursor:pointer;">
                        {{ $c->title }}
                    </span>
                    <button type="button" class="ai-del" wire:click="deleteChat({{ $c->id }})"
                            wire:confirm="Șterge conversația?">×</button>
                </div>
            @empty
                <div style="font-size:11px;color:#9ca3af;padding:8px;">Nicio conversație</div>
            @endforelse
        </div>

        {{-- Main chat area --}}
        <div class="ai-main">
            <div class="ai-messages" x-ref="msgs"
                 x-init="$watch('$wire.loading', () => $nextTick(() => $el.scrollTop = $el.scrollHeight))">
                @if (! $chat || $chat->messages->isEmpty())
                    <div class="ai-empty">
                        <div style="font-size:32px;margin-bottom:8px;">✨</div>
                        <div style="font-size:14px;font-weight:600;margin-bottom:4px;">Asistent AI pentru autoservice</div>
                        <div style="font-size:12px;">Întreabă-mă orice — diagnostic, sumar, sugestii, redactare mesaje către clienți...</div>
                        <div style="font-size:11px;margin-top:16px;color:#9ca3af;">
                            <b>Configurare:</b> mergi la Setări → Asistent AI și adaugă cheia API (Claude / GPT / Gemini).
                        </div>
                    </div>
                @else
                    @foreach ($chat->messages as $m)
                        @if ($m->role === 'user')
                            <div class="ai-msg ai-msg-user"><pre>{{ $m->content }}</pre></div>
                        @elseif ($m->role === 'assistant')
                            <div class="ai-msg ai-msg-assistant">
                                <pre>{{ $m->content }}</pre>
                                @if (! empty($m->meta['provider']))
                                    <div class="ai-msg-meta">
                                        {{ strtoupper($m->meta['provider']) }}
                                        @if (! empty($m->meta['latency_ms'])) · {{ $m->meta['latency_ms'] }}ms @endif
                                        @if (! empty($m->meta['tokens_out'])) · {{ $m->meta['tokens_out'] }} tok @endif
                                    </div>
                                @endif
                            </div>
                        @endif
                    @endforeach
                @endif
                @if ($loading)
                    <div class="ai-loading">
                        <span class="dot"></span><span class="dot"></span><span class="dot"></span>
                        <span>asistent gândește...</span>
                    </div>
                @endif
            </div>

            <form wire:submit="send" class="ai-form">
                <textarea
                    class="ai-input"
                    wire:model="newMessage"
                    placeholder="Scrie mesajul tău..."
                    @keydown.enter.exact.prevent="$wire.send()"
                    @keydown.shift.enter="$el.value += '\n'"
                    rows="1"
                ></textarea>
                <button type="submit" class="ai-send" wire:loading.attr="disabled">Trimite</button>
            </form>
        </div>
    </div>
</x-filament-panels::page>
