/* ============================================================
   EDUCARE — Planejamentos com IA (form → geração → resultado)
   ============================================================ */
(function () {
  const { useState, useEffect } = React;
  const Icon = window.Icon;

  const TEMPOS = ["30 minutos", "45 minutos", "50 minutos", "60 minutos", "90 minutos"];
  const FREQS = ["1x por semana", "2x por semana", "3x por semana", "Quinzenal"];
  const NIVEIS = [
    { id: "Básico", desc: "Atividades curtas, linguagem simples, passos pequenos, mais suporte do profissional." },
    { id: "Intermediário", desc: "Complexidade moderada, alguma autonomia, desafio progressivo." },
    { id: "Avançado", desc: "Atividades densas, maior autonomia, inferência e análise." },
  ];
  const MATERIAIS = ["Jogos de tabuleiro", "Cartas / flashcards", "Material impresso", "Tablet / computador", "Material concreto", "Livros / leitura", "Aplicativos"];

  const OBJ_MAP = {
    "Leitura e escrita": ["Consciência fonológica", "Fluência de leitura", "Compreensão textual", "Ortografia", "Produção de texto"],
    "Matemática": ["Senso numérico", "Operações básicas", "Resolução de problemas", "Raciocínio lógico", "Geometria"],
    "Atenção e funções executivas": ["Atenção sustentada", "Memória de trabalho", "Organização e planejamento", "Controle inibitório"],
    "Linguagem oral": ["Vocabulário", "Articulação", "Narrativa oral", "Consciência sintática"],
    "Habilidades sociais": ["Interação em grupo", "Reconhecimento de emoções", "Resolução de conflitos", "Comunicação assertiva"],
    "Coordenação / motor": ["Coordenação motora fina", "Grafomotricidade", "Lateralidade", "Equilíbrio e ritmo"],
  };

  const ACT_POOL = {
    "Leitura e escrita": [
      "Jogo de pareamento de sílabas e formação de palavras",
      "Leitura compartilhada de mini-história com apoio visual",
      "Caça-rimas e identificação de sons iniciais e finais",
      "Ditado lúdico com cartões e autocorreção",
      "Construção de frases a partir de palavras-chave",
      "Leitura cronometrada de lista de palavras frequentes",
    ],
    "Matemática": [
      "Composição e decomposição de números com material concreto",
      "Jogo de trilha com somas e subtrações",
      "Problemas do cotidiano com apoio de imagens",
      "Sequências numéricas e padrões com peças",
      "Bingo de operações para fixação",
    ],
    "Atenção e funções executivas": [
      "Jogo de memória com aumento gradual de pares",
      "Tarefa de cópia com checklist de etapas",
      "Atividade 'pare e pense' para controle inibitório",
      "Organização de rotina com cartões visuais",
    ],
    "default": [
      "Atividade lúdica de aquecimento e engajamento",
      "Tarefa guiada com apoio do profissional",
      "Atividade de aplicação com autonomia progressiva",
      "Fechamento com autoavaliação e registro",
    ],
  };

  function genPlan(cfg) {
    const pool = ACT_POOL[cfg.tipo] || ACT_POOL["default"];
    const obj = cfg.objEsp || cfg.tipo || "desenvolvimento global";
    const sessions = Array.from({ length: cfg.sessions }, (_, i) => {
      const a1 = pool[i % pool.length];
      const a2 = pool[(i + 2) % pool.length];
      const focusByStage = i === 0 ? `Introdução e sondagem — ${obj.toLowerCase()}`
        : i === cfg.sessions - 1 ? `Consolidação e avaliação — ${obj.toLowerCase()}`
        : `Desenvolvimento ${i} — ${obj.toLowerCase()}`;
      return {
        focus: focusByStage,
        activities: [a1, a2],
        materiais: (cfg.materiais.length ? cfg.materiais : ["Material impresso"]).slice(0, 3),
        obs: i === cfg.sessions - 1 ? "Registrar evolução e definir metas seguintes no prontuário." : "Observar engajamento e ajustar nível conforme resposta.",
      };
    });
    return {
      title: `Plano de ${obj}`,
      goal: `Desenvolver ${obj.toLowerCase()} por meio de ${cfg.sessions} sessões de ${cfg.tempo.replace(" minutos", " min")}, com frequência ${cfg.freq.toLowerCase()} e nível ${cfg.nivel.toLowerCase()} de intervenção, ajustando o desafio conforme a resposta da criança.`,
      sessions,
    };
  }

  /* ---------------- Seletor de paciente com busca ---------------- */
  function PatientPicker({ value, onChange }) {
    const [q, setQ] = useState("");
    const [open, setOpen] = useState(false);
    const patients = window.PATIENTS || [];
    const selected = patients.find((p) => p.id === value);
    const list = patients.filter((p) => p.name.toLowerCase().includes(q.toLowerCase().trim()));

    return (
      <div className="patient-picker">
        {open && <div className="pp-backdrop" onClick={() => setOpen(false)}></div>}
        <div className="filter-search" style={{ boxShadow: "none", position: "relative" }} onClick={() => setOpen(true)}>
          <Icon name="search" size={18} />
          <input
            placeholder="Digite o nome do paciente para buscar..."
            value={open ? q : (selected ? selected.name : "")}
            onChange={(e) => { setQ(e.target.value); setOpen(true); if (value) onChange(""); }}
            onFocus={() => setOpen(true)}
          />
          {selected && !open && (
            <button className="pp-clear" onClick={(e) => { e.stopPropagation(); onChange(""); setQ(""); }} aria-label="Limpar"><Icon name="x" size={16} /></button>
          )}
        </div>
        {open && (
          <div className="pp-pop">
            {list.length === 0 && <div className="pp-empty">Nenhum paciente encontrado.</div>}
            {list.map((p) => (
              <button key={p.id} className={"pp-opt" + (value === p.id ? " on" : "")} onClick={() => { onChange(p.id); setOpen(false); setQ(""); }}>
                <span className={"avatar sm " + p.color}>{p.initials}</span>
                <span className="pp-meta"><b>{p.name}</b><span>{p.age} anos · {p.grade}</span></span>
                {value === p.id && <Icon name="clipboardCheck" size={16} stroke={2.6} className="ck" />}
              </button>
            ))}
          </div>
        )}
      </div>
    );
  }

  /* ---------------- FORM ---------------- */
  function PlanForm({ onGenerate }) {
    const [pid, setPid] = useState("");
    const [tempo, setTempo] = useState("");
    const [freq, setFreq] = useState("");
    const [tipo, setTipo] = useState("");
    const [objEsp, setObjEsp] = useState("");
    const [nivel, setNivel] = useState("Intermediário");
    const [materiais, setMateriais] = useState([]);
    const [foco, setFoco] = useState("");
    const [sessions, setSessions] = useState(3);

    const objOptions = OBJ_MAP[tipo] || [];
    const ready = pid && tipo && objEsp && nivel;
    /* Planejamento é ilimitado em todos os planos: o que barra gerar é
       o modo leitura, e a faixa do topo já explica o porquê. */
    const semCota = !window.usarAssinatura().podeEscrever;

    function toggleMat(m) {
      setMateriais((s) => s.includes(m) ? s.filter((x) => x !== m) : [...s, m]);
    }

    return (
      <div className="form-wrap">
        <div className="crumb">Dashboard <Icon name="chevR" size={13} /> <span className="cur">Planejamentos</span></div>
        <div className="page-head">
          <div>
            <h1><Icon name="sparkles" size={25} /> Novo planejamento</h1>
            <p className="sub">Preencha os dados da criança para gerar um planejamento personalizado com IA.</p>
          </div>
        </div>

        <div className="form-card">
          <div className="sec-head"><span className="si"><Icon name="users" size={18} /></span> Identificação do paciente</div>
          <div className="fld" style={{ marginBottom: 0 }}>
            <label>Buscar paciente <span className="req">*</span></label>
            <PatientPicker value={pid} onChange={setPid} />
          </div>
        </div>

        <div className="form-card">
          <div className="sec-head"><span className="si"><Icon name="fileText" size={18} /></span> Configuração do plano</div>
          <div className="grid-2">
            <div className="fld">
              <label>Tempo de sessão</label>
              <select className="ctrl" value={tempo} onChange={(e) => setTempo(e.target.value)}>
                <option value="">Selecione...</option>{TEMPOS.map((t) => <option key={t}>{t}</option>)}
              </select>
            </div>
            <div className="fld">
              <label>Frequência</label>
              <select className="ctrl" value={freq} onChange={(e) => setFreq(e.target.value)}>
                <option value="">Selecione...</option>{FREQS.map((f) => <option key={f}>{f}</option>)}
              </select>
            </div>
            <div className="fld">
              <label>Tipo de objetivo <span className="req">*</span></label>
              <select className="ctrl" value={tipo} onChange={(e) => { setTipo(e.target.value); setObjEsp(""); }}>
                <option value="">Selecione...</option>{Object.keys(OBJ_MAP).map((t) => <option key={t}>{t}</option>)}
              </select>
            </div>
            <div className="fld">
              <label>Objetivo específico <span className="req">*</span></label>
              <select className="ctrl" value={objEsp} onChange={(e) => setObjEsp(e.target.value)} disabled={!tipo}>
                <option value="">{tipo ? "Selecione..." : "Escolha o tipo primeiro"}</option>
                {objOptions.map((o) => <option key={o}>{o}</option>)}
              </select>
            </div>
          </div>

          <div className="fld">
            <label>Nível de intervenção <span className="req">*</span></label>
            <div className="nivel-grid">
              {NIVEIS.map((n) => (
                <button key={n.id} className={"nivel-card" + (nivel === n.id ? " on" : "")} onClick={() => setNivel(n.id)}>
                  <b><span className="rb"></span>{n.id}</b>
                  <p>{n.desc}</p>
                </button>
              ))}
            </div>
          </div>

          <div className="fld">
            <label>Materiais disponíveis</label>
            <div className="chips-select">
              {MATERIAIS.map((m) => (
                <button key={m} className={"chip-sel" + (materiais.includes(m) ? " on" : "")} onClick={() => toggleMat(m)}>
                  <span className="ck">{materiais.includes(m) && <Icon name="clipboardCheck" size={11} stroke={3} />}</span>{m}
                </button>
              ))}
            </div>
          </div>

          <div className="fld">
            <label>Foco da sessão <span style={{ color: "var(--text-3)", fontWeight: 600 }}>(opcional)</span></label>
            <textarea className="ctrl" maxLength={500} value={foco} onChange={(e) => setFoco(e.target.value)}
              placeholder="Ex: paciente gosta de temas com animais; já fez 2 sessões sobre tecnologia; retomando autonomia."></textarea>
            <div className="charcount">{foco.length}/500 caracteres</div>
          </div>

          <div className="fld" style={{ marginBottom: 0 }}>
            <label>Quantidade de sessões <span className="req">*</span></label>
            <div className="stepper">
              <button onClick={() => setSessions((s) => Math.max(1, s - 1))} disabled={sessions <= 1}><Icon name="x" size={18} stroke={2.5} style={{ transform: "rotate(45deg)" }} /></button>
              <span className="val">{sessions}</span>
              <button onClick={() => setSessions((s) => Math.min(10, s + 1))} disabled={sessions >= 10}><Icon name="plus" size={18} stroke={2.5} /></button>
              <span className="hint">1 a 10</span>
            </div>
          </div>
        </div>

        <div className="save-bar">
          <button className="btn btn-primary" disabled={!ready || semCota} style={{ opacity: (ready && !semCota) ? 1 : 0.5 }}
            onClick={() => onGenerate({ pid, patient: (window.PATIENTS.find((p) => p.id === pid) || {}).name || "", tempo: tempo || "50 minutos", freq: freq || "1x por semana", tipo, objEsp, nivel, materiais, foco, sessions })}>
            <Icon name="sparkles" size={18} /> {
              semCota
                ? "Assine para gerar planos"
                : `Gerar plano com ${sessions} ${sessions > 1 ? "sessões" : "sessão"}`
            }
          </button>
        </div>
      </div>
    );
  }

  /* ---------------- LOADING ---------------- */
  function PlanLoading({ onDone }) {
    const [step, setStep] = useState(0);
    const steps = ["Analisando o perfil do paciente", "Selecionando atividades por nível", "Estruturando as sessões", "Finalizando o planejamento"];
    useEffect(() => {
      const t1 = setInterval(() => setStep((s) => Math.min(steps.length, s + 1)), 480);
      const done = setTimeout(onDone, 2100);
      return () => { clearInterval(t1); clearTimeout(done); };
    }, []);
    return (
      <div className="gen-loading">
        <div>
          <div className="orb"><Icon name="sparkles" size={36} /></div>
          <h2>Gerando plano com a IA…</h2>
          <p>Isso leva alguns segundos.</p>
          <div className="gen-steps">
            {steps.map((s, i) => (
              <div key={i} className={"gen-step" + (i < step ? " done" : "")}>
                <span className="gi">{i < step ? <Icon name="clipboardCheck" size={13} stroke={3} /> : (i === step ? <span className="spin"></span> : i + 1)}</span>
                {s}
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  /* ---------------- RESULT ---------------- */
  function PlanResult({ plan, cfg, onNew, onBack, onOpenPatient }) {
    const [saved, setSaved] = useState(false);

    function save() {
      if (saved) return;
      window.addPlan(plan, cfg);
      setSaved(true);
    }

    return (
      <div className="form-wrap">
        <button className="pt-back" onClick={onBack}><Icon name="chevL" size={16} /> Novo planejamento</button>
        <div className="plan-hero">
          <span className="ai-badge"><Icon name="sparkles" size={13} /> GERADO COM EDUCARE IA</span>
          <h1>{plan.title}</h1>
          <div className="ph-meta">
            {cfg.patient && <span><Icon name="users" size={15} /> {cfg.patient}</span>}
            <span><Icon name="clipboardList" size={15} /> Nível {cfg.nivel}</span>
            <span><Icon name="fileText" size={15} /> {cfg.sessions} sessões</span>
            <span><Icon name="calendar" size={15} /> {cfg.freq}</span>
            <span><Icon name="clipboardCheck" size={15} /> {cfg.tempo}</span>
          </div>
        </div>

        <div className="plan-goal">
          <div className="k">Objetivo geral</div>
          <p>{plan.goal}</p>
        </div>

        <div className="panel-head" style={{ marginBottom: 12 }}>
          <h3>Sessões</h3>
          <div style={{ display: "flex", gap: 10 }}>
            <button className="btn btn-ghost btn-xs" onClick={onNew}><Icon name="sparkles" size={15} /> Gerar novamente</button>
            <button className="btn btn-ghost btn-xs"><Icon name="fileText" size={15} /> Exportar PDF</button>
          </div>
        </div>

        {plan.sessions.map((s, i) => (
          <div className="sess-card" key={i}>
            <div className="sc-head">
              <span className="sess-num">{i + 1}</span>
              <div className="sc-title"><b>Sessão {i + 1}</b><span>{s.focus}</span></div>
            </div>
            <div className="sc-block">
              <div className="lbl">Atividades</div>
              <ul className="sc-list">{s.activities.map((a, j) => <li key={j}>{a}</li>)}</ul>
            </div>
            <div className="sc-block">
              <div className="lbl">Materiais</div>
              <div className="sc-mat">{s.materiais.map((m) => <span className="chip" key={m}>{m}</span>)}</div>
            </div>
            <div className="sc-block">
              <div className="lbl">Observação clínica</div>
              <p style={{ fontSize: 13.5, color: "var(--text-2)", margin: 0, lineHeight: 1.5 }}>{s.obs}</p>
            </div>
          </div>
        ))}

        {saved && (
          <div className="save-ok" role="status">
            <span className="so-ic"><Icon name="clipboardCheck" size={18} stroke={2.6} /></span>
            <div>
              <b>Planejamento salvo!</b>
              <span>Vinculado ao prontuário{cfg.patient ? " de " + cfg.patient : ""}.</span>
            </div>
          </div>
        )}

        <div className="save-bar">
          {!saved ? (
            <button className="btn btn-primary" onClick={save}><Icon name="clipboardCheck" size={18} /> Salvar e vincular ao prontuário</button>
          ) : (
            <button className="btn btn-primary" onClick={() => onOpenPatient && cfg.pid && onOpenPatient(cfg.pid)}><Icon name="users" size={18} /> Ver no prontuário do aluno</button>
          )}
        </div>
      </div>
    );
  }

  function Planejamentos({ onOpenPatient }) {
    const [stage, setStage] = useState("form"); // form | loading | result
    const [cfg, setCfg] = useState(null);
    const [plan, setPlan] = useState(null);

    return (
      <>
        {stage === "form" && <PlanForm onGenerate={(c) => { setCfg(c); setStage("loading"); }} />}
        {stage === "loading" && <PlanLoading onDone={() => { setPlan(genPlan(cfg)); setStage("result"); }} />}
        {stage === "result" && <PlanResult plan={plan} cfg={cfg} onNew={() => setStage("loading")} onBack={() => setStage("form")} onOpenPatient={onOpenPatient} />}
      </>
    );
  }

  window.Planejamentos = Planejamentos;
  window.PatientPicker = PatientPicker;
})();