Refine RNG simulator layout and simulation stats

website/src/features/toolboxes/modules/RngSimulatorModule.jsx

@@ -1,6 +1,7 @@
 // Rôle : fournit le simulateur de chance pour calculer et simuler des taux enregistrés.
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Icon } from "../../../components/Icon.jsx";
+import { Tabs } from "../../../components/Tabs.jsx";
 import { useDraftForm } from "../../../hooks/useDraftForm.js";
 import { TextExchangeActions } from "./TextExchangeActions.jsx";
 import {
@@ -8,15 +9,23 @@ import {
   RNG_SIMULATOR_HISTORY_LIMIT,
   RNG_SIMULATOR_LIMITS,
   addRngSimulationHistory,
+  calculateAtLeastOneProbability,
+  calculateRngCostSummary,
   calculateRngSummary,
   clampDecimal,
   clampInteger,
+  getEffectiveRate,
   isValidRateString,
+  normalizeCostString,
   normalizeRateString,
   simulateRngDraws
 } from "./rngSimulatorUtils.js";
 
 const CHANCE_TARGETS = [50, 90, 95, 99];
+const RNG_TABS = [
+  { id: "stats", label: "Calculs" },
+  { id: "simulation", label: "Simulation" }
+];
 
 function formatNumber(value, maximumFractionDigits = 2) {
   if (!Number.isFinite(value)) return "—";
@@ -28,6 +37,11 @@ function formatPercent(value, maximumFractionDigits = 6) {
   return `${value.toLocaleString("fr-FR", { maximumFractionDigits })} %`;
 }
 
+function formatCost(value) {
+  if (!Number.isFinite(value)) return "—";
+  return formatNumber(value, 0);
+}
+
 function formatDrawTarget(value, unit) {
   if (!Number.isFinite(value)) return `— ${unit}`;
   if (value >= 1000000) {
@@ -73,14 +87,18 @@ function normalizeSessionHistoryEntry(entry, index) {
   const successes = clampInteger(entry?.successes, 0, draws, 0);
   return {
     id: entry?.id || `rng-session-${index}`,
+    rateId: String(entry?.rateId || "").trim(),
     label: String(entry?.label || "").trim() || "Simulation",
     rate: normalizeRateString(entry?.rate),
+    costPerDraw: normalizeCostString(entry?.costPerDraw),
     multiplier: clampDecimal(entry?.multiplier, RNG_SIMULATOR_LIMITS.multiplierMin, RNG_SIMULATOR_LIMITS.multiplierMax, 0),
     draws,
     successes,
     fails: draws - successes,
     observedRate: draws > 0 ? (successes / draws) * 100 : 0,
-    longestFailStreak: clampInteger(entry?.longestFailStreak, 0, draws, 0)
+    longestFailStreak: clampInteger(entry?.longestFailStreak, 0, draws, 0),
+    longestSuccessStreak: clampInteger(entry?.longestSuccessStreak, 0, draws, 0),
+    firstSuccessDraw: clampInteger(entry?.firstSuccessDraw, 0, draws, 0)
   };
 }
 
@@ -94,33 +112,81 @@ function writeSimulationHistory(storageKey, history) {
   }
 }
 
-export function RngSimulatorModule({ toolboxId, moduleId, context, textExchangeOpen }) {
+function historyEntryMatchesRate(entry, rate) {
+  if (!entry || !rate) return false;
+  if (entry.rateId) return entry.rateId === rate.id;
+  return entry.label === rate.label && entry.rate === rate.rate;
+}
+
+export function RngSimulatorModule({ toolboxId, moduleId, context, editing = false, setEditing = () => {}, textExchangeOpen }) {
   const data = context.normalizeRngSimulatorData(context.getModuleData(toolboxId, moduleId, {}));
   const textContent = context.moduleText?.rngSimulator || {};
+  const tabs = useMemo(() => [
+    { ...RNG_TABS[0], label: textContent.statsTabLabel || RNG_TABS[0].label },
+    { ...RNG_TABS[1], label: textContent.simulationTabLabel || RNG_TABS[1].label }
+  ], [textContent.simulationTabLabel, textContent.statsTabLabel]);
   const historyStorageKey = `rng-simulator:${toolboxId}:${moduleId}:history`;
+  const [activeTab, setActiveTab] = useState("stats");
   const [history, setHistory] = useState(() => readSimulationHistory(historyStorageKey));
   const [editingRateId, setEditingRateId] = useState("");
   const [multiplierDraft, setMultiplierDraft] = useState(null);
-  const [occurrenceDrafts, setOccurrenceDrafts] = useState({ perHour: null, perDay: null, perMonth: null });
+  const [costDraft, setCostDraft] = useState(null);
+  const [occurrenceUnit, setOccurrenceUnit] = useState("perHour");
+  const [occurrenceDraft, setOccurrenceDraft] = useState(null);
+  const rateFormRef = useRef(null);
+  const previousEditingRef = useRef(editing);
   const rateDraft = useDraftForm({ label: "", rate: RNG_SIMULATOR_DEFAULT_RATE });
+  const rateFormOpen = editing || Boolean(editingRateId);
   const activeRate = data.rates.find((rate) => rate.id === data.activeRateId) || data.rates[0] || null;
   const summary = useMemo(() => activeRate ? calculateRngSummary({
     rate: activeRate.rate,
     multiplier: activeRate.multiplier,
     simulationDraws: data.settings.simulationDraws,
-    perHour: activeRate.perHour,
-    perDay: activeRate.perDay,
-    perMonth: activeRate.perMonth
+    occurrenceValue: activeRate.occurrenceValue,
+    occurrenceUnit: activeRate.occurrenceUnit
   }) : null, [activeRate, data.settings.simulationDraws]);
+  const costSummary = useMemo(() => activeRate && summary ? calculateRngCostSummary({
+    costPerDraw: costDraft ?? activeRate.costPerDraw,
+    averageDraws: summary.averageDraws,
+    drawsForChance: summary.drawsForChance,
+    simulationDraws: data.settings.simulationDraws,
+    simulationSuccesses: 0
+  }) : null, [activeRate, costDraft, data.settings.simulationDraws, summary]);
+  const activeHistory = useMemo(() => history.filter((entry) => historyEntryMatchesRate(entry, activeRate)), [activeRate, history]);
+  const chanceWithoutMultiplier = activeRate ? calculateAtLeastOneProbability(activeRate.rate, data.settings.simulationDraws, 0) : 0;
 
   useEffect(() => {
     setHistory(readSimulationHistory(historyStorageKey));
   }, [historyStorageKey]);
 
+  useEffect(() => {
+    const wasEditing = previousEditingRef.current;
+    if (wasEditing && !editing) setEditingRateId("");
+    if (!wasEditing && editing && !editingRateId) rateDraft.reset({ label: "", rate: RNG_SIMULATOR_DEFAULT_RATE });
+    previousEditingRef.current = editing;
+    // Le hook useDraftForm expose reset sans identité stable; cette transition ne doit dépendre que de l'ouverture.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editing, editingRateId]);
+
+  useEffect(() => {
+    if (!rateFormOpen) return undefined;
+    function closeOnOutsidePointer(event) {
+      if (event.target.closest?.(".module-edit-button")) return;
+      if (!rateFormRef.current?.contains(event.target)) {
+        setEditingRateId("");
+        setEditing(false);
+      }
+    }
+    document.addEventListener("pointerdown", closeOnOutsidePointer);
+    return () => document.removeEventListener("pointerdown", closeOnOutsidePointer);
+  }, [rateFormOpen, setEditing]);
+
   useEffect(() => {
     setMultiplierDraft(null);
-    setOccurrenceDrafts({ perHour: null, perDay: null, perMonth: null });
-  }, [activeRate?.id]);
+    setCostDraft(null);
+    setOccurrenceDraft(null);
+    setOccurrenceUnit(activeRate?.occurrenceUnit || "perHour");
+  }, [activeRate?.id, activeRate?.occurrenceUnit]);
 
   function save(nextData) {
     context.setModuleData(toolboxId, moduleId, nextData, "rngSimulator");
@@ -158,35 +224,57 @@ export function RngSimulatorModule({ toolboxId, moduleId, context, textExchangeO
     if (multiplierDraft === null) return;
     const raw = multiplierDraft.trim();
     const parsed = Number(raw.replace(",", "."));
-    if (!raw || !Number.isFinite(parsed)) {
-      setMultiplierDraft(null);
-      updateActiveRateSettings("multiplier", 0);
-      return;
-    }
+    if (!raw || !Number.isFinite(parsed)) updateActiveRateSettings("multiplier", 0);
     setMultiplierDraft(null);
   }
 
-  function clearMultiplier() {
-    setMultiplierDraft(null);
-    updateActiveRateSettings("multiplier", 0);
+  function updateCost(value) {
+    setCostDraft(value);
   }
 
-  function updateOccurrence(field, value) {
-    setOccurrenceDrafts((drafts) => ({ ...drafts, [field]: value }));
+  function blurCost() {
+    if (!activeRate || costDraft === null) return;
+    save({
+      ...data,
+      rates: data.rates.map((rate) => rate.id === activeRate.id ? { ...rate, costPerDraw: normalizeCostString(costDraft) } : rate)
+    });
+    setCostDraft(null);
+  }
+
+  function updateOccurrence(value) {
+    setOccurrenceDraft(value);
+    if (!activeRate) return;
     if (String(value).trim() === "") {
-      updateActiveRateSettings(field, 0);
+      save({
+        ...data,
+        rates: data.rates.map((rate) => rate.id === activeRate.id ? { ...rate, occurrenceValue: 0, occurrenceUnit } : rate)
+      });
       return;
     }
-    updateActiveRateSettings(field, value);
+    const nextValue = clampDecimal(value, RNG_SIMULATOR_LIMITS.occurrenceRateMin, RNG_SIMULATOR_LIMITS.occurrenceRateMax, activeRate.occurrenceValue);
+    save({
+      ...data,
+      rates: data.rates.map((rate) => rate.id === activeRate.id ? { ...rate, occurrenceValue: nextValue, occurrenceUnit } : rate)
+    });
   }
 
-  function blurOccurrence(field) {
-    const value = occurrenceDrafts[field];
-    if (value === null) return;
+  function changeOccurrenceUnit(unit) {
+    setOccurrenceUnit(unit);
+    setOccurrenceDraft(null);
+    if (!activeRate) return;
+    save({
+      ...data,
+      rates: data.rates.map((rate) => rate.id === activeRate.id ? { ...rate, occurrenceValue: activeRate.occurrenceValue, occurrenceUnit: unit } : rate)
+    });
+  }
+
+  function blurOccurrence() {
+    if (occurrenceDraft === null) return;
+    const value = occurrenceDraft;
     const raw = value.trim();
     const parsed = Number(raw.replace(",", "."));
-    if (!raw || !Number.isFinite(parsed)) updateActiveRateSettings(field, 0);
-    setOccurrenceDrafts((drafts) => ({ ...drafts, [field]: null }));
+    if (!raw || !Number.isFinite(parsed)) updateOccurrence("");
+    setOccurrenceDraft(null);
   }
 
   function submitRate(event) {
@@ -200,22 +288,28 @@ export function RngSimulatorModule({ toolboxId, moduleId, context, textExchangeO
         setEditingRateId("");
       } else {
         const id = context.uid("rng");
-        save({ ...data, activeRateId: data.activeRateId || id, rates: [...data.rates, { id, label, rate }] });
+        save({ ...data, activeRateId: id, rates: [...data.rates, { id, label, rate }] });
       }
       reset({ label: "", rate: RNG_SIMULATOR_DEFAULT_RATE });
+      setEditing(false);
       return "";
     });
   }
 
   function editRate(rate) {
-    save({ ...data, activeRateId: rate.id });
     setEditingRateId(rate.id);
+    setEditing(true);
     rateDraft.reset({ label: rate.label, rate: rate.rate });
   }
 
   function cancelEdit() {
     setEditingRateId("");
     rateDraft.reset({ label: "", rate: RNG_SIMULATOR_DEFAULT_RATE });
+    setEditing(false);
+  }
+
+  function selectRate(rate) {
+    save({ ...data, activeRateId: rate.id });
   }
 
   function deleteRate(rateId) {
@@ -229,8 +323,10 @@ export function RngSimulatorModule({ toolboxId, moduleId, context, textExchangeO
     const result = simulateRngDraws(activeRate.rate, data.settings.simulationDraws, Math.random, activeRate.multiplier);
     const entry = {
       id: context.uid("rng"),
+      rateId: activeRate.id,
       label: activeRate.label,
       rate: activeRate.rate,
+      costPerDraw: activeRate.costPerDraw,
       multiplier: activeRate.multiplier,
       ...result
     };
@@ -240,8 +336,9 @@ export function RngSimulatorModule({ toolboxId, moduleId, context, textExchangeO
   }
 
   function clearHistory() {
-    setHistory([]);
-    writeSimulationHistory(historyStorageKey, []);
+    const nextHistory = activeRate ? history.filter((entry) => !historyEntryMatchesRate(entry, activeRate)) : [];
+    setHistory(nextHistory);
+    writeSimulationHistory(historyStorageKey, nextHistory);
   }
 
   return (
@@ -252,170 +349,188 @@ export function RngSimulatorModule({ toolboxId, moduleId, context, textExchangeO
         </div>
       )}
       <div className="rng-simulator-tool">
-        <section className="rng-simulator-grid">
-          <div className="rng-simulator-rates-stack">
-            <div className="rng-simulator-panel rng-simulator-rate-add-panel">
-              <header>
-                <div>
-                  <h3>{editingRateId ? textContent.editRateTitle || "Modifier un taux" : textContent.addRateTitle || "Ajouter un taux"}</h3>
-                </div>
-              </header>
-            <form className="rng-simulator-rate-form" onSubmit={submitRate}>
-              <label className="rng-simulator-field">
-                <span>{textContent.labelLabel || "Libellé"}</span>
-                <input {...rateDraft.getFieldProps("label", { className: "nds-input", "data-size": "sm", type: "text", placeholder: textContent.labelPlaceholder || "Drop rare" })} />
-              </label>
-              <label className="rng-simulator-field">
-                <span>{textContent.rateLabel || "Taux (%)"}</span>
-                <input {...rateDraft.getFieldProps("rate", { className: "nds-input", "data-size": "sm", type: "text", inputMode: "decimal", placeholder: RNG_SIMULATOR_DEFAULT_RATE })} />
-              </label>
-              {rateDraft.error && <p className="rng-simulator-error">{rateDraft.error}</p>}
-              <div className="rng-simulator-form-actions">
-                <button className="nds-button" data-size="sm" data-variant="primary" type="submit">
-                  <Icon name={editingRateId ? "save" : "add"} />
-                  <span>{editingRateId ? textContent.saveRateButton || "Enregistrer" : textContent.addRateButton || "Ajouter"}</span>
-                </button>
-                {editingRateId && (
-                  <button className="nds-button" data-size="sm" type="button" onClick={cancelEdit}>
-                    {textContent.cancelButton || "Annuler"}
-                  </button>
-                )}
-              </div>
-            </form>
+        <section className="rng-simulator-panel rng-simulator-rates-panel">
+          <header>
+            <div>
+              <h3>{textContent.ratesTitle || "Taux enregistrés"}</h3>
+              <span className="rng-simulator-count">{data.rates.length}</span>
             </div>
-            <div className="rng-simulator-panel rng-simulator-rates-panel">
-              <header>
-                <div>
-                  <h3>{textContent.ratesTitle || "Taux enregistrés"}</h3>
-                </div>
-                <span className="rng-simulator-count">{data.rates.length}</span>
-              </header>
-              <div className="rng-simulator-rates nds-scrollbox">
-                {data.rates.length ? data.rates.map((rate) => (
-                  <article className={`rng-simulator-rate-row ${rate.id === activeRate?.id ? "is-active" : ""}`} key={rate.id}>
-                    <button type="button" onClick={() => editRate(rate)}>
-                      <strong>{rate.label}</strong>
-                    </button>
-                    <div className="rng-simulator-rate-actions">
-                      <button className="nds-icon-button" data-size="xs" data-variant="danger" type="button" onClick={() => deleteRate(rate.id)} aria-label={`${textContent.deleteTitle || "Supprimer"} ${rate.label}`} title={textContent.deleteTitle || "Supprimer"}>
-                        <Icon name="trash" />
-                      </button>
-                    </div>
-                  </article>
-                )) : <p className="rng-simulator-empty">{textContent.emptyRates || "Aucun taux enregistré."}</p>}
-              </div>
-            </div>
-          </div>
+          </header>
 
-          <div className="rng-simulator-panel rng-simulator-summary-panel">
-            <header>
-              <div>
-                <h3>{activeRate?.label || textContent.noActiveRateTitle || "Aucun taux actif"}</h3>
+          <div className="rng-simulator-rate-layout">
+            {rateFormOpen && (
+              <form className="rng-simulator-rate-form" ref={rateFormRef} onSubmit={submitRate}>
+                <label className="rng-simulator-field">
+                  <span>{textContent.labelLabel || "Libellé"}</span>
+                  <input {...rateDraft.getFieldProps("label", { className: "nds-input", "data-size": "sm", type: "text", placeholder: textContent.labelPlaceholder || "Drop rare" })} />
+                </label>
+                <label className="rng-simulator-field">
+                  <span>{textContent.rateLabel || "Taux (%)"}</span>
+                  <input {...rateDraft.getFieldProps("rate", { className: "nds-input", "data-size": "sm", type: "text", inputMode: "decimal", placeholder: RNG_SIMULATOR_DEFAULT_RATE })} />
+                </label>
+                {rateDraft.error && <p className="rng-simulator-error">{rateDraft.error}</p>}
+                <div className="rng-simulator-form-actions">
+                  <button className="nds-button" data-size="sm" data-variant="primary" type="submit">
+                    <Icon name={editingRateId ? "save" : "add"} />
+                    <span>{editingRateId ? textContent.saveRateButton || "Enregistrer" : textContent.addRateButton || "Ajouter"}</span>
+                  </button>
+                  {data.rates.length > 0 && (
+                    <button className="nds-button" data-size="sm" type="button" onClick={cancelEdit}>
+                      {textContent.cancelButton || "Annuler"}
+                    </button>
+                  )}
+                </div>
+              </form>
+            )}
+
+            <div className="rng-simulator-rates nds-scrollbox">
+              {data.rates.length ? data.rates.map((rate) => (
+                <article className={`rng-simulator-rate-row ${rate.id === activeRate?.id ? "is-active" : ""}`} key={rate.id}>
+                  <button type="button" onClick={() => selectRate(rate)}>
+                    <strong>{rate.label}</strong>
+                    <span>{rate.rate} %</span>
+                  </button>
+                  <div className="rng-simulator-rate-actions">
+                    <button className="nds-icon-button" data-size="xs" type="button" onClick={() => editRate(rate)} aria-label={`${textContent.editRateTitle || "Modifier"} ${rate.label}`} title={textContent.editRateTitle || "Modifier"}>
+                      <Icon name="edit" />
+                    </button>
+                    <button className="nds-icon-button" data-size="xs" data-variant="danger" type="button" onClick={() => deleteRate(rate.id)} aria-label={`${textContent.deleteTitle || "Supprimer"} ${rate.label}`} title={textContent.deleteTitle || "Supprimer"}>
+                      <Icon name="trash" />
+                    </button>
+                  </div>
+                </article>
+              )) : <p className="rng-simulator-empty">{textContent.emptyRates || "Aucun taux enregistré."}</p>}
+            </div>
+
+            {activeRate && summary && (
+              <div className="rng-simulator-active-summary">
+                <RngInfo label={textContent.activeRateLabel || "Taux brut"} value={`${activeRate.rate} %`} />
               </div>
-              {activeRate && <span className="rng-simulator-active-rate">{activeRate.rate} %</span>}
-            </header>
-            {activeRate && summary ? (
-              <>
-                <div className="rng-simulator-section">
-                  <span className="rng-simulator-section-title">{textContent.probabilitySectionTitle || "Probabilités avec multiplicateur"}</span>
-                  <div className="rng-simulator-field rng-simulator-multiplier-field">
-                    <span>{textContent.multiplierLabel || "Multiplicateur"}</span>
-                    <div className="rng-simulator-percent-input">
-                      <input className="nds-input" data-size="sm" type="text" inputMode="decimal" value={multiplierDraft ?? String(activeRate.multiplier ?? 0)} onChange={(event) => updateMultiplier(event.target.value)} onBlur={blurMultiplier} aria-label={textContent.multiplierLabel || "Multiplicateur"} />
-                      <span>%</span>
-                      <button className="nds-icon-button" data-size="xs" type="button" onClick={clearMultiplier} aria-label={textContent.clearMultiplierButton || "Réinitialiser le multiplicateur"} title={textContent.clearMultiplierButton || "Réinitialiser le multiplicateur"}>
-                        <Icon name="rubber" />
-                      </button>
-                    </div>
-                  </div>
-                  <div className="rng-simulator-stat-grid">
-                    <RngStat label={textContent.averageDrawsLabel || "Moyenne avant réussite" } value={`${formatNumber(summary.averageDraws, 2)} ${textContent.drawsUnit || "tirages"}`} />
-                    <RngStat label={textContent.simulationChanceLabel || "Chance sur les tirages saisis"} value={formatPercent(summary.chanceForSimulationDraws * 100, 6)} />
-                  </div>
-                </div>
-                <div className="rng-simulator-section">
-                  <span className="rng-simulator-section-title">{textContent.averageTimeTitle || "Temps moyen avant réussite"}</span>
-                  <span className="rng-simulator-subtitle">{textContent.occurrenceCountLabel || "Nombre d'occurrences"}</span>
-                  <div className="rng-simulator-settings rng-simulator-three-columns">
-                    <label className="rng-simulator-field">
-                      <span>{textContent.perHourLabel || "Par heure"}</span>
-                      <input className="nds-input" data-size="sm" type="text" inputMode="decimal" value={occurrenceDrafts.perHour ?? String(activeRate.perHour ?? 0)} onChange={(event) => updateOccurrence("perHour", event.target.value)} onBlur={() => blurOccurrence("perHour")} />
-                    </label>
-                    <label className="rng-simulator-field">
-                      <span>{textContent.perDayLabel || "Par jour"}</span>
-                      <input className="nds-input" data-size="sm" type="text" inputMode="decimal" value={occurrenceDrafts.perDay ?? String(activeRate.perDay ?? 0)} onChange={(event) => updateOccurrence("perDay", event.target.value)} onBlur={() => blurOccurrence("perDay")} />
-                    </label>
-                    <label className="rng-simulator-field">
-                      <span>{textContent.perMonthLabel || "Par mois"}</span>
-                      <input className="nds-input" data-size="sm" type="text" inputMode="decimal" value={occurrenceDrafts.perMonth ?? String(activeRate.perMonth ?? 0)} onChange={(event) => updateOccurrence("perMonth", event.target.value)} onBlur={() => blurOccurrence("perMonth")} />
-                    </label>
-                  </div>
-                  <div className="rng-simulator-time-grid">
-                    <RngStat label={textContent.hourTimeLabel || "En heures"} value={formatTime(summary.timeByFrequency.hour, textContent.hoursUnit || "h")} />
-                    <RngStat label={textContent.dayTimeLabel || "En jours"} value={formatTime(summary.timeByFrequency.day, textContent.daysUnit || "j")} />
-                    <RngStat label={textContent.monthTimeLabel || "En mois"} value={formatTime(summary.timeByFrequency.month, textContent.monthsUnit || "mois")} />
-                  </div>
-                </div>
-                <div className="rng-simulator-section">
-                  <span className="rng-simulator-section-title">{textContent.chanceTargetsTitle || "Tirages pour atteindre une chance cumulée"}</span>
-                  <div className="rng-simulator-targets">
-                    {CHANCE_TARGETS.map((target) => (
-                      <RngStat key={target} label={`${target} %`} value={formatDrawTarget(summary.drawsForChance[target], textContent.drawsUnit || "tirages")} title={`${formatNumber(summary.drawsForChance[target], 0)} ${textContent.drawsUnit || "tirages"}`} />
-                    ))}
-                  </div>
-                </div>
-              </>
-            ) : <p className="rng-simulator-empty">{textContent.emptySummary || "Ajoutez un taux pour afficher les calculs."}</p>}
+            )}
           </div>
         </section>
 
-        <section className="rng-simulator-panel rng-simulator-simulation-panel">
+        <section className="rng-simulator-panel rng-simulator-tabs-panel">
           <header>
-            <div>
-              <h3>{textContent.simulationTitle || "Résultats simulés"}</h3>
-            </div>
+            <Tabs tabs={tabs} activeTab={activeTab} onChange={setActiveTab} className="rng-simulator-tabs" />
           </header>
-          <div className="rng-simulator-simulation-bar">
-            <div className="rng-simulator-simulation-actions">
-              <label className="rng-simulator-field rng-simulator-inline-field rng-simulator-simulation-draws">
-                <span>{textContent.simulationDrawsLabel || "Tirages simulés"}</span>
-                <input className="nds-input" data-size="sm" type="number" min="1" max={RNG_SIMULATOR_LIMITS.simulationDrawsMax} value={data.settings.simulationDraws} onChange={(event) => updateSettings("simulationDraws", event.target.value)} />
-              </label>
-              <button className="nds-button" data-size="sm" data-variant="primary" type="button" onClick={runSimulation} disabled={!activeRate}>
-                <Icon name="play-circle" />
-                <span>{textContent.simulateButton || "Simuler"}</span>
-              </button>
+
+          {activeTab === "stats" && (
+            <div className="rng-simulator-tab-content">
+              {activeRate && summary ? (
+                <>
+                  <div className="rng-simulator-section">
+                    <div className="rng-simulator-primary-controls">
+                      <div className="rng-simulator-primary-column">
+                        <div className="rng-simulator-field rng-simulator-multiplier-field">
+                          <span>{textContent.multiplierLabel || "Multiplicateur (%)"}</span>
+                          <div className="rng-simulator-percent-input">
+                            <input className="nds-input" data-size="sm" type="text" inputMode="decimal" value={multiplierDraft ?? String(activeRate.multiplier ?? 0)} onChange={(event) => updateMultiplier(event.target.value)} onBlur={blurMultiplier} aria-label={textContent.multiplierLabel || "Multiplicateur (%)"} />
+                            <span>%</span>
+                          </div>
+                      </div>
+                      <div className="rng-simulator-stat-grid">
+                        <RngStat label={textContent.effectiveRateLabel || "Taux final"} value={formatPercent(summary.effectiveRate, 6)} />
+                        <RngStat label={textContent.averageDrawsLabel || "Moyenne avant réussite"} value={`${formatNumber(summary.averageDraws, 2)} ${textContent.drawsUnit || "tirages"}`} />
+                      </div>
+                      </div>
+                      <div className="rng-simulator-cost-column">
+                        <label className="rng-simulator-field rng-simulator-cost-field">
+                          <span>{textContent.costPerDrawLabel || "Coût d'un tirage"}</span>
+                          <input className="nds-input" data-size="sm" type="text" inputMode="decimal" value={costDraft ?? activeRate.costPerDraw ?? ""} onChange={(event) => updateCost(event.target.value)} onBlur={blurCost} placeholder={textContent.costPerDrawPlaceholder || "Optionnel"} />
+                        </label>
+                        <RngStat label={textContent.averageCostLabel || "Coût moyen avant réussite"} value={formatCost(costSummary?.averageSuccessCost)} />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="rng-simulator-section">
+                    <span className="rng-simulator-section-title">{textContent.averageTimeTitle || "Temps moyen avant réussite"}</span>
+                    <div className="rng-simulator-occurrence-control">
+                      <label className="rng-simulator-field">
+                        <span>{textContent.occurrenceCountLabel || "Nombre d'occurrences"}</span>
+                        <input className="nds-input" data-size="sm" type="text" inputMode="decimal" value={occurrenceDraft ?? String(activeRate.occurrenceValue ?? 0)} onChange={(event) => updateOccurrence(event.target.value)} onBlur={blurOccurrence} />
+                      </label>
+                      <label className="rng-simulator-field">
+                        <span>{textContent.periodLabel || "Période"}</span>
+                        <select className="nds-select" data-size="sm" value={occurrenceUnit} onChange={(event) => changeOccurrenceUnit(event.target.value)}>
+                          <option value="perHour">{textContent.perHourLabel || "Par heure"}</option>
+                          <option value="perDay">{textContent.perDayLabel || "Par jour"}</option>
+                          <option value="perMonth">{textContent.perMonthLabel || "Par mois"}</option>
+                        </select>
+                      </label>
+                    </div>
+                    <div className="rng-simulator-time-results">
+                      <RngStat label={textContent.hourTimeLabel || "En heures"} value={formatTime(summary.timeByFrequency.hour, textContent.hoursUnit || "h")} />
+                      <RngStat label={textContent.dayTimeLabel || "En jours"} value={formatTime(summary.timeByFrequency.day, textContent.daysUnit || "j")} />
+                      <RngStat label={textContent.monthTimeLabel || "En mois"} value={formatTime(summary.timeByFrequency.month, textContent.monthsUnit || "mois")} />
+                    </div>
+                  </div>
+
+                  <div className="rng-simulator-section">
+                    <span className="rng-simulator-section-title">{textContent.chanceTargetsTitle || "Tirages pour atteindre une chance cumulée"}</span>
+                    <div className="rng-simulator-table rng-simulator-target-table">
+                      <span>{textContent.chanceLabel || "Chance"}</span>
+                      <span>{textContent.drawsUnit || "Tirages"}</span>
+                      <span>{textContent.costLabel || "Coût"}</span>
+                      {CHANCE_TARGETS.map((target) => (
+                        <RngTargetRow costSummary={costSummary} draws={summary.drawsForChance[target]} key={target} target={target} textContent={textContent} />
+                      ))}
+                    </div>
+                  </div>
+                </>
+              ) : <p className="rng-simulator-empty">{textContent.emptySummary || "Ajoutez un taux pour afficher les calculs."}</p>}
             </div>
-            <button className="nds-button" data-size="sm" data-variant="danger" type="button" onClick={clearHistory} disabled={!history.length}>
-              <Icon name="rubber" />
-              <span>{textContent.clearHistoryButton || "Supprimer les simulations"}</span>
-            </button>
-          </div>
-          <div className="rng-simulator-history nds-scrollbox">
-            {history.length ? history.map((entry, index) => (
-              <article className={`rng-simulator-history-row ${index === 0 ? "is-latest" : ""}`} key={entry.id}>
-                <div>
-                  <strong>{entry.label}</strong>
+          )}
+
+          {activeTab === "simulation" && (
+            <div className="rng-simulator-tab-content">
+              <div className="rng-simulator-simulation-overview">
+                <div className="rng-simulator-simulation-actions">
+                  <label className="rng-simulator-field rng-simulator-inline-field rng-simulator-simulation-draws">
+                    <span>{textContent.simulationDrawsLabel || "Tirages simulés"}</span>
+                    <input className="nds-input" data-size="sm" type="number" min="1" max={RNG_SIMULATOR_LIMITS.simulationDrawsMax} value={data.settings.simulationDraws} onChange={(event) => updateSettings("simulationDraws", event.target.value)} />
+                  </label>
+                  <button className="nds-button" data-size="sm" data-variant="primary" type="button" onClick={runSimulation} disabled={!activeRate}>
+                    <Icon name="play-circle" />
+                    <span>{textContent.simulateButton || "Simuler"}</span>
+                  </button>
                 </div>
-                <div className="rng-simulator-history-rate">
-                  <span>{entry.rate} %</span>
-                  <small>{textContent.multiplierShortLabel || "Bonus"} {formatSignedPercent(entry.multiplier ?? 0)}</small>
-                </div>
-                <div className="rng-simulator-history-metrics">
-                  <span><small>{textContent.successesLabel || "Réussites"}</small><b>{entry.successes}/{entry.draws}</b></span>
-                  <span><small>{textContent.failsLabel || "Fails"}</small><b>{entry.fails}</b></span>
-                  <span><small>{textContent.observedRateLabel || "Taux de réussite"}</small><b>{formatPercent((entry.successes / entry.draws) * 100, 6)}</b></span>
-                  <span><small>{textContent.longestFailStreakLabel || "Pire série"}</small><b>{entry.longestFailStreak}</b></span>
-                </div>
-              </article>
-            )) : <p className="rng-simulator-empty">{textContent.emptyHistory || "Aucune simulation."}</p>}
-          </div>
+                {activeRate && summary && (
+                  <div className="rng-simulator-simulation-summary">
+                    <RngStat label={textContent.simulationChanceLabel || "Chance sur les tirages saisis"} value={formatPercent(summary.chanceForSimulationDraws * 100, 6)} />
+                    <RngStat label={textContent.simulationChanceWithoutMultiplierLabel || "Chance sur les tirages saisis sans multiplicateur"} value={formatPercent(chanceWithoutMultiplier * 100, 6)} />
+                  </div>
+                )}
+              </div>
+              <div className="rng-simulator-history-toolbar">
+                <button className="nds-button" data-size="sm" data-variant="danger" type="button" onClick={clearHistory} disabled={!activeHistory.length}>
+                  <Icon name="rubber" />
+                  <span>{textContent.clearHistoryButton || "Supprimer les simulations"}</span>
+                </button>
+              </div>
+              <div className="rng-simulator-history nds-scrollbox">
+                {activeHistory.length ? activeHistory.map((entry, index) => (
+                  <RngHistoryRow entry={entry} index={index} key={entry.id} textContent={textContent} />
+                )) : <p className="rng-simulator-empty">{textContent.emptyHistory || "Aucune simulation."}</p>}
+              </div>
+            </div>
+          )}
         </section>
       </div>
     </>
   );
 }
 
+function RngInfo({ label, value }) {
+  return (
+    <span>
+      <small>{label}</small>
+      <strong>{value}</strong>
+    </span>
+  );
+}
+
 function RngStat({ label, value, title }) {
   return (
     <article className="rng-simulator-stat" title={title}>
@@ -424,3 +539,59 @@ function RngStat({ label, value, title }) {
     </article>
   );
 }
+
+function RngTargetRow({ costSummary, draws, target, textContent }) {
+  return (
+    <>
+      <strong>{target} %</strong>
+      <span title={`${formatNumber(draws, 0)} ${textContent.drawsUnit || "tirages"}`}>{formatDrawTarget(draws, textContent.drawsUnit || "tirages")}</span>
+      <span>{formatCost(costSummary?.targetCosts?.[target])}</span>
+    </>
+  );
+}
+
+function RngHistoryRow({ entry, index, textContent }) {
+  const expectedSuccesses = entry.draws * (getEffectiveRate(entry.rate, entry.multiplier) / 100);
+  const successDelta = entry.successes - expectedSuccesses;
+  const luckLabel = successDelta > 0
+    ? textContent.luckySimulationLabel || "Au-dessus"
+    : successDelta < 0
+      ? textContent.unluckySimulationLabel || "Sous l'attendu"
+      : textContent.neutralSimulationLabel || "Dans la cible";
+  const costs = calculateRngCostSummary({
+    costPerDraw: entry.costPerDraw,
+    averageDraws: 0,
+    drawsForChance: {},
+    simulationDraws: entry.draws,
+    simulationSuccesses: entry.successes,
+    firstSuccessDraw: entry.firstSuccessDraw
+  });
+  return (
+    <article className={`rng-simulator-history-row ${index === 0 ? "is-latest" : ""}`}>
+      <div className="rng-simulator-history-heading">
+        <div className="rng-simulator-history-identity">
+          <strong>{entry.label}</strong>
+          <small>{luckLabel} · {formatSignedPercent((successDelta / entry.draws) * 100, 4)}</small>
+        </div>
+        <div className="rng-simulator-history-score">
+          <b>{entry.successes}</b>
+          <small>{textContent.successesLabel || "Réussites"}</small>
+        </div>
+        <div className="rng-simulator-history-rate">
+          <span>{entry.rate} %</span>
+          <small>{textContent.multiplierShortLabel || "Bonus"} {formatSignedPercent(entry.multiplier ?? 0)}</small>
+        </div>
+      </div>
+      <div className="rng-simulator-history-metrics">
+        <span><small>{textContent.successesLabel || "Réussites"}</small><b>{entry.successes}/{entry.draws}</b></span>
+        <span><small>{textContent.failsLabel || "Fails"}</small><b>{entry.fails}</b></span>
+        <span><small>{textContent.observedRateLabel || "Taux de réussite"}</small><b>{formatPercent((entry.successes / entry.draws) * 100, 6)}</b></span>
+        <span><small>{textContent.expectedSuccessesLabel || "Réussites attendues"}</small><b>{formatNumber(expectedSuccesses, 2)}</b></span>
+        <span><small>{textContent.longestFailStreakLabel || "Pire série d'échec"}</small><b>{entry.longestFailStreak}</b></span>
+        <span><small>{textContent.longestSuccessStreakLabel || "Réussite consécutive"}</small><b>{entry.longestSuccessStreak}</b></span>
+        <span><small>{textContent.firstSuccessCostLabel || "Coût de la 1ere réussite"}</small><b>{entry.firstSuccessDraw > 0 ? formatCost(costs?.simulationFirstSuccessCost) : "—"}</b></span>
+        <span><small>{textContent.costPerSuccessLabel || "Coût moyen/réussite"}</small><b>{entry.successes > 0 ? formatCost(costs?.simulationCostPerSuccess) : "—"}</b></span>
+      </div>
+    </article>
+  );
+}