<template>
  <ResizablePanel
    position="right"
    :default-size="300"
    :min-size="200"
    :max-size="600"
    v-model:collapsed="isCollapsed"
  >
    <div class="ai-panel">
      <div class="ai-header">
        <h2 class="text-xl font-bold">
          <i class="fas fa-robot mr-2"></i>
          AI Assistant
        </h2>
      </div>
      
      <div class="ai-content">
        <div class="ai-chat">
          <div
            v-for="(message, index) in messages"
            :key="index"
            :class="['ai-message', message.type]"
          >
            <div class="message-avatar">
              <i :class="message.type === 'user' ? 'fas fa-user' : 'fas fa-robot'"></i>
            </div>
            <div class="message-content">
              <div class="message-text">{{ message.text }}</div>
              <div class="message-time">{{ formatTime(message.timestamp) }}</div>
            </div>
          </div>
        </div>
        
        <div class="ai-input-area">
          <label for="ai-input-field" class="sr-only">Ask AI assistant</label>
          <input
            id="ai-input-field"
            name="ai-message"
            v-model="inputText"
            @keyup.enter="sendMessage"
            type="text"
            placeholder="Ask AI assistant..."
            class="ai-input"
            aria-label="Ask AI assistant"
          />
          <button 
            @click="sendMessage" 
            class="ai-send-btn"
            title="Send message"
            aria-label="Send message to AI assistant"
            type="button"
          >
            <span class="sr-only">Send message</span>
            <i class="fas fa-paper-plane" aria-hidden="true"></i>
          </button>
        </div>
      </div>
    </div>
  </ResizablePanel>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ResizablePanel from './ResizablePanel.vue';

const isCollapsed = ref(false);
const inputText = ref('');
const messages = ref<Array<{ type: 'user' | 'ai'; text: string; timestamp: Date }>>([
  {
    type: 'ai',
    text: 'Hello! I\'m your AI assistant. How can I help you with the orchestration portal?',
    timestamp: new Date(),
  },
]);

const sendMessage = () => {
  if (!inputText.value.trim()) return;
  
  messages.value.push({
    type: 'user',
    text: inputText.value,
    timestamp: new Date(),
  });
  
  // Simulate AI response
  setTimeout(() => {
    messages.value.push({
      type: 'ai',
      text: `I understand you're asking about "${inputText.value}". This is a placeholder response. In a real implementation, this would connect to an AI service.`,
      timestamp: new Date(),
    });
  }, 500);
  
  inputText.value = '';
};

const formatTime = (date: Date): string => {
  return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
};
</script>

<style scoped>
/* AI panel styles moved to panels.css for consistency */
</style>

