// Dashboard — Intelligence (aggregated insights). Chaque insight est TRACÉ :
// règle versionnée + horodatage + périmètre de données. Projections marquées
// "Estimation", catégorisations "À confirmer" — l'humain garde la main.
// window.OryzeDash.IntelligenceView
(function () {
  const { Card, Amount, Tag, Button, InsightCard, CashTensionRing, EmptyState } = window.OryzeDesignSystem_78c60a;
  const Ic = window.OryzeIcons;
  // Santé de trésorerie — cash_tension v1 partagé (ui_kits/shared/finance.js)
  const sante = window.OryzeShared.cashTensionState("vigilance");

  function IntelligenceView({ demoState = "normal" }) {
    // ---- États démo : chargement / vide / erreur (patterns guidelines/states.html) ----
    const { ErrorState, SkelBlockCard } = window.OryzeShared;
    if (demoState === "empty") {
      return (
        <EmptyState framed title="Rien à signaler pour l'instant"
          description="Synthèse, anticipation, alertes et catégorisation s'activent dès qu'il y a matière — l'intelligence n'ajoute jamais de bruit." />
      );
    }
    if (demoState === "loading") {
      return (
        <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          <SkelBlockCard height={150} />
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            <SkelBlockCard height={120} />
            <SkelBlockCard height={120} />
            <SkelBlockCard height={120} />
            <SkelBlockCard height={120} />
          </div>
        </div>
      );
    }
    if (demoState === "error") {
      return <ErrorState what="Impossible de charger vos analyses" endpoint="GET /intelligence/synthese · 503 · réf. c1f9-…" />;
    }

    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
        {/* Weekly synthesis hero */}
        <Card variant="hero" padding="22px">
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 14 }}>
            <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--oryze-majorelle)", border: "1px solid var(--line-keyline)" }} />
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-muted)" }}>Synthèse · cette semaine</span>
          </div>
          <div style={{ display: "flex", gap: 28, alignItems: "center" }}>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1.25 }}>
                Semaine équilibrée. Vos encaissements couvrent vos charges, et la TVA est provisionnée.
              </div>
              <div style={{ display: "flex", gap: 32, marginTop: 18 }}>
                <Metric l="Encaissé" node={<Amount value={4280} tone="positive" sign size="lg" />} />
                <Metric l="Décaissé" node={<Amount value={-1910.4} tone="negative" size="lg" />} />
                <Metric l="Net" node={<Amount value={2369.6} sign size="lg" />} />
              </div>
            </div>
            <CashTensionRing size={120} thickness={13} state={sante.key} days={sante.days} />
          </div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: "4px 14px", marginTop: 16, paddingTop: 11, borderTop: "1px solid var(--line-divider)", fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--text-subtle)" }}>
            <span>Règle synthese-v1.0</span><span>calculé le 15/04/2026 07:30</span><span>données → 14/04</span>
          </div>
        </Card>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          <InsightCard capability="anticipation" title="TVA provisionnée ce trimestre"
            amount={<Amount value={2480} tone="muted" size="lg" />}
            trace={{ rule: "provision-tva-v1.2", computedAt: "15/04/2026 07:30", dataUntil: "14/04" }}
            primaryAction={<Button size="sm" variant="secondary" iconLeft={<Ic.check size={15} />} disabled>Mise de côté ce mois</Button>}
            secondaryAction={<Button size="sm" variant="ghost">Automatiser les prochains</Button>}>
            On a mis 2 480 € de côté le 14/04 pour la TVA du trimestre (échéance 31/07).
          </InsightCard>

          <InsightCard capability="alertes" priority="urgent" estimation title="Trésorerie sous le seuil dans 3 semaines"
            trace={{ rule: "projection-treso-v0.9", computedAt: "15/04/2026 07:30", dataUntil: "14/04" }}
            primaryAction={<Button size="sm" variant="secondary">Voir le détail</Button>}>
            À ce rythme, le solde passe sous 2 000 € autour du 6 mai. Anticipez un encaissement ou décalez une charge.
          </InsightCard>

          <InsightCard capability="alertes" priority="urgent" title="1 facture en retard"
            amount={<Amount value={1180} tone="negative" size="lg" />}
            trace={{ rule: "relances-v1.1", computedAt: "15/04/2026 07:30", dataUntil: "14/04" }}
            primaryAction={<Button size="sm" variant="secondary" iconLeft={<Ic.send size={15} />}>Relancer</Button>}
            secondaryAction={<Button size="sm" variant="ghost">Voir</Button>}>
            Martin & Co dépasse l'échéance de 6 jours. Un message de relance est prêt à envoyer.
          </InsightCard>

          <InsightCard capability="categorisation" toConfirm title="7 dépenses catégorisées automatiquement"
            trace={{ rule: "categorisation-v2.0", computedAt: "15/04/2026 07:30", dataUntil: "14/04" }}
            primaryAction={<Button size="sm" variant="ghost">Vérifier</Button>}>
            On a rangé vos dernières opérations (Charges fixes, Déplacements, Frais pro). Une seule reste à confirmer.
          </InsightCard>
        </div>

        <Card variant="flat" padding="18px" background="var(--surface-sunken)">
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <Ic.spark size={18} />
            <span style={{ fontSize: 13.5, color: "var(--text-body)" }}>
              Oryze suit votre activité et prépare ce qui compte — vous gardez la main sur chaque action.
            </span>
          </div>
        </Card>
      </div>
    );
  }

  function Metric({ l, node }) {
    return (
      <div>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-subtle)", marginBottom: 4 }}>{l}</div>
        {node}
      </div>
    );
  }

  window.OryzeDash = window.OryzeDash || {};
  window.OryzeDash.IntelligenceView = IntelligenceView;
})();