// ============================================================
// Monarch — Simulateur : Cône de déperdition de la rémunération
// Requiert window.MSC (simcore.jsx) et window.__mscShared (simulators2.jsx).
// ============================================================

(function () {
  const { useState, useEffect } = React;
  const M = window.MSC;
  const { C, SERIF, BODY, fmt, pct, CountEuro, injectCore, useReveal,
    Eyebrow, Label, MoneyInput, Toggle, Shell, InputsCard, Doctrine, CTAEmail, ProsCons } = M;
  function shared() { return window.__mscShared; }

  function RemunerationFrictionSimulator() {
    useEffect(injectCore, []);
    const { ParamRecap } = shared();
    const [mode, setMode] = useState("budget"); // budget | net
    const [montant, setMontant] = useState(100000);
    const [statut, setStatut] = useState("SAS");
    const [tmiId, setTmiId] = useState("30");
    const [done, setDone] = useState(false);
    const [busy, setBusy] = useState(false);
    const reveal = useReveal(done, 250);

    const TMIs = [{ id: "11", v: 0.11 }, { id: "30", v: 0.30 }, { id: "41", v: 0.41 }, { id: "45", v: 0.45 }];
    const cot = statut === "SAS" ? 0.80 : 0.45; // cotisations en % du net
    const tmi = (TMIs.find((t) => t.id === tmiId) || TMIs[1]).v;
    const tmiPct = Math.round(tmi * 100);
    const m = Math.max(0, Number(montant) || 0);

    // net = salaire net imposable ; netReel = net après IR (0.7*net)
    let net;
    if (mode === "budget") net = m / (1 + cot);     // m = super-brut
    else net = m / (1 - tmi);                        // m = net réel souhaité
    const cotis = net * cot;
    const ir = net * tmi;
    const netReel = net * (1 - tmi);
    const superBrut = net * (1 + cot);
    const deperd = superBrut > 0 ? (superBrut - netReel) / superBrut : 0;

    const go = () => { setBusy(true); setDone(false); setTimeout(() => { setBusy(false); setDone(true); }, 700); };

    return (
      <Shell eyebrow="Trésorerie & flux · Rémunération du dirigeant"
        title="Combien votre rémunération vous laisse vraiment."
        intro="Voyez ce qu'il vous reste réellement, une fois les cotisations sociales et l'impôt sur le revenu payés.">
        {!done &&
          <InputsCard onCompute={go} computing={busy} label="Révéler mon net réel">
            <div>
              <Label>Point de départ</Label>
              <Toggle full options={[{ id: "budget", label: "Budget entreprise" }, { id: "net", label: "Net souhaité" }]} value={mode} onChange={setMode} />
              <p style={{ fontFamily: BODY, fontSize: 12.5, color: C.grisC, marginTop: 10, lineHeight: 1.5 }}>
                {mode === "budget" ? "Vous connaissez le coût total que l'entreprise peut consacrer." : "Vous savez ce que vous voulez toucher, net, en poche."}
              </p>
            </div>
            <div><Label>{mode === "budget" ? "Coût global pour l'entreprise" : "Net réel souhaité (après impôt)"}</Label><MoneyInput value={montant} onChange={setMontant} min={10000} max={2000000} step={5000} /></div>
            <div style={{ gridColumn: "1 / -1" }}>
              <Label>Statut du dirigeant</Label>
              <Toggle full options={[{ id: "SAS", label: "Président SAS (assimilé salarié)" }, { id: "SARL", label: "Gérant SARL (TNS)" }]} value={statut} onChange={setStatut} />
            </div>
            <div style={{ gridColumn: "1 / -1" }}>
              <Label>Tranche marginale d'imposition (TMI)</Label>
              <Toggle full options={[{ id: "11", label: "11 %" }, { id: "30", label: "30 %" }, { id: "41", label: "41 %" }, { id: "45", label: "45 %" }]} value={tmiId} onChange={setTmiId} />
            </div>
          </InputsCard>}

        {done &&
          <div style={{ marginTop: 36 }}>
            <ParamRecap items={[["Départ", mode === "budget" ? "Budget" : "Net visé"], ["Montant", fmt(m)], ["Statut", statut === "SAS" ? "Président SAS" : "Gérant SARL"], ["TMI", tmiPct + " %"]]} onEdit={() => setDone(false)} />

            <div style={{ marginTop: 16, border: `1px solid ${C.trait}`, background: C.blanc, padding: "clamp(22px,3vw,32px)" }}>
              <Eyebrow>Votre net réel après impôt</Eyebrow>
              <h3 style={{ fontFamily: SERIF, fontSize: "clamp(20px,2.4vw,28px)", fontWeight: 500, letterSpacing: "-0.01em", margin: "10px 0 6px" }}>Ce qu'il vous reste en poche</h3>
              <CountEuro value={netReel} run={reveal} style={{ fontFamily: SERIF, fontSize: "clamp(34px,5vw,60px)", fontWeight: 500, color: C.saugeF, letterSpacing: "-0.01em", lineHeight: 1 }} />
              <div style={{ fontFamily: BODY, fontSize: 14, color: C.gris, marginTop: 10 }}>pour un coût global entreprise de <b style={{ color: C.encre }}>{fmt(superBrut)}</b></div>

              <Waterfall reveal={reveal} superBrut={superBrut} cotis={cotis} ir={ir} netReel={netReel} />

              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px,1fr))", gap: 18, marginTop: 24 }}>
                <Slice color="loss" label="Cotisations sociales" sub="URSSAF / SSI / retraite" value={cotis} run={reveal} />
                <Slice color="loss" label="Impôt sur le revenu" sub={`prélèvement à la source (TMI ${tmiPct} %)`} value={ir} run={reveal} />
                <Slice color="keep" label="Net réel disponible" sub="reste à vivre" value={netReel} run={reveal} />
              </div>
            </div>

            <div className={"msc-soft" + (reveal ? " on" : "")} style={{ transitionDelay: ".2s", marginTop: 22, background: C.albatre, border: `1px solid ${C.trait}`, padding: "clamp(24px,4vw,40px)", textAlign: "center" }}>
              <p style={{ fontFamily: SERIF, fontSize: "clamp(22px,3vw,34px)", fontWeight: 500, lineHeight: 1.3, letterSpacing: "-0.015em", margin: 0, color: C.encre }}>
                Pour disposer de <span style={{ color: C.saugeF }}>{fmt(netReel)}</span>, votre entreprise a décaissé <span style={{ color: C.encre }}>{fmt(superBrut)}</span>.
              </p>
              <p style={{ fontFamily: BODY, fontSize: 16, color: C.gris, marginTop: 12 }}>Soit une déperdition immédiate de <b style={{ color: C.encre }}>{Math.round(deperd * 100)} %</b>.</p>
            </div>

            <Doctrine open={reveal} eyebrow="À retenir" title="La rémunération sert à vivre, pas à bâtir un patrimoine" accent={C.ardoise}>
              <p style={{ margin: 0 }}>La rémunération personnelle est l'outil le plus lourdement taxé de notre système. Elle doit être strictement calibrée pour financer votre train de vie quotidien. L'erreur fondamentale consiste à utiliser ce canal, amputé de moitié, pour vous constituer un patrimoine (immobilier, bourse). Le cabinet structure vos flux pour que chaque euro destiné à votre capitalisation future soit <b style={{ color: "#fff" }}>sanctuarisé dans votre groupe</b> (holding, société civile), à l'abri des cotisations sociales et de l'IR.</p>
            </Doctrine>

            <ProsCons open={reveal}
              pour={["Vous voyez exactement ce qu'il vous reste, net, en poche.", "La rémunération ouvre des droits sociaux (retraite, prévoyance).", "Indispensable pour financer votre train de vie au quotidien."]}
              contre={["C'est la façon la plus taxée de sortir de l'argent de l'entreprise.", "Mal calibrée, elle ralentit la constitution de votre patrimoine.", "Au-delà du nécessaire, d'autres canaux coûtent bien moins cher."]} />

            <CTAEmail note="Audit de votre mix rémunération / capitalisation lors du premier rendez-vous." />
          </div>}
      </Shell>);
  }

  function Waterfall({ reveal, superBrut, cotis, ir, netReel }) {
    const [on, setOn] = useState(false);
    useEffect(() => { if (reveal) { const id = setTimeout(() => setOn(true), 120); return () => clearTimeout(id); } else setOn(false); }, [reveal]);
    const seg = (v) => (superBrut > 0 ? (v / superBrut) * 100 : 0);
    return (
      <div style={{ marginTop: 22 }}>
        <div style={{ display: "flex", height: 46, border: `1px solid ${C.encre}`, overflow: "hidden", background: C.albatre }}>
          <div title="Cotisations" style={{ height: "100%", width: on ? seg(cotis) + "%" : 0, transition: "width 1s cubic-bezier(.2,.7,.3,1)", opacity: on ? 0.35 : 1, backgroundColor: "rgba(27,29,28,.08)", backgroundImage: "repeating-linear-gradient(135deg, rgba(27,29,28,.5) 0, rgba(27,29,28,.5) 1.5px, transparent 1.5px, transparent 6px)" }} />
          <div title="IR" style={{ height: "100%", width: on ? seg(ir) + "%" : 0, transition: "width 1s cubic-bezier(.2,.7,.3,1)", transitionDelay: ".25s", opacity: on ? 0.5 : 1, backgroundColor: "rgba(91,124,153,.10)", backgroundImage: "repeating-linear-gradient(135deg, rgba(91,124,153,.5) 0, rgba(91,124,153,.5) 1.5px, transparent 1.5px, transparent 6px)" }} />
          <div title="Net réel" style={{ height: "100%", width: on ? seg(netReel) + "%" : 0, transition: "width 1s cubic-bezier(.2,.7,.3,1)", transitionDelay: ".5s", background: C.saugeF }} />
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8, fontFamily: BODY, fontSize: 11.5, color: C.grisC }}>
          <span>Super-brut</span><span>Net réel {Math.round(seg(netReel))} %</span>
        </div>
      </div>);
  }

  function Slice({ color, label, sub, value, run }) {
    const keep = color === "keep";
    return (
      <div style={{ borderTop: `2px solid ${keep ? C.saugeF : C.trait}`, paddingTop: 12 }}>
        <div style={{ fontFamily: BODY, fontSize: 13, color: keep ? C.saugeF : C.ardoise, fontWeight: 600 }}>{label}</div>
        <CountEuro value={value} run={run} style={{ fontFamily: SERIF, fontSize: "clamp(22px,2.8vw,30px)", fontWeight: 500, color: keep ? C.encre : C.gris, letterSpacing: "-0.01em", display: "block", margin: "6px 0 4px" }} />
        <div style={{ fontFamily: BODY, fontSize: 12, color: C.grisC }}>{sub}</div>
      </div>);
  }

  window.RemunerationFrictionSimulator = RemunerationFrictionSimulator;
})();