<script setup lang="ts">
import { ref, nextTick, watch } from 'vue'
import { Bot, Send, LoaderCircle } from '@lucide/vue'
import type { ChatMessage } from '../../composables/useDashboardData'

const props = defineProps<{
  messages: ChatMessage[]
  irisBusy: boolean
  irisFocus: string
}>()

const emit = defineEmits<{
  send: [text: string]
}>()

const inputText = ref('')
const chatListRef = ref<HTMLElement | null>(null)

function sendMessage(): void {
  if (!inputText.value.trim()) return
  emit('send', inputText.value)
  inputText.value = ''
}

watch(
  () => props.messages.length,
  async () => {
    await nextTick()
    if (chatListRef.value) {
      chatListRef.value.scrollTop = chatListRef.value.scrollHeight
    }
  }
)
</script>

<template>
  <div class="chat-panel">
    <div class="chat-header">
      <div class="chat-header-left">
        <Bot :size="16" class="chat-header-icon" />
        <h2>Iris Chat</h2>
      </div>
      <div v-if="irisBusy" class="busy-badge">
        <LoaderCircle :size="10" class="spin" />
        <span>Busy</span>
      </div>
    </div>

    <!-- Focus Bar -->
    <div v-if="irisBusy && irisFocus" class="focus-bar">
      <span class="focus-label">Current Focus</span>
      <span class="focus-text">{{ irisFocus }}</span>
    </div>

    <!-- Messages -->
    <div ref="chatListRef" class="chat-messages">
      <div
        v-for="msg in messages"
        :key="msg.id"
        :class="['msg-row', msg.sender === 'user' ? 'msg-user' : 'msg-iris']"
      >
        <div v-if="msg.sender === 'iris'" class="msg-avatar">
          <Bot :size="12" />
        </div>
        <div class="msg-bubble">
          <p>{{ msg.text }}</p>
        </div>
      </div>

      <div v-if="messages.length === 0" class="empty-state">
        <p>No messages yet. Start a conversation with Iris.</p>
      </div>
    </div>

    <!-- Input -->
    <div class="chat-input-row">
      <input
        v-model="inputText"
        type="text"
        placeholder="Type a message..."
        @keyup.enter="sendMessage"
      />
      <button
        class="send-btn"
        :disabled="!inputText.trim()"
        @click="sendMessage"
        aria-label="Send"
      >
        <Send :size="14" />
      </button>
    </div>
  </div>
</template>

<style scoped>
.chat-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 360px;
  max-height: 480px;
  background: rgba(22, 27, 34, 0.75);
  border: 1px solid rgba(139, 124, 246, 0.12);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  transition: border-color 0.2s ease;
  overflow: hidden;
}
.chat-panel:hover {
  border-color: rgba(139, 124, 246, 0.18);
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.chat-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-header-icon {
  color: #a78bfa;
}
.chat-header h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #e8eaf0;
}
.busy-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 600;
  color: #eab308;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(234, 179, 8, 0.08);
  border: 1px solid rgba(234, 179, 8, 0.15);
}
.spin {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Focus Bar */
.focus-bar {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 16px;
  background: rgba(234, 179, 8, 0.04);
  border-bottom: 1px solid rgba(234, 179, 8, 0.08);
}
.focus-label {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #eab308;
}
.focus-text {
  font-size: 10px;
  color: #7e8799;
  line-height: 1.3;
}

/* Messages */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-messages::-webkit-scrollbar {
  width: 5px;
}
.chat-messages::-webkit-scrollbar-track {
  background: transparent;
}
.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(139, 124, 246, 0.2);
  border-radius: 3px;
}

.msg-row {
  display: flex;
  gap: 8px;
  max-width: 85%;
}
.msg-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.msg-avatar {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(167, 139, 250, 0.15);
  color: #a78bfa;
  flex-shrink: 0;
  align-self: flex-end;
}
.msg-bubble {
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 10.5px;
  line-height: 1.45;
}
.msg-iris .msg-bubble {
  background: rgba(167, 139, 250, 0.08);
  border: 1px solid rgba(167, 139, 250, 0.1);
  color: #d4d8e0;
}
.msg-user .msg-bubble {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.15);
  color: #e8eaf0;
}
.msg-bubble p {
  margin: 0;
}

.empty-state {
  flex: 1;
  display: grid;
  place-items: center;
  text-align: center;
}
.empty-state p {
  font-size: 10px;
  color: #6b7385;
  max-width: 180px;
  line-height: 1.4;
}

/* Input */
.chat-input-row {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.chat-input-row input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  color: #e8eaf0;
  font-size: 10px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
  min-width: 0;
}
.chat-input-row input:focus {
  border-color: #a78bfa;
}
.chat-input-row input::placeholder {
  color: #6b7385;
}
.send-btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 8px;
  background: #a78bfa;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.send-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.send-btn:not(:disabled):hover {
  opacity: 0.85;
}
</style>
