/* Briefing Hub Nexus — Diagnóstico de produto + checkout + onboarding → window.OUTCOME */
(function () {
  const { useState, useMemo } = React;
  const I = window.I;
  const N = window.NEXUS;

  const TODAY = new Date(2026, 7, 8);
  const MONTHS = ["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"];
  const DOW = ["Dom","Seg","Ter","Qua","Qui","Sex","Sáb"];

  /* Agenda de onboarding — só aparece após confirmação do pagamento */
  function Calendar({ call }) {
    const label = call ? "Call de estratégia" : "Reunião de onboarding";
    const doneLabel = call ? "Call de estratégia confirmada" : "Onboarding confirmado";
    const base = useMemo(() => new Date(TODAY.getFullYear(), TODAY.getMonth(), 1), []);
    const [day, setDay] = useState(null);
    const [slot, setSlot] = useState(null);
    const [booked, setBooked] = useState(false);
    const year = base.getFullYear(), month = base.getMonth();
    const firstDow = new Date(year, month, 1).getDay();
    const daysIn = new Date(year, month + 1, 0).getDate();
    const isAvail = (d) => { const dt = new Date(year, month, d); const dow = dt.getDay(); return dt > TODAY && dow !== 0 && dow !== 6; };
    const cells = [];
    for (let i = 0; i < firstDow; i++) cells.push(null);
    for (let d = 1; d <= daysIn; d++) cells.push(d);
    const SLOTS = ["09:00","10:30","13:30","15:00","16:30"];
    const slotMeta = { "09:00":"Manhã","10:30":"Manhã","13:30":"Tarde","15:00":"Tarde","16:30":"Tarde" };

    if (booked) return (
      <div className="bf-cal" style={{ padding: 0 }}>
        <div className="bf-confirm" style={{ margin: 0, borderRadius: "var(--r-lg)" }}>
          <span className="ic"><I.check size={20} /></span>
          <span className="tx">
            <b>{doneLabel} — {day} de {MONTHS[month]}, {slot}</b>
            <span>Convite enviado por e-mail e adicionado ao Google Calendar. Link do Meet incluído.</span>
          </span>
        </div>
      </div>
    );

    return (
      <div className="bf-cal">
        <div className="bf-cal-head">
          <span className="gi"><I.calendar size={17} /></span>
          <div>
            <div className="ti">{label}</div>
            <div className="mo">45 min · {MONTHS[month]} {year} · Horário de Brasília</div>
          </div>
          <span className="gcal"><span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--success)", display: "inline-block" }} /> Google Calendar</span>
        </div>
        <div className="bf-cal-body">
          <div className="bf-days">
            <div className="bf-dow">{DOW.map((d) => <span key={d}>{d}</span>)}</div>
            <div className="bf-grid7">
              {cells.map((d, i) => {
                if (d === null) return <span key={"e" + i} />;
                const av = isAvail(d);
                return (
                  <button key={d} className={"bf-day" + (av ? " avail" : " disabled") + (day === d ? " is-sel" : "")}
                    onClick={() => av && (setDay(d), setSlot(null))}>{d}</button>
                );
              })}
            </div>
          </div>
          <div className="bf-slots">
            {!day ? (
              <div style={{ margin: "auto", textAlign: "center", color: "var(--text-subtle)", fontSize: 13, padding: "24px 8px" }}>
                <I.clock size={22} style={{ opacity: .5, marginBottom: 8 }} />
                <div>Escolha um dia disponível<br />para ver os horários.</div>
              </div>
            ) : (
              <>
                <div className="sl-label">{day} de {MONTHS[month]} · horários</div>
                {SLOTS.map((s) => (
                  <button key={s} className={"bf-slot" + (slot === s ? " is-sel" : "")} onClick={() => setSlot(s)}>
                    <span>{s}</span><span className="am">{slotMeta[s]}</span>
                  </button>
                ))}
                <button className="bf-cta" style={{ marginTop: 6, justifyContent: "center" }} disabled={!slot} onClick={() => setBooked(true)}>
                  Confirmar horário <I.arrowR size={18} />
                </button>
              </>
            )}
          </div>
        </div>
      </div>
    );
  }

  /* Resumo interno — o que a equipe Nexus recebe */
  function InternalSummary({ answers, score, tier, lines, primary, ranked }) {
    const basics = { ...(answers.basics1 || {}), ...(answers.basics2 || {}) };
    const empresa = basics.empresa || "Empresa";
    const tinfo = N.TIERS[tier];
    return (
      <details className="bf-internal">
        <summary>
          <span className="tag">SISTEMA</span>
          O que a equipe Nexus recebe ao final
          <I.chevD size={16} className="chev" />
        </summary>
        <div className="bf-mail">
          <div className="subj">Assunto: [NOVO LEAD] {empresa} — <b>{primary.name}</b> · Score {score}</div>
          <div className="bf-mailrow"><span className="k">Nome</span><span className="v">{basics.nome || "—"}</span></div>
          <div className="bf-mailrow"><span className="k">WhatsApp</span><span className="v">{basics.whatsapp || "—"}</span></div>
          <div className="bf-mailrow"><span className="k">E-mail</span><span className="v">{basics.email || "—"}</span></div>
          <div className="bf-mailrow"><span className="k">Gargalo</span><span className="v">{answers.gargalo || "—"}</span></div>
          <div className="bf-mailrow"><span className="k">Recomendação</span><span className="v">{ranked.slice(0, 3).map((p) => `${p.name} ${p.pct}%`).join(" · ")}</span></div>
          <div className="bf-mailrow"><span className="k">Prioridade</span><span className="v">{score} / 100 · {tinfo.label}</span></div>
          <div className="bf-mailrow"><span className="k">Próximo passo</span><span className="v">{tinfo.followup}</span></div>
          <div className="bf-breakdown">
            {lines.map((l, i) => <div key={i} className="bf-bd"><span>{l.label}</span><span className="p">+{l.pts}</span></div>)}
          </div>
        </div>
      </details>
    );
  }

  const H = window.NXS_HANDOFF;

  function Outcome({ fit, score, tier, answers, lines, t, onRestart }) {
    const ranked = fit.ranked;
    const primary = ranked[0];
    const comps = ranked.slice(1, 3);
    const [paid, setPaid] = useState(false);
    const basics = { ...(answers.basics1 || {}), ...(answers.basics2 || {}) };
    const empresa = basics.empresa || "sua empresa";
    const Ico = I[primary.icon] || I.spark;
    const buy = (p) => (H ? H.checkoutUrl(p, basics) : p.url) || p.url;
    const onBuy = (p) => { if (H) H.trackCheckout(p, basics); };

    return (
      <div className="bf-screen bf-outcome">
        <div className="bf-oc-head">
          <span className="bf-tier-badge t-success"><span className="dot" /> Diagnóstico concluído</span>
          <h1>Seu plano começa com <span style={{ color: "var(--brand)" }}>{primary.name}</span>.</h1>
          <p className="lede">Cruzamos seu gargalo, seu momento e seus objetivos com o ecossistema Nexus. É aqui que está o maior retorno para {empresa} agora.</p>
        </div>

        <div className="bf-fitpanel">
          <div className="lab">Compatibilidade com as soluções Nexus</div>
          {ranked.slice(0, 3).map((p, i) => (
            <div key={p.key} className={"bf-fitrow" + (i === 0 ? " lead" : "")}>
              <span className="nm">{p.name}</span>
              <span className="bar"><i style={{ width: p.pct + "%", animationDelay: (i * 140) + "ms" }} /></span>
              <span className="pc">{p.pct}%</span>
            </div>
          ))}
        </div>

        <div className="bf-prod">
          <div className="ph">
            <span className="pic"><Ico size={20} /></span>
            <div className="pt">
              <span className="ptag">Recomendação principal</span>
              <b>{primary.name}</b>
            </div>
            <span className="pfit">{primary.pct}% fit</span>
          </div>
          <p className="psolve">{primary.solves}</p>
          <div className="pfoot">
            <div className="pprice">
              <b>{primary.price}</b>
              <s>{primary.terms}{primary.note ? " · " + primary.note : ""}</s>
            </div>
            {!paid && (primary.url ? (
              <a className="bf-cta" href={buy(primary)} target="_blank" rel="noopener" onClick={() => { onBuy(primary); setTimeout(() => setPaid(true), 600); }}>
                <I.lock size={16} /> {primary.call ? "Garantir e agendar call" : "Garantir agora"}
              </a>
            ) : (
              <button className="bf-cta" onClick={() => setPaid(true)}>
                <I.lock size={16} /> Garantir agora
              </button>
            ))}
          </div>
          {!paid ? (
            <div className="pnote"><I.shield size={13} /> {primary.call
              ? "Ticket alto: após a confirmação você agenda a call de estratégia com o especialista para desenhar as fases do projeto"
              : "Link de pagamento seguro · sua reunião de onboarding é liberada após a confirmação"}</div>
          ) : (
            <>
              <div className="bf-confirm" style={{ marginTop: 16 }}>
                <span className="ic"><I.check size={20} /></span>
                <span className="tx">
                  <b>Pagamento confirmado — {primary.name}</b>
                  <span>{primary.call ? "Recibo enviado por e-mail. Escolha o horário da call de estratégia com o especialista." : "Recibo enviado por e-mail. Agora escolha o melhor horário para o seu onboarding."}</span>
                </span>
              </div>
              <Calendar call={primary.call} />
            </>
          )}
        </div>

        {!paid && comps.length > 0 && (
          <div className="bf-comps">
            {comps.map((p) => {
              const Ic = I[p.icon] || I.spark;
              return (
                <div key={p.key} className="bf-prodmini">
                  <span className="pic"><Ic size={16} /></span>
                  <div className="tx">
                    <b>{p.name}</b>
                    <span>{p.price} · {p.terms}</span>
                  </div>
                  {p.url
                    ? <a className="add" href={buy(p)} target="_blank" rel="noopener" onClick={() => onBuy(p)}><I.plus size={13} /> Adicionar</a>
                    : <button className="add"><I.plus size={13} /> Adicionar</button>}
                </div>
              );
            })}
          </div>
        )}

        {!paid && (
          <a className="bf-present" href="#apresentacao">
            <span className="pic"><I.spark size={18} /></span>
            <span className="tx">
              <b>Antes de decidir, veja o sistema completo</b>
              <span>Apresentação comercial do Ecossistema Nexus</span>
            </span>
            <I.arrowR size={18} />
          </a>
        )}

        <div className="bf-soon"><span className="tag">EM BREVE</span> {N.SOON.name} · {N.SOON.price} — entre na lista de espera</div>

        <InternalSummary answers={answers} score={score} tier={tier} lines={lines} primary={primary} ranked={ranked} />

        <div className="bf-integ">
          <div className="lab">Integrado com</div>
          <div className="logos">
            {["Link de Pagamento","Helena CRM","WhatsApp","Google Calendar","Meta Ads","ActiveCampaign"].map((x) => <span key={x}>{x}</span>)}
          </div>
        </div>

        <div className="bf-oc-actions">
          <button className="bf-cta ghost" onClick={onRestart}><I.refresh size={16} /> Refazer briefing</button>
        </div>
      </div>
    );
  }

  window.OUTCOME = { Outcome };
})();