/* Diagnóstico da Tríade do Tempo — app */
const { useState, useEffect, useRef, useMemo } = React;
const T = window.TRIADE;

const FACTOR_COLORS = { O: "#688594", C: "#FFBE18", T: "#B0CAD8" };
const FACTOR_INK = { O: "#688594", C: "#FFBE18", T: "#8FB2C4" };

function qp() {
  const p = new URLSearchParams(location.search);
  return { nome: (p.get("nome") || "").trim(), id: (p.get("id") || "").trim() };
}
const firstName = (n) => (n ? n.split(/\s+/)[0] : "");

/* ---------- Símbolo watermark ---------- */
function Watermark() {
  return React.createElement("img", {
    className: "wm",
    src: "design-system/assets/simbolo_metta_branco.svg",
    alt: "",
    "aria-hidden": "true"
  });
}

/* ---------- Progress dots for blocks ---------- */
function StepRail({ index }) {
  // 0 abertura, 1 alocação, 2..4 blocos, 5 resultado
  const steps = ["Início", "Tempo", "Operacional", "Comercial", "Tático", "Resultado"];
  return React.createElement("div", { className: "rail" },
    steps.map((s, i) =>
      React.createElement("div", {
        key: i,
        className: "rail__seg" + (i <= index ? " is-on" : "")
      })
    )
  );
}

/* ============================ ABERTURA ============================ */
function Opening({ nome, onStart }) {
  const fn = firstName(nome);
  return React.createElement("div", { className: "screen screen--hero" },
    React.createElement(Watermark),
    React.createElement("img", { className: "hero__logo", src: "design-system/assets/logo_metta_branco_h.svg", alt: "Metta" }),
    React.createElement("div", { className: "hero__body" },
      React.createElement("div", { className: "eyebrow" }, "Diagnóstico · 5 minutos"),
      fn && React.createElement("div", { className: "hero__hi" }, "Olá, " + fn + "."),
      React.createElement("h1", { className: "hero__title" },
        "Onde o seu tempo está indo, e o que ele está ",
        React.createElement("span", { className: "accent-word" }, "custando em vendas"),
        "."
      ),
      React.createElement("p", { className: "hero__sub" },
        "30 perguntas de sim ou não, mais uma. No fim você vê o seu perfil de gestão de tempo e o que está travando a sua meta."
      )
    ),
    React.createElement("div", { className: "hero__foot" },
      React.createElement("button", { className: "btn btn--primary", onClick: onStart }, "Começar"),
      React.createElement("p", { className: "microcopy" }, "Nenhuma pergunta pede dado do seu negócio. É só sobre a sua rotina.")
    )
  );
}

/* ============================ ETAPA A — SLIDERS ============================ */
function Allocation({ value, onChange, onNext }) {
  // value = {aO,aC,aT} sums 100. Adjust others proportionally.
  function setOne(key, next) {
    next = Math.max(0, Math.min(100, Math.round(next)));
    const others = T.allocation.map((a) => a.key).filter((k) => k !== key);
    const cur = value;
    const remain = 100 - next;
    const otherSum = others.reduce((s, k) => s + cur[k], 0);
    const out = { ...cur, [key]: next };
    if (otherSum === 0) {
      out[others[0]] = Math.round(remain / 2);
      out[others[1]] = remain - out[others[0]];
    } else {
      out[others[0]] = Math.round(remain * (cur[others[0]] / otherSum));
      out[others[1]] = remain - out[others[0]];
    }
    onChange(out);
  }
  const codeOf = { aO: "O", aC: "C", aT: "T" };
  return React.createElement("div", { className: "screen screen--dark" },
    React.createElement(StepRail, { index: 1 }),
    React.createElement("div", { className: "screen__scroll" },
      React.createElement("div", { className: "label-s step-label" }, "Etapa 1 de 2 · Alocação"),
      React.createElement("h2", { className: "q-title" }, "Pensando numa semana normal de trabalho, como o seu tempo se divide hoje?"),
      React.createElement("div", { className: "alloc-bar" },
        T.allocation.map((a) =>
          value[a.key] > 0 && React.createElement("div", {
            key: a.key,
            className: "alloc-bar__seg",
            style: { width: value[a.key] + "%", background: FACTOR_COLORS[codeOf[a.key]], color: codeOf[a.key] === "C" ? "#0C161B" : "#0C161B" }
          }, value[a.key] >= 8 ? value[a.key] + "%" : "")
        )
      ),
      React.createElement("div", { className: "sliders" },
        T.allocation.map((a) => {
          const c = codeOf[a.key];
          return React.createElement("div", { className: "slider", key: a.key },
            React.createElement("div", { className: "slider__head" },
              React.createElement("span", { className: "slider__dot", style: { background: FACTOR_COLORS[c] } }),
              React.createElement("span", { className: "slider__name" }, a.name),
              React.createElement("span", { className: "slider__val" }, value[a.key] + "%")
            ),
            React.createElement("input", {
              type: "range", min: 0, max: 100, value: value[a.key],
              className: "range range--" + c,
              onChange: (e) => setOne(a.key, +e.target.value)
            }),
            React.createElement("p", { className: "slider__def" }, a.def)
          );
        })
      )
    ),
    React.createElement("div", { className: "screen__foot" },
      React.createElement("div", { className: "sum-chip" }, "Soma ", React.createElement("b", null, "100%")),
      React.createElement("button", { className: "btn btn--primary", onClick: onNext }, "Continuar")
    )
  );
}

/* ============================ ETAPA B — CHECKLIST ============================ */
function Checklist({ block, blockIdx, answers, setAnswer, onDone, globalOffset }) {
  const listRef = useRef(null);
  const answeredCount = block.questions.filter((_, i) => answers[block.key][i] != null).length;
  const allAnswered = answeredCount === block.questions.length;

  function pick(i, val) {
    setAnswer(block.key, i, val);
  }

  return React.createElement("div", { className: "screen screen--light" },
    React.createElement(StepRail, { index: 2 + blockIdx }),
    React.createElement("div", { className: "chk__top" },
      React.createElement("div", { className: "label-s step-label step-label--dark" },
        "Bloco " + (blockIdx + 1) + " de 3 · " + block.name),
      React.createElement("div", { className: "chk__count" }, answeredCount + "/" + block.questions.length),
      React.createElement("div", { className: "chk__prog" },
        React.createElement("div", { className: "chk__prog-fill", style: { width: (answeredCount / block.questions.length * 100) + "%" } }))
    ),
    React.createElement("div", { className: "screen__scroll", ref: listRef },
      React.createElement("p", { className: "chk__def" }, block.def),
      block.questions.map((q, i) =>
        React.createElement("div", { className: "qitem" + (answers[block.key][i] != null ? " is-done" : ""), key: i },
          React.createElement("div", { className: "qitem__num" }, globalOffset + i + 1),
          React.createElement("div", { className: "qitem__body" },
            React.createElement("p", { className: "qitem__q" }, q),
            React.createElement("div", { className: "yn" },
              React.createElement("button", {
                className: "yn__btn" + (answers[block.key][i] === true ? " is-sel yn__btn--yes" : ""),
                onClick: () => pick(i, true)
              }, "Sim"),
              React.createElement("button", {
                className: "yn__btn" + (answers[block.key][i] === false ? " is-sel yn__btn--no" : ""),
                onClick: () => pick(i, false)
              }, "Não")
            )
          )
        )
      )
    ),
    React.createElement("div", { className: "screen__foot" },
      React.createElement("button", {
        className: "btn btn--primary" + (allAnswered ? "" : " is-disabled"),
        disabled: !allAnswered,
        onClick: onDone
      }, allAnswered ? "Ver o parcial deste bloco" : "Responda todas para seguir")
    )
  );
}

/* ---------- respiro entre blocos ---------- */
function BlockRest({ block, blockIdx, score, onNext }) {
  const c = block.code;
  return React.createElement("div", { className: "screen screen--dark screen--center" },
    React.createElement(Watermark),
    React.createElement("div", { className: "rest" },
      React.createElement("div", { className: "label-s step-label" }, "Parcial · " + block.name),
      React.createElement("div", { className: "rest__score", style: { color: FACTOR_INK[c] } },
        score, React.createElement("span", { className: "rest__max" }, "/10")),
      React.createElement("p", { className: "rest__note" },
        score >= 7 ? "Fator sob controle. Ainda dá para afinar, mas não é aqui que está o seu maior buraco."
          : score >= 5 ? "Meio do caminho. Tem estrutura, mas ainda depende demais de você."
            : "Aqui mora um gargalo. Segure esse número, ele volta no resultado."),
      React.createElement("button", { className: "btn btn--primary", onClick: onNext },
        blockIdx < 2 ? "Próximo bloco" : "Ver o meu resultado")
    )
  );
}

/* ---------- processing ---------- */
function Processing({ onDone }) {
  useEffect(() => {
    const t = setTimeout(onDone, 1600);
    return () => clearTimeout(t);
  }, []);
  return React.createElement("div", { className: "screen screen--dark screen--center" },
    React.createElement(Watermark),
    React.createElement("div", { className: "proc" },
      React.createElement("div", { className: "proc__spin" }),
      React.createElement("p", { className: "proc__txt" }, "Cruzando onde o seu tempo vai com o que você domina…")
    )
  );
}

window.TriadeParts = { Opening, Allocation, Checklist, BlockRest, Processing, StepRail, Watermark, FACTOR_COLORS, FACTOR_INK, firstName, qp };