// Intelligence — aggregated capability-driven insights. window.OryzeApp.IntelligenceScreen
// Ambient intelligence: capability modules, no persona, no name.
(function () {
  const { Card, Amount, Tag, Button, InsightCard, CashTensionRing } = window.OryzeDesignSystem_78c60a;
  const Ic = window.OryzeIcons;

  const MODULES = [
    { key: "synthese", label: "Synthèse", dot: "var(--oryze-majorelle)" },
    { key: "anticipation", label: "Anticipation", dot: "var(--oryze-lavender)" },
    { key: "alertes", label: "Alertes", dot: "var(--fin-warning)" },
    { key: "categorisation", label: "Catégorisation", dot: "var(--oryze-mint)" },
  ];

  function IntelligenceScreen() {
    const [filter, setFilter] = React.useState("all");
    return (
      <div style={{ padding: "16px 16px 24px", display: "flex", flexDirection: "column", gap: 16 }}>
        <div>
          <div style={{ fontWeight: 700, fontSize: 20, letterSpacing: "-0.02em" }}>Intelligence</div>
          <div style={{ fontSize: 13, color: "var(--text-muted)", marginTop: 2 }}>On suit votre activité et on prépare ce qui compte. Vous gardez la main.</div>
        </div>

        {/* Capability filter chips */}
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
          <button onClick={() => setFilter("all")} style={chip(filter === "all")}>Tout</button>
          {MODULES.map((m) => (
            <button key={m.key} onClick={() => setFilter(m.key)} style={chip(filter === m.key)}>
              <span style={{ width: 7, height: 7, borderRadius: "50%", background: m.dot, border: "1px solid var(--line-keyline)" }} />
              {m.label}
            </button>
          ))}
        </div>

        {/* Weekly synthesis hero */}
        {(filter === "all" || filter === "synthese") && (
          <Card variant="hero" padding="18px" background="var(--oryze-paper)">
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
              <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: 16, alignItems: "center" }}>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 16, fontWeight: 600, lineHeight: 1.35, letterSpacing: "-0.01em" }}>
                  Semaine équilibrée. Vos encaissements couvrent vos charges, et la TVA est provisionnée.
                </div>
                <div style={{ display: "flex", gap: 18, marginTop: 14 }}>
                  <div><div style={mk()}>Encaissé</div><Amount value={4280} tone="positive" sign size="md" /></div>
                  <div><div style={mk()}>Décaissé</div><Amount value={-1910.4} tone="negative" size="md" /></div>
                </div>
              </div>
              <CashTensionRing size={90} thickness={13} state={sante.key} days={sante.days} />
            </div>
          </Card>
        )}

        {/* Anticipation */}
        {(filter === "all" || filter === "anticipation") && (
          <InsightCard capability="anticipation" title="TVA provisionnée ce trimestre"
            amount={<Amount value={2480} tone="muted" size="lg" />}
            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>
        )}

        {/* Alertes */}
        {(filter === "all" || filter === "alertes") && (
          <InsightCard capability="alertes" priority="urgent" title="1 facture en retard"
            amount={<Amount value={1180} tone="negative" size="lg" />}
            primaryAction={<Button size="sm" variant="secondary" iconLeft={<Ic.send size={15} />}>Relancer</Button>}>
            Martin & Co dépasse l'échéance de 6 jours. Un message de relance est prêt à envoyer.
          </InsightCard>
        )}

        {(filter === "all" || filter === "alertes") && (
          <InsightCard capability="alertes" title="Trésorerie sous le seuil dans 3 semaines"
            primaryAction={<Button size="sm" variant="ghost">Voir le détail</Button>}>
            À ce rythme, le solde passe sous 2 000 € autour du 6 mai. Anticipez un encaissement.
          </InsightCard>
        )}

        {/* Catégorisation */}
        {(filter === "all" || filter === "categorisation") && (
          <InsightCard capability="categorisation" title="7 dépenses catégorisées automatiquement"
            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 à confirmer.
          </InsightCard>
        )}
      </div>
    );
  }

  function chip(active) {
    return {
      display: "inline-flex", alignItems: "center", gap: 6,
      padding: "6px 12px", borderRadius: "var(--radius-pill)",
      border: "1.5px solid var(--line-keyline)",
      background: active ? "var(--oryze-ink)" : "var(--surface-card)",
      color: active ? "var(--oryze-paper)" : "var(--text-body)",
      fontFamily: "var(--font-sans)", fontSize: 12.5, fontWeight: 600, cursor: "pointer",
    };
  }
  function mk() { return { fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-subtle)", marginBottom: 3 }; }

  // Santé de trésorerie — cash_tension v1 partagé (ui_kits/shared/finance.js)
  const sante = window.OryzeShared.cashTensionState("vigilance");

  window.OryzeApp = window.OryzeApp || {};
  window.OryzeApp.IntelligenceScreen = IntelligenceScreen;
})();