// Tailwind color picker: enhances any input.tw-colorpicker
(function () {
  const icon = (name, cls = "w-4 h-4") => {
    if (window.tailwindIcon) return window.tailwindIcon(name, cls);
    if (window.lucide && window.lucide.icons && window.lucide.icons[name]) {
      const svg = window.lucide.createElement(window.lucide.icons[name]);
      svg.setAttribute("class", cls);
      return svg.outerHTML;
    }
    return "";
  };

  class TailwindColorPicker {
    constructor(input) {
      this.input = input;
      this.colors = [
        "#64748b", "#ef4444", "#f97316", "#eab308", "#84cc16", "#22c55e",
        "#10b981", "#06b6d4", "#0ea5e9", "#3b82f6", "#6366f1", "#8b5cf6",
        "#d946ef", "#f43f5e", "#000000", "#ffffff",
      ];
      this.init();
    }

    init() {
      this.input.type = "hidden";
      const value = this.input.value || "#3b82f6";

      this.container = document.createElement("div");
      this.container.className = "relative";

      this.trigger = document.createElement("button");
      this.trigger.type = "button";
      this.trigger.className = "flex items-center gap-3 w-full bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-600 rounded-lg px-3 py-2 text-left focus:outline-none focus:border-blue-500 transition-colors";

      this.swatch = document.createElement("div");
      this.swatch.className = "w-6 h-6 rounded border border-slate-200 dark:border-slate-600 shadow-sm";
      this.swatch.style.backgroundColor = value;

      this.label = document.createElement("span");
      this.label.className = "flex-1 text-sm font-mono text-slate-600 dark:text-slate-300";
      this.label.innerText = value;

      const chevron = document.createElement("div");
      chevron.innerHTML = icon("ChevronDown", "w-4 h-4 text-slate-400");

      this.trigger.append(this.swatch, this.label, chevron);

      this.dropdown = document.createElement("div");
      this.dropdown.className = "absolute top-full left-0 mt-2 w-full bg-white dark:bg-slate-800 rounded-lg shadow-xl border border-slate-200 dark:border-slate-700 p-3 z-20 hidden grid grid-cols-8 gap-2";

      this.colors.forEach((color) => {
        const btn = document.createElement("button");
        btn.type = "button";
        btn.className = "w-6 h-6 rounded-full border border-slate-200 dark:border-slate-600 hover:scale-110 transition-transform focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-slate-800";
        btn.style.backgroundColor = color;
        btn.onclick = (e) => {
          e.preventDefault();
          this.setColor(color);
          this.toggle(false);
        };
        this.dropdown.appendChild(btn);
      });

      const customWrapper = document.createElement("div");
      customWrapper.className = "col-span-8 border-t border-slate-100 dark:border-slate-700 pt-2 mt-1 flex items-center justify-between";
      const customLabel = document.createElement("span");
      customLabel.className = "text-xs text-slate-500";
      customLabel.innerText = "Custom:";
      const nativeContainer = document.createElement("div");
      nativeContainer.className = "relative w-full ml-2 h-8 bg-slate-100 dark:bg-slate-700 rounded cursor-pointer hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors flex items-center justify-center text-xs text-slate-500 dark:text-slate-400";
      nativeContainer.innerText = "Pick Color";
      const nativeInput = document.createElement("input");
      nativeInput.type = "color";
      nativeInput.className = "absolute inset-0 opacity-0 w-full h-full cursor-pointer";
      nativeInput.oninput = (e) => this.setColor(e.target.value);
      nativeContainer.appendChild(nativeInput);
      customWrapper.append(customLabel, nativeContainer);
      this.dropdown.appendChild(customWrapper);

      this.container.append(this.trigger, this.dropdown);
      this.input.parentElement.insertBefore(this.container, this.input);

      this.trigger.onclick = (e) => {
        e.preventDefault();
        this.toggle();
      };
      document.addEventListener("click", (e) => {
        if (!this.container.contains(e.target)) this.toggle(false);
      });

      this.setColor(value, false);
    }

    toggle(force) {
      const show = typeof force === "boolean" ? force : this.dropdown.classList.contains("hidden");
      if (show) this.dropdown.classList.remove("hidden");
      else this.dropdown.classList.add("hidden");
    }

    setColor(color, fire = true) {
      this.input.value = color;
      this.swatch.style.backgroundColor = color;
      this.label.innerText = color;
      if (fire) this.input.dispatchEvent(new Event("change"));
    }
  }

  function initColorPickers() {
    document.querySelectorAll("input.tw-colorpicker").forEach((el) => {
      if (!el.dataset.enhanced) {
        el.dataset.enhanced = "true";
        new TailwindColorPicker(el);
      }
    });
  }

  window.initColorPickers = initColorPickers;

  if (document.readyState === "interactive" || document.readyState === "complete") {
    initColorPickers();
  } else {
    document.addEventListener("DOMContentLoaded", initColorPickers);
  }
})();
