// Trésorerie — cash-flow + forecast. window.OryzeApp.TresorerieScreen
(function () {
  const { Card, Amount, ProgressRing, CashTensionRing, TransactionRow, Tag, SegmentedControl, StatTile } = window.OryzeDesignSystem_78c60a;
  const Ic = window.OryzeIcons;

  // 6 mois glissants (Nov→Avr) — aligné sur le web. Données réelles, pas de projection.
  const series = [
    { m: "Nov", in: 54, out: 41 },
    { m: "Déc", in: 62, out: 47 },
    { m: "Jan", in: 49, out: 52 },
    { m: "Fév", in: 68, out: 45 },
    { m: "Mar", in: 58, out: 48 },
    { m: "Avr", in: 74, out: 46 },
  ];

  function TresorerieScreen() {
    const [period, setPeriod] = React.useState("6 mois");
    const [section, setSection] = React.useState("tresorerie"); // tresorerie | tva
    const [ct, setCt] = React.useState("vigilance"); // démo — scénario cash_tension
    const max = 80;
    return (
      <div style={{ padding: "16px 16px 24px", display: "flex", flexDirection: "column", gap: 16 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <div style={{ fontWeight: 700, fontSize: 20, letterSpacing: "-0.02em" }}>{section === "tva" ? "TVA" : "Trésorerie"}</div>
          <SegmentedControl size="sm" value={section} onChange={setSection} options={[{ value: "tresorerie", label: "Trésorerie" }, { value: "tva", label: "TVA" }]} />
        </div>

        {section === "tva"
          ? React.createElement(window.OryzeApp.TvaScreen, { embedded: true })
          : (
        <React.Fragment>
        {/* Forecast card */}
        <Card variant="elevated" padding="18px">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", flexWrap: "wrap", gap: 10, marginBottom: 14 }}>
            <div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-muted)" }}>Solde prévisionnel · fin avril</div>
              <div style={{ marginTop: 7 }}><Amount value={10240} size="xl" /></div>
              <div style={{ marginTop: 6, display: "inline-flex", alignItems: "center", gap: 6 }}>
                <Tag tone="butter" dot>Autonomie 2,9 mois</Tag>
              </div>
            </div>
            <SegmentedControl size="sm" value={period} onChange={setPeriod} options={["3 mois", "6 mois", "1 an"]} />
          </div>
          {/* bar chart */}
          <div style={{ display: "flex", alignItems: "flex-end", gap: 10, height: 110, padding: "0 2px" }}>
            {series.map((s) => (
              <div key={s.m} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
                <div style={{ display: "flex", alignItems: "flex-end", gap: 3, height: 90 }}>
                  <div style={{ width: 9, height: `${(s.in / max) * 100}%`, background: "var(--oryze-positive)", border: "1.5px solid var(--line-keyline)", borderRadius: "3px 3px 0 0" }} />
                  <div style={{ width: 9, height: `${(s.out / max) * 100}%`, background: "var(--oryze-coral)", border: "1.5px solid var(--line-keyline)", borderRadius: "3px 3px 0 0" }} />
                </div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-subtle)" }}>{s.m}</div>
              </div>
            ))}
          </div>
          <div style={{ display: "flex", gap: 16, marginTop: 10, paddingTop: 10, borderTop: "1px solid var(--line-divider)" }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12, color: "var(--text-muted)" }}><span style={{ width: 9, height: 9, background: "var(--oryze-positive)", border: "1.5px solid var(--line-keyline)" }} /> Encaissé</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12, color: "var(--text-muted)" }}><span style={{ width: 9, height: 9, background: "var(--oryze-coral)", border: "1.5px solid var(--line-keyline)" }} /> Décaissé</span>
          </div>
        </Card>

        {/* Santé de trésorerie — cash_tension v1 (barème figé 13/07) */}
        <Card variant="flat" padding="16px">
          {(() => {
            const st = window.OryzeShared.cashTensionState(ct);
            return (
              <React.Fragment>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10 }}>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-muted)" }}>Santé de trésorerie · 30 j</div>
                  <Tag tone="butter" style={{ fontSize: 10.5, padding: "3px 8px" }}>Estimation</Tag>
                </div>
                <div style={{ display: "flex", alignItems: "center", gap: 16, marginTop: 12 }}>
                  <CashTensionRing size={84} thickness={13} state={st.key} days={st.days} />
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontWeight: 700, fontSize: 14.5, lineHeight: 1.4 }}>{st.message}</div>
                    <div style={{ fontSize: 11.5, color: "var(--text-muted)", marginTop: 5, lineHeight: 1.45 }}>(solde + encaissements pondérés) / décaissements prévus</div>
                  </div>
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 7, marginTop: 12, paddingTop: 11, borderTop: "1px solid var(--line-divider)" }}>
                  {st.rows.map((r) => (
                    <div key={r.label} style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 10, fontSize: 12 }}>
                      <span style={{ color: "var(--text-muted)" }}>{r.label}</span>
                      {r.text != null
                        ? <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 600, color: "var(--text-strong)" }}>{r.text}</span>
                        : r.value == null
                        ? <span style={{ fontFamily: "var(--font-mono)", color: "var(--text-subtle)" }}>—</span>
                        : <Amount value={r.value} size="sm" tone={r.value < 0 ? "negative" : undefined} />}
                    </div>
                  ))}
                </div>
                <div style={{ marginTop: 11, paddingTop: 10, borderTop: "1px solid var(--line-divider)", fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-subtle)", lineHeight: 1.6 }}>{st.trace}</div>
                <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 12 }}>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-subtle)", flex: "none" }}>démo</span>
                  <SegmentedControl size="sm" fullWidth style={{ flex: 1, minWidth: 0 }} value={ct} onChange={setCt} options={[
                    { value: "pending", label: "En cours" }, { value: "sain", label: "Sain" },
                    { value: "vigilance", label: "Vigilance" }, { value: "tendu", label: "Tendu" },
                  ]} />
                </div>
              </React.Fragment>
            );
          })()}
        </Card>

        {/* Allocation donut */}
        <Card variant="flat" padding="16px" style={{ display: "flex", alignItems: "center", gap: 18 }}>
          <ProgressRing size={92} thickness={18} rounded={false} segments={[
            { value: 46, color: "var(--oryze-majorelle)" },
            { value: 30, color: "var(--oryze-lavender)" },
            { value: 24, color: "var(--oryze-rose)" }]} />
          <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 8 }}>
            <div style={{ fontWeight: 700, fontSize: 14 }}>Répartition des dépenses</div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--text-subtle)", marginTop: -4, marginBottom: 2 }}>6 mois glissants</div>
            {[["Charges fixes", "var(--oryze-majorelle)", 46], ["Achats & SaaS", "var(--oryze-lavender)", 30], ["Déplacements", "var(--oryze-rose)", 24]].map(([l, c, v]) => (
              <div key={l} style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <span style={{ width: 8, height: 8, borderRadius: "50%", background: c, border: "1px solid var(--line-keyline)" }} />
                <span style={{ flex: 1, fontSize: 13, color: "var(--text-body)" }}>{l}</span>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 12.5, fontWeight: 600, whiteSpace: "nowrap", flex: "none" }}>{v} %</span>
              </div>
            ))}
          </div>
        </Card>

        <div>
          <div style={{ fontWeight: 700, fontSize: 15, margin: "4px 2px 8px" }}>Mouvements</div>
          <Card variant="flat" padding="0">
            <TransactionRow icon={<Ic.building size={18} />} iconBg="var(--oryze-mint)" title="Dupont SARL" meta="14 avr · Encaissement" amount={2400} amountTone="positive" />
            <TransactionRow icon={<Ic.percent size={18} />} iconBg="var(--oryze-lilac)" title="Provision TVA" meta="14 avr · Automatique" amount={-2480} status={<Tag tone="brand" dot>Mise de côté</Tag>} />
            <TransactionRow icon={<Ic.coffee size={18} />} iconBg="var(--oryze-butter)" title="Café de la Place" meta="13 avr · Frais pro" amount={-12.4} />
            <TransactionRow icon={<Ic.car size={18} />} iconBg="var(--oryze-coral)" title="Total Énergies" meta="13 avr · Déplacements" amount={-72.9} amountTone="negative" />
          </Card>
        </div>
        </React.Fragment>
        )}
      </div>
    );
  }

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