@extends('layouts.app')
@section('title', 'AI-assistent')

@section('content')
@php $tenant = auth()->user()->tenant; @endphp

<div style="max-width:860px;height:calc(100vh - 140px);display:flex;flex-direction:column;">
  <!-- Header -->
  <div style="display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-shrink:0;">
    <div style="width:44px;height:44px;background:linear-gradient(135deg,#3B7DFF,#7B4FFF);border-radius:12px;display:flex;align-items:center;justify-content:center;">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </div>
    <div>
      <h2 style="font-family:'Instrument Serif',serif;font-size:24px;color:#E8EAF0;">AI-assistent</h2>
      <p style="font-size:13px;color:#5B6478;">Din smarta assistent för fakturering och affärsinsikter</p>
    </div>
  </div>

  <!-- Suggestion chips -->
  <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;flex-shrink:0;" id="chips">
    @foreach(['Vilka fakturor är förfallna?','Visa min månadsintäkt','Analysera mitt kassaflöde','Föreslå fakturarader för webbutveckling','Hur många öppna ärenden har jag?','Skriv ett påminnelsemejl'] as $chip)
    <button onclick="sendMessage('{{ $chip }}')" style="padding:7px 14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:20px;color:#8B9AB8;font-size:13px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s;" onmouseenter="this.style.color='#E8EAF0';this.style.borderColor='rgba(59,125,255,.3)'" onmouseleave="this.style.color='#8B9AB8';this.style.borderColor='rgba(255,255,255,.08)'">
      {{ $chip }}
    </button>
    @endforeach
  </div>

  <!-- Chat area -->
  <div id="chat-messages" style="flex:1;overflow-y:auto;padding:4px 0;display:flex;flex-direction:column;gap:12px;min-height:0;">
    <!-- Welcome message -->
    <div style="display:flex;gap:12px;align-items:flex-start;">
      <div style="width:34px;height:34px;background:linear-gradient(135deg,#3B7DFF,#7B4FFF);border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
        <svg width="17" height="17" viewBox="0 0 24 24" fill="none"><path d="M12 2L2 7l10 5 10-5-10-5z" stroke="white" stroke-width="1.8"/></svg>
      </div>
      <div style="background:#111827;border:1px solid rgba(255,255,255,.06);border-radius:14px;border-bottom-left-radius:4px;padding:14px 16px;max-width:85%;">
        <div style="font-size:14px;color:#C8CEDC;line-height:1.7;">
          Hej {{ explode(' ', auth()->user()->name)[0] }}! 👋 Jag är din AI-assistent för FakturaFlow.<br><br>
          Jag kan hjälpa dig med fakturering, kundinformation, affärsinsikter och mycket mer. 
          Skriv en fråga eller välj ett snabbval ovan!
        </div>
      </div>
    </div>
  </div>

  <!-- Input area -->
  <div style="padding-top:16px;flex-shrink:0;" x-data="{ msg: '', loading: false }">
    <div style="display:flex;gap:10px;background:#111827;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:10px 10px 10px 16px;transition:border-color .15s;" id="chat-input-box">
      <textarea x-model="msg" id="chat-input" rows="1"
        style="flex:1;background:none;border:none;color:#E8EAF0;font-size:14px;font-family:'DM Sans',sans-serif;outline:none;resize:none;line-height:1.5;max-height:120px;overflow-y:auto;"
        placeholder="Fråga AI om fakturor, kunder, insikter..."
        @keydown.enter.prevent="if(!$event.shiftKey && msg.trim()) { sendMsg(msg); msg = ''; }"
        @input="$el.style.height='auto';$el.style.height=$el.scrollHeight+'px'"></textarea>
      <button @click="if(msg.trim()){sendMsg(msg);msg='';}" :disabled="loading || !msg.trim()"
        style="width:38px;height:38px;background:linear-gradient(135deg,#3B7DFF,#7B4FFF);border:none;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .15s;"
        :style="(loading||!msg.trim())?'opacity:.4;cursor:not-allowed;':''">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
      </button>
    </div>
    <div style="text-align:center;font-size:11px;color:#3B4257;margin-top:8px;">
      Drivs av Claude AI · Shift+Enter för ny rad
    </div>
  </div>
</div>

@push('scripts')
<script>
let history = [];

function sendMessage(text) {
  document.getElementById('chat-input').value = text;
  sendMsg(text);
}

function sendMsg(text) {
  if (!text.trim()) return;

  // Hide chips after first message
  document.getElementById('chips').style.display = 'none';

  appendMessage('user', text);
  history.push({ role: 'user', content: text });

  // Show typing indicator
  const typingId = 'typing-' + Date.now();
  appendTyping(typingId);

  fetch('{{ route("ai.chat") }}', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
    body: JSON.stringify({ message: text, history: history.slice(-10) })
  })
  .then(r => r.json())
  .then(d => {
    document.getElementById(typingId)?.remove();
    if (d.reply) {
      appendMessage('ai', d.reply);
      history.push({ role: 'assistant', content: d.reply });
    }
  })
  .catch(() => {
    document.getElementById(typingId)?.remove();
    appendMessage('ai', 'Tyvärr uppstod ett fel. Kontrollera att AI-tjänsten är konfigurerad.');
  });
}

function appendMessage(role, text) {
  const container = document.getElementById('chat-messages');
  const isUser = role === 'user';
  const div = document.createElement('div');
  div.style.cssText = `display:flex;gap:12px;align-items:flex-start;${isUser?'flex-direction:row-reverse;':''}`;

  const avatar = isUser
    ? `<div style="width:34px;height:34px;background:linear-gradient(135deg,#1A2540,#2A3560);border:1px solid rgba(255,255,255,.1);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#7BA7FF;flex-shrink:0;">{{ strtoupper(substr(auth()->user()->name,0,1)) }}</div>`
    : `<div style="width:34px;height:34px;background:linear-gradient(135deg,#3B7DFF,#7B4FFF);border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;"><svg width="17" height="17" viewBox="0 0 24 24" fill="none"><path d="M12 2L2 7l10 5 10-5-10-5z" stroke="white" stroke-width="1.8"/></svg></div>`;

  const bubble = isUser
    ? `<div style="background:linear-gradient(135deg,rgba(59,125,255,.2),rgba(123,79,255,.15));border:1px solid rgba(59,125,255,.2);border-radius:14px;border-bottom-right-radius:4px;padding:12px 16px;max-width:85%;font-size:14px;color:#C8CEDC;line-height:1.7;">${escHtml(text)}</div>`
    : `<div style="background:#111827;border:1px solid rgba(255,255,255,.06);border-radius:14px;border-bottom-left-radius:4px;padding:14px 16px;max-width:85%;font-size:14px;color:#C8CEDC;line-height:1.7;white-space:pre-wrap;">${escHtml(text)}</div>`;

  div.innerHTML = avatar + bubble;
  container.appendChild(div);
  container.scrollTop = container.scrollHeight;
}

function appendTyping(id) {
  const container = document.getElementById('chat-messages');
  const div = document.createElement('div');
  div.id = id;
  div.style.cssText = 'display:flex;gap:12px;align-items:flex-start;';
  div.innerHTML = `
    <div style="width:34px;height:34px;background:linear-gradient(135deg,#3B7DFF,#7B4FFF);border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;"><svg width="17" height="17" viewBox="0 0 24 24" fill="none"><path d="M12 2L2 7l10 5 10-5-10-5z" stroke="white" stroke-width="1.8"/></svg></div>
    <div style="background:#111827;border:1px solid rgba(255,255,255,.06);border-radius:14px;border-bottom-left-radius:4px;padding:14px 16px;">
      <div style="display:flex;gap:4px;align-items:center;">
        <div style="width:7px;height:7px;border-radius:50%;background:#3B7DFF;animation:typing 1.2s ease infinite;"></div>
        <div style="width:7px;height:7px;border-radius:50%;background:#3B7DFF;animation:typing 1.2s ease .2s infinite;"></div>
        <div style="width:7px;height:7px;border-radius:50%;background:#3B7DFF;animation:typing 1.2s ease .4s infinite;"></div>
      </div>
    </div>
  `;
  container.appendChild(div);
  container.scrollTop = container.scrollHeight;
}

function escHtml(text) {
  return text.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/\n/g,'<br>');
}

// Focus input
document.getElementById('chat-input')?.focus();
</script>
@endpush
@endsection