/* Aba Plano & Acompanhamento — o que GRA entrega ao colaborador */
function tplChipData(n) {
  const t = window.OE_TPL.byNum(n);
  return t ? { id: t.id, nome: t.nome, num: t.num, icon: t.icon } : null;
}

function TplChips({ nums, go }) {
  if (!nums || !nums.length) return null;
  return (
    <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginTop: 11 }}>
      {nums.map((n) => {
        const t = tplChipData(n);
        if (!t) return null;
        return (
          <button key={n} onClick={() => go("templates", { tplId: t.id })} style={{
            display: "inline-flex", alignItems: "center", gap: 6, padding: "4px 10px", borderRadius: 999,
            background: C.cobaltSoft, color: C.cobaltDeep, border: "none", cursor: "pointer", fontFamily: "inherit",
            fontSize: 11.5, fontWeight: 700,
          }}>
            <LIcon name={t.icon} size={12} />T{t.num} · {t.nome}
          </button>
        );
      })}
    </div>
  );
}

function PlanoView({ go }) {
  const OE = window.OE;
  const TPL = window.OE_TPL.TEMPLATES;

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 26 }}>
      {/* contexto */}
      <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="compass" size={20} /><span style={{ fontSize: 12, fontWeight: 700, letterSpacing: ".12em", textTransform: "uppercase", color: "#EAD08A" }}>A missão da integração</span>
        </div>
        <div style={{ fontSize: 19, fontWeight: 800, letterSpacing: "-.01em", lineHeight: 1.35, maxWidth: "62ch" }}>
          Como não há processo pronto nem treinamento, cada pessoa aprende fazendo:
          <span style={{ color: "#EAD08A" }}> mapeia a área</span>, <span style={{ color: "#EAD08A" }}>escreve os processos</span> e entrega um <span style={{ color: "#EAD08A" }}>diagnóstico</span>.
        </div>
        <div style={{ fontSize: 13.5, color: "#aeb9d0", marginTop: 8 }}>Entregue este plano no Dia 1. O colaborador preenche o Diário de Bordo desde o primeiro turno.</div>
      </div>

      {/* PLANO 1ª SEMANA */}
      <div>
        <SectionTitle icon="calendar-check" sub="Os 5 primeiros dias são para conhecer e MAPEAR a área — dia a dia, com os templates de cada etapa.">Plano da 1ª semana — dia a dia</SectionTitle>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(228px,1fr))", gap: 14 }}>
          {OE.PLANO_SEMANA1.map((d, i) => (
            <Card key={i} pad={18} style={{ borderTop: `3px solid ${C.cobalt}`, display: "flex", flexDirection: "column" }}>
              <div style={{ fontSize: 12, fontWeight: 800, color: C.cobalt, letterSpacing: ".04em" }}>{d.dia}</div>
              <div style={{ fontSize: 15, fontWeight: 800, color: C.ink, margin: "3px 0 12px" }}>{d.foco}</div>
              <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 9 }}>
                {d.itens.map((it, j) => (
                  <li key={j} style={{ display: "flex", gap: 8, fontSize: 12.5, color: C.ink2, lineHeight: 1.45 }}>
                    <span style={{ color: C.cobalt, flex: "none", marginTop: 2 }}><LIcon name="check" size={13} stroke={2.6} /></span>{it}
                  </li>
                ))}
              </ul>
              <div style={{ marginTop: "auto" }}><TplChips nums={d.tpl} go={go} /></div>
            </Card>
          ))}
        </div>
      </div>

      {/* PLANO 30 DIAS */}
      <div>
        <SectionTitle icon="calendar-range" sub="Do mapa ao diagnóstico, semana a semana.">Plano dos primeiros 30 dias</SectionTitle>
        <Card pad={0} style={{ overflow: "hidden" }}>
          {OE.PLANO_30DIAS.map((w, i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "168px 1fr", gap: 18, padding: "18px 22px", borderBottom: i < OE.PLANO_30DIAS.length - 1 ? `1px solid ${C.lineSoft}` : "none", alignItems: "start" }}>
              <div>
                <div style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 30, height: 30, borderRadius: 9, background: C.cobalt, color: "#fff", fontWeight: 800, fontSize: 13, marginBottom: 8 }}>{i + 1}</div>
                <div style={{ fontSize: 12.5, fontWeight: 800, color: C.ink3 }}>{w.semana}</div>
                <div style={{ fontSize: 14.5, fontWeight: 800, color: C.ink, marginTop: 2 }}>{w.foco}</div>
              </div>
              <div>
                <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 8 }}>
                  {w.itens.map((it, j) => (
                    <li key={j} style={{ display: "flex", gap: 9, fontSize: 13.5, color: C.ink2, lineHeight: 1.45 }}>
                      <span style={{ color: C.cobalt, flex: "none", marginTop: 2 }}><LIcon name="dot" size={16} stroke={3} /></span>{it}
                    </li>
                  ))}
                </ul>
                <TplChips nums={w.tpl} go={go} />
              </div>
            </div>
          ))}
        </Card>
      </div>

      {/* TEMPLATES USADOS — atalho para a biblioteca */}
      <div>
        <SectionTitle icon="library" sub="As 9 ferramentas oficiais que o colaborador usa nesta jornada. Clique para abrir o modelo completo.">Templates da jornada</SectionTitle>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill,minmax(248px,1fr))", gap: 12 }}>
          {TPL.map((t) => (
            <button key={t.id} onClick={() => go("templates", { tplId: t.id })} style={{
              display: "flex", alignItems: "center", gap: 13, textAlign: "left", cursor: "pointer", fontFamily: "inherit",
              background: C.card, border: `1px solid ${C.line}`, borderRadius: 14, padding: "14px 16px",
            }}>
              <span style={{ width: 38, height: 38, borderRadius: 11, flex: "none", background: C.cobaltSoft, color: C.cobalt, display: "grid", placeItems: "center" }}><LIcon name={t.icon} size={19} stroke={2.1} /></span>
              <span style={{ flex: 1, minWidth: 0 }}>
                <span style={{ display: "block", fontSize: 11, fontWeight: 800, color: C.cobalt, letterSpacing: ".05em" }}>TEMPLATE {t.num}</span>
                <span style={{ display: "block", fontSize: 14, fontWeight: 800, color: C.ink, lineHeight: 1.2 }}>{t.nome}</span>
                <span style={{ display: "block", fontSize: 11.5, color: C.ink3, marginTop: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{t.sub}</span>
              </span>
              <LIcon name="arrow-up-right" size={16} color={C.ink3} />
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PlanoView });
