/* RC-PAGE-002 — Section-level loading skeletons + error states.
   Exported globals: <SectionSkeleton kind />, <SectionError msg onRetry />,
   and a reportState enum 'ready' | 'loading' | 'error' consumed at app level. */

const skelBase = {
  background: 'linear-gradient(90deg, var(--rc-hover) 0%, var(--rc-border-soft) 50%, var(--rc-hover) 100%)',
  backgroundSize: '200% 100%',
  animation: 'rcShimmer 1.4s ease-in-out infinite',
  borderRadius: 6,
};

/* Inject shimmer keyframes once */
if (typeof document !== 'undefined' && !document.getElementById('rc-shimmer-kf')) {
  const s = document.createElement('style');
  s.id = 'rc-shimmer-kf';
  s.textContent = `@keyframes rcShimmer { 0% {background-position: 200% 0;} 100% {background-position: -200% 0;} }`;
  document.head.appendChild(s);
}

const SkelBlock = ({ w = '100%', h = 14, r = 4, style }) => (
  <div style={{ ...skelBase, width: w, height: h, borderRadius: r, ...style }} />
);

const SectionSkeleton = ({ kind = 'chart' }) => {
  if (kind === 'scorecards') {
    return (
      <div style={{ padding: 16, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
        {Array.from({ length: 8 }).map((_, i) => (
          <div key={i} style={{
            padding: 12, border: '1px solid var(--rc-border-soft)', borderRadius: 10,
            background: 'var(--rc-card)', display: 'flex', flexDirection: 'column', gap: 8, minHeight: 88,
          }}>
            <SkelBlock w="60%" h={10} />
            <SkelBlock w="80%" h={22} />
            <SkelBlock w="45%" h={10} />
          </div>
        ))}
      </div>
    );
  }
  if (kind === 'chart') {
    return (
      <div style={{ padding: 16 }}>
        <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
          <SkelBlock w={72} h={22} r={6} />
          <SkelBlock w={72} h={22} r={6} />
          <SkelBlock w={72} h={22} r={6} />
        </div>
        <SkelBlock w="100%" h={280} r={8} />
      </div>
    );
  }
  if (kind === 'table') {
    return (
      <div style={{ padding: 16 }}>
        <SkelBlock w="100%" h={32} r={6} style={{ marginBottom: 8 }} />
        {Array.from({ length: 6 }).map((_, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr 1fr', gap: 12, padding: '10px 0', borderBottom: '1px solid var(--rc-border-soft)' }}>
            <SkelBlock w="85%" h={12} />
            <SkelBlock w="60%" h={12} />
            <SkelBlock w="60%" h={12} />
            <SkelBlock w="60%" h={12} />
            <SkelBlock w="60%" h={12} />
            <SkelBlock w="60%" h={12} />
          </div>
        ))}
      </div>
    );
  }
  return <div style={{ padding: 16 }}><SkelBlock w="100%" h={120} /></div>;
};

const SectionError = ({ msg = 'Could not load this section.', detail, onRetry }) => (
  <div style={{
    margin: 16, padding: 20,
    border: '1px dashed #fecaca', borderRadius: 10,
    background: 'rgba(254, 242, 242, 0.6)',
    display: 'flex', alignItems: 'flex-start', gap: 12,
  }}>
    <div style={{
      width: 28, height: 28, borderRadius: 999, background: '#fee2e2',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
    }}>
      <Icon name="alert" size={14} color="#b91c1c" />
    </div>
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ fontSize: 13, fontWeight: 600, color: '#991b1b', marginBottom: 3 }}>{msg}</div>
      {detail && <div style={{ fontSize: 11.5, color: '#7f1d1d', marginBottom: 8 }}>{detail}</div>}
      {onRetry && (
        <button onClick={onRetry} style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          padding: '5px 11px', border: '1px solid #fca5a5', borderRadius: 6,
          background: '#fff', color: '#991b1b', fontSize: 11.5, fontWeight: 600,
          cursor: 'pointer', fontFamily: 'inherit',
        }}>
          <Icon name="refresh" size={11} /> Retry
        </button>
      )}
    </div>
  </div>
);

Object.assign(window, { SectionSkeleton, SectionError });