// ============================================================
// states.jsx · S-Loading · S-Empty · S-Error (reusable patterns)
// ============================================================

// ---- Skeleton primitives ----
function Sk({ w = "100%", h = 12, r = 6, style }) {
  return <span className="skeleton" style={{ display: "block", width: w, height: h, borderRadius: r, ...style }}></span>;
}
function SkCircle({ size = 32 }) {
  return <span className="skeleton" style={{ display: "block", width: size, height: size, borderRadius: 999 }}></span>;
}
function Spinner({ size = 18, color = "var(--xk-accent)", border = 2.5 }) {
  return <span className="animate-spin" style={{ display: "inline-block", width: size, height: size, borderRadius: 999,
    border: border + "px solid color-mix(in oklab, " + color + " 25%, transparent)", borderTopColor: color }}></span>;
}
Object.assign(window, { Sk, SkCircle, Spinner });

// ---- S-LOADING ----
// variant: "cards" | "table" | "kpis"
function SLoading({ variant = "cards", rows = 4, cols = 3, label }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      {label && <div className="xk-overline">{label}</div>}
      {variant === "kpis" && (
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 12 }}>
          {Array.from({ length: 4 }).map((_, i) => (
            <div key={i} className="xk-card" style={{ padding: 16 }}>
              <Sk w="60%" h={9} style={{ marginBottom: 12 }} />
              <Sk w="45%" h={22} />
            </div>
          ))}
        </div>
      )}
      {variant === "cards" && (
        <div style={{ display: "grid", gridTemplateColumns: `repeat(${cols},1fr)`, gap: 14 }}>
          {Array.from({ length: rows }).map((_, i) => (
            <div key={i} className="xk-card" style={{ padding: 18 }}>
              <div style={{ display: "flex", gap: 12, marginBottom: 14 }}><SkCircle size={36} /><div style={{ flex: 1, paddingTop: 4 }}><Sk w="70%" h={11} style={{ marginBottom: 8 }} /><Sk w="40%" h={9} /></div></div>
              <Sk w="100%" h={9} style={{ marginBottom: 8 }} />
              <Sk w="80%" h={9} />
            </div>
          ))}
        </div>
      )}
      {variant === "hero" && <div className="skeleton" style={{ height: 96, borderRadius: 14 }}></div>}
      {variant === "table" && (
        <div className="xk-card" style={{ padding: 0, overflow: "hidden" }}>
          {Array.from({ length: rows }).map((_, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 14, padding: "14px 18px", borderBottom: i === rows - 1 ? "none" : "1px solid var(--xk-border)" }}>
              <SkCircle size={32} />
              <Sk w="22%" h={11} /><Sk w="28%" h={11} /><div style={{ flex: 1 }}></div><Sk w={70} h={20} r={999} />
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
window.SLoading = SLoading;

// ---- S-EMPTY ----
function EmptyIllustration({ kind = "box", size = 52 }) {
  const c = "var(--xk-text-muted)", c2 = "var(--xk-accent)";
  if (kind === "school") return (
    <svg width={size} height={size} viewBox="0 0 96 96" fill="none">
      <rect x="14" y="40" width="68" height="42" rx="4" stroke={c} strokeWidth="2.4" />
      <path d="M48 14 L82 38 H14 Z" stroke={c} strokeWidth="2.4" strokeLinejoin="round" />
      <rect x="40" y="58" width="16" height="24" stroke={c2} strokeWidth="2.4" />
      <circle cx="48" cy="30" r="3.2" fill={c2} />
    </svg>
  );
  if (kind === "filter") return (
    <svg width={size} height={size} viewBox="0 0 96 96" fill="none">
      <path d="M24 28 H72 L54 50 V72 L42 66 V50 Z" stroke={c} strokeWidth="2.4" strokeLinejoin="round" />
      <circle cx="62" cy="62" r="14" stroke={c2} strokeWidth="2.4" /><path d="M72 72 L82 82" stroke={c2} strokeWidth="2.4" strokeLinecap="round" />
    </svg>
  );
  return (
    <svg width={size} height={size} viewBox="0 0 96 96" fill="none">
      <path d="M20 38 L48 24 L76 38 L48 52 Z" stroke={c} strokeWidth="2.4" strokeLinejoin="round" />
      <path d="M20 38 V64 L48 78 V52" stroke={c} strokeWidth="2.4" strokeLinejoin="round" />
      <path d="M76 38 V64 L48 78" stroke={c} strokeWidth="2.4" strokeLinejoin="round" />
      <circle cx="48" cy="20" r="3.2" fill={c2} />
    </svg>
  );
}
function SEmpty({ illustration = "box", title, body, cta, ctaIcon, onCta, secondary }) {
  return (
    <div className="animate-fade-up xk-card" style={{ position: "relative", overflow: "hidden", padding: "56px 32px 52px", textAlign: "center",
      background: "radial-gradient(120% 90% at 50% -10%, var(--xk-accent-light) 0%, rgba(243,240,255,0) 55%), var(--xk-surface)" }}>
      {/* medallion with concentric halos */}
      <div style={{ position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 22 }}>
        <span aria-hidden style={{ position: "absolute", width: 132, height: 132, borderRadius: 999, border: "1px solid color-mix(in oklab, var(--xk-accent) 14%, transparent)" }}></span>
        <span aria-hidden style={{ position: "absolute", width: 104, height: 104, borderRadius: 999, border: "1px solid color-mix(in oklab, var(--xk-accent) 20%, transparent)" }}></span>
        <span style={{ width: 80, height: 80, borderRadius: 999, display: "inline-flex", alignItems: "center", justifyContent: "center",
          background: "linear-gradient(155deg, #fff, var(--xk-accent-light))",
          boxShadow: "0 8px 22px -8px color-mix(in oklab, var(--xk-accent) 40%, transparent), inset 0 1px 0 #fff",
          border: "1px solid color-mix(in oklab, var(--xk-accent) 18%, transparent)" }}>
          <EmptyIllustration kind={illustration} size={40} />
        </span>
      </div>
      <h3 style={{ margin: 0, fontSize: 17, fontWeight: 600, letterSpacing: "-0.01em" }}>{title}</h3>
      {body && <p style={{ margin: "8px auto 0", fontSize: 13.5, color: "var(--xk-text-secondary)", maxWidth: 360, lineHeight: 1.55 }}>{body}</p>}
      {cta && <div style={{ marginTop: 22, display: "flex", gap: 10, justifyContent: "center" }}>
        <Btn variant="primary" icon={ctaIcon} onClick={onCta}>{cta}</Btn>
        {secondary && <Btn variant="secondary">{secondary}</Btn>}
      </div>}
    </div>
  );
}
window.SEmpty = SEmpty;

// ---- S-ERROR ----
function ErrorIllustration() {
  const c = "var(--xk-border-strong)", c2 = "var(--xk-danger)";
  return (
    <svg width="96" height="96" viewBox="0 0 96 96" fill="none">
      <rect x="18" y="26" width="60" height="44" rx="5" stroke={c} strokeWidth="2" />
      <path d="M18 38 H78" stroke={c} strokeWidth="2" />
      <circle cx="26" cy="32" r="1.6" fill={c} /><circle cx="32" cy="32" r="1.6" fill={c} />
      <path d="M40 50 L56 50 M48 50 V50" stroke={c} strokeWidth="2" strokeLinecap="round" />
      <circle cx="68" cy="68" r="15" fill="var(--xk-danger-tint)" stroke={c2} strokeWidth="2" />
      <path d="M68 61 V69 M68 74 V74.5" stroke={c2} strokeWidth="2.4" strokeLinecap="round" />
    </svg>
  );
}
function SError({ title = "No pudimos cargar la información", body, technical, onRetry, statusLink = "status.xokai.app" }) {
  return (
    <div className="animate-fade-up xk-card" style={{ padding: "48px 32px", textAlign: "center" }}>
      <div style={{ display: "inline-block", padding: 12, background: "var(--xk-bg)", borderRadius: 16 }}><ErrorIllustration /></div>
      <h3 style={{ margin: "18px 0 0", fontSize: 16, fontWeight: 600 }}>{title}</h3>
      {body && <p style={{ margin: "7px auto 0", fontSize: 13, color: "var(--xk-text-secondary)", maxWidth: 400, lineHeight: 1.55 }}>{body}</p>}
      {technical && <p style={{ margin: "8px auto 0", fontSize: 11, color: "var(--xk-text-muted)", fontFamily: "var(--xk-font-mono)" }}>{technical}</p>}
      <div style={{ marginTop: 20, display: "flex", gap: 12, justifyContent: "center", alignItems: "center" }}>
        <Btn variant="primary" icon="refresh-cw" onClick={onRetry}>Reintentar</Btn>
        <a href="#" onClick={e => e.preventDefault()} style={{ fontSize: 12.5, color: "var(--xk-text-secondary)", textDecoration: "none" }}>Ir a {statusLink} →</a>
      </div>
    </div>
  );
}
window.SError = SError;