<script lang="ts" setup>
import type { FormSubmitEvent } from '#ui/types'
import { number, object, string, type InferType } from 'yup'

const loginState = useLoginState()
const toast = useToast()

const isUserTitlesRequestModalActive = ref(false)

const systemPagination = reactive({
  page: 1,
  pageSize: 15,
})

const userPagination = reactive({
  page: 1,
  pageSize: 15,
})

const { data: systemTitlesTemplate, status: systemTitlesTemplateStatus } =
  useAsyncData(
    'systemTitlesTemplate',
    () =>
      useFetchWrapped<
        PagedDataRequest & AuthedRequest,
        BaseResponse<PagedData<TitlesTemplate>>
      >('App.Digital_Titles.GetList', {
        token: loginState.token!,
        user_id: loginState.user.id,
        page: systemPagination.page,
        perpage: systemPagination.pageSize,
      }),
    {
      watch: [systemPagination],
    }
  )

const {
  data: userTitlesTemplate,
  status: userTitlesTemplateStatus,
  refresh: refreshUserTitlesTemplate,
} = useAsyncData(
  'userTitlesTemplate',
  () =>
    useFetchWrapped<
      PagedDataRequest & AuthedRequest & { process_status: 0 | 1 },
      BaseResponse<PagedData<TitlesTemplate>>
    >('App.User_UserTitles.GetList', {
      token: loginState.token!,
      user_id: loginState.user.id,
      to_user_id: loginState.user.id,
      page: userPagination.page,
      perpage: userPagination.pageSize,
      process_status: 1,
    }),
  {
    watch: [userPagination],
  }
)

const { data: userTitlesRequests, refresh: refreshUserTitlesRequests } =
  useAsyncData('userTitlesTemplateRequests', () =>
    useFetchWrapped<
      PagedDataRequest & AuthedRequest & { process_status: 0 | 1 },
      BaseResponse<PagedData<TitlesTemplate>>
    >('App.User_UserTitles.GetList', {
      token: loginState.token!,
      user_id: loginState.user.id,
      to_user_id: loginState.user.id,
      process_status: 0,
    })
  )

const userTitlesSchema = object({
  title_id: number().required().moreThan(0, '模板 ID 无效'),
  title: string().required('请填写课程名称'),
  description: string().required('请填写主讲人名字'),
})

type UserTitlesSchema = InferType<typeof userTitlesSchema>

const userTitlesState = reactive({
  title_id: 0,
  title: '',
  description: '',
})

const onUserTitlesRequest = (titles: TitlesTemplate) => {
  userTitlesState.title_id = titles.id
  isUserTitlesRequestModalActive.value = true
}

const onUserTitlesDelete = (titles: TitlesTemplate) => {
  useFetchWrapped<
    Pick<req.gen.TitlesTemplateRequest, 'to_user_id'> & {
      user_title_id: number
    } & AuthedRequest,
    BaseResponse<any>
  >('App.User_UserTitles.DeleteConn', {
    token: loginState.token!,
    user_id: loginState.user.id,
    to_user_id: loginState.user.id,
    user_title_id: titles.id,
  })
    .then((res) => {
      if (res.ret === 200) {
        toast.add({
          title: '删除成功',
          description: '已删除片头素材',
          color: 'green',
          icon: 'i-tabler-check',
        })
      } else {
        toast.add({
          title: '删除失败',
          description: res.msg || '未知错误',
          color: 'red',
          icon: 'i-tabler-alert-triangle',
        })
      }
    })
    .finally(() => {
      userPagination.page = 1
      refreshUserTitlesTemplate()
    })
}

const onUserTitlesSubmit = (event: FormSubmitEvent<UserTitlesSchema>) => {
  useFetchWrapped<
    req.gen.TitlesTemplateRequest & AuthedRequest,
    BaseResponse<any>
  >('App.User_UserTitles.CreateConn', {
    token: loginState.token!,
    user_id: loginState.user.id,
    to_user_id: loginState.user.id,
    ...event.data,
  })
    .then((res) => {
      if (res.ret === 200) {
        userTitlesState.title = ''
        userTitlesState.description = ''
        toast.add({
          title: '提交成功',
          description: '已提交片头制作请求',
          color: 'green',
          icon: 'i-tabler-check',
        })
      } else {
        toast.add({
          title: '提交失败',
          description: res.msg || '未知错误',
          color: 'red',
          icon: 'i-tabler-alert-triangle',
        })
      }
    })
    .finally(() => {
      isUserTitlesRequestModalActive.value = false
      userPagination.page = 1
      refreshUserTitlesRequests()
    })
}
</script>

<template>
  <div class="h-full">
    <div class="p-4 pb-0">
      <BubbleTitle
        title="片头片尾模版"
        subtitle="Materials"
      ></BubbleTitle>
      <GradientDivider />
    </div>
    <div class="p-4">
      <div
        class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-4"
        v-if="systemTitlesTemplateStatus === 'pending'"
      >
        <USkeleton
          class="w-full aspect-video"
          v-for="i in systemPagination.pageSize"
          :key="i"
        />
      </div>
      <div
        v-else-if="systemTitlesTemplate?.data.items.length === 0"
        class="w-full py-20 flex flex-col justify-center items-center gap-2"
      >
        <Icon
          class="text-7xl text-neutral-300 dark:text-neutral-700"
          name="i-tabler-photo-hexagon"
        />
        <p class="text-sm text-neutral-500 dark:text-neutral-400">暂时没有可用模板</p>
      </div>
      <div
        class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-4"
        v-else
      >
        <AigcGenerationTitlesTemplate
          v-for="titles in systemTitlesTemplate?.data.items"
          :data="titles"
          type="system"
          :key="titles.id"
          @user-titles-request="onUserTitlesRequest"
        />
      </div>
    </div>
    <div class="p-4 pb-0 pt-12">
      <BubbleTitle
        title="我的片头片尾"
        :bubble="false"
      ></BubbleTitle>
      <GradientDivider />
    </div>
    <div class="p-4 pt-2">
      <UAlert
        v-if="userTitlesRequests?.data.total"
        color="primary"
        icon="tabler:info-circle"
        variant="subtle"
        class="mb-4"
      >
        <template #title>
          有 {{ userTitlesRequests?.data.total }} 个片头正在制作中
        </template>
        <template #description>
          <div class="flex gap-2">
            <div
              v-for="titles in userTitlesRequests?.data.items"
              :key="titles.id"
            >
              <p>
                {{ titles.title }}
              </p>
            </div>
          </div>
        </template>
      </UAlert>
      <div
        class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-4"
        v-if="userTitlesTemplateStatus === 'pending'"
      >
        <USkeleton
          class="w-full aspect-video"
          v-for="i in userPagination.pageSize"
          :key="i"
        />
      </div>
      <div
        v-else-if="userTitlesTemplate?.data.items.length === 0"
        class="w-full py-20 flex flex-col justify-center items-center gap-2"
      >
        <Icon
          class="text-7xl text-neutral-300 dark:text-neutral-700"
          name="i-tabler-photo-hexagon"
        />
        <p class="text-sm text-neutral-500 dark:text-neutral-400">
          还没有使用过模板
        </p>
      </div>
      <div
        class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-4"
        v-else
      >
        <AigcGenerationTitlesTemplate
          v-for="titles in userTitlesTemplate?.data.items"
          type="user"
          :data="titles"
          :key="titles.id"
          @user-titles-delete="onUserTitlesDelete"
        />
      </div>
    </div>

    <UModal v-model="isUserTitlesRequestModalActive">
      <UCard
        :ui="{
          ring: '',
          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
        }"
      >
        <template #header>
          <div class="flex items-center justify-between">
            <div
              class="text-base font-semibold leading-6 text-gray-900 dark:text-white overflow-hidden"
            >
              <p>使用模板</p>
            </div>
            <UButton
              class="-my-1"
              color="gray"
              icon="i-tabler-x"
              variant="ghost"
              @click="isUserTitlesRequestModalActive = false"
            />
          </div>
        </template>

        <div>
          <UForm
            class="space-y-4"
            :schema="userTitlesSchema"
            :state="userTitlesState"
            @submit="onUserTitlesSubmit"
          >
            <UFormGroup
              label="课程名称"
              name="title"
              required
            >
              <UInput v-model="userTitlesState.title" />
            </UFormGroup>
            <UFormGroup
              label="主讲人"
              name="description"
              required
            >
              <UInput v-model="userTitlesState.description" />
            </UFormGroup>
            <UFormGroup name="title_id">
              <UInput
                type="hidden"
                v-model="userTitlesState.title_id"
              />
            </UFormGroup>

            <UAlert
              icon="tabler:info-circle"
              color="primary"
              variant="subtle"
              title="片头片尾模板"
              description="提交模板相应字段后，待工作人员制作好后即可使用"
            />

            <div class="flex justify-end gap-2">
              <UButton
                color="primary"
                variant="soft"
                label="取消"
                @click="isUserTitlesRequestModalActive = false"
              />
              <UButton
                color="primary"
                type="submit"
              >
                提交
              </UButton>
            </div>
          </UForm>
        </div>
      </UCard>
    </UModal>
  </div>
</template>

<style scoped></style>
