// Prayer tab — 4 columns per page, inline-editable. Add/remove items, add pages.
function PrayerTab({ pages, setPages, canEdit, lastUpdate, onTouch }){
  const [pi, setPi] = React.useState(0);
  const page = pages[pi] || [];

  function commit(updater){
    setPages(prev => {
      const next = prev.map(p => p.map(c => ({ ...c, items:[...c.items] })));
      updater(next);
      return next;
    });
    onTouch && onTouch();
  }

  const setTitle = (ci, val)=> commit(n => { n[pi][ci].title = val; });
  const setItem  = (ci, ii, val)=> commit(n => { n[pi][ci].items[ii] = val; });
  const addItem  = (ci)=> commit(n => { n[pi][ci].items.push('New item'); });
  const delItem  = (ci, ii)=> commit(n => { n[pi][ci].items.splice(ii,1); });
  const toggleMark = (ci)=> commit(n => { n[pi][ci].ordered = !n[pi][ci].ordered; });

  function addPage(){
    setPages(prev => [...prev, [
      {title:'NEW SECTION',ordered:true,items:['Item one']},
      {title:'NEW SECTION',ordered:true,items:['Item one']},
      {title:'NEW SECTION',ordered:true,items:['Item one']},
      {title:'NEW SECTION',ordered:true,items:['Item one']}
    ]]);
    onTouch && onTouch();
    setPi(pages.length);
  }

  return (
    <div className="prayer-wrap">
      <div className="prayer-cols">
        {page.map((col, ci)=>(
          <div className="pcol" key={ci}>
            <div className="pcol-title" contentEditable={canEdit} suppressContentEditableWarning
              onClick={canEdit?(e)=>{}:undefined}
              onBlur={e=>setTitle(ci, e.target.textContent)}>{col.title}</div>
            {col.lead && (
              <div className="pitem" style={{marginBottom:4}}>
                <span className="tx" contentEditable={canEdit} suppressContentEditableWarning
                  style={{fontStyle:'italic',color:'var(--muted)'}}
                  onBlur={e=>commit(n=>{ n[pi][ci].lead = e.target.textContent; })}>{col.lead}</span>
              </div>
            )}
            {col.items.map((it, ii)=>(
              <div className="pitem" key={ii}>
                <span className="mk">{col.ordered ? (ii+1)+'.' : '\u2022'}</span>
                <span className="tx" contentEditable={canEdit} suppressContentEditableWarning
                  onBlur={e=>setItem(ci, ii, e.target.textContent)}>{it}</span>
                {canEdit && <button className="del" title="Remove" onClick={()=>delItem(ci, ii)}>{'\u00d7'}</button>}
              </div>
            ))}
            {canEdit && (
              <div className="pcol-add">
                <button onClick={()=>addItem(ci)}>+ Add item</button>
                <button onClick={()=>toggleMark(ci)}>{col.ordered?'\u2022 Bullets':'1. Numbered'}</button>
              </div>
            )}
          </div>
        ))}
      </div>

      <div className="prayer-foot">
        <span>Last Update: {lastUpdate}</span>
        <div className="page-nav">
          {canEdit && <button className="pill ghost sm" onClick={addPage}>+ Add Page</button>}
          <span style={{fontSize:13}}>Page {pi+1} of {pages.length}</span>
          <button onClick={()=>setPi(p=>Math.max(0,p-1))} disabled={pi===0}>
            <span>Previous</span><span className="ar"><Icon name="arrowL" size={22}/></span>
          </button>
          <button onClick={()=>setPi(p=>Math.min(pages.length-1,p+1))} disabled={pi>=pages.length-1}>
            <span>Next</span><span className="ar"><Icon name="arrowR" size={22}/></span>
          </button>
        </div>
      </div>
    </div>
  );
}
window.PrayerTab = PrayerTab;