// États démo partagés — chargement / vide / erreur (patterns guidelines/states.html).
// ErrorState : même rendu sobre que Factures/Carte (point d'alerte, phrase
// rassurante, réf. mono discrète, Réessayer — jamais d'écran rouge, jamais de
// jargon). Skel* : squelettes qui reflètent la mise en page réelle.
// window.OryzeShared.{ErrorState, SkelTiles, SkelListCard, SkelBlockCard}
(function () {
  const { Card, Button, Skeleton } = window.OryzeDesignSystem_78c60a;

  function ErrorState({ what = "Impossible de charger ces données", endpoint = "GET /… · 503 · réf. a1f4-…", compact = false }) {
    const [retrying, setRetrying] = React.useState(false);
    return (
      <Card variant="flat" padding={compact ? "36px 18px" : "44px 24px"} style={{ textAlign: "center" }}>
        <div style={{ width: 44, height: 44, margin: "0 auto 14px", display: "flex", alignItems: "center", justifyContent: "center", background: "var(--oryze-coral)", border: "var(--border-key) solid var(--line-keyline)", borderRadius: "var(--radius-md)", color: "var(--oryze-coral-ink)" }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 9v4M12 17h.01" /><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" /></svg>
        </div>
        <div style={{ fontWeight: 700, fontSize: 17, letterSpacing: "-0.01em" }}>{what}</div>
        <div style={{ fontSize: 13.5, color: "var(--text-muted)", marginTop: 5 }}>Vos données sont en sécurité — c'est un problème de connexion, pas de contenu.</div>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-subtle)", marginTop: 7 }}>{endpoint}</div>
        <Button variant="secondary" size="sm" loading={retrying} style={{ marginTop: 16 }}
          onClick={() => { setRetrying(true); setTimeout(() => setRetrying(false), 1400); }}>Réessayer</Button>
      </Card>
    );
  }

  // Rangée de tuiles KPI en squelette
  function SkelTiles({ n = 4 }) {
    return (
      <div style={{ display: "grid", gridTemplateColumns: "repeat(" + n + ",1fr)", gap: 16 }}>
        {Array.from({ length: n }).map((_, i) => (
          <Card key={i} variant="flat" padding="16px">
            <Skeleton variant="text" lines={1} height={10} width={90} />
            <Skeleton variant="block" height={28} width="70%" style={{ marginTop: 12 }} />
          </Card>
        ))}
      </div>
    );
  }

  // Carte-liste en squelette — miroir d'une table ou d'une liste de lignes
  function SkelListCard({ rows = 5, avatar = true, header = true, style = {} }) {
    return (
      <Card variant="flat" padding="0" style={style}>
        {header && (
          <div style={{ padding: "13px 18px", borderBottom: "1.5px solid var(--line-keyline)" }}>
            <Skeleton variant="text" lines={1} height={12} width={130} />
          </div>
        )}
        {Array.from({ length: rows }).map((_, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "13px 18px", borderBottom: i < rows - 1 ? "1px solid var(--line-divider)" : "none" }}>
            {avatar && <Skeleton variant="circle" size={34} />}
            <Skeleton lines={2} gap={6} style={{ flex: 1, maxWidth: 300 }} />
            <Skeleton variant="text" lines={1} height={12} width={70} style={{ marginLeft: "auto" }} />
          </div>
        ))}
      </Card>
    );
  }

  // Grande carte (hero / graphe) en squelette
  function SkelBlockCard({ height = 220, style = {} }) {
    return (
      <Card variant="flat" padding="20px" style={style}>
        <Skeleton variant="text" lines={1} height={12} width={150} />
        <Skeleton variant="block" height={height} style={{ marginTop: 14 }} />
      </Card>
    );
  }

  window.OryzeShared = window.OryzeShared || {};
  Object.assign(window.OryzeShared, { ErrorState, SkelTiles, SkelListCard, SkelBlockCard });
})();