@extends('layouts.app')

@section('title', 'QuickSell AI')

@section('content')
<style>
.qsai-shell{display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px;min-height:70vh}.qsai-panel{background:#fff;border:1px solid #e8edf3;border-radius:14px;box-shadow:0 6px 20px rgba(15,23,42,.05)}.qsai-side{padding:16px}.qsai-brand{display:flex;gap:12px;align-items:center;margin-bottom:18px}.qsai-logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#4f46e5,#06b6d4);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px}.qsai-history a{display:block;padding:10px 11px;border-radius:9px;color:#334155;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qsai-history a:hover,.qsai-history a.active{background:#eef2ff;color:#4338ca}.qsai-main{display:flex;flex-direction:column;min-height:70vh}.qsai-head{padding:18px 22px;border-bottom:1px solid #edf0f4;display:flex;justify-content:space-between;align-items:center}.qsai-messages{padding:22px;flex:1;overflow:auto;max-height:58vh}.qsai-msg{max-width:82%;padding:13px 15px;border-radius:14px;margin-bottom:14px;line-height:1.55}.qsai-msg.user{margin-left:auto;background:#4f46e5;color:#fff;border-bottom-right-radius:4px;white-space:pre-wrap}.qsai-msg.assistant{max-width:96%;background:#f1f5f9;color:#172033;border-bottom-left-radius:4px}.qsai-content{overflow-x:auto}.qsai-content>:first-child{margin-top:0}.qsai-content>:last-child{margin-bottom:0}.qsai-content table{width:100%;min-width:520px;margin:10px 0;border-collapse:collapse;background:#fff;font-size:13px}.qsai-content th,.qsai-content td{padding:9px 11px;border:1px solid #d7dee8;text-align:left;vertical-align:top;white-space:normal}.qsai-content th{background:#e2e8f0;color:#334155;font-weight:600}.qsai-content tbody tr:nth-child(even){background:#f8fafc}.qsai-content code{padding:2px 5px;border-radius:4px;background:#e2e8f0;color:#334155}.qsai-content pre{padding:12px;overflow:auto;border-radius:8px;background:#172033;color:#f8fafc}.qsai-content ul,.qsai-content ol{padding-left:22px}.qsai-meta{font-size:11px;color:#64748b;margin-top:7px}.qsai-compose{padding:16px;border-top:1px solid #edf0f4}.qsai-compose-row{display:flex;gap:10px}.qsai-compose textarea{resize:none;border-radius:11px}.qsai-suggestions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.qsai-suggestion{border:1px solid #dbe3ee;background:#fff;border-radius:20px;padding:7px 12px;color:#475569;cursor:pointer}.qsai-empty{text-align:center;padding:70px 20px;color:#64748b}.qsai-empty i{font-size:48px;color:#6366f1;margin-bottom:15px}.qsai-warning{margin:14px 18px 0}.qsai-loading{display:none;color:#6366f1;padding:8px 22px}@media(max-width:768px){.qsai-shell{grid-template-columns:1fr}.qsai-side{display:none}.qsai-msg{max-width:94%}.qsai-msg.assistant{max-width:100%}}
</style>
<section class="content-header">
    <h1><i class="fas fa-robot"></i> QuickSell AI <small>Evidence-backed business assistant</small></h1>
</section>
<section class="content">
    @if(empty($setting) || !$setting->is_enabled || !$setting->hasApiKey())
        <div class="alert alert-warning qsai-warning">AI is not ready. An administrator must <a href="{{ route('quicksellai.settings') }}">configure and enable a provider</a>.</div>
    @endif
    <div class="qsai-shell">
        <aside class="qsai-panel qsai-side">
            <div class="qsai-brand"><div class="qsai-logo"><i class="fas fa-sparkles"></i></div><div><strong>Ask QuickSell</strong><br><small class="text-muted">Read-only copilot</small></div></div>
            <a href="{{ route('quicksellai.index') }}" class="btn btn-primary btn-block"><i class="fa fa-plus"></i> New conversation</a>
            <hr><small class="text-muted text-uppercase">Recent conversations</small>
            <div class="qsai-history" style="margin-top:8px">
                @forelse($conversations as $item)
                    <a class="{{ !empty($conversation) && $conversation->id === $item->id ? 'active' : '' }}" href="{{ route('quicksellai.index', ['conversation' => $item->id]) }}" title="{{ $item->title }}"><i class="far fa-comment-alt"></i> {{ $item->title }}</a>
                @empty
                    <p class="text-muted" style="margin-top:12px">No conversations yet.</p>
                @endforelse
            </div>
        </aside>
        <main class="qsai-panel qsai-main">
            <div class="qsai-head"><div><strong>{{ $conversation->title ?? 'New conversation' }}</strong><br><small class="text-muted">Answers use your role and permitted locations</small></div><div>@if(auth()->user()->can('superadmin') || auth()->user()->can('ai.generate_reports'))<a class="btn btn-default btn-sm" href="{{ route('quicksellai.reports') }}"><i class="fas fa-chart-line"></i> <span class="label label-primary">AI</span> Reports</a>@endif</div></div>
            <div id="qsai_messages" class="qsai-messages">
                @if(!empty($conversation) && $conversation->messages->count())
                    @foreach($conversation->messages->whereIn('role', ['user','assistant']) as $message)
                        <div class="qsai-msg {{ $message->role }}">
                            <div class="qsai-content">
                                @if($message->role === 'assistant')
                                    {!! $message->rendered_content !!}
                                @else
                                    {{ $message->content }}
                                @endif
                            </div>
                            @if($message->role === 'assistant')
                                <div class="qsai-meta">{{ $message->tool_name ? 'Source: '.str_replace('_',' ', $message->tool_name).' • ' : '' }}{{ $message->created_at->format('d M Y, h:i A') }}</div>
                            @endif
                        </div>
                    @endforeach
                @else
                    <div class="qsai-empty"><i class="fas fa-robot"></i><h3>What would you like to know?</h3><p>QuickSell AI retrieves live, permission-scoped data before answering business questions.</p></div>
                @endif
            </div>
            <div id="qsai_loading" class="qsai-loading"><i class="fa fa-spinner fa-spin"></i> Checking QuickSell data and preparing an answer…</div>
            <div class="qsai-compose">
                <div class="qsai-suggestions">
                    <button class="qsai-suggestion" type="button">Show sales this month</button><button class="qsai-suggestion" type="button">Which items are low stock?</button><button class="qsai-suggestion" type="button">Show outstanding invoices</button><button class="qsai-suggestion" type="button">Recommend prices for my products</button><button class="qsai-suggestion" type="button">Analyze profit and loss this month</button><button class="qsai-suggestion" type="button">Show cash flow this month</button>
                </div>
                <form id="qsai_form"><input type="hidden" id="conversation_id" value="{{ $conversation->id ?? '' }}"><div class="qsai-compose-row"><textarea id="qsai_input" class="form-control" rows="2" maxlength="5000" placeholder="Ask about sales, customers, invoices, or stock…" {{ empty($setting) || !$setting->is_enabled || !$setting->hasApiKey() ? 'disabled' : '' }}></textarea><button id="qsai_send" class="btn btn-primary" type="submit"><i class="fas fa-paper-plane"></i> Send</button></div><small class="text-muted">Press Enter to send · Shift+Enter for a new line</small></form>
            </div>
        </main>
    </div>
</section>
@endsection

@section('javascript')
<script>
$(function(){
    var requestInFlight = false;
    function escapeHtml(text){ return $('<div>').text(text || '').html(); }
    function addMessage(role,text,meta,renderedHtml){ $('.qsai-empty').remove(); var content=role==='assistant'&&renderedHtml?renderedHtml:escapeHtml(text).replace(/\n/g,'<br>'); var html='<div class="qsai-msg '+role+'"><div class="qsai-content">'+content+'</div>'+(meta?'<div class="qsai-meta">'+escapeHtml(meta)+'</div>':'')+'</div>'; $('#qsai_messages').append(html).scrollTop($('#qsai_messages')[0].scrollHeight); }
    function setComposerBusy(busy){ requestInFlight=busy; $('#qsai_send').prop('disabled',busy).html(busy?'<i class="fa fa-spinner fa-spin"></i> Working…':'<i class="fas fa-paper-plane"></i> Send'); $('#qsai_loading').toggle(busy); }
    $('.qsai-suggestion').on('click',function(){ $('#qsai_input').val($(this).text()).focus(); });
    $('#qsai_input').on('keydown',function(e){ if(e.key==='Enter' && !e.shiftKey){ e.preventDefault(); $('#qsai_form').trigger('submit'); } });
    $('#qsai_form').on('submit',function(e){
        e.preventDefault();
        if(requestInFlight)return;
        var message=$.trim($('#qsai_input').val()); if(!message)return;
        var conversationId=$('#conversation_id').val() || null;
        addMessage('user',message); $('#qsai_input').val(''); setComposerBusy(true);
        $.ajax({
            url:@json(route('quicksellai.chat')),method:'POST',
            data:{_token:@json(csrf_token()),message:message,conversation_id:conversationId},
            success:function(r){
                try {
                    $('#conversation_id').val(r.conversation_id);
                    var source=r.tool?'Source: '+String(r.tool).replace(/_/g,' ')+' • ':'';
                    addMessage('assistant',r.message,source+'Generated '+new Date(r.generated_at).toLocaleString(),r.html);
                    history.replaceState({},'',@json(route('quicksellai.index'))+'?conversation='+r.conversation_id);
                } finally { setComposerBusy(false); $('#qsai_input').focus(); }
            },
            error:function(xhr){
                addMessage('assistant',(xhr.responseJSON&&xhr.responseJSON.message)||'The AI request could not be completed.');
                setComposerBusy(false); $('#qsai_input').focus();
            },
            complete:function(){ setComposerBusy(false); $('#qsai_input').focus(); }
        });
    });
});
</script>
@endsection