// BlurMe Design System — JSX Port (dark mode, from claude-figma)

const cn = (...classes) => classes.filter(Boolean).join(" ");

// ─── Button ───────────────────────────────────────────────────────────────────
const BmButton = ({
  className, variant = "primary", size = "default",
  children, disabled, onClick, onKeyDown, title, type = "button", style, ...props
}) => {
  const base = [
    "inline-flex shrink-0 items-center justify-center",
    "font-semibold text-white whitespace-nowrap",
    "transition-all outline-none select-none cursor-pointer",
    "focus-visible:ring-2 focus-visible:ring-[#7256ff]/50",
    "active:translate-y-px",
    "disabled:pointer-events-none disabled:cursor-not-allowed",
  ].join(" ");

  const V = {
    primary:
      "border border-transparent bg-[#7256ff] hover:bg-[#443399] active:bg-[#443399] disabled:bg-[rgba(75,75,75,0.2)] disabled:text-white/20",

    neutral:
      "border border-transparent bg-[#4b4b4b] hover:bg-[rgba(75,75,75,0.4)] active:bg-[rgba(75,75,75,0.4)] disabled:bg-[rgba(75,75,75,0.2)] disabled:text-white/20",

    warning:
      "border border-transparent bg-[#ff8800] hover:bg-[rgba(255,136,0,0.84)] active:bg-[rgba(255,136,0,0.84)] disabled:bg-[rgba(75,75,75,0.2)] disabled:text-white/20",

    danger:
      "border border-transparent bg-[rgba(210,36,36,0.88)] hover:bg-[rgba(210,36,36,0.80)] active:bg-[rgba(210,36,36,0.80)] disabled:bg-[rgba(75,75,75,0.2)] disabled:text-white/20",

    "ghost-primary":
      "border border-transparent bg-transparent text-[#7256ff] hover:bg-[rgba(114,86,255,0.12)] hover:text-[#8e77ff] active:bg-[rgba(114,86,255,0.12)] active:text-[#8e77ff] shadow-none disabled:bg-[rgba(75,75,75,0.2)] disabled:text-white/20",

    "ghost-neutral":
      "border border-transparent bg-transparent text-[rgba(237,237,237,0.88)] hover:bg-[rgba(255,255,255,0.08)] hover:text-white active:bg-[rgba(255,255,255,0.08)] active:text-white shadow-none disabled:bg-[rgba(75,75,75,0.2)] disabled:text-white/20",

    "ghost-warning":
      "border border-transparent bg-transparent hover:bg-[rgba(255,136,0,0.12)] hover:text-[#ea9a3e] active:bg-[rgba(255,136,0,0.12)] active:text-[#ea9a3e] shadow-none disabled:bg-[rgba(75,75,75,0.2)] disabled:text-white/20",

    "ghost-danger":
      "border border-transparent bg-transparent hover:bg-[rgba(210,36,36,0.12)] hover:text-[#ff5555] active:bg-[rgba(210,36,36,0.12)] active:text-[#ff5555] shadow-none disabled:bg-[rgba(75,75,75,0.2)] disabled:text-white/20",

    "outline-primary":
      "border-[1.4px] border-[#7256ff] bg-transparent text-white hover:bg-[#7256ff] hover:text-white active:bg-[#7256ff] active:text-white shadow-none disabled:border-[rgba(75,75,75,0.2)] disabled:text-white/20",

    "outline-neutral":
      "border border-[rgba(255,255,255,0.12)] bg-[rgba(255,255,255,0.04)] text-white hover:border-[rgba(255,255,255,0.20)] hover:bg-[rgba(255,255,255,0.04)] hover:text-white active:border-[rgba(255,255,255,0.20)] active:bg-[rgba(255,255,255,0.04)] shadow-none disabled:bg-transparent disabled:border-[rgba(75,75,75,0.2)] disabled:text-white/20",

    "outline-neutral-ghost":
      "border border-[rgba(255,255,255,0.12)] bg-transparent text-white hover:border-[rgba(255,255,255,0.20)] hover:bg-[rgba(255,255,255,0.08)] active:border-[rgba(255,255,255,0.20)] active:bg-[rgba(255,255,255,0.08)] shadow-none disabled:border-[rgba(75,75,75,0.2)] disabled:text-white/20",

    "outline-primary-ghost":
      "border border-[#7256ff] bg-transparent text-white hover:bg-[rgba(114,86,255,0.20)] active:bg-[rgba(114,86,255,0.20)] shadow-none disabled:border-[rgba(75,75,75,0.2)] disabled:text-white/20",

    "outline-warning":
      "border-[1.4px] border-[#ff8800] bg-transparent text-white hover:bg-[#ff8800] hover:text-white active:bg-[#ff8800] active:text-white shadow-none disabled:border-[rgba(75,75,75,0.2)] disabled:text-white/20",

    "outline-danger":
      "border-[1.4px] border-[rgba(210,36,36,0.88)] bg-transparent text-white hover:bg-[rgba(210,36,36,0.88)] hover:text-white active:bg-[rgba(210,36,36,0.88)] active:text-white shadow-none disabled:border-[rgba(75,75,75,0.2)] disabled:text-white/20",

    link:
      "border border-transparent bg-transparent text-[#7256ff] shadow-none hover:text-[#8e77ff] active:text-[#8e77ff] disabled:text-white/20",

    "link-neutral":
      "border border-transparent bg-transparent text-[rgba(237,237,237,0.88)] hover:text-white active:text-white shadow-none disabled:text-white/20",

    "link-warning":
      "border border-transparent bg-transparent text-[#ff8800] shadow-none hover:text-[#ea9a3e] active:text-[#ea9a3e] disabled:text-white/20",

    "link-danger":
      "border border-transparent bg-transparent text-[rgba(210,36,36,0.88)] shadow-none disabled:text-white/20",
  };

  const S = {
    xs:        "h-[32px] px-[10px] gap-[6px]  text-[12px] leading-[1.5] tracking-[-0.3px] rounded-[6px]",
    sm:        "h-[36px] px-[12px] gap-[8px]  text-[14px] leading-[1.5] tracking-[-0.3px] rounded-[6px]",
    default:   "h-[40px] px-[14px] gap-[10px] text-[16px] leading-[1.5] tracking-[-0.4px] rounded-[6px]",
    lg:        "h-[48px] px-[16px] gap-[12px] text-[16px] leading-[1.5] tracking-[-0.4px] rounded-[8px]",
    xl:        "h-[60px] px-[18px] gap-[12px] text-[18px] leading-[1.35] tracking-[-0.2px] rounded-[8px]",
    icon:      "w-[40px] h-[40px] rounded-[6px]",
    "icon-xs": "w-[32px] h-[32px] rounded-[6px]",
    "icon-sm": "w-[36px] h-[36px] rounded-[6px]",
    "icon-lg": "w-[48px] h-[48px] rounded-[8px]",
  };

  return (
    <button
      type={type}
      disabled={disabled}
      onClick={onClick}
      onKeyDown={onKeyDown}
      title={title}
      style={style}
      className={cn(base, V[variant] || V.primary, S[size] || S.default, className)}
      {...props}
    >
      {children}
    </button>
  );
};

// ─── Input ────────────────────────────────────────────────────────────────────
const BmInput = ({
  className, type, label, helpText, error,
  variant = "default", prefix, suffix, containerClassName, wrapperClassName, ...props
}) => {
  const isSearch = variant === "search";
  return (
    <div className={cn("flex flex-col gap-[8px] w-full", wrapperClassName)}>
      {label && (
        <label className="text-[14px] font-normal text-[#fefefe] tracking-[-0.2px] leading-[1.5] px-[2px]">
          {label}
        </label>
      )}
      <div className={cn(
        "flex items-center rounded-[8px] border bg-white/[0.02] transition-colors",
        containerClassName,
        isSearch ? "gap-[10px] pl-[10px] pr-[12px] py-[8px]" : "gap-[12px] px-[12px] py-[8px]",
        error
          ? "border-red-400"
          : "border-[rgba(255,255,255,0.08)] hover:border-[rgba(255,255,255,0.16)]"
      )}>
        {prefix && <span className="shrink-0 flex items-center text-[rgba(255,255,255,0.88)]">{prefix}</span>}
        <input
          type={type}
          style={type === "date" || type === "time" ? { colorScheme: "dark" } : undefined}
          className={cn(
            "flex-1 min-w-0 bg-transparent outline-none",
            "text-[16px] font-normal text-[rgba(255,255,255,0.88)]",
            "tracking-[-0.4px] leading-[1.5]",
            "placeholder:text-[rgba(255,255,255,0.40)]",
            "disabled:pointer-events-none disabled:opacity-50",
            className
          )}
          {...props}
        />
        {suffix && <span className="shrink-0 flex items-center text-[rgba(255,255,255,0.88)]">{suffix}</span>}
      </div>
      {helpText && (
        <p className={cn(
          "text-[12px] font-normal tracking-[-0.3px] leading-[1.5] px-[2px]",
          error ? "text-red-400" : "text-[#999]"
        )}>
          {helpText}
        </p>
      )}
    </div>
  );
};

// ─── SelectBox ────────────────────────────────────────────────────────────────
const BmSelectBox = ({
  options, value, onChange, placeholder,
  width = "180px", size = "md", dropdownPosition = "bottom",
  prefix, className
}) => {
  const [open, setOpen] = React.useState(false);
  const isSm = size === "sm";
  const isBase = size === "base";
  return (
    <div className={cn("relative shrink-0", className)} style={{ width }}>
      <button
        type="button"
        onClick={() => setOpen(!open)}
        className={cn(
          "flex items-center border bg-white/[0.02] w-full cursor-pointer transition-all",
          isSm
            ? "gap-[6px] h-[32px] pl-[12px] pr-[8px] rounded-[6px] border-white/[0.08] hover:border-white/[0.16]"
            : "gap-[8px] h-[40px] text-left pl-[12px] pr-[10px] py-[8px] rounded-[8px] border-[rgba(255,255,255,0.08)] hover:border-[rgba(255,255,255,0.16)] hover:bg-[rgba(255,255,255,0.04)]"
        )}
      >
        {prefix && <span className="shrink-0 inline-flex items-center">{prefix}</span>}
        <p className={cn(
          "font-normal leading-[1.5] whitespace-nowrap",
          !isSm ? "flex-1" : "",
          isSm ? "text-[14px] tracking-[-0.2px]" : isBase ? "text-[14px] tracking-[-0.2px]" : "text-[16px] tracking-[-0.4px]",
          value ? "text-[rgba(255,255,255,0.88)]" : "text-[rgba(255,255,255,0.40)]"
        )}>
          {value || placeholder}
        </p>
        <div className={cn("shrink-0 transition-transform duration-200 text-[rgba(255,255,255,0.88)]", open ? "rotate-180" : "")}>
          <svg width={isSm ? 16 : 24} height={isSm ? 16 : 24} viewBox="0 0 24 24" fill="none">
            <path d="M7 10L12 15L17 10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
      </button>
      {open && (
        <>
          <div className="fixed inset-0 z-10" onClick={() => setOpen(false)} />
          <div className={cn(
            "absolute z-20 bg-[#222] border border-[rgba(255,255,255,0.08)] w-max min-w-full p-[8px]",
            "shadow-[8px_4px_32px_10px_rgba(0,0,0,0.2),6px_2px_8px_-2px_rgba(21,21,21,0.2),6px_20px_24px_-4px_rgba(21,21,21,0.16)]",
            dropdownPosition === "top" ? "bottom-[calc(100%+8px)]" : "top-[calc(100%+8px)]",
            isSm ? "rounded-[6px]" : "rounded-[8px]"
          )}>
            {options.map((option) => (
              <button
                key={option}
                type="button"
                onClick={() => { onChange(option); setOpen(false); }}
                className={cn(
                  "flex items-center w-full text-left font-normal leading-[1.5] transition-colors whitespace-nowrap",
                  isSm ? "h-[32px] px-[12px] rounded-[4px] text-[14px]" :
                  isBase ? "h-[36px] px-[12px] rounded-[6px] text-[14px] tracking-[-0.2px]" :
                           "h-[40px] px-[14px] rounded-[6px] text-[16px] tracking-[-0.4px]",
                  value === option
                    ? "bg-[rgba(255,255,255,0.08)] text-white"
                    : isSm
                      ? "text-[#999] hover:bg-[rgba(255,255,255,0.04)] hover:text-[#ccc]"
                      : "text-[rgba(237,237,237,0.88)] hover:bg-[rgba(255,255,255,0.04)]"
                )}
              >
                {option}
              </button>
            ))}
          </div>
        </>
      )}
    </div>
  );
};

// ─── Checkbox ─────────────────────────────────────────────────────────────────
const BmCheckbox = ({ checked, variant = "square", className, onClick }) => {
  if (variant === "circle") {
    return checked ? (
      <div className={cn("w-[24px] h-[24px] rounded-full bg-[#7256ff] shrink-0 cursor-pointer flex items-center justify-center", className)} onClick={onClick}>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path d="M9.62199 15.8897L6.72256 12.8543C6.64526 12.7732 6.55345 12.7088 6.45236 12.6649C6.35128 12.621 6.24292 12.5984 6.13348 12.5984C6.02405 12.5984 5.91568 12.621 5.8146 12.6649C5.71352 12.7088 5.6217 12.7732 5.5444 12.8543C5.21853 13.1954 5.21853 13.7465 5.5444 14.0877L9.03709 17.7441C9.36297 18.0853 9.88938 18.0853 10.2152 17.7441L19.0556 8.48925C19.3815 8.1481 19.3815 7.59701 19.0556 7.25585C18.9783 7.17475 18.8865 7.1104 18.7854 7.0665C18.6843 7.0226 18.576 7 18.4665 7C18.3571 7 18.2487 7.0226 18.1476 7.0665C18.0466 7.1104 17.9547 7.17475 17.8774 7.25585L9.62199 15.8897Z" fill="white"/>
        </svg>
      </div>
    ) : (
      <div className={cn("w-[24px] h-[24px] rounded-full border-2 border-white shrink-0 cursor-pointer", className)} onClick={onClick} />
    );
  }
  return checked ? (
    <div className={cn("w-[16px] h-[16px] rounded-[2.8px] bg-[#7256ff] flex items-center justify-center shrink-0 cursor-pointer", className)} onClick={onClick}>
      <svg width="10" height="8" viewBox="0 0 10 8" fill="none">
        <path d="M1 4L3.5 7L9 1" stroke="white" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </div>
  ) : (
    <div
      className={cn(
        "w-[16px] h-[16px] rounded-[2.8px] border border-white/[0.25] bg-transparent shrink-0 cursor-pointer",
        "hover:border-white/[0.5] hover:bg-white/[0.1]",
        "transition-colors",
        className
      )}
      onClick={onClick}
    />
  );
};

// ─── Chip ─────────────────────────────────────────────────────────────────────
const BmChip = ({ className, children, onClick, disabled }) => (
  <button
    type="button"
    disabled={disabled}
    onClick={onClick}
    className={cn(
      "inline-flex items-center justify-center whitespace-nowrap",
      "h-[28px] px-[14px] gap-[6px]",
      "text-[13px] font-normal leading-[1.5] tracking-[-0.2px]",
      "rounded-full border",
      "bg-white/[0.02] hover:bg-white/[0.08] active:bg-white/[0.08]",
      "border-[rgba(255,255,255,0.08)] hover:border-[rgba(255,255,255,0.16)] active:border-[rgba(255,255,255,0.16)]",
      "text-[rgba(255,255,255,0.55)] hover:text-white active:text-white",
      "transition-all outline-none select-none cursor-pointer",
      "disabled:pointer-events-none disabled:opacity-40",
      className
    )}
  >
    {children}
  </button>
);

window.BmButton = BmButton;
window.BmInput = BmInput;
window.BmSelectBox = BmSelectBox;
window.BmCheckbox = BmCheckbox;
window.BmChip = BmChip;
window.cn = cn;