<script lang="ts" setup>
const tab = ref('text')
</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="chapter">
          <div class="flex items-center gap-1">
            <Icon name="tabler:text-plus" />
            <span>章节生成</span>
          </div>
        </TabsTrigger>
        <TabsTrigger
          value="bot"
          disabled
        >
          <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 === 'chapter'"
        class="flex h-20 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>
      <Textarea
        placeholder="请输入文本来生成内容"
        class="h-20 flex-1"
      />
      <div class="flex flex-col items-center gap-2">
        <Button size="lg">
          <Icon name="mage:stars-c-fill" />
          生成教案
        </Button>
        <p class="text-xs text-foreground/40">内容由 AI 生成，仅供参考</p>
      </div>
    </div>
    <div
      class="flex flex-col gap-4 rounded-md border p-4 overflow-hidden relative"
    >
      <!-- <div class="absolute inset-0 -z-10 overflow-hidden rounded-md opacity-30">
        <div
          class="bubble animate-bubble -top-24 -left-14 size-48"
          style="--i: 0"
        />
        <div
          class="bubble animate-bubble -top-10 -right-8 size-28"
          style="--i: 1"
        />
      </div> -->
      <!-- header -->
      <div class="flex justify-between items-start gap-2">
        <div class="flex items-center gap-2">
          <Icon
            name="mage:stars-c-fill"
            class="text-xl text-amber-500"
          />
          <h1 class="text-lg font-medium">生成的教案标题</h1>
        </div>
        <div class="flex items-center gap-2">
          <Button
            variant="outline"
            size="sm"
          >
            <Icon name="tabler:reload" />
            重新生成
          </Button>
          <Button
            variant="outline"
            size="sm"
          >
            <Icon name="tabler:download" />
            下载
          </Button>
          <Button size="sm">
            <Icon name="tabler:copy" />
            存入教案库
          </Button>
        </div>
      </div>
      <!-- items -->
      <div class="flex flex-col rounded-md border overflow-hidden">
        <div class="flex justify-between items-center gap-2 p-2 px-4 bg-gradient-to-r from-primary/15 to-muted text-background">
          <span class="text-sm text-foreground font-medium">教学目标</span>
          <div class="flex items-center">
            <Button
              variant="link"
              size="xs"
              class="text-muted-foreground"
            >
              <Icon name="tabler:reload" />
              重新生成
            </Button>
            <Button
              variant="link"
              size="xs"
              class="text-muted-foreground"
            >
              <Icon name="tabler:trash" />
              删除
            </Button>
          </div>
        </div>
        <div class="p-4 py-2 prose prose-sm bg-background">
          <ol>
            <li>教学目标 1</li>
            <li>教学目标 2</li>
            <li>教学目标 3</li>
          </ol>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.bubble {
  @apply absolute bg-gradient-to-tr from-primary to-secondary rounded-full shadow-lg;
  --i: 0;
  --animation-delay: calc(var(--i) * 0.5s);
}

.animate-bubble {
  animation: bubble 20s infinite;
  animation-delay: var(--animation-delay);
}

/* bubble jump slowly */
@keyframes bubble {
  0% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-20px) scale(1.2);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
</style>
