/**
 * src/insights-card.jsx — Banner de insights en vista Finanzas.
 */
(() => {
  function InsightsCard() {
    const { lang } = window.useApp();
    const [, force] = React.useReducer((x) => x + 1, 0);
    React.useEffect(() => {
      const a = window.Store.subscribe("transactions", force);
      const b = window.Store.subscribe("subscriptions", force);
      return () => { a(); b(); };
    }, []);
    const insights = window.Insights ? window.Insights.generate() : [];

    if (insights.length === 0) {
      return null;
    }

    const severityColor = {
      good: "var(--sage)",
      warn: "var(--terracotta)",
      info: "var(--ochre)",
    };
    const severityBg = {
      good: "var(--sage-soft)",
      warn: "var(--terracotta-soft)",
      info: "var(--ochre-soft)",
    };

    return (
      <div className="card" style={{ padding: 18 }}>
        <div className="kicker" style={{ marginBottom: 4 }}>💡 {lang === "es" ? "INSIGHTS" : "INSIGHTS"}</div>
        <div className="h2" style={{ marginBottom: 14 }}>
          {lang === "es" ? "Lo que tus numeros estan diciendo" : "What your numbers are saying"}
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {insights.slice(0, 5).map((ins, i) => (
            <div key={i} style={{
              display: "flex", gap: 12, alignItems: "flex-start",
              padding: 12,
              background: severityBg[ins.severity] || "var(--paper-2)",
              borderLeft: `3px solid ${severityColor[ins.severity] || "var(--ink-4)"}`,
              borderRadius: "var(--radius-sm)",
            }}>
              <div style={{ fontSize: 20, lineHeight: 1 }}>{ins.emoji}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14, fontWeight: 500, color: "var(--ink)" }}>{ins.title}</div>
                <div className="caption" style={{ marginTop: 2 }}>{ins.body}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }
  window.InsightsCard = InsightsCard;
})();