/* ============================================================
   EDUCARE — Atendimentos (lista + registro de sessão)
   ============================================================ */
(function () {
  const { useState } = React;
  const Icon = window.Icon;

  const MOODS = [
    { v: 5, e: "😄", l: "Ótimo" },
    { v: 4, e: "🙂", l: "Bom" },
    { v: 3, e: "😐", l: "Regular" },
    { v: 2, e: "😕", l: "Difícil" },
    { v: 1, e: "😣", l: "Muito difícil" },
  ];
  const moodOf = (v) => MOODS.find((m) => m.v === v) || MOODS[2];

  /* ---------------- LISTA ---------------- */
  const AT_STATUS = {
    realizado: { l: "Realizado", col: "#0F9B8B" },
    confirmado: { l: "Confirmado", col: "#2563EB" },
    agendado: { l: "Agendado", col: "#6366F1" },
    remarcado: { l: "Remarcado", col: "#F59E0B" },
    faltou: { l: "Faltou", col: "#DB2777" },
    cancelado: { l: "Cancelado", col: "#EF4444" },
  };

  function AtendimentosList({ onNew, onOpen, onNavigate }) {
    const items = window.ATEND;
    const [q, setQ] = useState("");
    const [sf, setSf] = useState("todos");
    const [menu, setMenu] = useState(null);
    const [, force] = useState(0);
    const stOf = (a) => AT_STATUS[a.status] || AT_STATUS.realizado;

    const filtered = items.filter((a) => {
      const p = window.PATIENTS.find((x) => x.id === a.pid);
      if (q && !((p ? p.name : "") + " " + a.focus).toLowerCase().includes(q.toLowerCase())) return false;
      if (sf !== "todos" && (a.status || "realizado") !== sf) return false;
      return true;
    });

    const avg = items.length ? items.reduce((s, a) => s + a.mood, 0) / items.length : 3;
    const totalMin = items.reduce((s, a) => s + (a.dur || 0), 0);
    const realizados = items.filter((a) => { const s = a.status || "realizado"; return s === "realizado" || s === "confirmado"; }).length;
    const cancelados = items.filter((a) => a.status === "cancelado" || a.status === "faltou").length;

    function setStatus(a, st) { window.setAtendStatus(a.id, st); setMenu(null); force((n) => n + 1); }

    return (
      <>
        <div className="crumb">Dashboard <Icon name="chevR" size={13} /> <span className="cur">Atendimentos</span></div>
        <div className="page-head">
          <div>
            <h1><Icon name="clipboardCheck" size={26} /> Atendimentos</h1>
            <p className="sub">{items.length} atendimentos registrados</p>
          </div>
          {/* Atendimento é ilimitado em todos os planos: só o modo
              leitura barra registrar, e a lista continua inteira. */}
          {window.usarAssinatura().podeEscrever
            ? <button className="btn btn-primary btn-sm" onClick={onNew}><Icon name="plus" size={17} /> Novo atendimento</button>
            : <button className="btn btn-primary btn-sm" onClick={() => onNavigate && onNavigate("planos")}>
                <Icon name="sparkles" size={17} /> Assinar para registrar
              </button>}
        </div>

        <div className="at-stats">
          <div className="at-stat"><span className="as-ic" style={{ background: "var(--primary-soft)", color: "var(--primary)" }}><Icon name="clipboardCheck" size={18} /></span><div><b>{items.length}</b><span>Total</span></div></div>
          <div className="at-stat"><span className="as-ic" style={{ background: "var(--primary-soft)", color: "var(--primary)" }}><Icon name="clipboardCheck" size={18} /></span><div><b>{realizados}</b><span>Realizados</span></div></div>
          <div className="at-stat"><span className="as-ic" style={{ background: "var(--accent-soft)", color: "var(--accent-strong)" }}><Icon name="x" size={18} /></span><div><b>{cancelados}</b><span>Cancelados/Faltas</span></div></div>
          <div className="at-stat"><span className="as-ic" style={{ background: "var(--surface-3)", color: "var(--text-2)" }} >{moodOf(Math.round(avg)).e}</span><div><b>{avg.toFixed(1)}</b><span>Humor médio</span></div></div>
          <div className="at-stat"><span className="as-ic" style={{ background: "var(--primary-soft)", color: "var(--primary)" }}><Icon name="calendar" size={18} /></span><div><b>{(totalMin / 60).toFixed(1)}h</b><span>Tempo total</span></div></div>
        </div>

        <div className="toolbar">
          <div className="filter-search" style={{ maxWidth: 320 }}>
            <Icon name="search" size={18} />
            <input placeholder="Buscar por paciente ou foco…" value={q} onChange={(e) => setQ(e.target.value)} />
          </div>
          <div className="seg" style={{ marginLeft: "auto", flexWrap: "wrap" }}>
            {[["todos", "Todos"], ["realizado", "Realizados"], ["confirmado", "Confirmados"], ["agendado", "Agendados"], ["cancelado", "Cancelados"]].map(([k, l]) => (
              <button key={k} className={sf === k ? "on" : ""} onClick={() => setSf(k)}>{l}</button>
            ))}
          </div>
        </div>

        <div className="mstack">
          {filtered.map((a) => {
            const p = window.PATIENTS.find((x) => x.id === a.pid);
            const mood = moodOf(a.mood);
            const st = stOf(a);
            return (
              <div className="at-card" key={a.id}>
                <button className="at-main" onClick={() => onOpen(a.pid)}>
                  {p ? <span className={"avatar " + p.color}>{p.initials}</span> : <span className="avatar" style={{ background: "var(--surface-3)", color: "var(--text-3)" }}>—</span>}
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="at-focus">{a.focus}</div>
                    <div className="at-meta">{p ? p.name : "Paciente"} · {a.date} · {a.dur} min</div>
                  </div>
                </button>
                <span className="at-mood"><span style={{ fontSize: 19 }}>{mood.e}</span> {mood.l}</span>
                <span className="tag" style={{ background: st.col + "22", color: st.col }}><i className="d" style={{ background: st.col }}></i>{st.l}</span>
                <div className="at-act">
                  <button className="at-kebab" onClick={() => setMenu(menu === a.id ? null : a.id)} aria-label="Ações">⋯</button>
                  {menu === a.id && (
                    <>
                      <div className="at-back" onClick={() => setMenu(null)}></div>
                      <div className="at-menu">
                        <div className="at-mlabel">Mudar status</div>
                        {Object.keys(AT_STATUS).map((k) => (
                          <button key={k} className={"at-mopt" + ((a.status || "realizado") === k ? " on" : "")} onClick={() => setStatus(a, k)}>
                            <i className="d" style={{ background: AT_STATUS[k].col }}></i>{AT_STATUS[k].l}
                          </button>
                        ))}
                        <div className="at-msep"></div>
                        <button className="at-mopt" onClick={() => { onOpen(a.pid); setMenu(null); }}><Icon name="users" size={15} /> Abrir paciente</button>
                      </div>
                    </>
                  )}
                </div>
              </div>
            );
          })}
          {filtered.length === 0 && <div className="rail-empty" style={{ padding: 28 }}>Nenhum atendimento encontrado.</div>}
        </div>
      </>
    );
  }

  /* ---------------- FORMULÁRIO ---------------- */
  function AtendimentoForm({ onCancel, onSave, presetPid }) {
    const [dur, setDur] = useState(50);
    const [mood, setMood] = useState(null);
    const [custom, setCustom] = useState("");
    const [pid, setPid] = useState(presetPid || "");
    const [date, setDate] = useState((window.todayISO ? window.todayISO() : "2026-06-04"));
    const [focus, setFocus] = useState("");
    const [activities, setActivities] = useState("");
    const [notes, setNotes] = useState("");
    const [next, setNext] = useState("");
    const [err, setErr] = useState("");

    function submit() {
      if (!pid) { setErr("Selecione o paciente."); return; }
      if (mood == null) { setErr("Selecione o humor e engajamento do paciente."); return; }
      setErr("");
      onSave({ pid, date, dur: custom ? parseInt(custom, 10) : dur, mood, focus, activities, notes, next });
    }

    return (
      <div className="form-wrap">
        <div className="crumb">Dashboard <Icon name="chevR" size={13} /> Atendimentos <Icon name="chevR" size={13} /> <span className="cur">Novo</span></div>
        <div className="page-head">
          <div>
            <h1>Registrar atendimento</h1>
            <p className="sub">Documente a sessão para acompanhar a evolução do paciente.</p>
          </div>
        </div>

        {/* paciente */}
        <div className="form-card">
          <div className="sec-head"><span className="si"><Icon name="users" size={18} /></span> Paciente</div>
          <div className="fld" style={{ marginBottom: 0 }}>
            <label>Paciente <span className="req">*</span></label>
            <select className="ctrl" value={pid} onChange={(e) => setPid(e.target.value)}>
              <option value="" disabled>Selecione o paciente...</option>
              {window.PATIENTS.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
            </select>
          </div>
        </div>

        {/* sessão */}
        <div className="form-card">
          <div className="sec-head"><span className="si"><Icon name="calendar" size={18} /></span> Sessão</div>
          <div className="grid-2">
            <div className="fld" style={{ marginBottom: 0 }}>
              <label>Data do atendimento <span className="req">*</span></label>
              <input className="ctrl" type="date" value={date} onChange={(e) => setDate(e.target.value)} />
            </div>
            <div className="fld" style={{ marginBottom: 0 }}>
              <label>Duração (minutos) <span className="req">*</span></label>
              <div className="dur-opts">
                {[30, 45, 50, 60, 90].map((d) => (
                  <button key={d} className={"dur-opt" + (dur === d && !custom ? " on" : "")} onClick={() => { setDur(d); setCustom(""); }}>{d} min</button>
                ))}
                <input className="ctrl" style={{ width: 90 }} placeholder="Outro" value={custom} onChange={(e) => setCustom(e.target.value)} />
              </div>
            </div>
          </div>
        </div>

        {/* foco */}
        <div className="form-card">
          <div className="sec-head"><span className="si"><Icon name="activity" size={18} /></span> Foco da sessão</div>
          <div className="fld" style={{ marginBottom: 0 }}>
            <label>Qual o objetivo principal de hoje?</label>
            <input className="ctrl" placeholder="Ex: Trabalhar consciência fonológica com jogos de rima" value={focus} onChange={(e) => setFocus(e.target.value)} />
          </div>
        </div>

        {/* humor */}
        <div className="form-card">
          <div className="sec-head"><span className="si"><Icon name="heart" size={18} /></span> Humor e engajamento do paciente</div>
          <div className="mood-opts">
            {MOODS.map((m) => (
              <button key={m.v} className={"mood-opt" + (mood === m.v ? " on" : "")} onClick={() => setMood(m.v)}>
                <span className="emo">{m.e}</span>
                <span className="ml">{m.l}</span>
              </button>
            ))}
          </div>
        </div>

        {/* atividades */}
        <div className="form-card">
          <div className="sec-head"><span className="si"><Icon name="activity" size={18} /></span> Atividades realizadas</div>
          <div className="fld" style={{ marginBottom: 0 }}>
            <label>O que foi feito na sessão?</label>
            <textarea className="ctrl" placeholder="Descreva as atividades, jogos ou exercícios utilizados na sessão..." value={activities} onChange={(e) => setActivities(e.target.value)}></textarea>
          </div>
        </div>

        {/* observações */}
        <div className="form-card">
          <div className="sec-head"><span className="si"><Icon name="fileText" size={18} /></span> Observações clínicas</div>
          <div className="label-inline">
            <label>Como foi o paciente? O que chamou atenção?</label>
            <button className="mini-link"><Icon name="sparkles" size={15} /> Importar anotação</button>
          </div>
          <textarea className="ctrl" placeholder="Registre comportamentos, dificuldades, avanços, reações e qualquer observação clínica relevante..." value={notes} onChange={(e) => setNotes(e.target.value)}></textarea>
        </div>

        {/* próximos passos */}
        <div className="form-card">
          <div className="sec-head"><span className="si"><Icon name="arrowRight" size={18} /></span> Próximos passos</div>
          <div className="fld" style={{ marginBottom: 0 }}>
            <label>O que fazer na próxima sessão?</label>
            <textarea className="ctrl" placeholder="Planejamento para a próxima sessão, tarefas para casa, encaminhamentos..." value={next} onChange={(e) => setNext(e.target.value)}></textarea>
          </div>
        </div>

        {err && (
          <p className="form-err" role="alert" style={{ display: "flex", alignItems: "center", gap: 7, color: "#EF4444", fontWeight: 700, fontSize: 13.5, margin: "0 0 10px" }}>
            <Icon name="x" size={15} /> {err}
          </p>
        )}

        <div className="save-bar">
          <button className="btn btn-primary" onClick={submit}><Icon name="clipboardCheck" size={18} /> Salvar atendimento</button>
        </div>
        <div style={{ textAlign: "center", marginTop: 4 }}>
          <button className="text-link" onClick={onCancel}>Cancelar</button>
        </div>
      </div>
    );
  }

  Object.assign(window, { AtendimentosList, AtendimentoForm });
})();