/* Diagnóstico da Tríade do Tempo — resultado + root */
const { useState: useStateR, useEffect: useEffectR, useRef: useRefR } = React;
const TR = window.TRIADE;
const P = window.TriadeParts;

/* ---------- maturity bars ---------- */
function MaturityBars({ scores }) {
  return React.createElement("div", { className: "matbars" },
    TR.blocks.map((b) => {
      const v = scores[b.key];
      return React.createElement("div", { className: "matbar", key: b.key },
        React.createElement("div", { className: "matbar__head" },
          React.createElement("span", { className: "matbar__name" }, b.name),
          React.createElement("span", { className: "matbar__val", style: { color: P.FACTOR_INK[b.code] } }, v, React.createElement("small", null, "/10"))
        ),
        React.createElement("div", { className: "matbar__track" },
          React.createElement("div", { className: "matbar__fill", style: { width: (v * 10) + "%", background: P.FACTOR_COLORS[b.code] } })
        ),
        React.createElement("div", { className: "matbar__scale" },
          [0,2,4,6,8,10].map((n) => React.createElement("span", { key: n }, n))
        )
      );
    })
  );
}

/* ---------- allocation bar (declared %) ---------- */
function AllocBar({ alloc }) {
  const map = { aO: "O", aC: "C", aT: "T" };
  return React.createElement("div", null,
    React.createElement("div", { className: "alloc-bar alloc-bar--result" },
      TR.allocation.map((a) => alloc[a.key] > 0 && React.createElement("div", {
        key: a.key, className: "alloc-bar__seg",
        style: { width: alloc[a.key] + "%", background: P.FACTOR_COLORS[map[a.key]], color: "#0C161B" }
      }, alloc[a.key] >= 8 ? alloc[a.key] + "%" : ""))
    ),
    React.createElement("div", { className: "alloc-legend" },
      TR.allocation.map((a) => React.createElement("span", { key: a.key, className: "alloc-legend__item" },
        React.createElement("span", { className: "alloc-legend__dot", style: { background: P.FACTOR_COLORS[map[a.key]] } }),
        a.name))
    )
  );
}

/* ---------- action plan (editable) ---------- */
function ActionPlan({ nos, plan, setPlan }) {
  return React.createElement("div", { className: "plan" },
    nos.map((item) => {
      const row = plan[item.id] || { what: "", when: "", how: "" };
      return React.createElement("div", { className: "plan__row", key: item.id },
        React.createElement("div", { className: "plan__q" },
          React.createElement("span", { className: "plan__tag", style: { background: P.FACTOR_COLORS[item.code], color: item.code === "C" ? "#0C161B" : "#0C161B" } }, item.factor),
          React.createElement("span", null, item.text)),
        React.createElement("div", { className: "plan__fields" },
          React.createElement("label", { className: "plan__field" },
            React.createElement("span", null, "O quê"),
            React.createElement("input", { value: row.what, placeholder: "a ação concreta", onChange: (e) => setPlan(item.id, "what", e.target.value) })),
          React.createElement("label", { className: "plan__field plan__field--sm" },
            React.createElement("span", null, "Quando"),
            React.createElement("input", { value: row.when, placeholder: "prazo", onChange: (e) => setPlan(item.id, "when", e.target.value) })),
          React.createElement("label", { className: "plan__field" },
            React.createElement("span", null, "Como"),
            React.createElement("input", { value: row.how, placeholder: "o primeiro passo", onChange: (e) => setPlan(item.id, "how", e.target.value) }))
        )
      );
    })
  );
}

/* ============================ RESULTADO ============================ */
function Result({ nome, alloc, scores, onRestart }) {
  const profile = TR.classify({ ...alloc, ...scores });
  const total = scores.mO + scores.mC + scores.mT;
  const fn = P.firstName(nome);

  // critical alerts: any factor <= 4, list the "Não"s
  const critical = TR.blocks
    .filter((b) => scores[b.key] <= 4)
    .map((b) => ({
      name: b.name,
      code: b.code,
      nos: b.questions.filter((_, i) => window.__answers[b.key][i] === false)
    }));

  // all "Não"s for the plan, grouped by factor order
  const nos = [];
  TR.blocks.forEach((b) => {
    b.questions.forEach((q, i) => {
      if (window.__answers[b.key][i] === false) {
        nos.push({ id: b.key + "-" + i, factor: b.name, code: b.code, text: q });
      }
    });
  });

  const [plan, setPlanState] = useStateR({});
  const setPlan = (id, field, val) => setPlanState((p) => ({ ...p, [id]: { ...(p[id] || {}), [field]: val } }));

  function exportImage() {
    const node = document.getElementById("capture");
    node.classList.add("capturing");
    window.htmlToImage.toPng(node, { pixelRatio: 2, backgroundColor: "#0C161B" })
      .then((url) => {
        node.classList.remove("capturing");
        const a = document.createElement("a");
        a.download = "diagnostico-gestao-do-tempo.png";
        a.href = url;
        a.click();
      })
      .catch(() => node.classList.remove("capturing"));
  }

  function toWhatsApp() {
    const msg = encodeURIComponent("Meu perfil deu: " + profile.name);
    window.open("https://wa.me/?text=" + msg, "_blank");
  }

  return React.createElement("div", { className: "screen screen--result" },
    React.createElement("div", { className: "result__scroll" },
      React.createElement("div", { id: "capture", className: "result__capture" },
        React.createElement(P.Watermark),
        React.createElement("img", { className: "result__logo", src: "design-system/assets/logo_metta_branco_h.svg", alt: "Metta" }),
        React.createElement("div", { className: "label-s step-label" }, (fn ? fn + ", seu" : "Seu") + " perfil de gestão de tempo"),
        React.createElement("h1", { className: "result__name" }, profile.name),
        React.createElement("p", { className: "result__line" }, profile.line),

        React.createElement("div", { className: "result__block" },
          React.createElement("div", { className: "result__cap" }, "Para onde o seu tempo vai hoje"),
          React.createElement("p", { className: "result__hint" }, "O que você declarou na primeira etapa."),
          React.createElement(AllocBar, { alloc: alloc })
        ),

        React.createElement("div", { className: "result__block" },
          React.createElement("div", { className: "result__cap" }, "O quanto você domina cada fator"),
          React.createElement("p", { className: "result__hint" }, "Maturidade não é tempo gasto. Score alto significa que o fator está sob controle — e por isso consome menos de você."),
          React.createElement(MaturityBars, { scores: scores }),
          React.createElement("div", { className: "result__total" }, "Maturidade total ", React.createElement("b", null, total), " de 30")
        ),

        React.createElement("div", { className: "result__block" },
          React.createElement("div", { className: "result__cap" }, "O diagnóstico"),
          profile.diagnosis.map((para, i) => React.createElement("p", { className: "result__para", key: i }, para))
        ),

        critical.length > 0 && React.createElement("div", { className: "alert" },
          React.createElement("div", { className: "alert__head" },
            React.createElement("span", { className: "material-symbols-rounded" }, "warning"),
            "Alerta crítico"),
          React.createElement("p", { className: "alert__lead" }, "Um ou mais fatores estão em nível de risco. Não dá para deixar para depois:"),
          critical.map((c) => React.createElement("div", { className: "alert__factor", key: c.name },
            React.createElement("div", { className: "alert__factor-name" }, c.name),
            React.createElement("ul", { className: "alert__list" },
              c.nos.map((q, i) => React.createElement("li", { key: i }, q)))
          ))
        )
      ),

      React.createElement("div", { className: "result__block result__block--plan" },
        React.createElement("div", { className: "result__cap" }, "O primeiro movimento"),
        React.createElement("p", { className: "result__move" }, profile.move),
        nos.length > 0 && React.createElement("div", { className: "plan__intro" },
          React.createElement("div", { className: "result__cap" }, "Seu plano de ação"),
          React.createElement("p", { className: "result__hint" }, "Cada “Não” virou uma linha. Preencha o que der agora — o resto você fecha depois de salvar.")),
        nos.length > 0 && React.createElement(ActionPlan, { nos: nos, plan: plan, setPlan: setPlan })
      ),

      React.createElement("div", { className: "result__cta" },
        React.createElement("button", { className: "btn btn--primary btn--block", onClick: toWhatsApp }, "Falar com o time da Metta"),
        React.createElement("div", { className: "result__cta-row" },
          React.createElement("button", { className: "btn btn--ghost", onClick: exportImage }, "Salvar como imagem"),
          React.createElement("button", { className: "btn btn--ghost", onClick: onRestart }, "Refazer")
        )
      )
    )
  );
}

/* ============================ ROOT ============================ */
function App() {
  const { nome } = P.qp();
  const [stage, setStage] = useStateR("open"); // open, alloc, block0..2, rest0..2, proc, result
  const [alloc, setAlloc] = useStateR({ aO: 33, aC: 33, aT: 34 });
  const [answers, setAnswers] = useStateR({
    mO: Array(10).fill(null), mC: Array(10).fill(null), mT: Array(10).fill(null)
  });
  useEffectR(() => { window.__answers = answers; }, [answers]);

  const scores = {
    mO: answers.mO.filter((a) => a === true).length,
    mC: answers.mC.filter((a) => a === true).length,
    mT: answers.mT.filter((a) => a === true).length
  };

  function setAnswer(key, i, val) {
    setAnswers((prev) => {
      const next = { ...prev, [key]: prev[key].slice() };
      next[key][i] = val;
      return next;
    });
  }
  const scrollTop = () => {
    const s = document.querySelector(".screen__scroll, .result__scroll");
    if (s) s.scrollTop = 0;
    window.scrollTo(0, 0);
  };
  useEffectR(scrollTop, [stage]);

  if (stage === "open") return React.createElement(P.Opening, { nome, onStart: () => setStage("alloc") });
  if (stage === "alloc") return React.createElement(P.Allocation, { value: alloc, onChange: setAlloc, onNext: () => setStage("block0") });

  const blockMatch = stage.match(/^block(\d)$/);
  if (blockMatch) {
    const bi = +blockMatch[1];
    const offset = bi * 10;
    return React.createElement(P.Checklist, {
      block: TR.blocks[bi], blockIdx: bi, answers, setAnswer,
      globalOffset: offset, onDone: () => setStage("rest" + bi)
    });
  }
  const restMatch = stage.match(/^rest(\d)$/);
  if (restMatch) {
    const bi = +restMatch[1];
    return React.createElement(P.BlockRest, {
      block: TR.blocks[bi], blockIdx: bi, score: scores[TR.blocks[bi].key],
      onNext: () => setStage(bi < 2 ? "block" + (bi + 1) : "proc")
    });
  }
  if (stage === "proc") return React.createElement(P.Processing, { onDone: () => setStage("result") });
  return React.createElement(Result, {
    nome, alloc, scores,
    onRestart: () => {
      setAlloc({ aO: 33, aC: 33, aT: 34 });
      setAnswers({ mO: Array(10).fill(null), mC: Array(10).fill(null), mT: Array(10).fill(null) });
      setStage("open");
    }
  });
}

ReactDOM.createRoot(document.getElementById("root")).render(React.createElement(App));