@extends('portal.layouts.master')
@section('title', 'AI Research')
@section('page-title', 'AI Research')

@section('extra-css')
/* ══════════════════════════════════════════════
   PORTAL — AI Research Assistant
   ══════════════════════════════════════════════ */

.ai-shell {
    display: flex;
    gap: 0;
    height: calc(100vh - 100px);
    min-height: 520px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #2b3139;
}

/* ─── Left: Suggested prompts ─── */
.ai-sidebar {
    width: 240px;
    flex-shrink: 0;
    background: #131722;
    border-right: 1px solid #2b3139;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.ai-sidebar::-webkit-scrollbar { width: 3px; }
.ai-sidebar::-webkit-scrollbar-thumb { background: #2b3139; }

.ai-sidebar-hdr {
    padding: .85rem 1rem .6rem;
    border-bottom: 1px solid #2b3139;
    flex-shrink: 0;
}
.ai-sidebar-hdr h6 {
    font-size: .62rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .1em; color: #5e6673; margin: 0;
}

.prompt-group { padding: .75rem .75rem .3rem; }
.prompt-group-label {
    font-size: .6rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .1em; color: #3b4a56; margin-bottom: .4rem;
    padding: 0 .25rem;
}
.prompt-btn {
    display: block; width: 100%; text-align: left;
    background: none; border: none; border-radius: 6px;
    padding: .5rem .75rem; margin-bottom: .2rem;
    color: #848e9c; font-size: .8rem; cursor: pointer;
    transition: background .12s, color .12s; font-family: inherit;
    line-height: 1.4;
}
.prompt-btn:hover { background: rgba(59,130,246,.1); color: #c8d8e0; }
.prompt-btn.active { background: rgba(59,130,246,.15); color: #eaecef; }

.ai-new-btn {
    margin: auto .75rem .85rem;
    display: flex; align-items: center; gap: .5rem;
    background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.25);
    border-radius: 7px; padding: .55rem .85rem;
    color: #3b82f6; font: 600 .8rem inherit; cursor: pointer;
    transition: background .14s, border-color .14s; flex-shrink: 0;
}
.ai-new-btn:hover { background: rgba(59,130,246,.2); border-color: #3b82f6; }

/* ─── Right: Chat area ─── */
.ai-chat-col {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    background: #0b0e11;
}

.ai-chat-hdr {
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem 1.2rem;
    background: #131722; border-bottom: 1px solid #2b3139;
    flex-shrink: 0;
}
.ai-chat-hdr-icon {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, #1a3a5c, #254b7a);
    border: 1px solid rgba(59,130,246,.3);
    display: flex; align-items: center; justify-content: center;
    color: #3b82f6; font-size: .95rem;
}
.ai-chat-hdr-info h5 { font-size: .9rem; font-weight: 700; color: #eaecef; margin: 0; }
.ai-chat-hdr-info small { font-size: .7rem; color: #848e9c; display: flex; align-items: center; gap: .3rem; }
.ai-status-pulse {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: #0ecb81; box-shadow: 0 0 6px rgba(14,203,129,.6);
    animation: pulse-glow 1.6s ease-in-out infinite;
}
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 4px rgba(14,203,129,.4); }
    50%       { box-shadow: 0 0 10px rgba(14,203,129,.9); }
}

/* Chat log */
.ai-chat-log {
    flex: 1; overflow-y: auto; padding: 1.2rem;
    display: flex; flex-direction: column; gap: .9rem;
}
.ai-chat-log::-webkit-scrollbar { width: 4px; }
.ai-chat-log::-webkit-scrollbar-thumb { background: #2b3139; border-radius: 4px; }

.p-msg { display: flex; align-items: flex-start; gap: .75rem; }
.p-msg.user { flex-direction: row-reverse; }

.p-avatar {
    width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 800;
}
.p-avatar.ai-av {
    background: linear-gradient(135deg,#1a3a5c,#254b7a);
    border: 1px solid rgba(59,130,246,.3); color: #3b82f6;
}
.p-avatar.user-av {
    background: linear-gradient(135deg,#1a4a2a,#1e6036);
    border: 1px solid rgba(14,203,129,.25); color: #0ecb81;
}

.p-bubble {
    max-width: 78%; padding: .85rem 1rem;
    font-size: .88rem; line-height: 1.7; word-break: break-word;
    border-radius: 0 10px 10px 10px;
}
.p-msg.ai   .p-bubble {
    background: rgba(19,23,34,.9); border: 1px solid #2b3139;
    color: #c8d8e0;
}
.p-msg.user .p-bubble {
    background: linear-gradient(135deg,#124880,#1a60aa);
    border: 1px solid rgba(59,130,246,.2);
    color: #c6dcf0; border-radius: 10px 0 10px 10px;
}
.ai-sources { margin-top: .7rem; padding-top: .6rem; border-top: 1px solid #2b3139; display: flex; flex-wrap: wrap; gap: .35rem; }
.ai-source-link { display: inline-flex; max-width: 100%; padding: .22rem .45rem; border: 1px solid rgba(59,130,246,.28); border-radius: 5px; color: #7eb2ff; font-size: .68rem; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-source-link:hover { color: #fff; border-color: #3b82f6; }
.ai-status-pulse[data-state="working"] { background: #f59e0b; animation: pulse-glow .8s ease-in-out infinite; }
.ai-status-pulse[data-state="rate_limited"] { background: #f59e0b; animation: none; }
.ai-status-pulse[data-state="unavailable"] { background: #f6465d; animation: none; box-shadow: none; }

/* Typing indicator */
.p-typing { display: flex; align-items: flex-start; gap: .75rem; }
.typing-wrap {
    padding: .85rem 1rem;
    background: rgba(19,23,34,.9); border: 1px solid #2b3139;
    border-radius: 0 10px 10px 10px;
    display: flex; gap: 5px; align-items: center;
}
.typing-wrap span {
    width: 7px; height: 7px; background: #3b4a56; border-radius: 50%;
    animation: p-bounce .9s ease-in-out infinite;
}
.typing-wrap span:nth-child(2) { animation-delay: .18s; }
.typing-wrap span:nth-child(3) { animation-delay: .36s; }
@keyframes p-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .4; }
    30% { transform: translateY(-6px); opacity: 1; }
}

/* Typewriter cursor */
.cursor-blink::after {
    content: '|';
    display: inline;
    animation: blink .7s step-end infinite;
    color: #3b82f6;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Input bar */
.ai-input-bar {
    padding: .85rem 1.2rem;
    border-top: 1px solid #2b3139;
    background: #0d1117; flex-shrink: 0;
}
.ai-input-inner {
    display: flex; gap: .65rem; align-items: flex-end;
    background: #131722; border: 1px solid #2b3139;
    border-radius: 10px; padding: .5rem .6rem .5rem .85rem;
    transition: border-color .15s;
}
.ai-input-inner:focus-within { border-color: rgba(59,130,246,.4); }
.ai-textarea {
    flex: 1; background: none; border: none; outline: none;
    color: #eaecef; font-size: .88rem; resize: none;
    font-family: inherit; line-height: 1.5;
    max-height: 120px; overflow-y: auto; padding: .2rem 0;
    scrollbar-width: thin;
}
.ai-textarea::placeholder { color: #3b4a56; }
.ai-send-btn {
    width: 36px; height: 36px; flex-shrink: 0;
    background: #3b82f6; border: none; border-radius: 7px;
    color: #fff; font-size: .85rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .14s, transform .1s; align-self: flex-end;
}
.ai-send-btn:hover:not(:disabled) { background: #2563eb; transform: scale(1.05); }
.ai-send-btn:disabled { opacity: .4; cursor: not-allowed; }
.ai-input-hint { font-size: .68rem; color: #3b4a56; margin-top: .45rem; text-align: center; }

/* ─── Responsive ─── */
@media (max-width: 800px) {
    .ai-sidebar { display: none; }
    .ai-shell   { height: calc(100vh - 120px); }
}
@endsection

@section('content')
@php
$client = auth('client')->user();
$initials = strtoupper(substr($client->fname ?? 'C', 0, 1));
@endphp

<div class="ai-shell">

    {{-- ══ LEFT: Suggested prompts ══ --}}
    <div class="ai-sidebar">
        <div class="ai-sidebar-hdr"><h6>Research Topics</h6></div>

        <div class="prompt-group">
            <div class="prompt-group-label">Equities</div>
            <button class="prompt-btn" data-q="What factors drive a company's earnings per share growth?">Earnings Per Share Drivers</button>
            <button class="prompt-btn" data-q="How do I analyse a company's competitive moat from its 10-K filing?">Competitive Moat Analysis</button>
            <button class="prompt-btn" data-q="What is the difference between P/E ratio and EV/EBITDA?">P/E vs EV/EBITDA</button>
            <button class="prompt-btn" data-q="How do I evaluate management quality when researching a stock?">Management Quality</button>
        </div>

        <div class="prompt-group">
            <div class="prompt-group-label">Options &amp; Flow</div>
            <button class="prompt-btn" data-q="Explain how unusual options activity signals institutional moves.">Unusual Options Activity</button>
            <button class="prompt-btn" data-q="What is the put/call ratio and how is it used as a sentiment indicator?">Put/Call Ratio</button>
            <button class="prompt-btn" data-q="What is dark pool trading and why do institutions use it?">Dark Pool Trading</button>
            <button class="prompt-btn" data-q="How do options expiry dates affect stock price movements?">Options Expiry Effects</button>
        </div>

        <div class="prompt-group">
            <div class="prompt-group-label">Macro &amp; Markets</div>
            <button class="prompt-btn" data-q="How do interest rate changes by the Federal Reserve affect stock valuations?">Fed Rates &amp; Stocks</button>
            <button class="prompt-btn" data-q="What is the yield curve and what does an inversion signal?">Yield Curve Inversion</button>
            <button class="prompt-btn" data-q="How does inflation affect different sectors of the stock market?">Inflation &amp; Sectors</button>
            <button class="prompt-btn" data-q="What macroeconomic indicators should I track as an investor?">Key Macro Indicators</button>
        </div>

        <div class="prompt-group">
            <div class="prompt-group-label">Crypto</div>
            <button class="prompt-btn" data-q="What fundamental factors drive the price of Bitcoin long-term?">Bitcoin Fundamentals</button>
            <button class="prompt-btn" data-q="How do on-chain metrics help analyse crypto market trends?">On-Chain Analysis</button>
        </div>

        <button class="ai-new-btn" id="aiNewChat">
            <i class="fas fa-plus"></i> New Conversation
        </button>
    </div>

    {{-- ══ RIGHT: Chat ══ --}}
    <div class="ai-chat-col">

        {{-- Header --}}
        <div class="ai-chat-hdr">
            <div class="ai-chat-hdr-icon"><i class="fas fa-robot"></i></div>
            <div class="ai-chat-hdr-info">
                <h5>AST Research Assistant</h5>
                <small><span class="ai-status-pulse" id="aiStatusPulse" data-state="{{ $researchConfigured ? 'ready' : 'unavailable' }}"></span><span id="aiStatusText">{{ $researchConfigured ? 'Ready' : 'Unavailable' }}</span></small>
            </div>
        </div>

        {{-- Chat log --}}
        <div class="ai-chat-log" id="portalChatLog">
            <div class="p-msg ai">
                <div class="p-avatar ai-av"><i class="fas fa-robot"></i></div>
                <div class="p-bubble">
                    Hello{{ $client ? ', ' . $client->fname : '' }}. I'm the AST Research Assistant, powered by {{ $researchModel }}.
                    I can help you analyse stocks, understand options flow, interpret SEC filings, and explore macroeconomic trends.
                    Select a topic from the left panel or type your own question below.
                </div>
            </div>
        </div>

        {{-- Input bar --}}
        <div class="ai-input-bar">
            <div class="ai-input-inner">
                <textarea class="ai-textarea" id="portalChatInput" rows="1"
                          placeholder="Ask a research question… (Shift+Enter for new line)"
                          maxlength="600" aria-label="Research question"></textarea>
                <button class="ai-send-btn" id="portalSendBtn" aria-label="Send">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
            <div class="ai-input-hint">AI answers are for educational purposes only — not personalised financial advice.</div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
'use strict';

const log      = document.getElementById('portalChatLog');
const input    = document.getElementById('portalChatInput');
const sendBtn  = document.getElementById('portalSendBtn');
const newBtn   = document.getElementById('aiNewChat');
const CSRF     = document.querySelector('meta[name="csrf-token"]')?.content ?? '';
const ASK_URL  = '{{ route("portal.ai.ask") }}';
const USER_INIT = '{{ strtoupper(substr($client->fname ?? "C", 0, 1)) }}';
const HISTORY_CONTENT_LIMIT = 4000;

let history  = [];   // [{role, content}, ...]
let busy     = false;

/* ─── Helpers ─── */
function scrollLog () {
    log.scrollTop = log.scrollHeight;
}

function appendMsg (role, text, animate) {
    const wrap   = document.createElement('div');
    wrap.className = 'p-msg ' + role;

    const avatar = document.createElement('div');
    avatar.className = 'p-avatar ' + (role === 'ai' ? 'ai-av' : 'user-av');
    avatar.innerHTML = role === 'ai'
        ? '<i class="fas fa-robot"></i>'
        : USER_INIT;

    const bubble = document.createElement('div');
    bubble.className = 'p-bubble' + (animate ? ' cursor-blink' : '');

    wrap.appendChild(avatar);
    wrap.appendChild(bubble);
    log.appendChild(wrap);
    scrollLog();
    return bubble;
}

function setAssistantStatus (state) {
    const labels = { ready: 'Ready', working: 'Working', rate_limited: 'Rate limited', unavailable: 'Unavailable' };
    const pulse = document.getElementById('aiStatusPulse');
    pulse.dataset.state = state;
    document.getElementById('aiStatusText').textContent = labels[state] || labels.unavailable;
}

function appendSources (bubble, sources) {
    if (!Array.isArray(sources) || sources.length === 0) return;
    const wrap = document.createElement('div');
    wrap.className = 'ai-sources';
    sources.forEach(source => {
        if (!source || !/^https?:\/\//i.test(String(source.url || ''))) return;
        const link = document.createElement('a');
        link.className = 'ai-source-link'; link.href = source.url; link.target = '_blank'; link.rel = 'noopener noreferrer';
        link.textContent = source.title || new URL(source.url).hostname;
        wrap.appendChild(link);
    });
    if (wrap.childElementCount) bubble.appendChild(wrap);
}

function showTyping () {
    const wrap = document.createElement('div');
    wrap.className = 'p-typing';
    wrap.id = 'portalTyping';
    const avatar = document.createElement('div');
    avatar.className = 'p-avatar ai-av';
    avatar.innerHTML = '<i class="fas fa-robot"></i>';
    const dots = document.createElement('div');
    dots.className = 'typing-wrap';
    dots.innerHTML = '<span></span><span></span><span></span>';
    wrap.appendChild(avatar);
    wrap.appendChild(dots);
    log.appendChild(wrap);
    scrollLog();
}

function hideTyping () {
    document.getElementById('portalTyping')?.remove();
}

/* Typewriter effect */
function typewrite (bubble, text, done) {
    const chars = [...text];
    let i = 0;
    function step () {
        if (i < chars.length) {
            bubble.textContent += chars[i++];
            scrollLog();
            setTimeout(step, 12 + Math.random() * 10);
        } else {
            bubble.classList.remove('cursor-blink');
            if (done) done();
        }
    }
    step();
}

/* ─── Send message ─── */
async function sendMessage () {
    const text = input.value.trim();
    if (!text || busy) return;

    busy = true;
    sendBtn.disabled = true;
    input.value = '';
    autoResize();

    // Highlight active prompt btn
    document.querySelectorAll('.prompt-btn').forEach(b => b.classList.remove('active'));

    // Append user bubble immediately
    const userBubble = appendMsg('user', text, false);
    userBubble.textContent = text;

    showTyping();
    setAssistantStatus('working');

    try {
        const res  = await fetch(ASK_URL, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': CSRF,
                'Accept': 'application/json',
            },
            body: JSON.stringify({ message: text, history }),
        });
        const data = await res.json();
        const reply = data.reply || (res.status === 422
            ? 'This conversation became too long. Please start a new conversation and try again.'
            : (data.message || 'I could not process that. Please try again.'));

        hideTyping();
        const aiBubble = appendMsg('ai', '', true);
        typewrite(aiBubble, reply, () => {
            appendSources(aiBubble, data.sources);
            busy = false;
            sendBtn.disabled = false;
            input.focus();
        });
        setAssistantStatus(res.ok ? 'ready' : (data.error_code === 'rate_limited' ? 'rate_limited' : 'unavailable'));

        // Update history (keep last 10 turns)
        history.push({ role: 'user', content: text.slice(0, HISTORY_CONTENT_LIMIT) });
        history.push({ role: 'assistant', content: reply.slice(0, HISTORY_CONTENT_LIMIT) });
        if (history.length > 20) history = history.slice(-20);

    } catch (_) {
        hideTyping();
        const errBubble = appendMsg('ai', '', false);
        errBubble.textContent = 'Connection error. Please check your network and try again.';
        busy = false;
        sendBtn.disabled = false;
        setAssistantStatus('unavailable');
    }
}

/* ─── Auto-resize textarea ─── */
function autoResize () {
    input.style.height = 'auto';
    input.style.height = Math.min(input.scrollHeight, 120) + 'px';
}

/* ─── Event listeners ─── */
sendBtn.addEventListener('click', sendMessage);

input.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        sendMessage();
    }
});
input.addEventListener('input', autoResize);

// Sidebar prompt buttons
document.querySelectorAll('.prompt-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        document.querySelectorAll('.prompt-btn').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        input.value = btn.dataset.q;
        autoResize();
        sendMessage();
    });
});

// New conversation
newBtn?.addEventListener('click', () => {
    history = [];
    log.innerHTML = '';
    document.querySelectorAll('.prompt-btn').forEach(b => b.classList.remove('active'));
    const bubble = appendMsg('ai', '', false);
    bubble.textContent = 'Conversation cleared. Ask me anything about markets, stocks, or options.';
    input.focus();
});

})();
</script>
@endpush