<script setup lang="ts">
import { createChatTableMessages } from '@/components/chatroom/chat-table-messages.js'
import { md } from '@/tools/md.js'

defineProps<{
  content: string | null
  aiiThinking: string
  aiiMessage: string | null
  aiiTokenInfo: string
  onSendMessage: () => void
  onAccept: () => void
  onRewrite: () => void
  onCancel: () => void
  onMessageEdit: (oldMessage: string, newMessage: string, change: 'aii' | 'user') => void
  onMessageDelete: (message: string, change: 'aii' | 'user') => void
}>()

const message = defineModel<string>('message', { required: true })
const mode = defineModel<'continue' | 'expand'>('mode', { required: true })
</script>

<template>
  <div class="chat-table-container">
    <div class="viewer">
      <component
        v-if="content !== null"
        :is="createChatTableMessages(content, onMessageEdit, onMessageDelete)"
      />
      <div v-if="aiiMessage !== null" class="user-message message" v-html="md.render(message)" />
      <div v-if="aiiMessage !== null" class="aii-message-streaming message">
        <div class="thinking">{{ aiiThinking }}</div>
        <div v-html="md.render(aiiMessage)" />
      </div>
    </div>

    <div v-if="aiiMessage === null" class="editor">
      <n-input v-model:value="message" type="textarea" :resizable="false" />
      <n-flex justify="right" align="center">
        <n-button type="tertiary" size="small" circle>!</n-button>
        <n-switch
          v-model:value="mode"
          size="large"
          checked-value="expand"
          unchecked-value="continue"
        >
          <template #checked>扩写模式</template>
          <template #unchecked>推进模式</template>
          <template #icon>✒️</template>
        </n-switch>
        <n-button type="primary" size="small" round @click="onSendMessage">发送 ↩︎</n-button>
      </n-flex>
    </div>

    <div v-else class="confirmer">
      <n-flex justify="center" align="center" size="large">
        <n-button secondary type="success" size="large" @click="onAccept">接受</n-button>
        <n-button secondary type="warning" size="large" @click="onRewrite">重写</n-button>
        <n-button secondary type="error" size="large" @click="onCancel">撤回</n-button>
      </n-flex>
      <p v-html="aiiTokenInfo" style="margin: 0; text-align: center"></p>
    </div>
  </div>
</template>

<style scoped lang="scss">
div.chat-table-container {
  border: 1px solid #434343;
  border-radius: 4px;
  padding: 3px;
  flex: 1;
  min-height: 0;

  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 3px;

  div.viewer {
    flex: 1;
    overflow: auto;
    padding: 10px;

    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  div.editor,
  div.confirmer {
    flex: 0;
    min-height: 120px;
    border-radius: 4px;
    padding: 3px;
  }

  div.editor {
    border: 3px solid rgb(122 255 162 / 0.7);
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  div.confirmer {
    border: 3px solid rgb(255 110 110 / 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }
}
</style>
