---
import type { HTMLAttributes } from "astro/types";

interface Palette { key: string; label: string; }

interface Props extends HTMLAttributes<"div"> {
  storageKey?: string;
  rootSelector?: string;       // where to set data-color (e.g., "html" or ".wrnx")
  ui?: "swatches" | "menu";    // grid or dropdown
  showLabels?: boolean;        // for swatch grid
  compact?: boolean;           // smaller dots
  trigger?: "default" | "dot"; // dot = only a colored circle in trigger
  palettes?: Palette[];        // keys/labels to display
}

const {
  storageKey = "wr-color",
  rootSelector = "html",
  ui = "menu",
  showLabels = false,
  compact = false,
  trigger = "default",
  class: className,
  palettes = [
    { key: "ocean",   label: "Ocean" },
    { key: "forest",  label: "Forest" },
    { key: "sunset",  label: "Sunset" },
    { key: "grape",   label: "Grape" },
    { key: "slate",   label: "Slate" },
    { key: "mint",    label: "Mint" },
    { key: "amber",   label: "Amber" },
    { key: "crimson", label: "Crimson" },
    { key: "indigo",  label: "Indigo" },
  ],
  ...rest
}: Props = Astro.props;

const dot = compact ? "wr:h-3.5 wr:w-3.5" : "wr:h-4 wr:w-4";
const btn =
  "wr:inline-flex wr:items-center wr:gap-2 wr:rounded-xl wr:border wr:border-border wr:bg-background/80 wr:backdrop-blur-sm " +
  "wr:text-foreground wr:h-10 wr:px-3 wr:text-sm wr:shadow-sm wr:transition wr:duration-200 wr:ease-out " +
  "wr:hover:bg-muted/70 wr:focus-visible:outline-none wr:focus-visible:ring-2 wr:focus-visible:ring-primary/40 wr:focus-visible:ring-offset-2";
const iconBtn =
  "wr:inline-flex wr:items-center wr:justify-center wr:h-9 wr:w-9 wr:rounded-xl wr:border wr:border-border wr:bg-background/80 wr:backdrop-blur-sm " +
  "wr:text-foreground wr:shadow-sm wr:transition wr:duration-200 wr:ease-out wr:hover:bg-muted/70 " +
  "wr:focus-visible:outline-none wr:focus-visible:ring-2 wr:focus-visible:ring-primary/40 wr:focus-visible:ring-offset-2";
const item =
  "wr:flex wr:items-center wr:gap-3 wr:w-full wr:px-3 wr:py-2.5 wr:rounded-lg wr:text-sm wr:hover:bg-muted/70 wr:transition wr:duration-150";
---

{ui === "swatches" ? (
  <div class={["wr:flex wr:flex-wrap wr:items-center wr:gap-3", className].join(" ")} {...rest} data-color-switcher>
    {palettes.map(p => (
      <button
        type="button"
        class="wr:relative wr:flex wr:flex-col wr:items-center wr:gap-1 wr:group wr:opacity-60 wr:transition wr:duration-150"
        data-palette={p.key}
        aria-checked="false"
        role="radio"
        title={p.label}
        aria-label={p.label}
      >
        <!-- Scope just this swatch to the palette so it inherits --primary -->
        <span data-swatch-scope data-color={p.key}>
          <span
            class={["wr:inline-block wr:rounded-full wr:ring-2 wr:ring-offset-2 wr:ring-offset-background wr:transition-all wr:group-hover:ring-primary/50", dot].join(" ")}
            data-swatch
          />
        </span>
        <!-- check icon (hidden until active) -->
        <svg data-check viewBox="0 0 24 24" class="wr:absolute wr:inset-0 wr:m-auto wr:size-4 wr:text-background wr:opacity-0 wr:scale-90 wr:transition" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
        {showLabels && <span class="wr:text-xs wr:text-muted-foreground">{p.label}</span>}
      </button>
    ))}
  </div>
) : (
  <div class={["wr:relative", className].join(" ")} {...rest} data-color-switcher data-color-menu>
    {trigger === "default" ? (
      <button
        type="button"
        class={[btn, "wr:min-w-[10.5rem] wr:justify-between"].join(" ")}
        data-menu-trigger
        aria-haspopup="menu"
        aria-expanded="false"
      >
        <span class="wr:inline-flex wr:items-center wr:gap-3">
          <!-- Trigger dot gets its own scoped palette -->
          <span data-current-scope data-color={palettes[0].key}>
            <span class={["wr:inline-block wr:rounded-full wr:ring-2 wr:ring-offset-2 wr:ring-offset-background", dot].join(" ")} data-swatch />
          </span>
          <span data-current-label class="wr:text-sm wr:font-medium">{palettes[0].label}</span>
        </span>
        <svg class="wr:size-4 wr:opacity-70" viewBox="0 0 24 24" fill="none"><path d="M7 10l5 5 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </button>
    ) : (
      <button
        type="button"
        class={iconBtn}
        data-menu-trigger
        aria-haspopup="menu"
        aria-expanded="false"
        title="Brand color"
      >
        <span data-current-scope data-color={palettes[0].key}>
          <span class={["wr:inline-block wr:rounded-full wr:ring-2 wr:ring-offset-2 wr:ring-offset-background", dot].join(" ")} data-swatch />
        </span>
      </button>
    )}

    <div
      class="wr:absolute wr:right-0 wr:z-50 wr:mt-2 wr:w-56 wr:rounded-2xl wr:border wr:border-border wr:bg-popover/90 wr:backdrop-blur-md wr:text-popover-foreground wr:shadow-lg wr:p-1.5 wr:hidden
             wr:origin-top-right wr:scale-95 wr:opacity-0 wr:transition wr:duration-150 wr:ease-out"
      role="menu"
      aria-label="Brand color"
      data-menu-panel
    >
      {palettes.map(p => (
        <button type="button" role="menuitemradio" aria-checked="false" class={item} data-palette={p.key}>
          <span data-swatch-scope data-color={p.key}>
            <span class={["wr:inline-block wr:rounded-full wr:ring-2 wr:ring-offset-2 wr:ring-offset-background", dot].join(" ")} data-swatch />
          </span>
          <span class="wr:flex-1">{p.label}</span>
          <svg data-check class="wr:size-4 wr:opacity-0 wr:scale-90 wr:transition" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </button>
      ))}
    </div>
  </div>
)}
<script is:inline define:vars={{ storageKey, rootSelector, palettes }}>
  (() => {
    const root = rootSelector === "html" ? document.documentElement : document.querySelector(rootSelector) || document.documentElement;

    function setColor(key) {
      root.setAttribute("data-color", key);
      localStorage.setItem(storageKey, key);
      reflectUI(key);
    }

    function reflectUI(key) {
      // mark active & show check
      document.querySelectorAll("[data-color-switcher] [data-palette]").forEach((btn) => {
        const active = btn.getAttribute("data-palette") === key;
        btn.setAttribute("aria-checked", active ? "true" : "false");
        btn.classList.toggle("wr:opacity-100", active);
        btn.classList.toggle("wr:opacity-60", !active);
        const chk = btn.querySelector("[data-check]");
        if (chk) {
          chk.classList.toggle("wr:opacity-100", active);
          chk.classList.toggle("wr:opacity-0", !active);
          chk.classList.toggle("wr:scale-100", active);
          chk.classList.toggle("wr:scale-90", !active);
        }
      });

      // update trigger label and its scoped color
      document.querySelectorAll("[data-color-menu]").forEach((wrap) => {
        const label = wrap.querySelector("[data-current-label]");
        const scope = wrap.querySelector("[data-current-scope]");
        if (label) label.textContent = (palettes.find(p => p.key === key)?.label) || key;
        if (scope) scope.setAttribute("data-color", key);
        wrap.querySelectorAll("[role='menuitemradio']").forEach((it) => {
          it.setAttribute("aria-checked", it.getAttribute("data-palette") === key ? "true" : "false");
        });
      });
    }

    function openMenu(wrap, open) {
      const trigger = wrap.querySelector("[data-menu-trigger]");
      const panel = wrap.querySelector("[data-menu-panel]");
      trigger?.setAttribute("aria-expanded", open ? "true" : "false");
      if (!panel) return;
      if (open) {
        panel.classList.remove("wr:hidden");
        requestAnimationFrame(() => {
          panel.classList.remove("wr:scale-95","wr:opacity-0");
          panel.classList.add("wr:scale-100","wr:opacity-100");
        });
      } else {
        panel.classList.add("wr:scale-95","wr:opacity-0");
        setTimeout(() => panel.classList.add("wr:hidden"), 150);
      }
    }

    // initial
    const saved = localStorage.getItem(storageKey);
    const initial = saved && palettes.some(p => p.key === saved) ? saved : palettes[0].key;
    setColor(initial);

    // wire
    document.addEventListener("click", (e) => {
      const choose = e.target.closest?.("[data-color-switcher] [data-palette]");
      if (choose) {
        setColor(choose.getAttribute("data-palette"));
        const menu = e.target.closest?.("[data-color-menu]");
        if (menu) openMenu(menu, false);
        return;
      }
      const trigger = e.target.closest?.("[data-color-menu] [data-menu-trigger]");
      const menuWrap = e.target.closest?.("[data-color-menu]");
      if (trigger && menuWrap) {
        const expanded = trigger.getAttribute("aria-expanded") === "true";
        openMenu(menuWrap, !expanded);
        return;
      }
      document.querySelectorAll("[data-color-menu]").forEach(w => openMenu(w, false));
    });

    document.addEventListener("keydown", (e) => {
      if (e.key === "Escape") {
        document.querySelectorAll("[data-color-menu]").forEach(w => openMenu(w, false));
      }
    });
  })();
</script>

<style is:inline>
/* Swatches use your role token directly */
[data-swatch] {
  background: hsl(var(--primary));
}

/* Active check only on the selected item */
[data-color-switcher] [data-palette][aria-checked="true"] [data-check] {
  opacity: 1 !important;
  transform: scale(1) !important;
}
</style>