<!-- eslint-disable @typescript-eslint/no-explicit-any -->
<script lang="ts" setup>
import type { FormContext } from 'vee-validate'
import type { AnyZodObject } from 'zod'
import type { LLMMessage, LLMMessages } from '.'

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const props = defineProps<{
  formSchema: AnyZodObject
  form: FormContext<any>
  formFieldConfig?: {
    [key: string]: {
      component: string
      props?: Record<string, any>
      [key: string]: any
    }
  }
  messages?: LLMMessage[]
  messagesHistory?: LLMMessages[]
  disableUserInput?: boolean
}>()

defineEmits<{
  (e: 'submit', values: FormContext<any>['values']): void
}>()
</script>

<template>
  <div class="h-full flex flex-col gap-4">
    <div class="flex justify-between items-start">
      <div></div>
      <div>
        <!-- Histories -->
        <Button
          variant="outline"
          size="sm"
        >
          <Icon name="tabler:history" />
          历史记录
        </Button>
      </div>
    </div>
    <hr />

    <!-- 消息区域调整 -->
    <div
      v-if="messages && messages.length > 0"
      class="flex flex-col flex-1 gap-4 max-h-[calc(100vh-280px)]"
    >
      <div
        class="flex-1 flex flex-col gap-6 overflow-y-auto scroll-smooth px-2 pb-4"
      >
        <div
          v-for="(message, i) in messages"
          :key="i"
          class="w-full flex"
          :class="`${message.role == 'user' ? 'justify-end' : 'justify-start'}`"
        >
          <div
            class="w-fit px-4 py-3 rounded-lg bg-white dark:bg-gray-800 shadow max-w-prose border"
            :class="`${message.role == 'user' ? 'rounded-br-none' : 'rounded-bl-none'}`"
          >
            <MarkdownRenderer
              v-if="!!message.content"
              :source="message.content"
            />
            <div
              v-else
              class="flex items-center gap-2 text-foreground/60 text-sm font-medium"
            >
              <Icon
                name="svg-spinners:270-ring-with-bg"
                class="text-lg"
              />
              思考中
            </div>
          </div>
        </div>
      </div>
      <div
        v-if="!disableUserInput"
        class="relative"
      >
        <Textarea
          class="w-full h-12 pr-24 shadow-lg"
          placeholder="请告诉我额外的补充需求，我会尽量满足您的要求"
        />
        <div class="absolute right-2 bottom-2">
          <Button
            type="submit"
            size="sm"
          >
            <Icon name="tabler:send" />
            发送
          </Button>
        </div>
      </div>
    </div>

    <!-- 表单区域不变 -->
    <div
      v-else
      class="rounded-lg p-6 bg-primary/5"
    >
      <div class="flex flex-col gap-4">
        <AutoForm
          v-if="formSchema && form"
          :schema="formSchema"
          :form="form"
          :field-config="formFieldConfig"
          class="space-y-2"
          @submit="(values) => $emit('submit', values)"
        >
          <div class="w-full flex justify-center gap-2 pt-4">
            <Button
              type="submit"
              size="lg"
            >
              <Icon name="mage:stars-c-fill" />
              一键生成
            </Button>
          </div>
        </AutoForm>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
