// shadcn-flavored primitives (IBM Plex Mono, minimal chrome)
const { useState, useRef, useEffect, useCallback, useMemo } = React;

const cx = (...xs) => xs.filter(Boolean).join(" ");

function Label({ children, htmlFor, optional, optionalLabel, className }) {
  return (
    <label
      htmlFor={htmlFor}
      className={cx(
        "block text-[10px] tracking-[0.16em] uppercase text-neutral-700 mb-1.5 font-semibold",
        className
      )}
    >
      {children}
      {optional && (
        <span className="ml-1.5 text-neutral-400 normal-case tracking-normal font-normal">
          {optionalLabel || "— optional"}
        </span>
      )}
    </label>
  );
}

function Input({ className, ...props }) {
  return (
    <input
      {...props}
      className={cx(
        "w-full h-10 px-3 bg-white border border-neutral-300 text-[13px] text-neutral-900",
        "placeholder:text-neutral-400 focus:outline-none focus:border-neutral-900 focus:ring-0",
        "transition-colors font-mono",
        className
      )}
    />
  );
}

function Textarea({ className, ...props }) {
  return (
    <textarea
      {...props}
      className={cx(
        "w-full px-3 py-2 bg-white border border-neutral-300 text-[13px] text-neutral-900",
        "placeholder:text-neutral-400 focus:outline-none focus:border-neutral-900",
        "transition-colors font-mono resize-none",
        className
      )}
    />
  );
}

function Button({ children, variant = "default", className, ...props }) {
  const base =
    "inline-flex items-center justify-center gap-2 h-10 px-4 text-[11px] tracking-[0.12em] uppercase font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed";
  const variants = {
    default:
      "bg-neutral-900 text-white hover:bg-neutral-800 border border-neutral-900",
    outline:
      "bg-white text-neutral-900 border border-neutral-300 hover:border-neutral-900",
    ghost:
      "bg-transparent text-neutral-600 hover:text-neutral-900 hover:bg-neutral-100 border border-transparent",
  };
  return (
    <button {...props} className={cx(base, variants[variant], className)}>
      {children}
    </button>
  );
}

// Segmented control (toggle group). options = [{value,label}, ...]
function Segmented({ value, onChange, options, className }) {
  return (
    <div
      className={cx(
        "inline-flex bg-white border border-neutral-300 p-0.5 w-full",
        className
      )}
    >
      {options.map((o) => {
        const active = o.value === value;
        return (
          <button
            key={o.value}
            type="button"
            onClick={() => onChange(o.value)}
            className={cx(
              "flex-1 h-9 text-[11px] tracking-[0.12em] uppercase font-medium transition-colors",
              active
                ? "bg-neutral-900 text-white"
                : "bg-transparent text-neutral-600 hover:text-neutral-900"
            )}
          >
            {o.label}
          </button>
        );
      })}
    </div>
  );
}

// Tiny custom select that matches the rest
function Select({ value, onChange, options, className }) {
  return (
    <div className={cx("relative", className)}>
      <select
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className="w-full h-10 pl-3 pr-8 bg-white border border-neutral-300 text-[13px] text-neutral-900 font-mono appearance-none focus:outline-none focus:border-neutral-900"
      >
        {options.map((o) => (
          <option key={o.value} value={o.value}>
            {o.label}
          </option>
        ))}
      </select>
      <svg
        viewBox="0 0 10 6"
        className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 w-2.5 h-1.5 text-neutral-500"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.5"
      >
        <path d="M1 1l4 4 4-4" />
      </svg>
    </div>
  );
}

function IconButton({ children, onClick, title, className }) {
  return (
    <button
      type="button"
      onClick={onClick}
      title={title}
      className={cx(
        "w-7 h-7 inline-flex items-center justify-center text-neutral-400 hover:text-neutral-900 hover:bg-neutral-100 transition-colors",
        className
      )}
    >
      {children}
    </button>
  );
}

Object.assign(window, { Label, Input, Textarea, Button, Segmented, Select, IconButton, cx });