<script lang="ts">
  import { _ } from "svelte-i18n";
  import { Button } from "$lib/components/ui/button";
  import { Card, CardContent } from "$lib/components/ui/card";
  import { Input } from "$lib/components/ui/input";
  import { Select, SelectContent, SelectItem, SelectTrigger } from "$lib/components/ui/select";
  import { getAssetUrl } from "$lib/api";
  import Meta from "$lib/components/meta/meta.svelte";
  import SexyBackground from "$lib/components/background/background.svelte";
  import PageHero from "$lib/components/page-hero/page-hero.svelte";

  let searchQuery = $state("");
  let categoryFilter = $state("all");

  const { data } = $props();

  function getUrlForItem(item) {
    switch (item.category) {
      case "video":
        return `/videos/${item.slug}`;
      case "article":
        return `/magazine/${item.slug}`;
      case "model":
        return `/models/${item.slug}`;
    }
  }

  const filteredItems = $derived(() => {
    return data.items
      .filter((item) => {
        const matchesSearch =
          searchQuery === "" || item.title.toLowerCase().includes(searchQuery.toLowerCase());
        const matchesCategory = categoryFilter === "all" || item.category === categoryFilter;
        return matchesSearch && matchesCategory;
      })
      .sort((a, b) => {
        // if (sortBy === "popular") {
        //   const aNum = parseInt(a.subscribers.replace(/[^\d]/g, ""));
        //   const bNum = parseInt(b.subscribers.replace(/[^\d]/g, ""));
        //   return bNum - aNum;
        // }
        // if (sortBy === "rating") return b.rating - a.rating;
        // if (sortBy === "videos") return b.videos - a.videos;
        return a.title.localeCompare(b.title);
      });
  });
</script>

<Meta
  title={$_("tags.title", { values: { tag: data.tag } })}
  description={$_("tags.description", { values: { tag: data.tag } })}
/>

<div
  class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5 overflow-hidden"
>
  <SexyBackground />

  <PageHero
    title={$_("tags.title", { values: { tag: data.tag } })}
    description={$_("tags.description", { values: { tag: data.tag } })}
  >
    <div class="flex flex-col md:flex-row gap-4 max-w-4xl mx-auto">
      <div class="relative flex-1">
        <span
          class="icon-[ri--search-line] absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground"
        ></span>
        <Input
          placeholder={$_("tags.search_placeholder")}
          bind:value={searchQuery}
          class="pl-10 bg-background/50 border-primary/20 focus:border-primary"
        />
      </div>
      <Select type="single" bind:value={categoryFilter}>
        <SelectTrigger
          class="w-full md:w-48 bg-background/50 border-primary/20 focus:border-primary"
        >
          <span class="icon-[ri--filter-line] w-4 h-4 mr-2"></span>
          {categoryFilter === "all"
            ? $_("tags.categories.all")
            : categoryFilter === "video"
              ? $_("tags.categories.video")
              : categoryFilter === "article"
                ? $_("tags.categories.article")
                : $_("tags.categories.model")}
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="all">{$_("tags.categories.all")}</SelectItem>
          <SelectItem value="video">{$_("tags.categories.video")}</SelectItem>
          <SelectItem value="article">{$_("tags.categories.article")}</SelectItem>
          <SelectItem value="model">{$_("tags.categories.model")}</SelectItem>
        </SelectContent>
      </Select>
    </div>
  </PageHero>
  <!-- Items Grid -->
  <div class="container mx-auto px-4 py-12">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      {#each filteredItems() as item (item.slug)}
        <a href={getUrlForItem(item)} class="block group">
          <Card
            class="py-0 h-full hover:shadow-2xl hover:shadow-primary/25 transition-all duration-300 hover:-translate-y-3 bg-gradient-to-br from-card/90 via-card/95 to-card/85 backdrop-blur-xl shadow-lg shadow-primary/10 overflow-hidden"
          >
            <div class="relative">
              <img
                src={getAssetUrl(item["image"] || item["avatar"], "preview")}
                alt={item.title}
                class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300"
              />
              <div
                class="absolute group-hover:scale-105 transition-transform inset-0 bg-gradient-to-t from-black/40 to-transparent duration-300"
              ></div>

              <!-- Category Badge -->
              <div
                class="absolute top-3 left-3 bg-primary/90 text-white text-xs px-2 py-1 rounded-full capitalize"
              >
                {item.category}
              </div>
            </div>

            <CardContent class="p-6">
              <div class="flex items-start justify-between mb-3">
                <div>
                  <h3 class="font-semibold text-lg mb-1 group-hover:text-primary transition-colors">
                    {item.title}
                  </h3>
                </div>
              </div>

              <!-- Tags -->
              <div class="flex flex-wrap gap-2">
                {#each item.tags as tag (tag)}
                  <span class="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full">
                    {tag}
                  </span>
                {/each}
              </div>
            </CardContent>
          </Card>
        </a>
      {/each}
    </div>

    {#if filteredItems().length === 0}
      <div class="text-center py-12">
        <p class="text-muted-foreground text-lg">{$_("tags.no_results")}</p>
        <Button
          variant="outline"
          onclick={() => {
            searchQuery = "";
            categoryFilter = "all";
          }}
          class="mt-4"
        >
          {$_("tags.clear_filters")}
        </Button>
      </div>
    {/if}
  </div>
</div>
