// reference.jsx — Écran « Fiche projet » : décrire le projet une seule fois.
// 3-5 questions simples (+ docs) → génération LLM → revue/édition → approbation.
//
// CÂBLAGE (2026-08-07) : la fiche N'EST PLUS une démonstration. Les réponses
// se lisent depuis le dossier réel et repartent en base (`saveProject`) avant
// la génération — ce sont elles que le moteur relira à chaque formulaire.
// `ProjectReference` (l'objet de synthèse de l'ontologie) reste un extension
// point : on persiste aujourd'hui ses CHAMPS, pas encore la fiche rédigée.
const { useState: useStateRf, useEffect: useEffectRf, useRef: useRefRf } = React;

function ReferenceScreen({ onNext, onBack, stage, setStage, project }) {
  const { t } = useLang();
  // stage: "intro" | "generating" | "review"
  const [answers, setAnswers] = useStateRf(() => {
    const o = {};
    FICHE_QUESTIONS.forEach((q) => (o[q.id] = ""));
    return o;
  });

  // Le dossier réel remplit ce qu'il sait ; le reste demeure vide. (Les
  // réponses d'exemple ont été supprimées de data.jsx : une fiction plausible
  // se relit distraitement et finissait persistée comme objectifs du projet.)
  useEffectRf(() => {
    if (!project) return;
    setAnswers({
      quoi: project.description || "",
      pourquoi: project.problemStatement || "",
      ges: project.objectives || "",
      etapes: project.methodology || "",
      budget: project.expectedResults || "",
    });
  }, [project && project.id]);

  const [saveErr, setSaveErr] = useStateRf(null);

  const generate = async () => {
    // Les réponses partent en base AVANT la génération : ce sont elles que le
    // moteur relira à chaque formulaire (objectifs, méthodologie, résultats).
    if (project && project.id) {
      try {
        await G4M.saveProject(project.id, {
          description: answers.quoi || null,
          problemStatement: answers.pourquoi || null,
          objectives: answers.ges || null,
          methodology: answers.etapes || null,
          expectedResults: answers.budget || null,
        });
      } catch (e) { setSaveErr(e.message); return; }
    }
    setStage("generating");
  };

  if (stage === "generating") return <FicheGenerating onDone={() => setStage("review")} />;
  if (stage === "review") return <FicheReview onApprove={onNext} onBack={() => setStage("intro")} project={project} />;

  return (
    <ScreenShell kick={t("Étape {n} sur 6", { n: 2 })} icon="edit" title={t("Parlez-nous de votre projet")}
      lede={t("Répondez à quelques questions simples. L'assistant en fera une fiche de référence qui servira à remplir tous vos {formulaires}.")}>
      <div className="card card-pad" style={{ background: "var(--green-bg)", borderColor: "var(--green-line)", display: "flex", gap: 14, alignItems: "flex-start", marginBottom: 26 }}>
        <Icon name="auto" size={20} />
        <p style={{ fontSize: ".94rem", color: "var(--ink-2)", lineHeight: 1.5 }}>
          <b>{t("Pourquoi cette étape ?")}</b>{t(" Plutôt que de vous faire affronter un {formulaire} de 14 pages, on part de vos réponses en langage courant. Pas de jargon, pas de bonne ou mauvaise réponse.")}
        </p>
      </div>

      {FICHE_QUESTIONS.map((q, i) => (
        <div className="card card-pad" key={q.id} style={{ marginBottom: 16, borderLeft: "3px solid var(--green)" }}>
          <div style={{ display: "flex", gap: 12, alignItems: "flex-start", marginBottom: 4 }}>
            <span style={{ flex: "0 0 auto", width: 28, height: 28, borderRadius: "50%", background: "var(--ink)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, fontSize: ".82rem", marginTop: 2 }}>{i + 1}</span>
            <div style={{ flex: 1 }}>
              <label htmlFor={"q-" + q.id} style={{ fontFamily: "var(--serif)", fontSize: "1.12rem", fontWeight: 600, color: "var(--ink)", display: "block", lineHeight: 1.3 }}>{t(q.q)}</label>
              <p className="muted" style={{ fontSize: ".86rem", marginTop: 4, display: "flex", alignItems: "center", gap: 6 }}><Icon name="info" size={14} /> {t(q.hint)}</p>
            </div>
          </div>
          <textarea id={"q-" + q.id} value={answers[q.id]} placeholder={t(q.placeholder)}
            onChange={(e) => setAnswers((a) => ({ ...a, [q.id]: e.target.value }))}
            rows={2}
            style={{ width: "100%", marginTop: 10, fontFamily: "inherit", fontSize: "1rem", lineHeight: 1.5, color: "var(--ink)", padding: "13px 15px", border: "1.5px solid var(--line-2)", borderRadius: "var(--r-sm)", background: "var(--surface-2)", resize: "vertical" }} />
        </div>
      ))}

      {/* La section « vos documents » listait trois fichiers fictifs sans
          aucun téléversement branché derrière : retirée jusqu'à ce que la
          surface existe côté moteur. */}

      {saveErr && <p style={{ color: "var(--danger)", fontSize: ".9rem", marginTop: 14 }}>
        {t("Enregistrement impossible :")} {saveErr}</p>}
      <div className="wiz-nav">
        <Btn kind="ghost" icon="arrowL" onClick={onBack}>{t("Retour")}</Btn>
        <Btn kind="primary" icon="auto" onClick={generate}>{t("Générer ma fiche projet")}</Btn>
      </div>
    </ScreenShell>
  );
}

/* --- Étape de génération (LLM via fuelix-gateway) --- */
function FicheGenerating({ onDone }) {
  const { t } = useLang();
  const steps = [
    t("Lecture de vos réponses…"),
    t("Rédaction de la fiche : cadre, objectifs, moyens…"),
    t("Structuration du budget et des résultats attendus…"),
  ];
  const [i, setI] = useStateRf(0);
  useEffectRf(() => {
    if (i >= steps.length) { const t = setTimeout(onDone, 500); return () => clearTimeout(t); }
    const t = setTimeout(() => setI(i + 1), 900);
    return () => clearTimeout(t);
  }, [i]);
  return (
    <div className="main">
      <div className="shell-narrow" style={{ maxWidth: 620, textAlign: "center", paddingTop: 60 }}>
        <div style={{ width: 64, height: 64, borderRadius: "50%", background: "var(--green-bg)", border: "1px solid var(--green-line)", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 24px", color: "var(--green)" }}>
          <span className="spinner" style={{ width: 28, height: 28, borderWidth: 3 }} />
        </div>
        <h1 className="screen-title" style={{ fontSize: "1.7rem" }}>{t("On rédige votre fiche projet…")}</h1>
        <p className="screen-lede" style={{ margin: "10px auto 30px" }}>{t("Ça prend quelques secondes. On combine vos réponses en une fiche claire et réutilisable.")}</p>
        <div className="card card-pad" style={{ textAlign: "left", maxWidth: 460, margin: "0 auto" }}>
          {steps.map((s, k) => (
            <div key={k} style={{ display: "flex", gap: 12, alignItems: "center", padding: "9px 0", opacity: k <= i ? 1 : 0.35, transition: ".3s" }}>
              <span style={{ flex: "0 0 auto", width: 24, height: 24, borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", background: k < i ? "var(--green)" : "var(--surface-3)", color: k < i ? "#fff" : "var(--muted)" }}>
                {k < i ? <Icon name="check" size={14} strokeWidth={2.6} /> : k === i ? <span className="spinner" style={{ width: 13, height: 13 }} /> : <span style={{ fontSize: ".7rem", fontWeight: 700 }}>{k + 1}</span>}
              </span>
              <span style={{ fontSize: ".95rem", color: "var(--ink-2)" }}>{s}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* --- Revue + édition + approbation de la fiche --- */
function FicheReview({ onApprove, onBack, project }) {
  const { t } = useLang();
  const [editing, setEditing] = useStateRf(null);
  // Les cinq sections canoniques, remplies de ce que le dossier CONTIENT.
  // Une section vide s'affiche vide — c'est une invitation à écrire, pas un
  // trou à masquer par du texte d'exemple.
  const [sheet, setSheet] = useStateRf(() => [
    { h: "Cadre du projet", t: (project && project.description) || "" },
    { h: "Problématique", t: (project && project.problemStatement) || "" },
    { h: "Objectifs", t: (project && project.objectives) || "" },
    { h: "Moyens / méthodologie", t: (project && project.methodology) || "" },
    { h: "Résultats attendus", t: (project && project.expectedResults) || "" },
  ]);
  const titre = (project && project.title) || t("Votre fiche projet");
  return (
    <ScreenShell kick={t("Étape 2 sur 6 · Votre fiche projet")} icon="check" title={t("Voici votre fiche projet")} hideLede>
      <p className="screen-lede" style={{ marginBottom: 24 }}>
        {t("L'assistant a transformé vos réponses en une fiche structurée. ")}<b style={{ color: "var(--ink)" }}>{t("Relisez-la, ajustez ce que vous voulez")}</b>{t(", puis approuvez-la. Elle deviendra la référence de toutes vos {demandes}.")}
      </p>
      <div className="card" style={{ overflow: "hidden" }}>
        <div style={{ padding: "18px 28px", borderBottom: "1px solid var(--line)", background: "var(--surface-2)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <Icon name="doc" size={20} className="" />
            <span style={{ fontFamily: "var(--serif)", fontSize: "1.15rem", fontWeight: 600 }}>{titre}</span>
          </div>
          <Pill tone="gold" label={t("Brouillon à approuver")} icon="edit" small />
        </div>
        <div style={{ padding: "10px 28px 24px" }}>
          {sheet.map((s, i) => (
            <div key={i} style={{ padding: "18px 0", borderBottom: i < sheet.length - 1 ? "1px solid var(--line)" : "none" }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, marginBottom: 7 }}>
                <h3 style={{ fontFamily: "var(--sans)", fontSize: ".76rem", fontWeight: 700, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--accent-2)" }}>{t(s.h)}</h3>
                <button type="button" className="btn btn-ghost" style={{ minHeight: 32, padding: "4px 12px", fontSize: ".82rem" }}
                  onClick={() => setEditing(editing === i ? null : i)}>
                  <Icon name="edit" size={15} /> {editing === i ? t("Terminer") : t("Modifier")}
                </button>
              </div>
              {editing === i ? (
                <textarea value={s.t} autoFocus rows={4}
                  onChange={(e) => setSheet((sh) => sh.map((x, k) => k === i ? { ...x, t: e.target.value } : x))}
                  style={{ width: "100%", fontFamily: "inherit", fontSize: "1rem", lineHeight: 1.55, color: "var(--ink)", padding: "12px 14px", border: "1.5px solid var(--green)", borderRadius: "var(--r-sm)", background: "#fff", boxShadow: "0 0 0 3px var(--green-bg)", resize: "vertical" }} />
              ) : (
                s.t
                ? <p style={{ fontSize: "1rem", lineHeight: 1.6, color: "var(--ink-2)" }}>{s.t}</p>
                : <p className="muted" style={{ fontSize: ".95rem", fontStyle: "italic" }}>{t("À remplir : cette section est vide pour l'instant.")}</p>
              )}
            </div>
          ))}
        </div>
      </div>
      <div className="card card-pad" style={{ marginTop: 18, background: "var(--green-bg)", borderColor: "var(--green-line)", display: "flex", gap: 14, alignItems: "flex-start" }}>
        <Icon name="shield" size={20} className="" />
        <p style={{ fontSize: ".92rem", color: "var(--ink-2)", lineHeight: 1.5 }}>
          {t("Une fois approuvée, cette fiche est ")}<b style={{ color: "var(--ink)" }}>{t("gelée et réutilisée")}</b>{t(" pour remplir vos {formulaires}. Vous pourrez en créer une nouvelle version quand votre projet évolue.")}
        </p>
      </div>
      <div className="wiz-nav">
        <Btn kind="ghost" icon="arrowL" onClick={onBack}>{t("Modifier mes réponses")}</Btn>
        <Btn kind="accent" icon="check" size="lg" onClick={async () => {
          if (project && project.id) {
            const by = (h) => (sheet.find((s) => s.h === h) || {}).t || null;
            try {
              await G4M.saveProject(project.id, {
                description: by("Cadre du projet"),
                problemStatement: by("Problématique"),
                objectives: by("Objectifs"),
                methodology: by("Moyens / méthodologie"),
                expectedResults: by("Résultats attendus"),
              });
            } catch (e) { /* l'approbation ne doit pas bloquer sur un réseau */ }
          }
          onApprove();
        }}>{t("Approuver ma fiche")}</Btn>
      </div>
    </ScreenShell>
  );
}

Object.assign(window, { ReferenceScreen });