<script setup>
definePageMeta({
  layout: false,
  name: "hadithaChatBot",
});
useHead({
  name: "hadithaChatBot",
  title: `${import.meta.env.VITE_HADITH_PAGE_TITLE} | جستجو`,
  meta: [
    { name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
    {
      name: "msapplication-TileImage",
      content: "/img/haditha/fav-icons/ms-icon-144x144.png",
    },
    { name: "theme-color", content: "#ffffff" },
  ],
  bodyAttrs: {
    class: import.meta.env.VITE_HADITH_SYSTEM,
  },
  link: [
    {
      rel: "icon",
      type: "image/x-icon",
      href: "/img/haditha/fav-icons/favicon.ico",
    },
    { rel: "manifest", href: "/img/haditha/fav-icons/manifest.json" },
    // rel: icon
    {
      rel: "icon",
      type: "image/png",
      sizes: "16x16",
      href: "/img/haditha/fav-icons/favicon-16x16.png",
    },
    {
      rel: "icon",
      type: "image/png",
      sizes: "32x32",
      href: "/img/haditha/fav-icons/favicon-32x32.png",
    },
    {
      rel: "icon",
      type: "image/png",
      sizes: "96x96",
      href: "/img/haditha/fav-icons/favicon-96x96.png",
    },
    {
      rel: "icon",
      sizes: "192x192",
      type: "image/png",
      href: "/img/haditha/fav-icons/android-icon-192x192.png",
    },
    // rel: apple
    {
      rel: "apple-touch-icon",
      sizes: "57x57",
      href: "/img/haditha/fav-icons/apple-icon-57x57.png",
    },
    {
      rel: "apple-touch-icon",
      sizes: "60x60",
      href: "/img/haditha/fav-icons/android-icon-60x60.png",
    },
    {
      rel: "apple-touch-icon",
      sizes: "72x72",
      href: "/img/haditha/fav-icons/android-icon-72x72.png",
    },
    {
      rel: "apple-touch-icon",
      sizes: "76x76",
      href: "/img/haditha/fav-icons/android-icon-76x76.png",
    },
    {
      rel: "apple-touch-icon",
      sizes: "114x114",
      href: "/img/haditha/fav-icons/android-icon-114x114.png",
    },
    {
      rel: "apple-touch-icon",
      sizes: "120x120",
      href: "/img/haditha/fav-icons/android-icon-120x120.png",
    },
    {
      rel: "apple-touch-icon",
      sizes: "144x144",
      href: "/img/haditha/fav-icons/android-icon-144x144.png",
    },
    {
      rel: "apple-touch-icon",
      sizes: "152x152",
      href: "/img/haditha/fav-icons/android-icon-152x152.png",
    },
    {
      rel: "apple-touch-icon",
      sizes: "180x180",
      href: "/img/haditha/fav-icons/android-icon-180x180.png",
    },
  ],
});

const state = reactive({
  filters: [
    {
      label: "خلاصه سازی",
      icon: "i-lucide-bookmark",

      children: [
        {
          label: "خلاصه‌سازی حدیث",
        },
        {
          label: "خلاصه‌سازی باب‌های مختلف کتاب الکافی",
        },
        {
          label: "خلاصه‌سازی احادیث درباره اخلاق و رفتار",
        },
        {
          label: "خلاصه‌سازی احادیث با موضوع نماز و عبادات",
        },
        {
          label: "خلاصه‌سازی احادیث از امام علی (ع)",
        },
      ],
    },
    {
      label: "دسته بندی",
      icon: "i-lucide-bookmark",
      children: [
        {
          label: "خلاصه‌سازی حدیث",
        },
        {
          label: "خلاصه‌سازی باب‌های مختلف کتاب الکافی",
        },
        {
          label: "خلاصه‌سازی احادیث درباره اخلاق و رفتار",
        },
        {
          label: "خلاصه‌سازی احادیث با موضوع نماز و عبادات",
        },
        {
          label: "خلاصه‌سازی احادیث از امام علی (ع)",
        },
      ],
    },
    {
      label: "کلمات کلیدی",
      icon: "i-lucide-bookmark",
      children: [
        {
          label: "خلاصه‌سازی حدیث",
        },
        {
          label: "خلاصه‌سازی باب‌های مختلف کتاب الکافی",
        },
        {
          label: "خلاصه‌سازی احادیث درباره اخلاق و رفتار",
        },
        {
          label: "خلاصه‌سازی احادیث با موضوع نماز و عبادات",
        },
        {
          label: "خلاصه‌سازی احادیث از امام علی (ع)",
        },
      ],
    },
    {
      label: "تشخیص موجودی",
      icon: "i-lucide-bookmark",
      children: [
        {
          label: "خلاصه‌سازی حدیث",
        },
        {
          label: "خلاصه‌سازی باب‌های مختلف کتاب الکافی",
        },
        {
          label: "خلاصه‌سازی احادیث درباره اخلاق و رفتار",
        },
        {
          label: "خلاصه‌سازی احادیث با موضوع نماز و عبادات",
        },
        {
          label: "خلاصه‌سازی احادیث از امام علی (ع)",
        },
      ],
    },
  ],
  list: new Array(3).fill(0),
  value: "",
});

// components declaration
const HadithaLayout = defineAsyncComponent(() =>
  import("@haditha/layouts/HadithaLayout.vue")
);
const NavigationMenu = defineAsyncComponent(() =>
  import("@haditha/components/haditha/NavigationMenu.vue")
);
</script>

<template>
  <HadithaLayout>
    <div class="chat-bot-page h-full">
      <div class="page-container pt-20 h-full">
        <navigation-menu></navigation-menu>

        <UContainer
          ui="{
          base: 'sm:px-6 lg:px-4',
        }"
          class="page-inner-container sm:px-6 lg:px-4 h-full"
        >
          <div class="page-content flex flex-col py-12 p-2 h-full">
            <div v-if="state.list.length" class="messages basis-full">
              <div class="r-message flex items-center mb-6">
                <UIcon
                  size="18"
                  name="i-lucide-sparkle"
                  class="star-icon align-self-start mt-1"
                ></UIcon>
                <p class="basis-full message">
                  من می تونم متن حدیث را خلاصه کنم. لطفا محتوای خود را بفرستید
                </p>
                <UButton
                  class="p-0 copy-icon align-self-end"
                  icon="i-lucide-clipboard-copy"
                  variant=""
                  @click="
                    copyTextToClipboard('متن تستی جهت تست عملکرد دکمه کپی')
                  "
                >
                </UButton>
              </div>
              <div class="u-message flex justify-end mb-6">
                <div class="u-message-container">
                  <p class="message">
                    عَنِ الْحَسَنِ بْنِ عَلِيِّ بْنِ يُوسُفَ، عَنْ جَدِّهِ،
                    قَالَ: قَالَ أَبُو عَبْدِ اللَّهِ (عَلَيْهِ السَّلَامُ):
                    إِنَّمَا يَدْرُسُ الْإِنسَانُ لِيَعْلَمَ، وَإِنَّمَا
                    يَعْلَمُ لِيَعْمَلَ، وَإِنَّمَا يَعْمَلُ لِيُعْرَفَ بِهِ،
                    وَإِنَّمَا يُعْرَفُ بِهِ لِيُقْبَلَ بِهِ، وَإِنَّمَا
                    يُقْبَلُ بِهِ لِيُؤْمَنَ عَلَيْهِ، وَإِنَّمَا يُؤْمَنُ
                    عَلَيْهِ لِيُدْخَلَ الْجَنَّةَ
                  </p>
                  <p>این حدیث را لطفا خلاصه کن</p>
                </div>
              </div>

              <div class="r-message flex items-center mb-6">
                <UIcon
                  size="18"
                  name="i-lucide-sparkle"
                  class="star-icon align-self-start mt-1"
                ></UIcon>
                <p class="basis-full message">
                  خلاصه این حدیث چنین است:امام صادق (علیه‌السلام) می‌فرمایند:
                  انسان دانش می‌آموزد تا به آن عمل کند، و با عملش شناخته شود.
                  شناخت، سبب پذیرش او می‌شود، پذیرش باعث امان‌یافتن او می‌شود، و
                  این امان یافتن، در نهایت او را به بهشت می‌رساند.
                </p>
                <UButton
                  class="p-0 copy-icon align-self-end"
                  icon="i-lucide-clipboard-copy"
                  variant=""
                  @click="
                    copyTextToClipboard('متن تستی جهت تست عملکرد دکمه کپی')
                  "
                >
                </UButton>
              </div>
            </div>

            <div class="px-6 my-auto">
              <div class="flex editor">
                <UTextarea
                  class="basis-full"
                  size="xl"
                  placeholder="به نظرم باید یکی دیگه بنویسی"
                  variant="ghost"
                  v-model="value"
                  :rows="state.list.length ? 1 : 3"
                  :maxrows="2"
                  autoresize
                  @update:modelValue="onUpdateValue"
                  @change="onChangeValue"
                  @blur="onBlur"
                />
                <UButton
                  class="p-0 send align-self-start"
                  icon="i-lucide-arrow-up"
                  variant="solid"
                >
                </UButton>
              </div>
              <div class="filters mt-3" v-if="state.list.length == 0">
                <template v-for="(item, index) in state.filters">
                  <UDropdownMenu
                    v-if="item.children?.length"
                    :items="item.children"
                    :ui="{
                      arrow: 'arrow',
                      group: 'group',
                      label: 'label',
                      separator: 'separator',
                      item: 'item',
                      itemLeadingIcon: 'itemLeadingIcon',
                      itemLeadingAvatar: 'itemLeadingAvatar',
                      itemLeadingAvatarSize: 'itemLeadingAvatarSize',
                      itemTrailing: 'itemTrailing',
                      itemLabelExternalIcon: 'itemLabelExternalIcon',
                      content: 'filters-content w-82',
                    }"
                    class="filter-dropdown me-2"
                  >
                    <UButton
                      :label="item.label"
                      icon="i-lucide-menu"
                      color="neutral"
                      variant="outline"
                    />
                  </UDropdownMenu>

                  <UButton
                    v-else
                    :icon="item.icon"
                    :label="item.label"
                    class="w-full flex justify-center items-center me-3"
                  >
                  </UButton>
                </template>
              </div>
            </div>
          </div>
        </UContainer>
      </div>
    </div>
  </HadithaLayout>
</template>

<style scoped>
.chat-bot-page {
  background: linear-gradient(137.41deg, #ffffff -42.82%, #e5e0ff 87.9%);
  .page-container {
    .page-inner-container {
      .r-message {
        .star-icon {
          color: #4d00ff;

          border: 1px solid;

          border-image-source: linear-gradient(
            268.94deg,
            #d284ff -0.65%,
            #4d00ff 104.59%
          );
        }
        .message {
          font-family: var(--font);
          font-weight: 400;
          font-size: 14px;
          line-height: 27px;
          letter-spacing: 0%;
          text-align: right;
          color: var(--ui-color-two);
          margin-inline-end: 1em;
          margin-inline-start: 0.5em;
        }

        .copy-icon {
          color: #545aea;
          width: 20;
          height: 20;
        }
      }
      .u-message {
        .u-message-container {
          width: 280;
          height: 240;
          max-width: 280px;
          background: linear-gradient(
            169.5deg,
            #ffffff 25.51%,
            #e5e0ff 158.51%
          );

          gap: 10px;
          border-radius: 12px;
          border-width: 0.3px;
          padding: 1em;

          border: 0.3px solid #d9d9d9;
          box-shadow: 0px 1px 4px 0px #0000000d;

          font-family: var(--font);
          font-weight: 400;
          font-size: 13px;
          line-height: 26px;
          letter-spacing: 0%;
          text-align: right;

          color: var(--ui-color-two);
        }
      }

      
      .filters {
        .filter-dropdown {
          width: 122.5999984741211;
          height: 32;
          gap: 4px;

          border-radius: 8px;
          border-width: 1px;
          border-style: solid;
          border-color: #4d00ff;
          /* border-image: linear-gradient(268.94deg, #d284ff, #4d00ff) 1; */

          padding: 8px;
          box-shadow: 0px 1px 4px 0px #0000000d;

          font-family: var(--font);
          font-weight: 400;
          font-size: 11px;
          line-height: 16.5px;
          letter-spacing: 0%;
          text-align: center;

          color: var(--ui-color-two);
        }
        .filters-content {
          width: 328;
          height: 234;
          gap: 12px;
          border-radius: 12px;
          border-width: 0.3px;
          padding: 8px;
          background: #ffffff;
          border: 0.3px solid #4d00ff;

          border-image-source: linear-gradient(
            268.94deg,
            #d284ff -0.65%,
            #4d00ff 104.59%
          );
          box-shadow: 0px 1px 4px 0px #0000000d;
        }
      }
    }
  }
}
</style>

<style>
.chat-bot-page {
  .page-container {
    .page-inner-container {
      .editor {
        width: 672;
        height: 64;

        border-radius: 12px;
        border-width: 0.5px;
        padding-top: 12px;
        padding-right: 24px;
        padding-bottom: 12px;
        padding-left: 12px;

        background: linear-gradient(0deg, #ffffff 32.03%, #e5e0ff 135.16%);
        border: 0.5px solid;

        border-image-source: linear-gradient(
          268.94deg,
          #d284ff -0.65%,
          #4d00ff 104.59%
        );
        box-shadow: 0px 1px 4px 0px #0000000d;

        font-family: var(--font);
        font-weight: 300;
        font-size: 14px;
        line-height: 21px;
        letter-spacing: 0%;
        text-align: right;
        color: #8a92a8;

        textarea {
          resize: none;
          background: transparent;
          color: #8a92a8;
        }
        
        .send {
          width: 3em; /*40px;*/
          height: 2.8em; /*40px;*/
          gap: 1px;
          border-radius: 24px;
          background: #1b2132;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      /* .editor {
        textarea {
          resize: none;
          background: transparent;
          color: #8a92a8;
        }
      } */
    }
  }
}
.filters-content {
  width: 328;
  height: 234;
  gap: 12px;
  border-radius: 12px;
  border-width: 1px;
  padding: 8px;
  background: #ffffff;
  border: 0.3px solid #4d00ff;

  /* border-image-source: linear-gradient(
    268.94deg,
    #d284ff -0.65%,
    #4d00ff 104.59%
  ); */
  box-shadow: 0px 1px 4px 0px #0000000d;
  .item {
    margin-bottom: 0.5em;
    width: 312;
    height: 34;
    gap: 10px;
    border-radius: 8px;
    padding-top: 8px;
    padding-right: 12px;
    padding-bottom: 8px;
    padding-left: 12px;
    &:hover {
      background: linear-gradient(137.41deg, #ffffff -42.82%, #e5e0ff 87.9%);
    }
  }
}
</style>
