<script lang="ts">
  import type { Theme } from '@/interface/types/Theme'
  import ThemeCard from './ThemeCard.svelte';

  let {
    themes,
    searchTerm,
    setDisplayTheme,
    toggleFavorite,
    isLoggedIn,
    onRequestSignIn,
    allStoreThemeRows,
  } = $props<{
    themes: Theme[];
    searchTerm: string;
    setDisplayTheme: (theme: Theme) => void;
    toggleFavorite: (theme: Theme) => void;
    isLoggedIn: boolean;
    onRequestSignIn?: () => void;
    /** Raw API list (includes `slave` rows) for master download aggregation */
    allStoreThemeRows?: Theme[];
  }>();
  
  let filteredThemes = $derived(themes.filter((theme: Theme) => {
    const q = searchTerm.toLowerCase();
    const name = (theme.name ?? '').toLowerCase();
    const description = (theme.description ?? '').toLowerCase();
    return name.includes(q) || description.includes(q);
  }));
</script>

<div class="relative" >
  <div class="grid grid-cols-1 gap-4 py-6 mx-auto sm:grid-cols-2 lg:grid-cols-3">
    {#each filteredThemes as theme (theme.id)}
      <ThemeCard
        {theme}
        onClick={() => setDisplayTheme(theme)}
        {toggleFavorite}
        {isLoggedIn}
        {onRequestSignIn}
        {allStoreThemeRows}
      />
    {/each}
  
    {#if filteredThemes.length !== 0}
      <a href="https://docs.betterseqta.org/theme-creation/" class="block relative z-0 hover:z-20 w-full cursor-pointer">
        <div class="bg-zinc-50 h-48 w-full transition-[transform,box-shadow,border-color] duration-300 ease-out relative overflow-clip rounded-xl border group group/card flex flex-col justify-center items-center hover:scale-[1.02] hover:shadow-xl dark:hover:shadow-black/60 dark:bg-zinc-800 dark:border-white/[0.1]">
          <div class="text-2xl font-IconFamily">{'\uecb3'}</div>
          <div class="text-xl font-bold text-center transition-all duration-500 dark:text-white">
            Got a Theme Idea?
            <p class="text-lg font-light subtitle">Transform it into a stunning theme!</p>
          </div>
        </div>
      </a>
    {/if}
  
  </div>
  {#if filteredThemes.length === 0}
    <div class="absolute top-0 flex flex-col items-center justify-center w-full text-center h-96">
      <h1 class="mt-4 text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100 sm:text-5xl">That doesn't exist! 😭😭😭</h1>
      <p class="mt-6 text-lg leading-7 text-zinc-600 dark:text-zinc-300">Sorry, we couldn't find the theme you're looking for. Maybe... you could create it?</p>
      <a href="https://docs.betterseqta.org/theme-creation/" class='p-2 px-3 mt-4 transition rounded-md cursor-pointer dark:text-white bg-zinc-500/10 hover:scale-105'>
        Show me how!
      </a>
    </div>
  {/if}
</div>
