<template>
  <div class="chat-panel">
    <header class="chat-header">
      <span class="chat-title">Robin</span>
      <span class="chat-status">● ready</span>
    </header>

    <div class="chat-messages" ref="messagesEl">
      <div v-if="messages.length === 0" class="chat-empty">
        <p>Robin is watching your system.</p>
        <p>Ask me anything about Linux, or wait for me to notice something.</p>
      </div>
      <div
        v-for="(msg, i) in messages"
        :key="i"
        class="message"
        :class="msg.role"
      >
        <p>{{ msg.content }}</p>
      </div>
    </div>

    <footer class="chat-footer">
      <input
        v-model="input"
        class="chat-input"
        placeholder="Ask Robin something..."
        @keydown.enter="send"
      />
      <button class="send-btn" @click="send">→</button>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'

interface Message { role: 'user' | 'robin'; content: string }

const messages = ref<Message[]>([])
const input = ref('')
const messagesEl = ref<HTMLElement | null>(null)

async function send() {
  const text = input.value.trim()
  if (!text) return
  input.value = ''
  messages.value.push({ role: 'user', content: text })
  // M4: invoke('chat', { message: text }) and stream response
  messages.value.push({ role: 'robin', content: '(LLM chat not yet connected — M4)' })
  await nextTick()
  messagesEl.value?.scrollTo({ top: messagesEl.value.scrollHeight, behavior: 'smooth' })
}
</script>

<style scoped>
.chat-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid #2a2a4a;
}

.chat-title { font-weight: 600; color: #fff; }
.chat-status { font-size: 11px; color: #4caf50; }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-empty p { color: #555; font-size: 13px; line-height: 1.6; }

.message { max-width: 88%; }
.message.user  { align-self: flex-end; background: #2a3a5a; padding: 8px 12px; border-radius: 12px 12px 2px 12px; }
.message.robin { align-self: flex-start; background: #252535; padding: 8px 12px; border-radius: 12px 12px 12px 2px; }
.message p { line-height: 1.5; }

.chat-footer {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #2a2a4a;
}

.chat-input {
  flex: 1;
  padding: 8px 12px;
  background: #252535;
  border: 1px solid #3a3a5a;
  border-radius: 8px;
  color: #e0e0e0;
  font-size: 14px;
  outline: none;
}
.chat-input:focus { border-color: #4a7abf; }

.send-btn {
  padding: 8px 14px;
  background: #4a7abf;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.send-btn:hover { opacity: 0.85; }
</style>
