/* ============================================================
   EDUCARE — WhatsApp (automações + conversa)
   ============================================================ */
(function () {
  const { useState } = React;
  const Icon = window.Icon;

  function WhatsApp() {
    const [autos, setAutos] = useState(window.WA_AUTOMATIONS.map((a) => ({ ...a })));
    const toggle = (id) => setAutos((s) => s.map((a) => a.id === id ? { ...a, on: !a.on } : a));
    /* Prévia usa o primeiro paciente da conta; sem pacientes não há
       conversa para prever. Antes buscava um id fixo dos dados de exemplo. */
    const helena = (window.PATIENTS || [])[0] || null;
    const activeCount = autos.filter((a) => a.on).length;

    return (
      <>
        <div className="crumb">Dashboard <Icon name="chevR" size={13} /> <span className="cur">WhatsApp</span></div>
        <div className="page-head">
          <div>
            <h1><Icon name="chat" size={26} /> WhatsApp</h1>
            <p className="sub">Automatize lembretes e confirmações de sessão com os responsáveis.</p>
          </div>
          <span className="tag ok" style={{ alignSelf: "center" }}><i className="d"></i>Conectado · {activeCount} automações ativas</span>
        </div>

        <div className="wa-layout">
          <div>
            <p className="section-label">AUTOMAÇÕES</p>
            <div className="wa-auto">
              {autos.map((a) => (
                <div className="wa-item" key={a.id}>
                  <span className="wi"><Icon name={a.icon} size={20} /></span>
                  <div className="wt">
                    <b>{a.title}</b>
                    <p>{a.desc}</p>
                  </div>
                  <span className="wwhen">{a.when}</span>
                  <button className={"switch" + (a.on ? " on" : "")} onClick={() => toggle(a.id)} aria-label="Ativar"></button>
                </div>
              ))}
            </div>
          </div>

          <div>
            <p className="section-label">PRÉVIA DA CONVERSA</p>
            {!helena ? (
              <div className="pbox">
                <span className="picon"><Icon name="chat" size={28} /></span>
                <h2>Nenhum paciente cadastrado</h2>
                <p>Cadastre um paciente para ver como as mensagens automáticas chegam ao responsável.</p>
              </div>
            ) : (
            <div className="wa-phone">
              <div className="wa-head">
                <span className={"avatar " + helena.color}>{helena.initials}</span>
                <div>
                  <b>{helena.guardian}</b><br />
                  <span>Responsável · {helena.name}</span>
                </div>
              </div>
              <div className="wa-body">
                {(window.WA_LOG || []).length === 0
                  ? <div className="bubble out">As mensagens enviadas pelas automações aparecerão aqui.<span className="bmeta">Nenhuma mensagem ainda</span></div>
                  : window.WA_LOG.map((m, i) => (
                      <div className={"bubble " + m.dir} key={i}>
                        {m.msg}
                        <span className="bmeta">{m.time} · {m.status}</span>
                      </div>
                    ))}
              </div>
              <div className="wa-compose">
                <div className="ci">Mensagem automática enviada pela Educare…</div>
                <button className="send"><Icon name="arrowRight" size={18} /></button>
              </div>
            </div>
            )}
          </div>
        </div>
      </>
    );
  }

  window.WhatsApp = WhatsApp;
})();