<script setup lang="ts">
import type { AgentMessage } from "~/composables/useAgentChat";

interface ModelOption {
  id: number;
  name: string;
  modelId: string;
  providerName: string;
}

const props = defineProps<{
  messages: AgentMessage[];
  isLoading: boolean;
  loggedIn: boolean;
  modelId: number | null;
  models: ModelOption[];
  enableTools: boolean;
  rateLimitInfo?: {
    sessionRemaining: number | null;
    ipRemaining: number | null;
  };
  sidebarCollapsed: boolean;
  errorMessage: string;
  systemPrompt?: string;
}>();

const emit = defineEmits<{
  send: [content: string];
  stop: [];
  "update:modelId": [modelId: number | null];
  "update:enableTools": [val: boolean];
  approve: [toolCallId: string, approved: boolean];
  feedback: [messageId: string, feedback: "like" | "dislike"];
  edit: [messageId: string, content: string];
  regenerate: [];
  toggleSidebar: [];
  showPrompt: [];
  example: [content: string];
}>();

const inputRef = ref<{ setText: (text: string) => void; focus: () => void } | null>(null);
const editingMessageId = ref<string | null>(null);

function handleExample(content: string) {
  emit("example", content);
}

function handleEdit(messageId: string, content: string) {
  editingMessageId.value = messageId;
  inputRef.value?.setText(content);
}

function handleSend(content: string) {
  if (editingMessageId.value) {
    emit("edit", editingMessageId.value, content);
    editingMessageId.value = null;
  } else {
    emit("send", content);
  }
}

watch(
  () => props.errorMessage,
  (val) => {
    if (val) {
      const { $toast } = useNuxtApp();
      $toast?.error?.(val);
    }
  },
);
</script>

<template>
  <div class="agent-chat-area">
    <AgentToolbar
      :model-id="modelId"
      :models="models"
      :logged-in="loggedIn"
      :rate-limit-info="rateLimitInfo"
      @update:model-id="emit('update:modelId', $event)"
      @show-prompt="emit('showPrompt')"
      @toggle-sidebar="emit('toggleSidebar')"
    />

    <div class="chat-content">
      <AgentWelcome
        v-if="messages.length === 0"
        :logged-in="loggedIn"
        @example="handleExample"
      />

      <AgentMessageList
        v-else
        :messages="messages"
        :is-loading="isLoading"
        :logged-in="loggedIn"
        @approve="(id, approved) => emit('approve', id, approved)"
        @feedback="(id, fb) => emit('feedback', id, fb)"
        @edit="handleEdit"
        @regenerate="emit('regenerate')"
      />
    </div>

    <AgentInput
      ref="inputRef"
      :is-loading="isLoading"
      :disabled="rateLimitInfo?.sessionRemaining === 0"
      :enable-tools="enableTools"
      :logged-in="loggedIn"
      @send="handleSend"
      @stop="emit('stop')"
      @update:enable-tools="emit('update:enableTools', $event)"
    />
  </div>
</template>

<style scoped>
.agent-chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--color-canvas);
}

.chat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
</style>
