// states.jsx — Ryoko · State primitives
//
// Empty / loading / error / locked surfaces.  Every feature page should
// reach for these instead of inventing one-off "no items yet" blocks.
//
// Visual rule: states never raise their voice.  They use the display
// serif at modest size, italic, with a single understated CTA at most.
// No spinners, no exclamation marks, no exclamation icons.  This is a
// luxury app — silence and grace, not status pages.
//
// All four expose a small object onto window so feature pages can use
// them via Babel-standalone without imports.
//
//   <window.RkEmpty
//      title="No documents held here"
//      body="When the atelier files something, it will appear in this folder."
//      cta={{ label: "Back to Discover", href: "../landing/Landing.html" }}
//   />
//
//   <window.RkSkeleton lines={3} />            // generic text skeleton
//   <window.RkSkeleton kind="card" count={4} /> // card grid skeleton
//
//   <window.RkErrorState
//      title="We couldn't reach the atelier just now."
//      body="Camille has been notified — we'll restore this view shortly."
//      onRetry={() => location.reload()}
//   />
//
//   <window.RkLocked
//      principal="Mrs A"
//      reason="This view is held for the founding principal only."
//   />
//
// All variants accept an optional `compact` prop for use inside cards
// and rails (drops vertical padding, scales type down).

(function () {
  const { useState, useEffect } = React;

  function RkEmpty({ eyebrow = "Nothing held here", title, body, cta, compact = false }) {
    return (
      <div className={`rk-state rk-state-empty ${compact ? "compact" : ""}`}
           data-screen-label="Empty state">
        <div className="rk-state-eyebrow">{eyebrow}</div>
        {title && <h3 className="rk-state-title">{title}</h3>}
        {body && <p className="rk-state-body">{body}</p>}
        {cta && (
          <a className="rk-state-cta" href={cta.href} onClick={cta.onClick}>
            {cta.label} <span className="rk-state-cta-arrow">→</span>
          </a>
        )}
      </div>
    );
  }

  function RkSkeleton({ kind = "text", lines = 3, count = 1, compact = false }) {
    if (kind === "card") {
      return (
        <div className={`rk-skeleton-grid ${compact ? "compact" : ""}`}
             data-screen-label="Loading">
          {Array.from({ length: count }).map((_, i) => (
            <div key={i} className="rk-skeleton-card">
              <div className="rk-skeleton-img" />
              <div className="rk-skeleton-line w-80" />
              <div className="rk-skeleton-line w-60" />
              <div className="rk-skeleton-line w-40" />
            </div>
          ))}
        </div>
      );
    }
    if (kind === "row") {
      return (
        <div className="rk-skeleton-rows" data-screen-label="Loading">
          {Array.from({ length: count }).map((_, i) => (
            <div key={i} className="rk-skeleton-row">
              <div className="rk-skeleton-circle" />
              <div className="rk-skeleton-row-body">
                <div className="rk-skeleton-line w-50" />
                <div className="rk-skeleton-line w-80" />
              </div>
            </div>
          ))}
        </div>
      );
    }
    return (
      <div className={`rk-skeleton-text ${compact ? "compact" : ""}`}
           data-screen-label="Loading">
        {Array.from({ length: lines }).map((_, i) => (
          <div key={i} className={`rk-skeleton-line w-${[80, 95, 60, 75, 50][i % 5]}`} />
        ))}
      </div>
    );
  }

  function RkErrorState({ eyebrow = "Held — but not retrieved", title, body, onRetry, compact = false }) {
    return (
      <div className={`rk-state rk-state-error ${compact ? "compact" : ""}`}
           data-screen-label="Error state">
        <div className="rk-state-eyebrow">{eyebrow}</div>
        {title && <h3 className="rk-state-title">{title}</h3>}
        {body && <p className="rk-state-body">{body}</p>}
        {onRetry && (
          <button className="rk-state-cta" onClick={onRetry}>
            Try once more <span className="rk-state-cta-arrow">→</span>
          </button>
        )}
      </div>
    );
  }

  // RkLocked · used wherever the active principal lacks scope to view a
  // surface.  The visual cue is the discretion gold (semantics.css)
  // because "you can't see this" is closer to discretion than to error.
  function RkLocked({ principal, reason, hint, compact = false }) {
    return (
      <div className={`rk-state rk-state-locked ${compact ? "compact" : ""}`}
           data-screen-label="Locked surface">
        <div className="rk-state-eyebrow">Held in confidence</div>
        <h3 className="rk-state-title">
          {principal
            ? <>This is held for {principal} only.</>
            : <>This is held in confidence.</>}
        </h3>
        {reason && <p className="rk-state-body">{reason}</p>}
        {hint && <p className="rk-state-hint">{hint}</p>}
      </div>
    );
  }

  if (typeof window !== "undefined") {
    window.RkEmpty = RkEmpty;
    window.RkSkeleton = RkSkeleton;
    window.RkErrorState = RkErrorState;
    window.RkLocked = RkLocked;
  }
})();