/* ============================================================
   EDUCARE — Modo Clínica: seletor de profissional + equipe
   ============================================================ */
(function () {
  const { useState } = React;
  const Icon = window.Icon;

  function ProfSwitcher({ activeProf, onSelect, onManage }) {
    const [open, setOpen] = useState(false);
    const profs = window.PROFESSIONALS;
    const cur = profs.find((p) => p.id === activeProf);
    const isClinic = activeProf === "all";

    return (
      <div className="prof-switch">
        {open && <div style={{ position: "fixed", inset: 0, zIndex: 29 }} onClick={() => setOpen(false)}></div>}
        <button className="ps-trigger" onClick={() => setOpen((o) => !o)}>
          {isClinic
            ? <span className="clinic-ic" style={{ width: 38, height: 38, borderRadius: 11 }}><Icon name="users" size={19} /></span>
            : <span className={"avatar " + cur.color}>{cur.initials}</span>}
          <span className="pmeta">
            <b>{isClinic ? "Toda a clínica" : cur.name}</b>
            <span>{isClinic ? `${profs.length} profissionais` : cur.role}</span>
          </span>
          <Icon name="chevDown" size={16} className="chev" />
        </button>

        {open && (
          <div className="ps-pop">
            <div className="ps-label">PROFISSIONAL ATIVO</div>
            {profs.map((p) => (
              <button key={p.id} className={"ps-opt" + (activeProf === p.id ? " on" : "")} onClick={() => { onSelect(p.id); setOpen(false); }}>
                <span className={"avatar sm " + p.color}>{p.initials}</span>
                <span className="pmeta"><b>{p.name}</b><span>{p.role}</span></span>
                {activeProf === p.id && <Icon name="clipboardCheck" size={16} className="ck" stroke={2.6} />}
              </button>
            ))}
            <button className={"ps-opt" + (isClinic ? " on" : "")} onClick={() => { onSelect("all"); setOpen(false); }}>
              <span className="clinic-ic"><Icon name="users" size={17} /></span>
              <span className="pmeta"><b>Toda a clínica</b><span>Ver todos os pacientes</span></span>
              {isClinic && <Icon name="clipboardCheck" size={16} className="ck" stroke={2.6} />}
            </button>
            <div className="ps-sep"></div>
            <button className="ps-manage" onClick={() => { setOpen(false); onManage(); }}>
              <Icon name="headset" size={17} /> Gerenciar equipe
            </button>
          </div>
        )}
      </div>
    );
  }

  function TeamModal({ onClose }) {
    const profs = window.PROFESSIONALS;
    return (
      <div className="modal-scrim" onClick={onClose}>
        <div className="modal" onClick={(e) => e.stopPropagation()}>
          <div className="modal-head">
            <div>
              <h3>Equipe da clínica</h3>
              <p>Profissionais com acesso a esta conta.</p>
            </div>
            <button className="x" onClick={onClose} aria-label="Fechar"><Icon name="x" size={18} /></button>
          </div>
          <div className="modal-body">
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
              <span className="team-count">{profs.length} profissionais ativos</span>
              <button className="btn btn-primary btn-xs"><Icon name="plus" size={14} /> Convidar profissional</button>
            </div>
            {profs.map((p) => (
              <div className="team-row" key={p.id}>
                <span className={"avatar " + p.color}>{p.initials}</span>
                <div className="tr-info">
                  <b>{p.name} {p.owner && <span className="owner-tag">PROPRIETÁRIO</span>}</b>
                  <span>{p.role} · {p.reg}</span>
                </div>
                {(() => { const n = window.PATIENTS.filter((x) => window.PROF_OF[x.id] === p.id).length; return <span className="scope-chip">{n} {n === 1 ? "paciente" : "pacientes"}</span>; })()}
              </div>
            ))}
            <p className="help-text" style={{ marginTop: 14 }}>
              No modo clínica, cada profissional vê os próprios pacientes. O proprietário acompanha toda a equipe e o financeiro consolidado.
            </p>
          </div>
        </div>
      </div>
    );
  }

  Object.assign(window, { ProfSwitcher, TeamModal });
})();