/* Devonew — Painel da Igreja · Trilha de Crescimento (jornada de discipulado) */
const { useState: useStateAJ } = React;

const jid = () => 'j' + Math.random().toString(36).slice(2, 7);

// gatilhos de conclusão — mapeiam para os sinais que o app do membro já calcula
const J_TRIGGERS = [
  { key: 'member', label: 'Automática · ao entrar para a igreja', auto: true },
  { key: 'devo',   label: 'Automática · primeiro devocional', auto: true, goto: 'devocional', cta: 'Ir ao devocional' },
  { key: 'bible1', label: 'Automática · primeiro capítulo lido', auto: true, goto: 'biblia', cta: 'Ler a Bíblia' },
  { key: 'cell',   label: 'Automática · participa de uma célula', auto: true },
  { key: 'course', label: 'Automática · conclui um curso', auto: true, goto: 'cursos', cta: 'Ver cursos' },
  { key: 'manual', label: 'Manual · o membro confirma (ganha XP)', auto: false },
];
const J_ICONS = ['flame', 'book', 'bible', 'users', 'shield', 'grad', 'hands', 'sparkle', 'pray', 'moon', 'heart', 'church', 'gift', 'trophy'];

// converte os passos do editor → formato que o app do membro entende (auto/manual + goto/cta + versículo + curso)
function bridgeJourney(steps) {
  return (steps || []).map((s) => {
    const tr = J_TRIGGERS.find((t) => t.key === s.trigger) || J_TRIGGERS[0];
    const base = { id: s.id, name: s.name, desc: s.desc, icon: s.icon };
    if (s.verse) { base.verse = s.verse; base.verseRef = s.verseRef || ''; }
    if (s.trigger === 'manual') return { ...base, manual: true, xp: Math.max(0, s.xp || 0) };
    const out = { ...base, auto: s.trigger };
    if (s.trigger === 'course' && s.courseId) out.courseId = s.courseId;
    if (tr.goto) { out.goto = tr.goto; out.cta = (s.trigger === 'course' && s.courseId) ? 'Ver curso' : tr.cta; }
    return out;
  });
}

/* ---------- prévia ao vivo · simula um membro novo (decisão feita, próxima etapa em aberto) ---------- */
function JourneyPreview({ steps }) {
  const sim = { member: true, devo: false, bible1: false, cell: false, course: false };
  const stepsArr = steps || [];
  const isDone = (s) => s.trigger === 'manual' ? false : !!sim[s.trigger];
  const firstOpen = stepsArr.findIndex((s) => !isDone(s));
  const doneCount = stepsArr.filter(isDone).length;
  const pct = stepsArr.length ? Math.round(doneCount / stepsArr.length * 100) : 0;

  return (
    <div className="jprev">
      <div className="jprev-notch"><span/></div>
      <div className="jprev-screen">
        <div className="jprev-eyebrow">Prévia · app do membro</div>
        <div className="jprev-head">Sua trilha de discipulado</div>
        <div className="jprev-meta">{doneCount} de {stepsArr.length} etapas · {pct}%</div>
        <div className="bar" style={{ margin: '12px 0 18px' }}><i style={{ width: pct + '%' }}/></div>
        <div className="journey">
          {stepsArr.map((s, i) => {
            const done = isDone(s);
            const current = i === firstOpen;
            const active = !done && (s.trigger === 'manual' || current);
            const tr = J_TRIGGERS.find((t) => t.key === s.trigger) || {};
            return (
              <div key={s.id} className={`j-step ${done ? 'done' : active ? 'current' : 'locked'}`}>
                <div className="j-rail"><div className="j-node"><Icon name={done ? 'check' : active ? s.icon : 'lock'} size={15}/></div></div>
                <div className="j-body">
                  <div className="j-name">{s.name || 'Etapa'}</div>
                  {s.desc && <div className="j-desc">{s.desc}</div>}
                  {active && s.verse && <div className="j-verse">“{s.verse}”{s.verseRef && <span className="j-verse-ref"> · {s.verseRef}</span>}</div>}
                  {done && <span className="j-tag">Concluído ✓</span>}
                  {active && s.trigger === 'manual' && <span className="jprev-btn primary"><Icon name="check" size={13}/>Marcar{s.xp ? ` · +${s.xp} XP` : ''}</span>}
                  {active && s.trigger !== 'manual' && current && tr.goto && <span className="jprev-btn ghost">{tr.cta || 'Abrir'}</span>}
                </div>
              </div>
            );
          })}
          {stepsArr.length === 0 && <div className="muted" style={{ fontSize: 13 }}>Adicione etapas para ver a prévia.</div>}
        </div>
      </div>
    </div>
  );
}

/* ---------- funil de progresso da congregação (dados ilustrativos) ---------- */
function hashStr(s) { let h = 0; for (let i = 0; i < (s || '').length; i++) h = (h * 31 + s.charCodeAt(i)) >>> 0; return h; }
function funnelData(steps, total) {
  let cur = total;
  return (steps || []).map((s, i) => {
    if (i === 0) cur = Math.round(total * 0.99);
    else {
      const h = (hashStr(s.id) % 1000) / 1000;          // jitter determinístico por etapa
      let retain = 0.88 - i * 0.012 - (s.trigger === 'manual' ? 0.11 : 0.02) + (h - 0.5) * 0.05;
      retain = Math.max(0.55, Math.min(0.97, retain));
      cur = Math.round(cur * retain);
    }
    return { step: s, count: Math.max(0, cur) };
  });
}

function JourneyProgress({ steps, memberCount, published }) {
  const total = memberCount || 0;
  const rows = funnelData(steps, total);
  const top = rows.length ? rows[0].count : 0;
  const last = rows.length ? rows[rows.length - 1].count : 0;
  const completionPct = top ? Math.round(last / top * 100) : 0;
  let gargaloIdx = -1, maxDrop = -1;
  for (let i = 1; i < rows.length; i++) { const d = rows[i - 1].count - rows[i].count; if (d > maxDrop) { maxDrop = d; gargaloIdx = i; } }

  return (
    <div>
      {!published && (
        <div className="panel" style={{ marginBottom: 16 }}>
          <div className="panel-pad muted" style={{ fontSize: 13 }}><Icon name="warning" size={15} style={{ verticalAlign: -2 }}/> A trilha está como rascunho — publique no Editor para os membros percorrerem estas etapas.</div>
        </div>
      )}

      <div className="panel" style={{ marginBottom: 18 }}>
        <div className="panel-pad" style={{ display: 'flex', gap: 28, flexWrap: 'wrap', alignItems: 'center' }}>
          <div className="clib-stat"><div className="n" style={{ fontSize: 22 }}>{top.toLocaleString('pt-BR')}</div><div className="l">membros na trilha</div></div>
          <div className="clib-stat"><div className="n" style={{ fontSize: 22 }}>{completionPct}%</div><div className="l">concluíram a jornada</div></div>
          <div className="clib-stat"><div className="n" style={{ fontSize: 22 }}>{rows.length}</div><div className="l">etapas</div></div>
          <div style={{ flex: 1 }}/>
          {gargaloIdx >= 0 && <div className="funnel-flag"><Icon name="warning" size={14}/>Maior gargalo:<b style={{ marginLeft: 5 }}>{rows[gargaloIdx].step.name}</b></div>}
        </div>
      </div>

      <div className="sec-h">Funil de discipulado</div>
      <div className="panel"><div className="panel-pad">
        {rows.map((r, i) => {
          const pct = top ? Math.round(r.count / top * 100) : 0;
          const isGargalo = i === gargaloIdx;
          const drop = i > 0 ? rows[i - 1].count - r.count : 0;
          return (
            <div className={`funnel-row ${isGargalo ? 'gargalo' : ''}`} key={r.step.id}>
              <span className="funnel-ico"><Icon name={r.step.icon} size={15}/></span>
              <div className="funnel-main">
                <div className="funnel-top">
                  <span className="funnel-name">{r.step.name}{r.step.trigger === 'manual' && <span className="funnel-tag">manual</span>}</span>
                  <span className="funnel-num">{r.count.toLocaleString('pt-BR')} · {pct}%</span>
                </div>
                <div className="funnel-bar"><i style={{ width: pct + '%' }}/></div>
                {i > 0 && drop > 0 && <span className="funnel-drop">−{drop.toLocaleString('pt-BR')} desde a etapa anterior{isGargalo ? ' · maior queda' : ''}</span>}
              </div>
            </div>
          );
        })}
        {rows.length === 0 && <div className="muted">Adicione etapas no Editor para ver o funil.</div>}
      </div></div>

      <p className="muted" style={{ fontSize: 12, marginTop: 14 }}>
        <Icon name="activity" size={13} style={{ verticalAlign: -2 }}/> Dados ilustrativos da congregação. Numa versão com backend, este painel reflete o progresso real de cada membro.
      </p>
    </div>
  );
}

function TrilhaAdminScreen({ journey, setJourney, resetJourney, courses, memberCount, toast }) {
  const [tab, setTab] = useStateAJ('editor');
  const steps = journey.steps || [];
  const published = journey.status === 'publicada';
  const mutate = (fn) => setJourney({ ...journey, steps: fn(steps.map((s) => ({ ...s }))) });
  const setStep = (i, k, v) => mutate((ss) => ss.map((s, j) => j === i ? { ...s, [k]: v } : s));
  const addStep = () => mutate((ss) => [...ss, { id: jid(), name: 'Nova etapa', desc: '', icon: 'sparkle', trigger: 'manual', xp: 20 }]);
  const delStep = (i) => mutate((ss) => ss.filter((_, j) => j !== i));
  const move = (i, d) => mutate((ss) => { const a = [...ss], j = i + d; if (j < 0 || j >= a.length) return a; [a[i], a[j]] = [a[j], a[i]]; return a; });
  const togglePub = () => {
    const next = published ? 'rascunho' : 'publicada';
    setJourney({ ...journey, status: next });
    toast(next === 'publicada' ? 'Trilha publicada — já aparece no app dos membros ✓' : 'Trilha despublicada — o app volta à trilha padrão');
  };

  const manualCount = steps.filter((s) => s.trigger === 'manual').length;
  const pubCourses = (courses || []).filter((c) => c.status === 'publicado');

  return (
    <div className="awrap">
      <div className="lead-tabs" style={{ marginBottom: 18 }}>
        <button className={`lead-tab ${tab === 'editor' ? 'active' : ''}`} onClick={() => setTab('editor')}>Editor</button>
        <button className={`lead-tab ${tab === 'progresso' ? 'active' : ''}`} onClick={() => setTab('progresso')}>Progresso da igreja</button>
      </div>

      {tab === 'progresso' && <JourneyProgress steps={steps} memberCount={memberCount} published={published}/>}

      {tab === 'editor' && (<>
      <p className="muted" style={{ fontSize: 13.5, margin: '0 0 16px' }}>
        <Icon name="sparkle" size={15} style={{ verticalAlign: -2 }}/> A trilha é o caminho de discipulado que cada membro percorre na aba <b>Trilha</b> do app. Etapas <b>automáticas</b> se concluem sozinhas pelo uso do app; etapas <b>manuais</b> o membro confirma e ganha XP.
      </p>

      {/* barra de publicação */}
      <div className="panel" style={{ marginBottom: 18 }}>
        <div className="panel-pad" style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
          <span className={`st ${published ? 'st-pub' : 'st-draft'}`}>{published ? 'Publicada' : 'Rascunho'}</span>
          <span className="muted" style={{ fontSize: 12.5, flex: 1, minWidth: 170 }}>
            {published ? `${steps.length} etapas no app dos membros · ${manualCount} manuais.` : 'O app está usando a trilha padrão até você publicar.'}
          </span>
          <button className="btn btn-quiet btn-sm" onClick={() => { if (confirm('Restaurar a trilha padrão? As suas alterações serão substituídas.')) { resetJourney(); toast('Trilha padrão restaurada'); } }}>
            <Icon name="activity" size={15}/>Restaurar padrão
          </button>
          <button className={`btn btn-sm ${published ? 'btn-ghost' : 'btn-primary'}`} onClick={togglePub}>
            {published ? <><Icon name="eye" size={15}/>Despublicar</> : <><Icon name="megaphone" size={15}/>Publicar trilha</>}
          </button>
        </div>
      </div>

      <div className="jlayout">
        {/* coluna do editor */}
        <div className="jcol-edit">
          <div className="sec-h">Etapas da jornada · {steps.length}</div>

          {steps.length === 0 && <div className="panel"><div className="panel-pad muted">Nenhuma etapa. Clique em “Adicionar etapa”.</div></div>}

          {steps.map((s, i) => (
            <div className="module-block jstep" key={s.id}>
              <div className="module-bar">
                <span className="jnum">{i + 1}</span>
                <span className="l-ico"><Icon name={s.icon} size={14}/></span>
                <input className="inp flex1" value={s.name} onChange={(e) => setStep(i, 'name', e.target.value)}/>
                <button className="del-btn" onClick={() => move(i, -1)} disabled={i === 0} aria-label="subir"><Icon name="chevronDown" size={15} style={{ transform: 'rotate(180deg)' }}/></button>
                <button className="del-btn" onClick={() => move(i, 1)} disabled={i === steps.length - 1} aria-label="descer"><Icon name="chevronDown" size={15}/></button>
                <button className="del-btn" onClick={() => { if (confirm('Remover esta etapa?')) delStep(i); }} aria-label="remover etapa"><Icon name="trash" size={15}/></button>
              </div>
              <div className="jstep-body">
                <div>
                  <span className="field-lab">Descrição</span>
                  <input className="inp" placeholder="O que o membro faz nesta etapa…" value={s.desc || ''} onChange={(e) => setStep(i, 'desc', e.target.value)}/>
                </div>
                <div className="inp-row" style={{ marginTop: 10, alignItems: 'flex-end' }}>
                  <div className="flex1">
                    <span className="field-lab">Como conclui</span>
                    <select className="inp" value={s.trigger} onChange={(e) => setStep(i, 'trigger', e.target.value)}>
                      {J_TRIGGERS.map((t) => <option key={t.key} value={t.key}>{t.label}</option>)}
                    </select>
                  </div>
                  {s.trigger === 'course' && (
                    <div className="flex1">
                      <span className="field-lab">Curso</span>
                      <select className="inp" value={s.courseId || ''} onChange={(e) => setStep(i, 'courseId', e.target.value)}>
                        <option value="">— Qualquer curso —</option>
                        {pubCourses.map((c) => <option key={c.id} value={c.id}>{c.title}</option>)}
                      </select>
                    </div>
                  )}
                  {s.trigger === 'manual' && (
                    <div style={{ width: 130 }}>
                      <span className="field-lab">XP ao concluir</span>
                      <input className="inp" type="number" min="0" step="5" value={s.xp == null ? '' : s.xp}
                        onChange={(e) => setStep(i, 'xp', e.target.value === '' ? 0 : Math.max(0, parseInt(e.target.value) || 0))}/>
                    </div>
                  )}
                </div>
                <div className="inp-row" style={{ marginTop: 10 }}>
                  <div className="flex1">
                    <span className="field-lab">Versículo (opcional)</span>
                    <input className="inp" placeholder="Texto do versículo…" value={s.verse || ''} onChange={(e) => setStep(i, 'verse', e.target.value)}/>
                  </div>
                  <div style={{ width: 160 }}>
                    <span className="field-lab">Referência</span>
                    <input className="inp" placeholder="João 3.16" value={s.verseRef || ''} onChange={(e) => setStep(i, 'verseRef', e.target.value)}/>
                  </div>
                </div>
                <div style={{ marginTop: 10 }}>
                  <span className="field-lab">Ícone</span>
                  <div className="jicons">
                    {J_ICONS.map((ic) => (
                      <button key={ic} className={`jicon ${s.icon === ic ? 'on' : ''}`} onClick={() => setStep(i, 'icon', ic)} aria-label={ic}><Icon name={ic} size={17}/></button>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          ))}

          <button className="btn btn-ghost" onClick={addStep} style={{ marginTop: 4 }}><Icon name="plus" size={16}/>Adicionar etapa</button>

          <div className="cedit-actions">
            <div className="flex1"></div>
            <span className="muted" style={{ fontSize: 12.5 }}><Icon name="check" size={14} style={{ verticalAlign: -2, color: 'var(--accent)' }}/> Salvo automaticamente</span>
          </div>
        </div>

        {/* coluna da prévia ao vivo */}
        <aside className="jcol-prev">
          <JourneyPreview steps={steps}/>
        </aside>
      </div>
      </>)}
    </div>
  );
}

Object.assign(window, { TrilhaAdminScreen, JourneyPreview, JourneyProgress, bridgeJourney });