/* NeuralVault — primitives.jsx
   Atomic building blocks: Icon, Brand, Button, Field, Chip, MetaCell.
   Every component on the site should compose from these. */

const { useState, useEffect, useRef } = React;

/* ---------- Icon ---------- */
function Icon({ name, className, ...rest }) {
  return (
    <svg className={className} aria-hidden="true" {...rest}>
      <use href={`#i-${name}`} />
    </svg>
  );
}

/* ---------- Brand mark + wordmark ---------- */
function Brand({ withDot = false, href = "#", style }) {
  return (
    <a className="brand" href={href} style={style}>
      <img className="brand-mark" src="assets/brain.png" alt="NeuralVault" />
      <span className="brand-word">
        Neural<b>Vault</b>
        {withDot && <span className="brand-dot" aria-hidden="true" />}
      </span>
    </a>
  );
}

/* ---------- Button (anchor or button, same surface) ---------- */
function Button({
  variant = "primary",   // primary | ghost
  arrow = false,
  href,
  onClick,
  children,
  className = "",
  type = "button",
  ...rest
}) {
  const cls = `btn btn-${variant} ${className}`.trim();
  const inner = (
    <>
      <span>{children}</span>
      {arrow && <Icon name="arrow" className="arrow" />}
    </>
  );
  if (href) {
    return <a className={cls} href={href} onClick={onClick} {...rest}>{inner}</a>;
  }
  return (
    <button className={cls} type={type} onClick={onClick} {...rest}>
      {inner}
    </button>
  );
}

/* ---------- Field (floating-label input/select/textarea) ---------- */
function Field({
  label,
  name,
  type = "text",
  as = "input",         // input | select | textarea
  full = false,
  required = false,
  options,              // [{value, label}] for select
  value,
  onChange,
  autoComplete = "off",
}) {
  const [internal, setInternal] = useState(value ?? "");
  const v = value !== undefined ? value : internal;
  const handle = (e) => {
    if (value === undefined) setInternal(e.target.value);
    onChange?.(e);
  };
  const filled = !!v;
  const cls = `field ${full ? "full" : ""} ${filled ? "filled" : ""}`.trim();

  return (
    <div className={cls}>
      <label>{label}</label>
      {as === "select" && (
        <>
          <select name={name} value={v} onChange={handle} required={required}>
            <option value=""></option>
            {options?.map((o) => (
              <option key={o.value ?? o} value={o.value ?? o}>
                {o.label ?? o}
              </option>
            ))}
          </select>
          <Icon name="caret" className="caret" />
        </>
      )}
      {as === "textarea" && (
        <textarea name={name} value={v} onChange={handle} required={required} />
      )}
      {as === "input" && (
        <input
          type={type}
          name={name}
          value={v}
          onChange={handle}
          autoComplete={autoComplete}
          required={required}
        />
      )}
    </div>
  );
}

/* ---------- Chip (filter / tag) ---------- */
function Chip({ active = false, onClick, children }) {
  return (
    <span
      className={`chip mono ${active ? "on" : ""}`}
      onClick={onClick}
      role="button"
      tabIndex={0}
      onKeyDown={(e) => (e.key === "Enter" || e.key === " ") && onClick?.(e)}
    >
      {children}
    </span>
  );
}

/* ---------- MetaCell (k/v readout) ---------- */
function MetaCell({ k, v, sub }) {
  return (
    <div className="meta-cell">
      <span className="k mono">{k}</span>
      <span className="v">
        {v}
        {sub && <small>{sub}</small>}
      </span>
    </div>
  );
}

/* ---------- ReadoutCell (compact mono row used in Engine) ---------- */
function ReadoutCell({ k, v, delta }) {
  return (
    <div className="ro-cell">
      <div className="k">{k}</div>
      <div className="v">
        {v}
        {delta && <span className="delta">{delta}</span>}
      </div>
    </div>
  );
}

/* ---------- Eyebrow (small accent-prefixed label) ---------- */
function Eyebrow({ children }) {
  return (
    <div className="eyebrow">
      <span>{children}</span>
    </div>
  );
}

Object.assign(window, {
  Icon, Brand, Button, Field, Chip, MetaCell, ReadoutCell, Eyebrow,
});