// run.jsx — Le Run d'autofill (écran « moment fort »)
//
// CÂBLAGE (2026-08-07, passe « enlever le static ») : l'écran ne raconte que
// le run RÉEL. L'ancienne narration (formulaire nommé d'avance, GES inventés,
// « 47 champs ») était un scénario écrit d'avance — crédible,
// donc dangereux : elle décrivait un travail qui n'avait pas lieu. Désormais
// chaque ligne dérive de l'état du moteur, et chaque compteur est un compte.
// Sans runId : on le dit, on ne simule rien.
const { useState: useStateR, useEffect: useEffectR } = React;

// statut du moteur → fraction de la barre, quand progress_pct n'est pas fourni
const STATUS_P = {
  pending: 0.05, parsing: 0.2, inferring: 0.5, filling: 0.85,
  awaiting_user: 1, awaiting_review: 1, done: 1, failed: 1,
};
// ordre des phases, pour savoir ce qui est « déjà passé »
const PHASE_ORDER = ["pending", "parsing", "inferring", "filling",
  "awaiting_user", "awaiting_review", "done"];
const after = (status, phase) =>
  PHASE_ORDER.indexOf(status) >= PHASE_ORDER.indexOf(phase);

/** La narration, dérivée de l'état réel — rien d'écrit d'avance. */
function buildLog(run, t) {
  if (!run) return [];
  const st = run.status;
  const missing = (run.missingFields || []).length;
  const lines = [{ icon: "doc", txt: t("J'ouvre votre document…") }];
  if (run.detectedFields) lines.push({ icon: "scan", txt: t("{n} champs à remplir détectés.", { n: run.detectedFields }) });
  if (after(st, "inferring")) lines.push({ icon: "auto", txt: t("Je puise dans votre profil d'entreprise et votre fiche projet.") });
  if (after(st, "filling")) lines.push({ icon: "auto", txt: t("J'inscris ce que je sais déjà, sans rien inventer.") });
  if (st === "awaiting_user" && missing) lines.push({ icon: "flag", txt: t("{n} champs ont besoin de vous.", { n: missing }) });
  if (st === "awaiting_review") lines.push({ icon: "check", txt: t("Tout est rempli. À vous de relire et de confirmer.") });
  if (st === "done") lines.push({ icon: "check", txt: t("{formulaire} rempli et prêt.") });
  if (st === "failed") lines.push({ icon: "flag", txt: (run.error || t("Une étape a échoué. Vos réponses sont conservées.")) });
  return lines;
}

function RunScreen({ onNext, onBack, runId }) {
  const { t } = useLang();
  const [run] = useRunPolling(runId);

  // Sans run : un écran honnête, pas une simulation.
  if (!runId) {
    return (
      <ScreenShell kick={t("Étape {n} sur 6", { n: 4 })} icon="auto" title={t("Aucun remplissage en cours")} hideLede>
        <div className="card card-pad" style={{ textAlign: "center", padding: "44px 30px" }}>
          <p className="muted" style={{ maxWidth: 460, margin: "0 auto" }}>
            {t("Téléversez d'abord un {formulaire} à l'étape précédente : c'est lui qui lance le travail.")}
          </p>
        </div>
        <div className="wiz-nav">
          <Btn kind="ghost" icon="arrowL" onClick={onBack}>{t("Retour")}</Btn>
          <span />
        </div>
      </ScreenShell>
    );
  }

  const status = run ? run.status : "pending";
  const failed = status === "failed";
  // « Terminé » = le moteur rend la main à l'humain, quelle que soit la porte.
  const done = ["awaiting_user", "awaiting_review", "done", "failed"].includes(status);
  const p = run && typeof run.progressPct === "number" && run.progressPct > 0
    ? Math.min(1, run.progressPct / 100)
    : (STATUS_P[status] ?? 0.1);

  const nDetected = (run && run.detectedFields) || 0;
  const nToConfirm = run && run.missingFields ? run.missingFields.length : 0;
  const nAuto = nDetected ? Math.max(0, nDetected - nToConfirm) : 0;
  // Les compteurs n'apparaissent que quand le moteur les CONNAÎT.
  const detectes = after(status, "parsing") && nDetected ? nDetected : 0;
  const auto = done && !failed ? nAuto : 0;
  const confirmer = done && !failed ? nToConfirm : 0;
  const filledRows = done && !failed ? 9 : Math.round(p * 9);
  const visibleLogs = buildLog(run, t);

  // Bornes visuelles des 4 phases affichées (parsing → awaiting_user)
  const PHASE_BOUNDS = [[0, 0.25], [0.25, 0.6], [0.6, 0.9], [0.9, 1]];
  let phaseIdx = PHASE_BOUNDS.findIndex(([a, b]) => p >= a && p < b);
  if (done) phaseIdx = 3;

  // Ce que le bouton propose dépend de la porte par laquelle le moteur sort.
  const nextLabel = failed ? t("Reprendre")
    : status === "awaiting_review" ? t("Relire et confirmer les {n} champs", { n: nDetected })
    : status === "done" ? t("Voir le résultat")
    : done ? t("Confirmer les {n} derniers champs", { n: nToConfirm })
    : t("Remplissage en cours…");

  return (
    <div className="main">
      <div className="shell-wide">
        <div className="screen-kick"><Icon name="auto" size={15} strokeWidth={2} /> {t("Étape {n} sur 6", { n: 4 })}</div>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 20, flexWrap: "wrap" }}>
          <div>
            <h1 className="screen-title" style={{ marginBottom: 8 }}>
              {failed ? t("Le remplissage s'est arrêté")
                : done ? t("Le formulaire est rempli")
                : t("L'assistant remplit votre {formulaire}…")}
            </h1>
            <p className="screen-lede">
              {failed ? (run && run.error) || t("Une étape a échoué. Vos réponses sont conservées.")
                : done
                ? t("On a complété tout ce qu'on savait. Quelques champs ont besoin de votre confirmation.")
                : t("Le moteur travaille. Suivez l'avancement en direct ci-dessous.")}
            </p>
          </div>
          <LiveBadge meta={{ loading: false, live: !!run }} />
        </div>

        {/* Barre de progression par phase */}
        <div className="phasebar">
          {RUN_PHASES.map((ph, i) => {
            const [a, b] = PHASE_BOUNDS[i];
            const local = Math.max(0, Math.min(1, (p - a) / (b - a)));
            const isDone = p >= b;
            const isActive = phaseIdx === i && !isDone;
            return (
              <div key={ph.id} className={"phase" + (isDone ? " done" : "") + (isActive ? " active" : "")}>
                <div className="phase-track"><div className="phase-fill" style={{ width: (local * 100) + "%" }} /></div>
                <div className="phase-lab">
                  {isDone ? <span className="phase-check"><Icon name="check" size={12} strokeWidth={2.6} /></span> : <span style={{ fontWeight: 700, color: isActive ? "var(--accent-2)" : "var(--muted)" }}>{i + 1}</span>}
                  {t(ph.label)}
                </div>
                <div className="phase-desc">{t(ph.desc)}</div>
              </div>
            );
          })}
        </div>

        <div className="run-grid">
          <div>
            {/* Compteurs — le repère central */}
            <div className="counters">
              <div className="counter">
                <div className="counter-num">{detectes}</div>
                <div className="counter-lab">{t("champs détectés dans le {formulaire}")}</div>
              </div>
              <div className="counter lead">
                <div className="counter-num" style={{ color: "#2c5840" }}>{auto}</div>
                <div className="counter-lab">{t("remplis automatiquement pour vous")}</div>
              </div>
              <div className="counter flag">
                <div className="counter-num">{confirmer}</div>
                <div className="counter-lab">{t("à confirmer ensemble")}</div>
              </div>
            </div>

            {/* Narration : dérivée de l'état du moteur */}
            <div className="card card-pad" style={{ marginTop: 22 }}>
              <h3 style={{ fontFamily: "var(--sans)", fontSize: ".78rem", fontWeight: 700, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 6, display: "flex", alignItems: "center", gap: 8 }}>
                {!done && <span className="spinner" />} {t("Ce que fait l'assistant")}
              </h3>
              <div className="runlog">
                {visibleLogs.map((l, i) => (
                  <div className="runlog-item" key={i} style={{ animationDelay: "0s" }}>
                    <span className={"runlog-ic " + l.icon}><Icon name={l.icon} size={17} /></span>
                    <div className="runlog-txt">{l.txt}</div>
                  </div>
                ))}
                {!done && (
                  <div className="runlog-item" style={{ opacity: .55 }}>
                    <span className="runlog-ic doc"><span className="spinner" style={{ borderColor: "var(--line-2)", borderTopColor: "var(--ink-2)" }} /></span>
                    <div className="runlog-txt muted">…</div>
                  </div>
                )}
              </div>
            </div>
          </div>

          {/* Aperçu du document */}
          <div className="run-side">
            <h3>{t("Aperçu du {formulaire}")}</h3>
            <FormPagePlaceholder label={t("votre {formulaire}")} filled={filledRows} />
            <div className="run-doc-cap">
              {done && !failed ? <><Icon name="check" size={15} /> {t("Tous les champs connus sont remplis")}</> : failed ? null : <><span className="spinner" /> {t("Remplissage en cours…")}</>}
            </div>
          </div>
        </div>

        <div className="wiz-nav">
          <Btn kind="ghost" icon="arrowL" onClick={onBack}>{t("Retour")}</Btn>
          <Btn kind="primary" iconAfter="arrowR" onClick={onNext} disabled={!done}>{nextLabel}</Btn>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { RunScreen });