<script lang="ts">
  import "../lib/iconify-offline";
  import Icon from "@iconify/svelte";

  type Variant = "white" | "green" | "blue" | "inactive" | "date";

  let {
    label,
    variant = "white",
    href = null,
    active = false,
    onclick = null,
    icon = null,
    customColor = null,
  }: {
    label: string;
    variant?: Variant;
    href?: string | null;
    active?: boolean;
    onclick?: (() => void) | null;
    /** Iconify id (z. B. mdi:tag) */
    icon?: string | null;
    /** CSS-Farbe für Pill-Hintergrund (z. B. #2d5a27) */
    customColor?: string | null;
  } = $props();

  /** Grobe Helligkeit für lesbare Textfarbe auf customColor-Hintergrund. */
  function isLightBackground(cssColor: string): boolean {
    const s = cssColor.trim();
    const hex6 = /^#([0-9a-f]{6})$/i.exec(s);
    const hex3 = /^#([0-9a-f]{3})$/i.exec(s);
    let r = 200;
    let g = 200;
    let b = 200;
    if (hex6) {
      const n = parseInt(hex6[1], 16);
      r = (n >> 16) & 255;
      g = (n >> 8) & 255;
      b = n & 255;
    } else if (hex3) {
      const h = hex3[1];
      r = parseInt(h[0] + h[0], 16);
      g = parseInt(h[1] + h[1], 16);
      b = parseInt(h[2] + h[2], 16);
    } else if (s.startsWith("rgb")) {
      const m = s.match(/\d+/g);
      if (m && m.length >= 3) {
        r = Number(m[0]);
        g = Number(m[1]);
        b = Number(m[2]);
      }
    } else {
      return true;
    }
    const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
    return lum > 0.55;
  }

  const baseClass =
    "inline-flex shrink-0 items-center gap-1 whitespace-nowrap border-0 py-1 px-2.5 text-[.6rem] rounded-full transition-[opacity,filter] no-underline shadow-none outline-none ring-0";
  const variantClass = $derived.by(() => {
    if (customColor?.trim()) {
      return "";
    }
    if (variant === "white")
      return "bg-stein-100 text-stein-800";
    if (variant === "green") return "bg-wald-100 text-wald-800";
    if (variant === "blue") return "bg-sky-100/90 text-sky-900";
    if (variant === "inactive") return "bg-stein-200 text-stein-500";
    if (variant === "date") return "bg-wald-50 text-wald-800";
    return "bg-stein-200 text-stein-500";
  });
  const pillStyle = $derived.by(() => {
    const c = customColor?.trim();
    if (!c) return "";
    const light = isLightBackground(c);
    const fg = light ? "#111827" : "#fafafa";
    return `background-color: ${c}; color: ${fg};`;
  });
  const interactiveClass = $derived.by(() =>
    href || onclick ? "hover:brightness-[0.97] active:brightness-[0.94]" : "",
  );
  const classes = $derived.by(
    () =>
      `${baseClass} ${variantClass} ${interactiveClass} ${active ? "pointer-events-none opacity-80" : ""}`.trim(),
  );
</script>

{#if href}
  <a
    href={href}
    class={classes}
    style={pillStyle || undefined}
    aria-current={active ? "true" : undefined}
  >
    {#if icon}
      <Icon {icon} class="size-3 shrink-0 opacity-90" aria-hidden="true" />
    {/if}
    {label}
  </a>
{:else if onclick}
  <button
    type="button"
    class={classes}
    style={pillStyle || undefined}
    aria-current={active ? "true" : undefined}
    onclick={onclick}
  >
    {#if icon}
      <Icon {icon} class="size-3 shrink-0 opacity-90" aria-hidden="true" />
    {/if}
    {label}
  </button>
{:else}
  <span class={classes} style={pillStyle || undefined}>
    {#if icon}
      <Icon {icon} class="size-3 shrink-0 opacity-90" aria-hidden="true" />
    {/if}
    {label}
  </span>
{/if}
