// empty-states.jsx — Composants réutilisables EmptyState + LoadingSkeleton
// API : <window.EmptyState icon="📭" title="…" sub="…" cta={{label, onClick}} />
//       <window.Skeleton kind="rows" count={5} />

function EmptyState({ icon = '📭', title = 'Aucune donnée', sub, cta, secondaryCta, compact }) {
  return (
    <div style={{
      padding: compact ? '32px 20px' : '60px 20px',
      textAlign: 'center', color: 'var(--ink-4)',
    }}>
      <div style={{ fontSize: compact ? 32 : 44, marginBottom: 12, lineHeight: 1 }}>{icon}</div>
      <div style={{ fontSize: compact ? 13 : 15, fontWeight: 600, color: 'var(--ink-2)', marginBottom: sub ? 6 : 12 }}>{title}</div>
      {sub && <div style={{ fontSize: compact ? 11 : 12, maxWidth: 460, margin: '0 auto 16px', lineHeight: 1.5 }}>{sub}</div>}
      {(cta || secondaryCta) && (
        <div style={{ display: 'flex', gap: 8, justifyContent: 'center', marginTop: 12, flexWrap: 'wrap' }}>
          {cta && (
            <button onClick={cta.onClick} style={{
              padding: '8px 16px', fontSize: 12, fontWeight: 600,
              background: 'var(--ink)', color: 'var(--paper)', border: 'none', borderRadius: 5, cursor: 'pointer',
            }}>{cta.label}</button>
          )}
          {secondaryCta && (
            <button onClick={secondaryCta.onClick} style={{
              padding: '8px 16px', fontSize: 12, fontWeight: 500,
              background: 'var(--paper)', color: 'var(--ink-2)', border: '1px solid var(--line-2)', borderRadius: 5, cursor: 'pointer',
            }}>{secondaryCta.label}</button>
          )}
        </div>
      )}
    </div>
  );
}

// Loading skeleton — animation shimmer pour donner un retour visuel
function Skeleton({ kind = 'rows', count = 5, height = 40, width = '100%' }) {
  const shimmer = {
    background: 'linear-gradient(90deg, var(--paper-2) 0%, var(--paper-3) 50%, var(--paper-2) 100%)',
    backgroundSize: '200% 100%',
    animation: 'shimmer 1.5s ease-in-out infinite',
    borderRadius: 4,
  };
  const items = Array.from({ length: count });

  if (kind === 'card') {
    return (
      <div style={{ ...shimmer, width, height, borderRadius: 8 }} />
    );
  }
  if (kind === 'circle') {
    return <div style={{ ...shimmer, width: height, height, borderRadius: '50%' }} />;
  }
  if (kind === 'text') {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        {items.map((_, i) => (
          <div key={i} style={{ ...shimmer, height: 12, width: i === count - 1 ? '60%' : '100%' }} />
        ))}
      </div>
    );
  }
  // 'rows' — empilement de lignes
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      {items.map((_, i) => (
        <div key={i} style={{ ...shimmer, height, opacity: 1 - (i * 0.08) }} />
      ))}
    </div>
  );
}

window.EmptyState = EmptyState;
window.Skeleton = Skeleton;