/* ============================================================
   PAINEL DE GESTÃO (RH/ADM) — a 1ª tela, painel ÚNICO.
   Foco: o PREENCHIMENTO (diário de hoje + fechamento da semana)
   de cada pessoa, com um guia "Comece aqui" (exemplo real, fica
   salvo) e os documentos organizados por etapa. Cadastro é secundário.
   ============================================================ */

const GUIA_KEY = "onb_guia_rh_v1";

/* ---------- Guia "Comece aqui" (persistente, recolhível) ---------- */
function ComeceAqui({ exemplo }) {
  const [open, setOpen] = React.useState(() => {
    try { return localStorage.getItem(GUIA_KEY) !== "fechado"; } catch (e) { return true; }
  });
  function fechar() { try { localStorage.setItem(GUIA_KEY, "fechado"); } catch (e) {} setOpen(false); }
  function abrir() { try { localStorage.setItem(GUIA_KEY, "aberto"); } catch (e) {} setOpen(true); }

  const nome = (exemplo && exemplo.nome ? exemplo.nome.split(" ")[0] : "a pessoa");

  if (!open) {
    return (
      <button onClick={abrir} style={{
        display: "inline-flex", alignItems: "center", gap: 9, alignSelf: "flex-start", cursor: "pointer",
        background: C.cobaltSoft, border: `1px solid #c7d6f7`, color: C.cobaltDeep, fontFamily: "inherit",
        fontWeight: 700, fontSize: 13, padding: "9px 15px", borderRadius: 11,
      }}>
        <LIcon name="book-open" size={16} /> Como usar a ferramenta — abrir o guia
      </button>
    );
  }

  const passos = [
    {
      icon: "sunrise", quando: "Toda manhã · até 14h",
      titulo: "Confira o diário da manhã do time",
      texto: `Na tabela "Preenchimento de hoje", veja quem já registrou a manhã. Quem aparece em ${"amarelo"} ainda não preencheu — clique em Cobrar e o WhatsApp abre com a mensagem pronta.`,
      ex: `Ex.: ${nome} preencheu às 11h; se outra pessoa passar das 14h sem registrar, ela fica em "Atrasada" e você cobra.`,
    },
    {
      icon: "sunset", quando: "Toda tarde · até 19h",
      titulo: "Confira o diário da tarde",
      texto: "Mesma conferida no fim do dia: o que a pessoa concluiu, o que mapeou e o que ficou pendente para amanhã.",
      ex: "Os dois turnos preenchidos = pessoa em dia. É o ritmo que você instala na primeira semana.",
    },
    {
      icon: "calendar-days", quando: "Toda sexta",
      titulo: "Leia o fechamento da semana",
      texto: 'Cada pessoa envia a auto-avaliação + os entregáveis da semana. Veja a nota e o que ela entregou na aba "A equipe" e comente o que precisar.',
      ex: "Nota baixa ou entregável faltando = ponto de conversa no check-in da semana.",
    },
    {
      icon: "folder-open", quando: "Quando precisar",
      titulo: "Use os documentos certos de cada etapa",
      texto: 'Cada etapa tem seus modelos (Matriz de Tarefas, POP, Diagnóstico…). Veja "Documentos por etapa" aqui embaixo e mande o modelo certo para a pessoa.',
      ex: 'Cadastrar alguém novo? É o botão "Novo colaborador" no topo — depois a pessoa aparece aqui e você acompanha o preenchimento dela.',
    },
  ];

  return (
    <Card pad={0} style={{ overflow: "hidden", border: `1px solid #c7d6f7` }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "16px 20px", background: "linear-gradient(120deg,#0E1A30,#1b2c4e 60%,#243B66)", color: "#fff" }}>
        <span style={{ width: 36, height: 36, borderRadius: 10, background: "rgba(255,255,255,.14)", display: "grid", placeItems: "center", flex: "none" }}><LIcon name="compass" size={20} /></span>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 16.5, fontWeight: 800, letterSpacing: "-.01em" }}>Comece aqui — sua rotina em 4 passos</div>
          <div style={{ fontSize: 12.5, color: "#aeb9d0" }}>O que fazer e como. Este guia fica salvo — reabra quando quiser em "Como usar".</div>
        </div>
        <button onClick={fechar} title="Fechar o guia (fica salvo)" style={{ background: "rgba(255,255,255,.14)", border: "none", cursor: "pointer", color: "#fff", display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "inherit", fontWeight: 700, fontSize: 12.5, padding: "7px 12px", borderRadius: 9 }}>
          <LIcon name="check" size={15} /> Entendi
        </button>
      </div>
      <div style={{ padding: 20, display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(255px,1fr))", gap: 14 }}>
        {passos.map((p, i) => (
          <div key={i} style={{ background: C.bg, border: `1px solid ${C.lineSoft}`, borderRadius: 13, padding: 16, display: "flex", flexDirection: "column", gap: 9 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span style={{ width: 30, height: 30, borderRadius: 9, background: C.cobaltSoft, color: C.cobalt, display: "grid", placeItems: "center", flex: "none" }}><LIcon name={p.icon} size={16} /></span>
              <span style={{ fontSize: 10.5, fontWeight: 800, letterSpacing: ".06em", textTransform: "uppercase", color: C.gold }}>{p.quando}</span>
            </div>
            <div style={{ fontSize: 14.5, fontWeight: 800, color: C.ink, lineHeight: 1.25 }}>{i + 1}. {p.titulo}</div>
            <div style={{ fontSize: 12.8, color: C.ink2, lineHeight: 1.5 }}>{p.texto}</div>
            <div style={{ fontSize: 12, color: C.ink3, lineHeight: 1.45, borderTop: `1px dashed ${C.line}`, paddingTop: 8, marginTop: "auto" }}>{p.ex}</div>
          </div>
        ))}
      </div>
    </Card>
  );
}

/* ---------- O painel único ---------- */
function PainelGestao({ done, meta, go, onNovo }) {
  const OE = window.OE;
  const cols = OE.colaboradores;

  const linhas = cols.map((c) => ({
    c,
    a: OE.atividadeColab(meta[c.id], done[c.id]),
    s: OE.submissaoColab(meta[c.id], c.inicio),
  }));

  // Resultados do dia / da semana (simples e objetivo)
  const diaCompleto = linhas.filter((l) => l.a.manha && l.a.tarde).length;
  const atrasadosHoje = linhas.filter((l) => l.a.alertaManha || l.a.alertaTarde).length;
  const fecharam = linhas.filter((l) => l.s.fech).length;

  // Documentos por etapa (modelos citados nas tarefas de cada fase)
  const docsPorEtapa = OE.PLAYBOOK.map((f) => {
    const docs = [];
    f.tarefas.forEach((t) => { if (t.template && !docs.includes(t.template)) docs.push(t.template); });
    return { f, docs };
  }).filter((x) => x.docs.length);

  const cobrarHref = (c) => {
    const primeiro = (c.nome || "").split(" ")[0];
    const msg = `Oi, ${primeiro}! Passando pra lembrar do diário de hoje aqui no onboarding — leva uns 5 min. Qualquer dúvida me chama. 🙏`;
    return `https://wa.me/?text=${encodeURIComponent(msg)}`;
  };

  const etapaPill = (ok, alerta, prazo) =>
    ok ? <Pill tone="green" icon="check">Preenchida</Pill>
      : alerta ? <Pill tone="amber" icon="alert-triangle">Atrasada · {prazo}h</Pill>
        : <Pill tone="gray" icon="clock">Aguardando · {prazo}h</Pill>;

  const semanaPill = (st) =>
    st === "emdia" ? <Pill tone="green" icon="check">Em dia</Pill>
      : st === "parcial" ? <Pill tone="cobalt" icon="loader">Parcial</Pill>
        : <Pill tone="amber" icon="alert-triangle">Atrasado</Pill>;

  const fmtUltima = (iso) => {
    if (!iso) return "—";
    const dia = String(iso).slice(0, 10);
    const hoje = new Date().toISOString().slice(0, 10);
    const hm = new Date(iso).toTimeString().slice(0, 5);
    return dia === hoje ? `hoje ${hm}` : OE.fmtData(dia);
  };

  // exemplo real pro guia: primeira pessoa cadastrada (se houver)
  const exemplo = cols[0] || null;

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
      <ComeceAqui exemplo={exemplo} />

      {/* RESULTADOS (KPIs simples) */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(195px,1fr))", gap: 16 }}>
        <KPI val={cols.length} lab="Pessoas em integração" foot="No processo agora" icon="users" />
        <KPI val={`${diaCompleto}/${cols.length || 0}`} lab="Diário de hoje completo" foot="Manhã + tarde preenchidas" icon="notebook-pen" tone={cols.length && diaCompleto === cols.length ? "green" : undefined} />
        <KPI val={atrasadosHoje} lab="Atrasados hoje" foot="Passaram do prazo (14h/19h)" icon="alert-triangle" tone={atrasadosHoje ? "amber" : "green"} />
        <KPI val={`${fecharam}/${cols.length || 0}`} lab="Fecharam a semana" foot="Enviaram a auto-avaliação" icon="send" tone={cols.length && fecharam === cols.length ? "green" : undefined} />
      </div>

      {/* PREENCHIMENTO DE HOJE — o coração do painel */}
      <div>
        <SectionTitle icon="radar" sub="Quem preencheu o diário hoje, como está a semana e quem precisa de cobrança. Clique em Cobrar para abrir o WhatsApp com a mensagem pronta.">Preenchimento de hoje</SectionTitle>
        {linhas.length === 0 ? (
          <Card pad={28} style={{ textAlign: "center" }}>
            <div style={{ color: C.cobalt, display: "flex", justifyContent: "center", marginBottom: 10 }}><LIcon name="user-plus" size={30} /></div>
            <div style={{ fontSize: 16, fontWeight: 800, color: C.ink }}>Nenhuma pessoa em integração ainda</div>
            <div style={{ fontSize: 13.5, color: C.ink2, marginTop: 7, lineHeight: 1.55, maxWidth: 440, margin: "7px auto 0" }}>
              Cadastre a primeira pessoa e gere o link de acesso dela. Depois é só acompanhar aqui o preenchimento do diário (manhã/tarde) e o fechamento da semana.
            </div>
            <div style={{ marginTop: 16 }}><Btn icon="user-plus" onClick={onNovo}>Cadastrar primeira pessoa</Btn></div>
          </Card>
        ) : (
          <Card pad={0} style={{ overflow: "hidden" }}>
            <div style={{ overflowX: "auto" }}>
              <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13.5 }}>
                <thead>
                  <tr style={{ background: C.bg }}>
                    {["Pessoa", "Manhã (14h)", "Tarde (19h)", "Semana", "Última atividade", ""].map((h, i) => (
                      <th key={i} style={{ textAlign: "left", fontSize: 11, letterSpacing: ".08em", textTransform: "uppercase", color: C.ink3, fontWeight: 800, padding: "13px 16px", borderBottom: `1px solid ${C.line}`, whiteSpace: "nowrap" }}>{h}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {linhas.map(({ c, a, s }) => {
                    const atrasado = a.alertaManha || a.alertaTarde || a.jamaisAcessou;
                    return (
                      <tr key={c.id} style={{ borderBottom: `1px solid ${C.lineSoft}` }}>
                        <td style={{ padding: "14px 16px" }}>
                          <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
                            <Avatar nome={c.nome} cor={c.cor} size={36} />
                            <div><div style={{ fontWeight: 800, color: C.ink }}>{c.nome}</div><div style={{ fontSize: 11.5, color: C.ink3 }}>{c.cargo || "—"}</div></div>
                          </div>
                        </td>
                        <td style={{ padding: "14px 16px" }}>{etapaPill(a.manha, a.alertaManha, OE.PRAZO_MANHA)}</td>
                        <td style={{ padding: "14px 16px" }}>{etapaPill(a.tarde, a.alertaTarde, OE.PRAZO_TARDE)}</td>
                        <td style={{ padding: "14px 16px" }}>{semanaPill(s.status)}</td>
                        <td style={{ padding: "14px 16px", color: C.ink2 }}>{a.jamaisAcessou ? <Pill tone="amber" icon="link-2-off">Nunca acessou</Pill> : fmtUltima(a.acesso.ultimo)}</td>
                        <td style={{ padding: "14px 16px", textAlign: "right", whiteSpace: "nowrap" }}>
                          {atrasado
                            ? <a href={cobrarHref(c)} target="_blank" rel="noopener noreferrer" style={{ display: "inline-flex", alignItems: "center", gap: 7, textDecoration: "none", background: C.amberSoft, color: "#9a6a12", border: "1px solid #f3d28a", fontWeight: 700, fontSize: 12.5, padding: "7px 12px", borderRadius: 9 }}><LIcon name="message-circle" size={15} /> Cobrar</a>
                            : <span style={{ fontSize: 12, color: C.green, fontWeight: 700, display: "inline-flex", alignItems: "center", gap: 6 }}><LIcon name="check-check" size={15} /> Em dia</span>}
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
            <div style={{ padding: "12px 16px", borderTop: `1px solid ${C.lineSoft}`, display: "flex", justifyContent: "flex-end" }}>
              <Btn variant="ghost" size="sm" icon="arrow-right" onClick={() => go("equipe")}>Ver o que cada pessoa enviou</Btn>
            </div>
          </Card>
        )}
      </div>

      {/* DOCUMENTOS POR ETAPA */}
      <div>
        <SectionTitle icon="folder-open" sub="Os modelos certos de cada momento da integração. Abra, preencha e mande para a pessoa.">Documentos por etapa</SectionTitle>
        <Card pad={0} style={{ overflow: "hidden" }}>
          <div style={{ display: "flex", flexDirection: "column" }}>
            {docsPorEtapa.map(({ f, docs }, i) => (
              <div key={f.id} style={{ display: "flex", alignItems: "center", gap: 14, padding: "14px 18px", borderBottom: i < docsPorEtapa.length - 1 ? `1px solid ${C.lineSoft}` : "none", flexWrap: "wrap" }}>
                <span style={{ width: 30, height: 30, borderRadius: 9, background: C.cobaltSoft, color: C.cobalt, display: "grid", placeItems: "center", flex: "none" }}><LIcon name={f.icon} size={16} /></span>
                <div style={{ minWidth: 150, flex: "none" }}>
                  <div style={{ fontSize: 10.5, fontWeight: 800, letterSpacing: ".05em", textTransform: "uppercase", color: C.ink3 }}>Etapa {i + 1}</div>
                  <div style={{ fontSize: 13.5, fontWeight: 700, color: C.ink }}>{f.nome}</div>
                </div>
                <div style={{ display: "flex", gap: 7, flexWrap: "wrap", flex: 1 }}>
                  {docs.map((d, j) => (
                    <span key={j} style={{ display: "inline-flex", alignItems: "center", gap: 6, background: C.bg, border: `1px solid ${C.line}`, borderRadius: 8, padding: "5px 10px", fontSize: 12, fontWeight: 600, color: C.ink2 }}><LIcon name="file-text" size={13} color={C.ink3} /> {d}</span>
                  ))}
                </div>
                <Btn variant="ghost" size="sm" icon="arrow-right" onClick={() => go("templates")}>Ver modelos</Btn>
              </div>
            ))}
          </div>
        </Card>
      </div>

      {/* PESSOAS — atalho pra execução guiada de cada uma */}
      {cols.length > 0 && (
        <div>
          <SectionTitle icon="users" sub="Onde cada pessoa está na jornada. Clique para continuar a execução guiada.">Pessoas em integração</SectionTitle>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill,minmax(260px,1fr))", gap: 14 }}>
            {cols.map((c) => {
              const prog = OE.progressoColab(done[c.id]);
              const atualIdx = OE.faseAtual(done[c.id]);
              const fase = OE.PLAYBOOK[atualIdx];
              const completo = prog.pct === 100;
              return (
                <Card key={c.id} pad={18} style={{ cursor: "pointer" }}>
                  <div onClick={() => go("guia", { id: c.id })} style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
                      <Avatar nome={c.nome} cor={c.cor} size={40} />
                      <div style={{ minWidth: 0 }}>
                        <div style={{ fontWeight: 800, fontSize: 14.5, color: C.ink, lineHeight: 1.2 }}>{c.nome}</div>
                        <div style={{ fontSize: 12, color: C.ink3, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{c.cargo || "—"}</div>
                      </div>
                    </div>
                    {completo
                      ? <Pill tone="green" icon="badge-check">Integração concluída</Pill>
                      : <Pill tone="cobalt" icon={fase.icon}>Etapa {atualIdx + 1}/{OE.N_ETAPAS} · {fase.nome}</Pill>}
                    <div>
                      <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, marginBottom: 6 }}>
                        <span style={{ color: C.ink3, fontWeight: 600 }}>Progresso</span>
                        <span style={{ color: C.ink, fontWeight: 800 }}>{prog.pct}%</span>
                      </div>
                      <Bar value={prog.pct} color={completo ? C.green : c.cor} />
                    </div>
                  </div>
                </Card>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { PainelGestao });