/* ============================================================
   Aba "O processo" — visão geral do fluxo + explicação de cada etapa
   (ADITIVO). Lê OE.PLAYBOOK e enriquece com duração + ponto de atenção.
   Mesmo espírito da Simulação do SaaS, na voz da Execução Guiada.
   ============================================================ */

// duração + onde costuma travar, por etapa — resume o que já está no playbook
const FLOW_META = {
  proposta:   { duracao: "1–3 dias",      atencao: "Confirme o aceite por escrito antes de seguir. Sem o aceite, não abra a burocracia." },
  burocracia: { duracao: "3–7 dias úteis", atencao: "Documento incompleto — em especial o comprovante de residência — é o que mais atrasa. Dê um prazo claro e cobre." },
  preparacao: { duracao: "2–5 dias",      atencao: "É o RH/ADM que prepara equipamento, e-mail e acessos. Teste tudo um dia antes do Dia 1." },
  dia1:       { duracao: "1 dia",         atencao: "Deixe explícito: como não há processo nem treinamento prontos, a missão dos 30 dias é mapear → escrever os processos → entregar um diagnóstico." },
  semana1:    { duracao: "5 dias",        atencao: "A pessoa aprende mapeando. O Diário de Bordo (manhã e tarde) é inegociável — é a base do relatório e do diagnóstico." },
  d30:        { duracao: "semanas 2 a 4", atencao: "Sai o primeiro entregável real: POPs + diagnóstico da área. Se a média da avaliação ficar abaixo de 6, sinalize atenção." },
  d60:        { duracao: "mês 2",         atencao: "Saia do diagnóstico para a ação: comece pelos quick wins e registre o antes/depois. Compare a avaliação com a de 30 dias." },
  d90:        { duracao: "mês 3",         atencao: "Junte o histórico de 30/60/90 num lugar só antes da reunião. A decisão de efetivar ou encerrar é do RH/ADM." },
  efetivado:  { duracao: "—",            atencao: "Arquive documentos, processos e relatórios no Drive antes de fechar. Um onboarding documentado vira o molde do próximo." },
};

function FluxoProcesso({ go }) {
  const OE = window.OE;
  const total = OE.PLAYBOOK.length;

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
      {/* hero */}
      <div style={{ background: "linear-gradient(120deg,#0E1A30,#1b2c4e 52%,#243B66)", borderRadius: 20, padding: "24px 28px", color: "#fff" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
          <LIcon name="route" size={20} /><span style={{ fontSize: 12, fontWeight: 700, letterSpacing: ".12em", textTransform: "uppercase", color: "#EAD08A" }}>O processo, do início ao fim</span>
        </div>
        <div style={{ fontSize: 19, fontWeight: 800, letterSpacing: "-.01em", lineHeight: 1.4, maxWidth: "64ch" }}>
          São <span style={{ color: "#EAD08A" }}>{total} etapas</span>, da proposta à efetivação. Aqui você entende cada uma — <span style={{ color: "#EAD08A" }}>o que é</span>, <span style={{ color: "#EAD08A" }}>quanto leva</span> e <span style={{ color: "#EAD08A" }}>onde costuma travar</span> — antes de pôr a mão na massa em “Minha execução”.
        </div>
        <div style={{ fontSize: 13.5, color: "#aeb9d0", marginTop: 8 }}>{total} etapas · {OE.TOTAL_TAREFAS} tarefas no total.</div>
      </div>

      {/* linha do tempo */}
      <div style={{ display: "flex", flexDirection: "column" }}>
        {OE.PLAYBOOK.map((f, i) => {
          const meta = FLOW_META[f.id] || {};
          const last = i === total - 1;
          return (
            <div key={f.id} style={{ display: "grid", gridTemplateColumns: "56px 1fr", gap: 14 }}>
              {/* trilho */}
              <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
                <div style={{ width: 44, height: 44, borderRadius: 13, flex: "none", background: C.cobaltSoft, color: C.cobalt, display: "grid", placeItems: "center", border: `2px solid ${C.cobalt}` }}>
                  <LIcon name={f.icon} size={20} stroke={2.1} />
                </div>
                {!last && <div style={{ flex: 1, width: 2, background: C.line, minHeight: 18, marginTop: 4, marginBottom: 4 }} />}
              </div>

              {/* cartão da etapa */}
              <div style={{ paddingBottom: last ? 0 : 18 }}>
                <Card pad={20}>
                  <div style={{ display: "flex", alignItems: "center", gap: 9, flexWrap: "wrap", marginBottom: 6 }}>
                    <span style={{ fontSize: 11, fontWeight: 800, letterSpacing: ".06em", color: C.ink3 }}>ETAPA {i + 1} DE {total}</span>
                    {meta.duracao && <Pill tone="cobalt" icon="clock">{meta.duracao}</Pill>}
                    <span style={{ marginLeft: "auto" }}><Pill icon="list-checks">{f.tarefas.length} {f.tarefas.length === 1 ? "tarefa" : "tarefas"}</Pill></span>
                  </div>

                  <div style={{ fontSize: 18, fontWeight: 800, color: C.ink, letterSpacing: "-.01em", marginBottom: 6 }}>{f.nome}</div>
                  <div style={{ fontSize: 13.5, color: C.ink2, lineHeight: 1.55, marginBottom: meta.atencao ? 14 : 0 }}>{f.objetivo}</div>

                  {meta.atencao && (
                    <div style={{ display: "flex", gap: 10, background: "#fef3e2", border: "1px solid rgba(217,119,6,.25)", borderRadius: 10, padding: "11px 13px", marginBottom: 14 }}>
                      <span style={{ color: C.amber, flex: "none", marginTop: 1 }}><LIcon name="alert-triangle" size={16} /></span>
                      <div style={{ fontSize: 12.5, color: "#92600c", lineHeight: 1.5 }}>
                        <b style={{ fontWeight: 800 }}>Onde costuma travar:</b> {meta.atencao}
                      </div>
                    </div>
                  )}

                  {/* tarefas da etapa */}
                  <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                    {f.tarefas.map((t, j) => (
                      <div key={j} style={{ display: "flex", gap: 11, alignItems: "flex-start", padding: "9px 11px", background: C.bg, border: `1px solid ${C.line}`, borderRadius: 10 }}>
                        <span style={{ flex: "none", width: 20, height: 20, borderRadius: 6, background: C.cobaltSoft, color: C.cobaltDeep, fontSize: 11, fontWeight: 800, display: "grid", placeItems: "center", marginTop: 1 }}>{j + 1}</span>
                        <div style={{ flex: 1, minWidth: 0 }}>
                          <div style={{ fontSize: 13, fontWeight: 700, color: C.ink, lineHeight: 1.3 }}>{t.titulo}</div>
                          <div style={{ fontSize: 11, color: C.ink3, marginTop: 3, display: "flex", gap: 12, flexWrap: "wrap" }}>
                            <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}><LIcon name="user" size={12} />{t.resp}</span>
                            <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}><LIcon name="clock" size={12} />{t.tempo}</span>
                            {t.tpl && (
                              <button onClick={() => go("templates", { tplId: OE_TPL.byNum(t.tpl).id })} style={{
                                display: "inline-flex", alignItems: "center", gap: 5, color: C.cobaltDeep, fontWeight: 700, background: C.cobaltSoft,
                                border: "none", borderRadius: 999, padding: "3px 9px", cursor: "pointer", fontFamily: "inherit", fontSize: 11,
                              }}><LIcon name="file-text" size={12} />{t.template}</button>
                            )}
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </Card>
              </div>
            </div>
          );
        })}
      </div>

      <div>
        <Btn icon="circle-play" onClick={() => go("dash")}>Ir para a execução</Btn>
      </div>
    </div>
  );
}

Object.assign(window, { FluxoProcesso });