// tela-orar.jsx — Orar: orações por tema + roteiros de conversa + modo leitura.

const FEATURED_PRAYER_ID = 'p2';

function temaOracao(id) {
  return PRAYER_THEMES.find(t => t.id === id) || { label: 'Oração', icon: 'hands' };
}

function textoCurto(txt, max = 118) {
  const clean = (txt || '').replace(/\s+/g, ' ').trim();
  return clean.length > max ? clean.slice(0, max - 1).trim() + '…' : clean;
}

function FolhaOracao({ prayer, open, onClose }) {
  const store = useStore();
  if (!prayer) return null;
  const fav = store.state.favPrayers.includes(prayer.id);
  const tema = temaOracao(prayer.theme);
  return (
    <Sheet open={open} onClose={onClose}>
      <div className="prayer-sheet prayer-sanctuary">
        <div className="spread">
          <span className="tag"><Icon name={tema.icon} size={12} /> {tema.label}</span>
          <div className="row" style={{ gap: 4 }}>
            <FavBtn on={fav} onToggle={() => store.actions.toggleFavPrayer(prayer.id)} />
            <button className="iconbtn" onClick={onClose} aria-label="Fechar"><Icon name="close" size={20} /></button>
          </div>
        </div>

        <div className="prayer-sheet-mark" aria-hidden="true"><Icon name={tema.icon} size={26} /></div>
        <h2 className="serif prayer-sheet-title">{prayer.title}</h2>
        <div className="prayer-read">
          {prayer.text.split(/\s*Amém\.?\s*$/)[0].trim()}
          <span className="prayer-amen">Amém.</span>
        </div>

        <button className={'btn btn-full ' + (fav ? 'btn-soft' : 'btn-gold')} style={{ marginTop: 24 }} onClick={() => store.actions.toggleFavPrayer(prayer.id)}>
          <Icon name="heart" size={18} fill={fav} /> {fav ? 'Favoritada' : 'Favoritar'}
        </button>
        <div className="kicker tc" style={{ marginTop: 18 }}>Disponível offline</div>
      </div>
    </Sheet>
  );
}

function OrarSwitch({ isRoteiros }) {
  return (
    <div className="orar-switch" role="tablist" aria-label="Alternar entre orações e roteiros">
      <button role="tab" aria-selected={!isRoteiros} className={!isRoteiros ? 'on' : ''} onClick={() => nav('/orar')}>
        <Icon name="hands" size={16} /> Orações
      </button>
      <button role="tab" aria-selected={isRoteiros} className={isRoteiros ? 'on' : ''} onClick={() => nav('/orar/roteiros')}>
        <Icon name="message" size={16} /> Roteiros
      </button>
    </div>
  );
}

function OrarHero({ isRoteiros, onOpenFeatured }) {
  const featured = PRAYERS.find(p => p.id === FEATURED_PRAYER_ID) || PRAYERS[0];
  return (
    <section className="orar-hero rise-in">
      <img className="orar-hero-img" src="assets/oracoes-capa.webp" alt="" aria-hidden="true" />
      <div className="orar-hero-veil" />
      <div className="orar-hero-body">
        <div className="spread" style={{ alignItems: 'flex-start' }}>
          <span className="tag"><Icon name="hands" size={12} /> Orar hoje</span>
          <span className="tag tag-plain">{PRAYERS.length} orações</span>
        </div>
        <div className="orar-hero-copy">
          <Eyebrow className="muted">{isRoteiros ? 'Conversa guiada' : 'Santuário de oração'}</Eyebrow>
          <h1 className="serif">{isRoteiros ? 'Conduzam a conversa sem virar guerra.' : 'Uma oração antes da próxima reação.'}</h1>
          <p>{isRoteiros ? 'Roteiros curtos para falar de assuntos difíceis com pausa, escuta e direção.' : textoCurto(featured.text, 132)}</p>
        </div>
        <div className="orar-hero-actions">
          <button className="btn btn-gold" onClick={() => isRoteiros ? nav('/roteiro/r1') : onOpenFeatured()}>
            <Icon name={isRoteiros ? 'message' : 'hands'} size={17} /> {isRoteiros ? 'Abrir primeiro roteiro' : 'Orar agora'}
          </button>
          <button className="btn btn-soft" onClick={() => nav(isRoteiros ? '/orar' : '/orar/roteiros')}>
            {isRoteiros ? 'Ver orações' : 'Ver roteiros'}
          </button>
        </div>
      </div>
    </section>
  );
}

function OracaoCard({ prayer, fav, onOpen, index }) {
  const tema = temaOracao(prayer.theme);
  return (
    <button className="oracao-card card-tap" style={{ '--i': index }} onClick={onOpen} aria-label={prayer.title}>
      <div className="oracao-card-mark"><Icon name={tema.icon} size={19} /></div>
      <div className="oracao-card-body">
        <span className="tag tag-plain">{tema.label}</span>
        <h3 className="serif">{prayer.title}</h3>
        <p>{textoCurto(prayer.text)}</p>
        <div className="oracao-card-foot">
          <span>Abrir oração</span>
          {fav ? <Icon name="heart" size={17} fill /> : <Icon name="chevron" size={17} />}
        </div>
      </div>
    </button>
  );
}

function RoteiroFlow({ compact = false }) {
  const steps = [['01', 'Abaixar o tom'], ['02', 'Ouvir inteiro'], ['03', 'Combinar um passo']];
  return (
    <div className={'roteiro-flow' + (compact ? ' compact' : '')}>
      {steps.map(([n, label]) => (
        <div key={n}>
          <span>{n}</span>
          <strong>{label}</strong>
        </div>
      ))}
    </div>
  );
}

function RoteiroCard({ roteiro, index }) {
  return (
    <button className="roteiro-card card-tap" style={{ '--i': index }} onClick={() => nav('/roteiro/' + roteiro.id)} aria-label={roteiro.title}>
      <div className="roteiro-card-index mono">{String(index + 1).padStart(2, '0')}</div>
      <div className="roteiro-card-body">
        <div className="row" style={{ gap: 7, flexWrap: 'wrap' }}>
          <span className="tag"><Icon name="message" size={12} /> conversa</span>
          {roteiro.gate && <span className="tag tag-plain"><Icon name="shield" size={11} /> sensível</span>}
        </div>
        <h3 className="serif">{roteiro.title}</h3>
        <p>{roteiro.objective}</p>
      </div>
      <Icon name="chevron" size={18} color="var(--faint)" />
    </button>
  );
}

function TelaOrar({ tab = 'oracoes' }) {
  const store = useStore();
  const [theme, setTheme] = useState('todas');
  const [reading, setReading] = useState(null);

  const isRoteiros = tab === 'roteiros';
  const favs = PRAYERS.filter(p => store.state.favPrayers.includes(p.id));
  const list = theme === 'todas' ? PRAYERS : theme === 'favoritas' ? favs : PRAYERS.filter(p => p.theme === theme);
  const featured = PRAYERS.find(p => p.id === FEATURED_PRAYER_ID) || PRAYERS[0];

  return (
    <div className="col orar-view">
      <OrarHero isRoteiros={isRoteiros} onOpenFeatured={() => setReading(featured)} />
      <OrarSwitch isRoteiros={isRoteiros} />

      {!isRoteiros ? (
        <>
          <div className="scroll-x orar-filters">
            <button className={'pill' + (theme === 'todas' ? ' on' : '')} onClick={() => setTheme('todas')}>Todas</button>
            {favs.length > 0 && <button className={'pill' + (theme === 'favoritas' ? ' on' : '')} onClick={() => setTheme('favoritas')}><Icon name="heart" size={13} fill /> Favoritas</button>}
            {PRAYER_THEMES.map(t => (
              <button key={t.id} className={'pill' + (theme === t.id ? ' on' : '')} onClick={() => setTheme(t.id)}>
                <Icon name={t.icon} size={14} /> {t.label}
              </button>
            ))}
          </div>

          <div className="orar-section-head">
            <div>
              <Eyebrow className="muted">Biblioteca de oração</Eyebrow>
              <h2 className="serif">{theme === 'todas' ? 'Escolha o tom do coração.' : theme === 'favoritas' ? 'Suas orações salvas.' : temaOracao(theme).label}</h2>
            </div>
            <span className="tag tag-plain">{list.length}</span>
          </div>

          <div className="oracao-grid">
            {list.map((p, i) => (
              <OracaoCard key={p.id} prayer={p} fav={store.state.favPrayers.includes(p.id)} index={i} onOpen={() => setReading(p)} />
            ))}
            {list.length === 0 && <div className="oracao-empty">Nenhuma oração favoritada ainda. Toque no coração para salvar.</div>}
          </div>
        </>
      ) : (
        <>
          <div className="roteiros-intro">
            <RoteiroFlow />
          </div>
          <div className="roteiro-list">
            {SCRIPTS.map((r, i) => <RoteiroCard key={r.id} roteiro={r} index={i} />)}
          </div>
        </>
      )}

      <FolhaOracao prayer={reading} open={!!reading} onClose={() => setReading(null)} />
    </div>
  );
}

function TelaRoteiro({ id }) {
  const r = SCRIPTS.find(s => s.id === id);
  if (!r) return <div className="col" style={{ paddingTop: 40 }}>Roteiro não encontrado.</div>;
  return (
    <div className="col roteiro-page">
      <section className="roteiro-detail-hero">
        <button className="btn btn-soft btn-sm" onClick={() => nav('/orar/roteiros')}><Icon name="back" size={15} /> Roteiros</button>
        <span className="tag"><Icon name="message" size={13} /> Roteiro de conversa</span>
        <h1 className="serif">{r.title}</h1>
        <p>{r.objective}</p>
        <RoteiroFlow compact />
      </section>

      {r.gate && (
        <div className="notice" style={{ marginTop: 16 }}>
          <Icon name="shield" size={18} className="ico" />
          <span>{COMPLIANCE}</span>
        </div>
      )}

      <div className="roteiro-section-title">
        <Eyebrow className="muted">Perguntas-guia</Eyebrow>
        <h2 className="serif">Pergunte devagar.</h2>
      </div>
      <div className="roteiro-questions">
        {r.questions.map((q, i) => (
          <div key={i} className="roteiro-question">
            <span className="mono">{String(i + 1).padStart(2, '0')}</span>
            <p>{q}</p>
          </div>
        ))}
      </div>

      <div className="roteiro-section-title">
        <Eyebrow className="muted">Como conduzir</Eyebrow>
        <h2 className="serif">Mantenham o centro.</h2>
      </div>
      <div className="roteiro-tips">
        {r.tips.map((t, i) => (
          <div key={i}>
            <Icon name="check" size={19} color="var(--accent)" />
            <span>{t}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { TelaOrar, TelaRoteiro, FolhaOracao });