// Tableau de bord — mobile home. window.OryzeApp.DashboardScreen
(function () {
  const { Card, StatTile, Amount, CashTensionRing, TransactionRow, Tag, InsightCard, Button, Avatar } = window.OryzeDesignSystem_78c60a;
  const Ic = window.OryzeIcons;

  function DashboardScreen({ go }) {
    return (
      <div style={{ padding: "16px 16px 24px", display: "flex", flexDirection: "column", gap: 16 }}>
        {/* Greeting */}
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <div>
            <div style={{ fontSize: 13, color: "var(--text-muted)" }}>Bonjour, Marie</div>
            <div style={{ fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 20, letterSpacing: "-0.02em" }}>Tableau de bord</div>
          </div>
          <Avatar initials="ML" tone="lilac" size={40} />
        </div>

        {/* Hero balance card */}
        <Card variant="hero" padding="18px" background="var(--oryze-lilac)">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
            <div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--oryze-ink-60)" }}>Compte pro · solde</div>
              <div style={{ marginTop: 8 }}><Amount value={8920} size="xl" /></div>
            </div>
            <Tag tone="ink" mono>•••• 4827</Tag>
          </div>
          <div style={{ display: "flex", gap: 8, marginTop: 16 }}>
            <Button size="sm" iconLeft={<Ic.arrowUpRight size={15} />} style={{ flex: 1 }} onClick={() => go("virement")}>Virement</Button>
            <Button size="sm" variant="secondary" iconLeft={<Ic.card size={15} />} style={{ flex: 1 }} onClick={() => go("carte")}>Carte</Button>
          </div>
        </Card>

        {/* Synthèse compacte */}
        <Card variant="elevated" padding="16px">
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10 }}>
            <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: 14, alignItems: "center" }}>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14.5, fontWeight: 600, lineHeight: 1.35, letterSpacing: "-0.01em" }}>
                Semaine équilibrée. Vos encaissements couvrent vos charges, et la TVA est provisionnée.
              </div>
            </div>
            <CashTensionRing size={86} thickness={13} state={sante.key} days={sante.days} />
          </div>
        </Card>

        {/* Anticipation — TVA déjà provisionnée ce mois */}
        <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" onClick={() => go("intelligence")}>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>

        {/* Stat row */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          <StatTile label="Encaissé · avr" value={<Amount value={6480} size="lg" />} delta="8,1 %" deltaTone="positive" />
          <StatTile label="Décaissé · avr" value={<Amount value={3110} size="lg" />} delta="1,1 %" deltaTone="neutral" />
        </div>

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

        {/* Lien vers Intelligence */}
        <button onClick={() => go("intelligence")} style={{ alignSelf: "center", marginTop: 2, border: "none", background: "none", color: "var(--text-link)", fontSize: 13.5, fontWeight: 600, cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 5, fontFamily: "var(--font-sans)" }}>
          Voir tout dans Intelligence <Ic.arrowUpRight size={15} />
        </button>
      </div>
    );
  }

  // 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.DashboardScreen = DashboardScreen;
})();