/* ============================================================
   EDUCARE — Configurações

   Duas abas: o perfil profissional, que alimenta o cabeçalho e o rodapé
   dos documentos gerados, e a assinatura.

   A assinatura mora aqui, e não numa entrada própria do menu, porque é
   assunto de conta e não de rotina clínica. Quem precisa dela com
   urgência (teste vencendo, modo leitura) já é levado direto para a
   vitrine pela faixa do topo, sem passar por Configurações.
   ============================================================ */
(function () {
  const { useState } = React;
  const Icon = window.Icon;

  const PROFISSOES = ["Psicopedagogo(a)", "Psicólogo(a)", "Fonoaudiólogo(a)", "Terapeuta Ocupacional", "Outro"];

  function PerfilProfissional() {
    const prof0 = window.getProfile ? window.getProfile() : { name: "", profession: "", council: "", reg: "", phone: "", email: "" };
    const profConhecida = PROFISSOES.includes(prof0.profession);
    const [name, setName] = useState(prof0.name || "");
    const [profSel, setProfSel] = useState(prof0.profession ? (profConhecida ? prof0.profession : "Outro") : "");
    const [profOutro, setProfOutro] = useState(profConhecida ? "" : (prof0.profession || ""));
    const [council, setCouncil] = useState(prof0.council || "");
    const [reg, setReg] = useState(prof0.reg || "");
    const [phone, setPhone] = useState(prof0.phone || "");
    const [email, setEmail] = useState(prof0.email || "");
    const [toast, setToast] = useState(null);

    const profession = profSel === "Outro" ? profOutro.trim() : profSel;

    function salvar() {
      if (window.saveProfile) window.saveProfile({ name: name.trim(), profession, council: council.trim(), reg: reg.trim(), phone: phone.trim(), email: email.trim() });
      setToast("Perfil salvo. Os documentos passam a usar estes dados.");
      setTimeout(() => setToast(null), 2800);
    }

    // Pré-visualização da linha impressa no documento (registro omitido se vazio).
    const regLine = reg.trim() ? (council.trim() ? council.trim() + " " + reg.trim() : reg.trim()) : "";
    const linhaDoc = [profession, regLine].filter(Boolean).join(" · ");

    return (
      <>
        <div className="form-card">
          <div className="sec-head"><span className="si"><Icon name="clipboardCheck" size={18} /></span> Identificação</div>
          <div className="fld"><label>Nome completo</label>
            <input className="ctrl" value={name} onChange={(e) => setName(e.target.value)} placeholder="Seu nome como deve aparecer nos documentos" />
          </div>
          <div className="grid-2">
            <div className="fld"><label>Profissão / especialidade</label>
              <select className="ctrl" value={profSel} onChange={(e) => setProfSel(e.target.value)}>
                <option value="">Selecione…</option>
                {PROFISSOES.map((p) => <option key={p} value={p}>{p}</option>)}
              </select>
            </div>
            {profSel === "Outro" && (
              <div className="fld"><label>Especifique a profissão</label>
                <input className="ctrl" value={profOutro} onChange={(e) => setProfOutro(e.target.value)} placeholder="Ex.: Neuropsicopedagogo(a)" />
              </div>
            )}
          </div>
        </div>

        <div className="form-card">
          <div className="sec-head"><span className="si"><Icon name="fileText" size={18} /></span> Registro profissional</div>
          <div className="grid-2">
            <div className="fld"><label>Conselho / entidade</label>
              <input className="ctrl" value={council} onChange={(e) => setCouncil(e.target.value)} placeholder="Ex.: CRP, CRFa, ABPp, CREFITO" />
            </div>
            <div className="fld"><label>Número de registro</label>
              <input className="ctrl" value={reg} onChange={(e) => setReg(e.target.value)} placeholder="Ex.: 06/123456" />
            </div>
          </div>
          <p className="help-text" style={{ marginBottom: 0 }}>Se o número de registro ficar em branco, a linha simplesmente não aparece no documento (nunca imprimimos um placeholder).</p>
        </div>

        <div className="form-card">
          <div className="sec-head"><span className="si"><Icon name="chat" size={18} /></span> Contato para o rodapé <span style={{ fontSize: 12, fontWeight: 600, color: "var(--text-3)", marginLeft: 6 }}>(opcional)</span></div>
          <div className="grid-2">
            <div className="fld"><label>Telefone</label>
              <input className="ctrl" value={phone} onChange={(e) => setPhone(e.target.value)} placeholder="(11) 90000-0000" />
            </div>
            <div className="fld"><label>E-mail</label>
              <input className="ctrl" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="voce@exemplo.com" />
            </div>
          </div>
        </div>

        <div className="form-card" style={{ background: "var(--surface-2)" }}>
          <div className="sec-head"><span className="si"><Icon name="eye" size={18} /></span> Como aparecerá no documento</div>
          <div style={{ padding: "6px 2px", lineHeight: 1.5 }}>
            <b style={{ fontSize: 15 }}>{name.trim() || "—"}</b><br />
            <span style={{ fontSize: 13, color: "var(--text-2)" }}>{linhaDoc || <i style={{ color: "var(--text-3)" }}>profissão e registro aparecerão aqui</i>}</span>
            {(phone.trim() || email.trim()) && <><br /><span style={{ fontSize: 12.5, color: "var(--text-3)" }}>{[phone.trim(), email.trim()].filter(Boolean).join(" · ")}</span></>}
          </div>
        </div>

        <div className="save-bar"><button className="btn btn-primary" onClick={salvar}><Icon name="clipboardCheck" size={18} /> Salvar perfil</button></div>

        {toast && (
          <div style={{ position: "fixed", left: "50%", bottom: 22, transform: "translateX(-50%)", zIndex: 90, display: "flex", alignItems: "center", gap: 9, padding: "11px 16px", borderRadius: 12, boxShadow: "var(--shadow-lg)", fontSize: 13.5, fontWeight: 700, color: "#fff", background: "var(--primary)" }}>
            <Icon name="clipboardCheck" size={16} /> {toast}
          </div>
        )}
      </>
    );
  }

  const ABAS = [
    ["perfil",     "Perfil profissional", "users"],
    ["assinatura", "Assinatura",          "sparkles"],
  ];

  function Configuracoes({ onNavigate }) {
    const [aba, setAba] = useState("perfil");
    const atual = ABAS.find(([k]) => k === aba) || ABAS[0];

    return (
      <div className="form-wrap">
        <div className="crumb">Dashboard <Icon name="chevR" size={13} /> <span className="cur">Configurações</span></div>
        <div className="page-head" style={{ marginBottom: 14 }}>
          <div>
            <h1><Icon name={atual[2]} size={25} /> {atual[1]}</h1>
            <p className="sub">
              {aba === "perfil"
                ? "Dados usados no cabeçalho, na assinatura e no rodapé dos documentos gerados."
                : "Seu plano, o que ele inclui e o caminho para levar seus dados embora."}
            </p>
          </div>
        </div>

        <div className="seg" style={{ marginBottom: 16 }}>
          {ABAS.map(([k, rotulo]) => (
            <button key={k} className={aba === k ? "on" : ""} onClick={() => setAba(k)}>{rotulo}</button>
          ))}
        </div>

        {aba === "perfil" ? <PerfilProfissional /> : <window.PainelAssinatura onNavigate={onNavigate} />}
      </div>
    );
  }

  window.Configuracoes = Configuracoes;
})();