<script lang="ts">
  import { clickoutside } from '@svelte-put/clickoutside';
  import { goto } from "$app/navigation";
  import { page } from "$app/stores"; 
  import { get } from "svelte/store";
  import Icon from "@iconify/svelte";

  import { modelStore } from "$lib/stores/use-model";
  import UserIsLogged from '$lib/components/UserIsLogged.svelte';
  import Comments from '$lib/components/models/drawer/comments/Comments.svelte';
	import { env } from '$env/dynamic/public';
	import Button from '$lib/components/Button.svelte';

  let { open, model } = get(modelStore);

  modelStore.subscribe((value) => {
    open = value?.open;
    model = value?.model;
  });

  const handleClose = () => {
    modelStore.update((value) => {
      return {
        ...value,
        open: false,
      };
    });

    $page.url.searchParams.delete('model');
    goto(`?${$page.url.searchParams.toString()}`);
  };
</script>

<div
  class="w-full fixed top-0 left-0 h-full bg-black bg-opacity-50 z-0 backdrop-blur transition-all duration-100"
  class:opacity-0={!open}
  class:pointer-events-none={!open}
  class:!z-40={open}
>
  {#if open}
    <div
      class="ml-auto w-full max-w-3xl bg-neutral-950 h-full border-l border-neutral-800 transition-all duration-200 flex flex-col justify-between"
      use:clickoutside on:clickoutside={handleClose}
      >
      <div class="p-8 overflow-auto">
        <header class="flex w-full justify-between items-start mb-6 pr-6">
          <div class="flex items-center justify-start gap-3 lg:gap-6">
            <img src={model?.image} class="lg:w-16 lg:h-16 w-12 h-12 rounded-xl bg-neutral-800 object-cover" alt={model?.id} />
            <div>
              <p class="text-white font-semibold text-lg lg:text-2xl mb-1 truncate">
                {model?.title ?? model?.id}
              </p>
              <a href="https://huggingface.co/{model?.id}" class="text-neutral-400 underline hover:text-blue-00 flex items-center justify-start gap-1">
                <Icon icon="iconamoon:link-external-fill" class="w-4 h-4" /> 
                View on HuggingFace
              </a>
            </div>
          </div>
          <button on:click={handleClose}>
            <Icon icon="carbon:close" class="w-6 h-6 text-white cursor-pointer" />
          </button>
        </header>
        <main>
          <div class="justify-start items-center gap-4 flex mb-6">
            <div class="bg-red-500 bg-opacity-20 border border-red-500 px-3 py-1.5 rounded-full text-neutral-100 flex items-center justify-center gap-1 font-medium text-sm">
              <Icon icon="solar:heart-bold" class="lg:w-4 lg:h-4 w-3 h-3 text-red-500" />
              {model?.likes ?? 0}
            </div>
            <a
              href="/"
              class="bg-blue-500 bg-opacity-20 border border-blue-500 hover:bg-opacity-60 transition-all duration-200 px-3 py-1.5 rounded-full text-neutral-100 flex items-center justify-center gap-1 font-medium text-sm"
            >
              <Icon icon="solar:download-square-bold" class="lg:w-4 lg:h-4 w-3 h-3 text-blue-500" />
              View files
            </a>
            <a
              href="/generate?model={model?.id}"
              class="bg-pink-500 bg-opacity-20 hover:bg-opacity-60 transition-all duration-200 border border-pink-500 px-3 py-1.5 rounded-full text-neutral-100 flex items-center justify-center gap-1 font-medium text-sm"
            >
              <Icon icon="fluent:glance-horizontal-sparkles-16-filled" class="lg:w-4 lg:h-4 w-3 h-3 text-pink-500" />
              Generate
            </a>
          </div>
          {#if model?.gallery && model?.gallery?.length > 0}
            <div>
              <p class="text-neutral-400 uppercase text-xs font-bold">Examples</p>
              <div class="grid grid-cols-3 md:grid-cols-5 lg:grid-cols-6 gap-5 mt-2">
                {#each model?.gallery as example}
                  <div class="w-full h-[120px] relative z-[1] mb-3 overflow-hidden">
                    <img src="{env.PUBLIC_FILE_UPLOAD_DIR}/{example.image}" class="w-full h-full bg-center bg-cover rounded-lg object-cover object-center bg-neutral-800" alt={example.prompt} />
                  </div>
                {/each}
              </div>
            </div>
          {:else}
            <div class="bg-neutral-900 rounded-lg p-8 text-center">
              <p class="text-neutral-400 font-base">No generation examples available for this model</p>
              <a href="/generate?model={model?.id}" class="text-neutral-100 underline">
                Generate the first one
              </a>
            </div>
          {/if}
        </main>
      </div>
      <footer class="p-8 border-t border-neutral-900 bg-neutral-900/30">
        <p class="font-semibold text-neutral-100 text-base lg:text-lg mb-6">
          Commentaires ({model?.comments?.length ?? 0})
        </p>
        {#if model?.id}
          <UserIsLogged>
            <Comments comments={model?.comments} model={model} />
          </UserIsLogged>
        {/if}
      </footer>
    </div>
  {/if}
</div>