<script lang="ts" setup>
import type { AcceptableValue } from 'reka-ui'
import { toast } from 'vue-sonner'
import {
  generateLessonPlan,
  getLessonPlanTemplate,
  regenerateLessonPlanSection,
  type LessonPlanTemplate,
  type AIGeneratedContentResponse,
  type GenerateLessonPlanParams,
} from '~/api/aifn'
import { uploadFile } from '~/api/file'
import type { AIGeneratedContent } from '~/components/ai'
import type { FetchError } from '~/types'

const tab = ref('text')
const loading = ref(false)

// const input = ref('')
const selectedModuleNames = ref([])
const selectedFiles = ref<File[]>([])
const onFileChange = (files: FileList) => {
  selectedFiles.value = Array.from(files)
}

const form = reactive({
  query: '',
  urls: [] as string[],
  moduleName: '',
})
const contentRequirements = ref<'custom' | 'template'>('custom')

const data = ref<AIGeneratedContent | null>(null)

const sections = [
  '学情分析',
  '教学目标',
  '课程重点',
  '课程难点',
  '教学准备',
  '教学过程',
  '作业与评价',
  '教学反思',
  '思政案例',
  '思政元素',
  '教学价值与分析',
]

const { data: templates } = useAsyncData(() => getLessonPlanTemplate())

const selectedTemplate = ref<LessonPlanTemplate | null>(null)

const onGenerateClick = async () => {
  if (form.query) {
    let payload: GenerateLessonPlanParams = {
      query: form.query,
    }
    loading.value = true

    if (tab.value === 'text') {
      if (selectedFiles.value.length > 0) {
        for (const file of selectedFiles.value) {
          form.urls.push(await uploadFile(file, 'temp'))
        }
        console.log('uploaded urls', form.urls)

        payload = {
          ...payload,
          urls: form.urls,
        }
      }

      if (contentRequirements.value === 'custom') {
        if (!form.moduleName) {
          toast.error('请选择要生成的内容模块')
          return
        }
        payload = {
          ...payload,
          moduleName: form.moduleName,
        }
      } else if (contentRequirements.value === 'template') {
        if (!selectedTemplate.value) {
          toast.error('请选择模版')
          return
        }
        payload = {
          ...payload,
          useTemplate: true,
          templateId: `${selectedTemplate.value.id}`,
        }
      }
    }

    toast.promise(generateLessonPlan(payload), {
      loading: '生成中...',
      success: (res: AIGeneratedContentResponse) => {
        if (res.code !== 200) {
          data.value = null
          toast.error(res.msg || '生成失败')
          return
        }
        data.value = res.data
        return '生成成功'
      },
      error: (err: FetchError) => {
        data.value = null
        return err.message
      },
      finally: () => {
        loading.value = false
      },
    })
  } else {
    data.value = null
  }
}

const onSectionRegenerateClick = (
  itemIndex: number,
  conversationId: string,
) => {
  if (data.value) {
    const item = data.value.sections[itemIndex]
    if (item) {
      loading.value = true
      toast.promise(
        regenerateLessonPlanSection({
          query: `重新生成${item.title}`,
          conversationId,
        }),
        {
          loading: `重新生成${item.title}中...`,
          success: (res: AIGeneratedContentResponse) => {
            if (res.code !== 200) {
              toast.error(res.msg || '生成失败')
              return
            }
            data.value?.sections.splice(itemIndex, 1, res.data.sections[0])
            return `重新生成${item.title}成功`
          },
          error: (err: FetchError) => {
            return err.message
          },
          finally: () => {
            loading.value = false
          },
        },
      )
    }
  }
}
</script>

<template>
  <div class="flex flex-col gap-4">
    <Tabs
      v-model="tab"
      class="w-[400px]"
    >
      <TabsList>
        <TabsTrigger value="text">
          <div class="flex items-center gap-1">
            <Icon name="tabler:article" />
            <span>文本生成</span>
          </div>
        </TabsTrigger>
        <TabsTrigger value="bot">
          <div class="flex items-center gap-1">
            <Icon name="tabler:robot" />
            <span>课程智能体</span>
          </div>
        </TabsTrigger>
      </TabsList>
    </Tabs>

    <div class="flex items-start gap-4">
      <div
        v-if="tab === 'bot'"
        class="flex h-full flex-col justify-center items-center gap-1 px-8 rounded-md border"
      >
        <Icon
          name="tabler:text-plus"
          class="text-3xl"
        />
        <span class="text-xs font-medium">选择智能体</span>
      </div>
      <UniFileSelector
        v-if="tab === 'text'"
        class="h-full"
        placeholder="上传资料"
        multiple
        @change="onFileChange"
      />
      <Textarea
        v-model="form.query"
        placeholder="请输入文本来生成内容"
        class="h-24 flex-1"
      />
      <div class="flex flex-col items-center gap-2">
        <Button
          size="lg"
          :disabled="loading"
          @click="onGenerateClick"
        >
          <Icon
            v-if="loading"
            name="svg-spinners:180-ring-with-bg"
          />
          <Icon
            v-else
            name="mage:stars-c-fill"
          />
          生成教案
        </Button>
        <p class="text-xs text-foreground/40">内容由 AI 生成，仅供参考</p>
      </div>
    </div>
    <div class="flex gap-4 items-start pb-2">
      <!-- <p class="text-sm text-muted-foreground font-medium">内容要求</p> -->
      <div class="flex flex-col gap-4 pt-1">
        <RadioGroup
          v-model="contentRequirements"
          default-value="custom"
          class="flex flex-row gap-4"
        >
          <div class="flex items-center space-x-2">
            <RadioGroupItem
              id="custom"
              value="custom"
            />
            <Label for="custom">自定义教案内容</Label>
          </div>
          <div class="flex items-center space-x-2">
            <RadioGroupItem
              id="template"
              value="template"
            />
            <Label for="template">模版库选择</Label>
          </div>
        </RadioGroup>
        <ToggleGroup
          v-if="contentRequirements === 'custom'"
          v-model="selectedModuleNames"
          type="multiple"
          variant="outline"
          size="sm"
          class="flex flex-wrap justify-start items-center gap-2 *:!px-2 *:!h-7"
          @update:model-value="
            (value) => {
              form.moduleName = Array.from(value as AcceptableValue[]).join(',')
            }
          "
        >
          <ToggleGroupItem
            v-for="section in sections"
            :key="section"
            class="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
            :value="section"
          >
            {{ section }}
          </ToggleGroupItem>
        </ToggleGroup>
        <div
          v-else
          class="flex gap-4 overflow-hidden overflow-x-auto snap-x snap-mandatory"
        >
          <!-- {{ templates?.data }} -->
          <Card
            v-for="template in templates?.data || []"
            :key="template.id"
            class="flex-shrink-0 p-0 overflow-hidden relative snap-start snap-always snap-x"
            :class="{
              'border-primary': selectedTemplate?.id === template.id,
            }"
            @click="
              () => {
                selectedTemplate = template
              }
            "
          >
            <CardHeader class="px-4 pt-3 pb-1">
              <h1 class="text-sm font-medium flex items-center gap-1">
                <Icon
                  name="fluent-color:document-text-24"
                  class="text-lg text-muted-foreground !stroke-[5px]"
                />
                {{ template.name }}
              </h1>
            </CardHeader>
            <CardContent class="p-0">
              <div
                v-if="selectedTemplate?.id === template.id"
                class="absolute inset-0"
              >
                <Icon
                  name="tabler:check"
                  class="absolute top-2 right-2 text-primary"
                />
              </div>
              <NuxtImg
                :src="template.imgUrl"
                class="h-72"
              />
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
    <AiGeneratedContent
      :data
      @regenerate="onSectionRegenerateClick"
      @regenerate-all="onGenerateClick"
    />
  </div>
</template>

<style scoped></style>
