@extends('layouts.app')
@section('title', 'AI Assistant')
@section('breadcrumbs')
<nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li><li class="breadcrumb-item"><a href="#">AI Platform</a></li><li class="breadcrumb-item active">Chatbot</li></ol></nav>
@endsection
@section('content')
<div class="row g-0" style="height:calc(100vh - 180px);">
    <div class="col-lg-3 border-end" style="overflow-y:auto;">
        <div class="p-3 border-bottom"><button class="btn btn-primary w-100" id="newChatBtn"><i class="bi bi-plus-lg me-1"></i>New Chat</button></div>
        <div class="p-2">
            @forelse($conversations ?? [] as $conv)
            <div class="d-flex align-items-center p-2 rounded mb-1 conversation-item" style="cursor:pointer;" data-id="{{ $conv->id }}">
                <i class="bi bi-chat-dots text-muted me-2"></i>
                <div class="flex-grow-1 overflow-hidden"><p class="mb-0 small text-truncate">{{ $conv->title ?? 'New Chat' }}</p><small class="text-muted">{{ $conv->created_at?->diffForHumans() ?? '' }}</small></div>
            </div>
            @empty
            <p class="text-center text-muted small py-3">No conversations yet</p>
            @endforelse
        </div>
    </div>
    <div class="col-lg-9 d-flex flex-column">
        <div class="flex-grow-1 overflow-auto p-4" id="chatMessages" style="background:#f8f9fa;">
            <div class="d-flex mb-4">
                <div class="flex-shrink-0 me-3"><div class="bg-primary rounded-circle d-flex align-items-center justify-content-center" style="width:36px;height:36px;"><i class="bi bi-robot text-white"></i></div></div>
                <div class="bg-white rounded-3 p-3 shadow-sm" style="max-width:70%;"><p class="mb-0">Hello! I'm your EXIM ERP AI assistant. I can help you with trade compliance, shipment queries, document processing, and more. How can I help you today?</p></div>
            </div>
            <div class="d-flex justify-content-center mb-3">
                <div class="d-flex gap-2 flex-wrap">
                    <span class="badge bg-white border suggestion-chip px-3 py-2" style="cursor:pointer;">Check shipment status</span>
                    <span class="badge bg-white border suggestion-chip px-3 py-2" style="cursor:pointer;">What documents do I need?</span>
                    <span class="badge bg-white border suggestion-chip px-3 py-2" style="cursor:pointer;">Calculate landed cost</span>
                    <span class="badge bg-white border suggestion-chip px-3 py-2" style="cursor:pointer;">HS code lookup</span>
                </div>
            </div>
        </div>
        <div class="p-3 border-top bg-white">
            <div class="d-flex gap-2">
                <button class="btn btn-outline-secondary" title="Attach file"><i class="bi bi-paperclip"></i></button>
                <input type="text" class="form-control" id="chatInput" placeholder="Type your message...">
                <button class="btn btn-primary" id="sendBtn"><i class="bi bi-send"></i></button>
            </div>
            <div class="d-flex gap-2 mt-2 flex-wrap">
                <span class="badge bg-light text-muted suggestion-chip px-2 py-1" style="cursor:pointer;font-size:0.7rem;">Track BL123456</span>
                <span class="badge bg-light text-muted suggestion-chip px-2 py-1" style="cursor:pointer;font-size:0.7rem;">Show pending invoices</span>
                <span class="badge bg-light text-muted suggestion-chip px-2 py-1" style="cursor:pointer;font-size:0.7rem;">Customs duty rates</span>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script>
$(document).ready(function(){
    function addMessage(text, isUser){
        var html=isUser?'<div class="d-flex mb-4 justify-content-end"><div class="bg-primary text-white rounded-3 p-3 shadow-sm" style="max-width:70%;"><p class="mb-0">'+text+'</p></div></div>':'<div class="d-flex mb-4"><div class="flex-shrink-0 me-3"><div class="bg-primary rounded-circle d-flex align-items-center justify-content-center" style="width:36px;height:36px;"><i class="bi bi-robot text-white"></i></div></div><div class="bg-white rounded-3 p-3 shadow-sm" style="max-width:70%;"><p class="mb-0">'+text+'</p></div></div>';
        $('#chatMessages').append(html);
        $('#chatMessages').scrollTop($('#chatMessages')[0].scrollHeight);
    }
    $('#sendBtn,#chatInput').on('click keypress',function(e){
        if(e.type==='keypress'&&e.which!==13) return;
        var val=$('#chatInput').val().trim();
        if(!val) return;
        addMessage(val,true); $('#chatInput').val('');
        addMessage('<div class="typing-indicator"><span></span><span></span><span></span></div>',false);
        setTimeout(function(){ $('.typing-indicator').parent().parent().parent().remove(); addMessage('I\'m processing your request. In a full implementation, this would connect to the AI backend via API.',false); },1500);
    });
    $(document).on('click','.suggestion-chip',function(){ $('#chatInput').val($(this).text()).trigger('keypress'); });
});
</script>
@endpush