@extends('portal.layout')

@section('title', 'AI Regulation Assistant')

@section('head')
<style>
    .chat-container { display: flex; height: calc(100vh - 48px - 80px); max-height: 800px; margin: 0; }

    /* Sidebar */
    .chat-sidebar { width: 260px; background: var(--bg-card); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; }
    .chat-sidebar-header { padding: 16px; border-bottom: 1px solid var(--border); }
    .chat-sidebar-header h3 { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
    .chat-new-btn { width: 100%; padding: 8px 12px; background: var(--primary); color: #fff; border: none; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; justify-content: center; font-family: inherit; }
    .chat-new-btn:hover { background: var(--primary-dark, #1d4ed8); }
    .chat-history { flex: 1; overflow-y: auto; padding: 8px; }
    .chat-history-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; color: var(--text-secondary); transition: background .15s; }
    .chat-history-item:hover { background: rgba(255,255,255,.05); }
    .chat-history-item.active { background: rgba(37,99,235,.15); color: var(--primary); }
    .chat-history-item .title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .chat-history-item .delete-btn { opacity: 0; color: var(--red); cursor: pointer; flex-shrink: 0; }
    .chat-history-item:hover .delete-btn { opacity: 1; }

    /* Context selector */
    .chat-context { padding: 12px 16px; border-bottom: 1px solid var(--border); }
    .chat-context label { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); display: block; margin-bottom: 4px; }
    .chat-context select { width: 100%; background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px; padding: 5px 8px; font-size: 11px; color: var(--text); font-family: inherit; outline: none; margin-bottom: 6px; }

    /* Main chat area */
    .chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
    .chat-messages { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; }

    /* Welcome state */
    .chat-welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; color: var(--text-secondary); }
    .chat-welcome h2 { font-size: 20px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
    .chat-welcome p { font-size: 13px; max-width: 440px; line-height: 1.7; }
    .chat-welcome .suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; justify-content: center; }
    .chat-welcome .suggestion { padding: 8px 14px; background: rgba(37,99,235,.1); border: 1px solid rgba(37,99,235,.25); border-radius: 20px; font-size: 12px; color: var(--primary); cursor: pointer; transition: background .15s; }
    .chat-welcome .suggestion:hover { background: rgba(37,99,235,.2); }

    /* Message bubbles */
    .chat-msg { display: flex; gap: 12px; max-width: 85%; }
    .chat-msg.user { align-self: flex-end; flex-direction: row-reverse; }
    .chat-msg .avatar-circle { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
    .chat-msg.assistant .avatar-circle { background: rgba(37,99,235,.2); color: var(--primary); }
    .chat-msg.user .avatar-circle { background: rgba(20,184,166,.2); color: var(--teal); }
    .chat-msg .bubble { padding: 12px 16px; border-radius: 12px; font-size: 13px; line-height: 1.7; }
    .chat-msg.assistant .bubble { background: var(--bg-card); border: 1px solid var(--border); border-top-left-radius: 4px; }
    .chat-msg.user .bubble { background: rgba(37,99,235,.15); border: 1px solid rgba(37,99,235,.25); border-top-right-radius: 4px; color: var(--text); }
    .chat-msg .bubble p { margin-bottom: 8px; }
    .chat-msg .bubble p:last-child { margin-bottom: 0; }
    .chat-msg .bubble ul, .chat-msg .bubble ol { padding-left: 18px; margin-bottom: 8px; }
    .chat-msg .bubble li { margin-bottom: 4px; }
    .chat-msg .bubble strong { color: #93c5fd; font-weight: 600; }
    .chat-msg .bubble code { background: rgba(255,255,255,.08); padding: 1px 5px; border-radius: 3px; font-size: 12px; font-family: 'JetBrains Mono', monospace; }
    .chat-msg .time { font-size: 10px; color: var(--text-muted); margin-top: 4px; }

    /* Sources */
    .chat-sources { margin-top: 8px; padding: 8px 10px; background: rgba(37,99,235,.08); border-radius: 6px; border: 1px solid rgba(37,99,235,.15); }
    .chat-sources-label { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--primary); margin-bottom: 4px; font-weight: 600; }
    .chat-sources-list { font-size: 11px; color: var(--text-secondary); }
    .chat-sources-list span { display: inline-block; background: rgba(37,99,235,.12); padding: 2px 6px; border-radius: 3px; margin: 2px 2px 2px 0; }

    /* Input area */
    .chat-input-area { padding: 16px 24px; border-top: 1px solid var(--border); background: var(--bg-card); }
    .chat-input-wrap { display: flex; gap: 10px; align-items: flex-end; }
    .chat-input { flex: 1; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 13px; color: var(--text); font-family: inherit; resize: none; outline: none; min-height: 42px; max-height: 120px; line-height: 1.5; }
    .chat-input:focus { border-color: var(--border-focus); }
    .chat-input::placeholder { color: var(--text-muted); }
    .chat-send-btn { width: 42px; height: 42px; background: var(--primary); border: none; border-radius: 8px; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; flex-shrink: 0; }
    .chat-send-btn:hover { background: var(--primary-dark, #1d4ed8); }
    .chat-send-btn:disabled { opacity: .4; cursor: not-allowed; }

    /* Loading dots */
    .typing-indicator { display: flex; gap: 4px; padding: 12px 16px; }
    .typing-dot { width: 6px; height: 6px; background: var(--text-muted); border-radius: 50%; animation: typing 1.4s infinite; }
    .typing-dot:nth-child(2) { animation-delay: .2s; }
    .typing-dot:nth-child(3) { animation-delay: .4s; }
    @keyframes typing { 0%,60%,100% { opacity:.3; transform:translateY(0); } 30% { opacity:1; transform:translateY(-4px); } }

    /* Disabled state */
    .chat-disabled { display: flex; align-items: center; justify-content: center; height: 100%; }
    .chat-disabled .card { padding: 32px; text-align: center; max-width: 400px; }
    .chat-disabled .card h3 { font-size: 16px; margin-bottom: 8px; }
    .chat-disabled .card p { font-size: 13px; color: var(--text-secondary); }

    @media (max-width: 768px) {
        .chat-sidebar { display: none; }
        .chat-msg { max-width: 95%; }
    }
</style>
@endsection

@section('content')
@if(!$aiEnabled)
<div class="chat-disabled">
    <div class="card">
        <div style="font-size: 36px; margin-bottom: 12px;">🤖</div>
        <h3>AI Assistant Not Available</h3>
        <p>The AI Regulation Assistant requires OpenAI to be enabled and configured. Please contact an administrator to set up the API key in Settings.</p>
    </div>
</div>
@else
<div class="chat-container" x-data="chatApp()">

    {{-- Sidebar --}}
    <div class="chat-sidebar">
        <div class="chat-sidebar-header">
            <h3>💬 Conversations</h3>
            <button class="chat-new-btn" @click="newConversation()">
                <i data-lucide="plus" style="width:14px;height:14px;"></i> New Chat
            </button>
        </div>

        {{-- Context Filter --}}
        <div class="chat-context">
            <label>State context</label>
            <select x-model="stateId" @change="cityId = ''">
                <option value="">All states</option>
                @foreach($states as $state)
                    <option value="{{ $state->id }}">{{ $state->name }}</option>
                @endforeach
            </select>
            <label>City context</label>
            <select x-model="cityId">
                <option value="">All cities</option>
                <template x-for="city in cities" :key="city.id">
                    <option :value="city.id" x-text="city.name"></option>
                </template>
            </select>
        </div>

        {{-- History --}}
        <div class="chat-history">
            <template x-for="conv in conversations" :key="conv.id">
                <div class="chat-history-item"
                     :class="{ active: conversationId == conv.id }"
                     @click="loadConversation(conv.id)">
                    <i data-lucide="message-square" style="width:14px;height:14px;flex-shrink:0;"></i>
                    <span class="title" x-text="conv.title"></span>
                    <span class="delete-btn" @click.stop="deleteConversation(conv.id)" title="Delete">
                        <i data-lucide="x" style="width:12px;height:12px;"></i>
                    </span>
                </div>
            </template>
            <div x-show="conversations.length === 0" style="text-align:center;padding:24px;color:var(--text-muted);font-size:12px;">
                No conversations yet
            </div>
        </div>
    </div>

    {{-- Main Chat --}}
    <div class="chat-main">
        {{-- Messages --}}
        <div class="chat-messages" id="chat-messages" x-ref="chatMessages">

            {{-- Welcome screen --}}
            <div class="chat-welcome" x-show="messages.length === 0 && !loading">
                <div style="font-size:40px;margin-bottom:12px;">🏛️</div>
                <h2>AI Regulation Assistant</h2>
                <p>Ask me anything about Indian land &amp; building regulations — zoning rules, FAR/FSI limits, setbacks, height restrictions, permitted uses, and more.</p>
                <div class="suggestions">
                    <span class="suggestion" @click="sendSuggestion('What is the maximum FAR for residential zones in Rajasthan?')">FAR limits in Rajasthan</span>
                    <span class="suggestion" @click="sendSuggestion('What are the setback rules for a plot on a 12m wide road?')">Setback for 12m road</span>
                    <span class="suggestion" @click="sendSuggestion('What is the maximum building height allowed in commercial zones?')">Max height commercial</span>
                    <span class="suggestion" @click="sendSuggestion('Explain the difference between FAR and ground coverage')">FAR vs ground coverage</span>
                </div>
            </div>

            {{-- Messages --}}
            <template x-for="msg in messages" :key="msg.id || msg._tmpId">
                <div class="chat-msg" :class="msg.role">
                    <div class="avatar-circle" x-text="msg.role === 'user' ? 'Y' : 'AI'"></div>
                    <div>
                        <div class="bubble" x-html="formatMessage(msg.content)"></div>
                        {{-- Sources --}}
                        <template x-if="msg.sources && msg.sources.length > 0">
                            <div class="chat-sources">
                                <div class="chat-sources-label">Sources</div>
                                <div class="chat-sources-list">
                                    <template x-for="src in msg.sources" :key="src">
                                        <span x-text="src"></span>
                                    </template>
                                </div>
                            </div>
                        </template>
                        <div class="time" x-text="formatTime(msg.timestamp)"></div>
                    </div>
                </div>
            </template>

            {{-- Typing indicator --}}
            <div class="chat-msg assistant" x-show="loading">
                <div class="avatar-circle">AI</div>
                <div class="bubble">
                    <div class="typing-indicator">
                        <div class="typing-dot"></div>
                        <div class="typing-dot"></div>
                        <div class="typing-dot"></div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Input --}}
        <div class="chat-input-area">
            <div class="chat-input-wrap">
                <textarea class="chat-input"
                          x-model="input"
                          @keydown.enter.prevent="if(!$event.shiftKey) send()"
                          placeholder="Ask about land regulations..."
                          rows="1"
                          :disabled="loading"
                          x-ref="chatInput"></textarea>
                <button class="chat-send-btn" @click="send()" :disabled="!input.trim() || loading">
                    <i data-lucide="send" style="width:18px;height:18px;"></i>
                </button>
            </div>
            <div style="font-size:10px;color:var(--text-muted);margin-top:6px;text-align:center;">
                AI responses are based on indexed regulations and may not be exhaustive. Always verify with official documents.
            </div>
        </div>
    </div>

</div>
@endif
@endsection

@section('scripts')
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
@php
    $messagesJson = $messages->map(fn($m) => ['id' => $m->id, 'role' => $m->role, 'content' => $m->content, 'sources' => $m->sources, 'timestamp' => $m->created_at->toIso8601String()])->values();
    $conversationsJson = $recentConversations->map(fn($c) => ['id' => $c->id, 'title' => $c->title ?: 'New conversation', 'updated_at' => $c->updated_at->diffForHumans()]);
@endphp
<script>
function chatApp() {
    return {
        messages: @json($messagesJson),
        conversations: @json($conversationsJson),
        conversationId: {{ $conversation?->id ?? 'null' }},
        input: '',
        loading: false,
        stateId: '{{ $conversation?->state_id ?? '' }}',
        cityId: '{{ $conversation?->city_id ?? '' }}',
        cities: [],
        _tmpCounter: 0,

        init() {
            this.$watch('stateId', (val) => {
                if (val) this.fetchCities(val);
                else this.cities = [];
            });
            if (this.stateId) this.fetchCities(this.stateId);
            this.scrollToBottom();
        },

        async fetchCities(stateId) {
            try {
                const res = await fetch(`/ajax/cities/${stateId}`);
                this.cities = await res.json();
            } catch(e) { this.cities = []; }
        },

        sendSuggestion(text) {
            this.input = text;
            this.send();
        },

        async send() {
            const text = this.input.trim();
            if (!text || this.loading) return;

            this.input = '';
            this.loading = true;
            this._tmpCounter++;
            const tmpId = 'tmp-' + this._tmpCounter;

            // Add user message optimistically
            this.messages.push({
                _tmpId: tmpId,
                role: 'user',
                content: text,
                sources: null,
                timestamp: new Date().toISOString()
            });
            this.scrollToBottom();

            try {
                const res = await fetch('{{ route("portal.chatbot.send") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify({
                        message: text,
                        conversation_id: this.conversationId || undefined,
                        state_id: this.stateId || undefined,
                        city_id: this.cityId || undefined,
                    })
                });

                if (!res.ok) {
                    const err = await res.json();
                    throw new Error(err.error || 'Request failed');
                }

                const data = await res.json();

                // Update conversation ID
                if (!this.conversationId) {
                    this.conversationId = data.conversation_id;
                    // Add to sidebar
                    this.conversations.unshift({
                        id: data.conversation_id,
                        title: text.substring(0, 60),
                        updated_at: 'Just now'
                    });
                }

                // Add assistant message
                this.messages.push({
                    id: data.message.id,
                    role: data.message.role,
                    content: data.message.content,
                    sources: data.message.sources,
                    timestamp: data.message.timestamp
                });

            } catch(err) {
                this.messages.push({
                    _tmpId: 'err-' + this._tmpCounter,
                    role: 'assistant',
                    content: 'Sorry, something went wrong: ' + err.message,
                    sources: null,
                    timestamp: new Date().toISOString()
                });
            } finally {
                this.loading = false;
                this.scrollToBottom();
                this.$nextTick(() => {
                    this.$refs.chatInput?.focus();
                    lucide.createIcons();
                });
            }
        },

        newConversation() {
            this.conversationId = null;
            this.messages = [];
            this.input = '';
        },

        async loadConversation(id) {
            window.location.href = '{{ route("portal.chatbot") }}?conversation=' + id;
        },

        async deleteConversation(id) {
            if (!confirm('Delete this conversation?')) return;
            try {
                await fetch('/chatbot/' + id, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json',
                    }
                });
                this.conversations = this.conversations.filter(c => c.id !== id);
                if (this.conversationId === id) {
                    this.conversationId = null;
                    this.messages = [];
                }
            } catch(e) {}
        },

        scrollToBottom() {
            this.$nextTick(() => {
                const el = this.$refs.chatMessages;
                if (el) el.scrollTop = el.scrollHeight;
            });
        },

        formatTime(timestamp) {
            if (!timestamp) return '';
            const d = new Date(timestamp);
            return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: true });
        },

        formatMessage(text) {
            if (!text) return '';
            // Basic markdown to HTML
            let html = text
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                // Bold
                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
                // Inline code
                .replace(/`([^`]+)`/g, '<code>$1</code>')
                // Bullet points
                .replace(/^[-•]\s+(.+)$/gm, '<li>$1</li>')
                // Numbered lists
                .replace(/^\d+\.\s+(.+)$/gm, '<li>$1</li>')
                // Paragraphs
                .replace(/\n\n/g, '</p><p>')
                .replace(/\n/g, '<br>');

            // Wrap consecutive <li> in <ul>
            html = html.replace(/(<li>.*?<\/li>)+/gs, '<ul>$&</ul>');
            return '<p>' + html + '</p>';
        }
    }
}
</script>
@endsection