// Shared sketchy primitives used across all wireframe variants.
// All variants use the SAME printer component, but wrap/layout it differently
// and have different IA + brand voices.

// ---------- Sketchy atoms ----------
const SketchBox = ({ children, style = {}, as = 'div', h, dashed = false, filled, note, className = '', ...rest }) => {
  const Tag = as;
  return (
    <Tag
      {...rest}
      className={`sk-box ${className} ${dashed ? 'sk-dashed' : ''}`}
      style={{
        height: h,
        background: filled || 'transparent',
        position: 'relative',
        ...style,
      }}
    >
      {children}
      {note && <span className="sk-note-corner">{note}</span>}
    </Tag>
  );
};

const SketchLine = ({ w = '60%', h = 10, style = {} }) => (
  <div className="sk-line" style={{ width: w, height: h, ...style }} />
);

const SketchLines = ({ count = 3, ws = [90, 85, 60], h = 8 }) => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
    {Array.from({ length: count }).map((_, i) => (
      <SketchLine key={i} w={(ws[i] ?? 75) + '%'} h={h} />
    ))}
  </div>
);

const SketchBtn = ({ label, primary = false, style = {}, onClick, type = 'button' }) => {
  const [hover, setHover] = React.useState(false);
  const [pressed, setPressed] = React.useState(false);
  const [clicked, setClicked] = React.useState(false);

  const handleClick = (e) => {
    setClicked(true);
    setTimeout(() => setClicked(false), 900);
    onClick && onClick(e);
  };

  return (
    <button
      type={type}
      className={`sk-btn ${primary ? 'sk-btn-primary' : ''} ${hover ? 'is-hover' : ''} ${pressed ? 'is-pressed' : ''} ${clicked ? 'is-clicked' : ''}`}
      style={style}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => { setHover(false); setPressed(false); }}
      onMouseDown={() => setPressed(true)}
      onMouseUp={() => setPressed(false)}
      onClick={handleClick}
    >
      <span className="sk-btn-label">{label}</span>
    </button>
  );
};

const SketchImg = ({ label = 'IMG', h = 160, style = {}, aspect }) => (
  <div className="sk-img" style={{ height: aspect ? undefined : h, aspectRatio: aspect, ...style }}>
    <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
      <line x1="0" y1="0" x2="100" y2="100" stroke="currentColor" strokeWidth="0.4" opacity="0.4" />
      <line x1="100" y1="0" x2="0" y2="100" stroke="currentColor" strokeWidth="0.4" opacity="0.4" />
    </svg>
    <span className="sk-img-label">{label}</span>
  </div>
);

const Annotation = ({ children, side = 'right', top = 10, show = true }) => {
  if (!show) return null;
  return (
    <div className={`sk-annot sk-annot-${side}`} style={{ top }}>
      <span>{children}</span>
    </div>
  );
};

const Kicker = ({ children }) => <div className="sk-kicker">{children}</div>;
const SectionLabel = ({ n, children, style = {} }) => (
  <div className="sk-section-label" style={style}>
    <span className="sk-section-n">{n}</span>
    <span>{children}</span>
  </div>
);

Object.assign(window, { SketchBox, SketchLine, SketchLines, SketchBtn, SketchImg, Annotation, Kicker, SectionLabel });