/* ============================================================
   Aba "Atividades" — o PLAYBOOK como checklist por etapa, com
   filtro por pessoa. Aqui a gestora vê e MARCA as tarefas do
   processo. Tarefa e Modelo ficam separados: checkbox + título
   de um lado; o modelo é um chip dourado clicável à direita.
   ============================================================ */
function AtividadesView({ done, meta, go, toggle }) {
  const OE = window.OE;
  const cols = OE.colaboradores;
  const [selId, setSelId] = React.useState(cols[0] ? cols[0].id : null);

  if (cols.length === 0) {
    return (
      <Card pad={30} style={{ textAlign: "center" }}>
        <div style={{ color: C.cobalt, display: "flex", justifyContent: "center", marginBottom: 10 }}><LIcon name="list-checks" size={32} /></div>
        <div style={{ fontSize: 17, fontWeight: 800, color: C.ink }}>Cadastre uma pessoa para usar as atividades</div>
        <div style={{ fontSize: 13.5, color: C.ink2, marginTop: 8, lineHeight: 1.55, maxWidth: 440, margin: "8px auto 0" }}>
          As atividades são marcadas por pessoa. Cadastre alguém em <b>Pessoas</b> e o checklist completo aparece aqui.
        </div>
      </Card>
    );
  }

  const sel = cols.find((c) => c.id === selId) || cols[0];
  const doneSet = done[sel.id] || new Set();

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
      {/* seletor de pessoa */}
      <Card pad={14}>
        <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: ".08em", textTransform: "uppercase", color: C.ink3, marginBottom: 9 }}>Marcando as atividades de</div>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
          {cols.map((c) => {
            const on = c.id === sel.id;
            return (
              <button key={c.id} onClick={() => setSelId(c.id)} style={{
                display: "inline-flex", alignItems: "center", gap: 9, padding: "7px 12px 7px 8px", borderRadius: 999, cursor: "pointer", fontFamily: "inherit",
                border: `1px solid ${on ? C.cobalt : C.line}`, background: on ? C.cobaltSoft : "#fff",
              }}>
                <Avatar nome={c.nome} cor={c.cor} size={26} />
                <span style={{ fontSize: 13, fontWeight: 700, color: on ? C.cobaltDeep : C.ink2 }}>{c.nome.split(" ")[0]}</span>
              </button>
            );
          })}
        </div>
      </Card>

      {/* etapas */}
      {OE.PLAYBOOK.map((fase) => {
        const fp = OE.faseProgress(doneSet, fase.id);
        const allDone = fp.done === fp.total;
        return (
          <Card key={fase.id} pad={0} style={{ overflow: "hidden" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 11, padding: "14px 18px", background: C.bg, borderBottom: `1px solid ${C.line}` }}>
              <span style={{ width: 34, height: 34, borderRadius: 10, flex: "none", background: allDone ? C.greenSoft : C.cobaltSoft, color: allDone ? C.green : C.cobalt, display: "grid", placeItems: "center" }}><LIcon name={fase.icon} size={18} stroke={2.2} /></span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14.5, fontWeight: 800, color: C.ink }}>{fase.nome}</div>
                <div style={{ fontSize: 12, color: C.ink3 }}>{fase.objetivo}</div>
              </div>
              {allDone ? <Pill tone="green" icon="check-check">Concluída</Pill> : <Pill tone="cobalt">{fp.done}/{fp.total} feitas</Pill>}
            </div>
            <div style={{ display: "flex", flexDirection: "column" }}>
              {fase.tarefas.map((t, i) => {
                const key = OE.taskKey(fase.id, i);
                const ok = doneSet.has(key);
                const last = i === fase.tarefas.length - 1;
                return (
                  <div key={key} style={{ display: "flex", alignItems: "center", gap: 12, padding: "13px 18px", borderBottom: last ? "none" : `1px solid ${C.lineSoft}` }}>
                    <button onClick={() => toggle(sel.id, key)} aria-label="concluir" style={{
                      width: 24, height: 24, flex: "none", borderRadius: 7, cursor: "pointer",
                      border: `2px solid ${ok ? C.green : C.line}`, background: ok ? C.green : "#fff", color: "#fff", display: "grid", placeItems: "center",
                    }}>{ok && <LIcon name="check" size={14} stroke={3} />}</button>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13.5, fontWeight: 700, color: ok ? C.ink3 : C.ink, textDecoration: ok ? "line-through" : "none" }}>{t.titulo}</div>
                      <div style={{ fontSize: 11.5, color: C.ink3 }}>{t.resp} · {t.tempo}</div>
                    </div>
                    {t.tpl && (
                      <button onClick={() => go("templates", { tplId: OE_TPL.byNum(t.tpl).id })} style={{
                        flex: "none", display: "inline-flex", alignItems: "center", gap: 6, fontSize: 11.5, fontWeight: 700, color: C.cobaltDeep,
                        background: C.cobaltSoft, border: "none", borderRadius: 999, padding: "6px 11px", cursor: "pointer", fontFamily: "inherit",
                      }}><LIcon name="file-text" size={13} />Abrir modelo</button>
                    )}
                  </div>
                );
              })}
            </div>
          </Card>
        );
      })}
    </div>
  );
}

Object.assign(window, { AtividadesView });