/* Shared design-system patterns: EmptyState, Skeleton, ErrorBanner */

// ── EmptyState ─────────────────────────────────────────────
// For pages or sections with no data yet. Always offers a concrete
// next action so the user knows what to do.
const EmptyState = ({ icon = "sparkles", title, subtitle, action, secondary, illustration }) => (
  <div className="card" style={{
    padding: "60px 32px", textAlign: "center", maxWidth: 520, margin: "0 auto",
  }}>
    {illustration ? (
      <div style={{ marginBottom: 18 }}>{illustration}</div>
    ) : (
      <div style={{
        width: 64, height: 64, borderRadius: 18,
        background: "var(--primary-soft)", color: "var(--primary-ink)",
        display: "grid", placeItems: "center", margin: "0 auto 18px",
      }}>
        <Icon name={icon} size={28} />
      </div>
    )}
    <div style={{ fontFamily: "var(--font-display)", fontSize: 26, letterSpacing: "-0.01em", lineHeight: 1.1 }}>
      {title}
    </div>
    {subtitle && (
      <div style={{ color: "var(--muted)", marginTop: 8, fontSize: 14, lineHeight: 1.5 }}>
        {subtitle}
      </div>
    )}
    {(action || secondary) && (
      <div style={{ display: "flex", gap: 8, justifyContent: "center", marginTop: 22, flexWrap: "wrap" }}>
        {action && (
          <button className="btn btn-primary" onClick={action.onClick}>
            {action.icon && <Icon name={action.icon} size={14} />} {action.label}
          </button>
        )}
        {secondary && (
          <button className="btn" onClick={secondary.onClick}>
            {secondary.icon && <Icon name={secondary.icon} size={14} />} {secondary.label}
          </button>
        )}
      </div>
    )}
  </div>
);

// ── Skeleton ──────────────────────────────────────────────
// Shimmering placeholder for loading content. Use width / height in px or %.
const Skeleton = ({ width = "100%", height = 14, radius = 6, style = {}, className = "" }) => (
  <div className={"cb-skeleton " + className} style={{
    width, height, borderRadius: radius,
    background: "linear-gradient(90deg, var(--surface-2) 25%, var(--hairline) 50%, var(--surface-2) 75%)",
    backgroundSize: "200% 100%",
    animation: "skeleton-shine 1.2s linear infinite",
    ...style,
  }} />
);

if (!document.getElementById("cb-skeleton-anim")) {
  const s = document.createElement("style");
  s.id = "cb-skeleton-anim";
  s.textContent = `
    @keyframes skeleton-shine {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
  `;
  document.head.appendChild(s);
}

// ── Pre-baked common skeletons ──
const SkeletonRows = ({ rows = 6, columns = [50, "60%", 120, 90] }) => (
  <div style={{ padding: "8px 0" }}>
    {Array.from({ length: rows }).map((_, i) => (
      <div key={i} style={{ display: "flex", alignItems: "center", gap: 14, padding: "14px 6px", borderBottom: "1px solid var(--hairline)" }}>
        {columns.map((w, j) => (
          <Skeleton key={j} width={w} height={j === 0 ? 28 : 12} radius={j === 0 ? 8 : 6} />
        ))}
      </div>
    ))}
  </div>
);

const SkeletonCard = ({ height = 120 }) => (
  <div className="card" style={{ padding: 16 }}>
    <Skeleton width={80} height={10} style={{ marginBottom: 12 }} />
    <Skeleton width="60%" height={28} style={{ marginBottom: 8 }} />
    <Skeleton width="40%" height={10} />
  </div>
);

// ── ErrorBanner ───────────────────────────────────────────
// Inline error with optional retry action. Sits at the top of a section.
const ErrorBanner = ({ title, message, action, onDismiss, tone = "error" }) => {
  const tones = {
    error:   { bg: "var(--expense-soft)", color: "var(--expense-text-strong)", icon: "bell" },
    warning: { bg: "var(--primary-soft)", color: "var(--primary-ink)",       icon: "sparkles" },
    info:    { bg: "var(--surface-2)",    color: "var(--ink-soft)",          icon: "link" },
  };
  const t = tones[tone] || tones.error;
  return (
    <div style={{
      display: "flex", alignItems: "start", gap: 12,
      padding: "12px 14px", borderRadius: 12,
      background: t.bg, color: t.color,
      marginBottom: 16,
    }}>
      <Icon name={t.icon} size={16} />
      <div style={{ flex: 1, fontSize: 13.5, lineHeight: 1.4 }}>
        {title && <div style={{ fontWeight: 600, marginBottom: message ? 4 : 0 }}>{title}</div>}
        {message && <div>{message}</div>}
      </div>
      {action && (
        <button className="btn btn-sm" onClick={action.onClick}>
          <Icon name={action.icon || "refresh"} size={11} /> {action.label}
        </button>
      )}
      {onDismiss && (
        <button className="btn btn-ghost btn-sm" onClick={onDismiss} aria-label="Dismiss" style={{ padding: 4 }}>
          <Icon name="close" size={12} />
        </button>
      )}
    </div>
  );
};

Object.assign(window, { EmptyState, Skeleton, SkeletonRows, SkeletonCard, ErrorBanner });