/* ---------------- modals ---------------- */
function openModal(html: string, wide?: boolean){
  $('#modalCard').innerHTML=html;
  $('#modalCard').classList.toggle('wide',!!wide);
  $('#modal').classList.add('on');
}
function closeModal(){
  $('#modal').classList.remove('on');
}

$('#modal').onclick=e=>{ if(e.target.id==='modal') closeModal(); };

$('#addFeed').onclick=()=>{
  openModal(`<h3>Add a feed</h3>
    <div class="field"><label>Feed URL</label><input type="text" id="nurl" placeholder="https://example.com/rss">
      <span class="hint">A Patreon token on its own adds every show from that creator.</span></div>
    <div class="field"><label>Folder (optional)</label><input type="text" id="nfolder" placeholder="Defaults to the feed title"></div>
    <div class="field"><label>Keywords (optional, comma separated)</label>
      <input type="text" id="nkw"><span class="hint">Only items matching a keyword are downloaded.</span></div>
    <label class="check"><input type="checkbox" id="nexp"> Allow items marked explicit</label>
    <div class="cardacts"><button class="btn ico" onclick="closeModal()" title="Cancel" aria-label="Cancel">${ICON.close}</button>
      <button class="btn ico primary" id="nsave" title="Add feed" aria-label="Add feed">${ICON.plus}</button></div>`);
  $('#nurl').focus();
  $('#nsave').onclick=async()=>{
    const url=$('#nurl').value.trim(); if(!url) return;
    $('#nsave').disabled=true; $('#nsave').title='Adding…';
    try{
      const r=await api('/api/feeds',{method:'POST',body:JSON.stringify({
        url, folder:$('#nfolder').value.trim()||null, allow_explicit:$('#nexp').checked,
        keywords:$('#nkw').value.split(',').map(s=>s.trim()).filter(Boolean)})});
      closeModal(); toast(r.existing?`Already subscribed as ${r.id}`:`Added ${r.id}`);
      await loadFeeds(true); selectFeed(r.id);
    }catch(e){ toast(e.message,true); $('#nsave').title='Add feed'; $('#nsave').disabled=false; }
  };
};

// What everyone here reads, you included, as a place to start. The rows carry an id, never a
// URL, so a key in someone's feed address never reaches this page.
const NONE_LISTED='<p class="hint">Nothing yet. Feeds people here subscribe to show up here.</p>';
async function listFeeds(url,box){
  let rows=[];
  try{ rows=await api(url)||[]; }catch{}
  box.innerHTML=rows.length?'':NONE_LISTED;
  for(const p of rows) box.appendChild(listedFeed(p,'childrow'));
  return rows.length;
}

/// One listed feed: a row in Popular and the Add a feed dialog, a tile in Directory's grid. The
/// parts are the same either way; the class lays them out.
function listedFeed(p,cls){
  const el=document.createElement('div');
  el.className=cls;
  el.innerHTML=artHTML(p.image,p.title||p.id)+
    `<div class="txt"><b>${esc(p.title||p.id)}</b>`+
    `<small class="meta">${p.subscribers} subscriber${p.subscribers===1?'':'s'}</small></div>`+
    // Green, as a downloaded file is: it is already yours. Plus, beside it, is the way to get one.
    (p.subscribed?`<span class="subbed" title="Subscribed: click to open it" aria-label="Subscribed">${ICON.subbed}</span>`
      :`<button class="btn ico" data-a="sub" title="Subscribe" aria-label="Subscribe">${ICON.subbed}</button>`);
  // Yours already: the row opens it instead.
  if(p.subscribed){ el.onclick=()=>{ closeModal(); selectFeed(p.id); }; return el; }
  $('[data-a="sub"]',el).onclick=async()=>{
    try{
      await api(`/api/popular/${encodeURIComponent(p.id)}`,{method:'POST'});
      closeModal(); toast(`Subscribed to ${p.title||p.id}`);
      await loadFeeds(true); selectFeed(p.id);
    }catch(e){ toast(e.message,true); }
  };
  return el;
}

// Directory's filters. Kept out here because a finished scan redraws the pane, which would
// otherwise clear them.
let dirKind='All', dirCat=null;
const KINDS={All:()=>true,Podcasts:p=>p.podcast,Blogs:p=>!p.podcast};
/// Directory: every listed feed as its cover art, under two filters that combine: what a feed is
/// (Podcasts, anything with audio or video, or Blogs, the rest) and what it is about (its iTunes
/// category, as chips). Both filter in place, without asking the server again.
async function renderDirectory(url,box){
  let rows=[];
  try{ rows=await api(url)||[]; }catch{}
  if(!rows.length){ box.innerHTML=NONE_LISTED; return 0; }
  const bar=$('#dirbar');
  // Only a filter when the server has both kinds.
  const both=rows.some(KINDS.Podcasts)&&rows.some(KINDS.Blogs);
  const btn=(k,v,on)=>`<button type="button" data-${k}="${esc(v)}" class="${on?'on':''}" aria-pressed="${on}">${esc(v)}</button>`;
  const draw=()=>{
    if(!both) dirKind='All';
    const ofKind=rows.filter(KINDS[dirKind]);
    // No empty chips: only the categories among the feeds the kind lets through.
    const cats=[...new Set(ofKind.map(p=>p.category).filter(Boolean))].sort();
    if(!cats.includes(dirCat)) dirCat=null;
    bar.innerHTML=
      (both?`<div class="tabs" role="group" aria-label="Kind">${Object.keys(KINDS).map(k=>btn('kind',k,k===dirKind)).join('')}</div>`:'')+
      (cats.length?`<div class="chips" role="group" aria-label="Category">${cats.map(c=>btn('cat',c,c===dirCat)).join('')}</div>`:'');
    // A picked chip lifts on a second press. Everything is redrawn, so the keyboard goes back to
    // the button just pressed.
    for(const b of $$('button',bar)) b.onclick=()=>{
      const k=b.dataset.kind!=null?'kind':'cat', v=b.dataset[k];
      if(k==='kind') dirKind=v; else dirCat=dirCat===v?null:v;
      draw(); $(`[data-${k}="${CSS.escape(v)}"]`,bar)?.focus();
    };
    box.innerHTML='';
    for(const p of ofKind.filter(p=>!dirCat||p.category===dirCat)) box.appendChild(listedFeed(p,'tile'));
  };
  draw();
  return rows.length;
}

/// Directory and Popular open in the main pane, as the original's Directory did.
async function renderListed(v){
  const box=$('#content');
  box.classList.add('plain');
  $('#tbRemove').disabled=true;
  syncTools(null);
  $('#epSearch').placeholder='Search items…';
  const listening=v===VIEWS[':listening'], grid=v===VIEWS[':directory'];
  box.innerHTML=`
    <div class="fhead slim">
      <div class="art">${v.icon}</div>
      <div class="meta"><h2>${v.title}</h2>
        <div class="sub">${v.blurb}${listening?'':' Everyone counts, you included. Private feeds are never listed.'}</div></div>
    </div>
    ${grid?'<div class="dirbar" id="dirbar"></div>':''}
    <div class="${grid?'tiles':'childlist'}" id="${listening?'listening':'popular'}"><p class="hint">Loading…</p></div>`;
  $('#count').textContent=v.title;
  const n=await (listening?renderListening:grid?renderDirectory:listFeeds)(v.url,$(listening?'#listening':'#popular',box));
  if(VIEWS[S.feed]===v) $('#count').textContent=`${v.title}: ${plural(n,listening?'episode':'feed')}`;
}

/// Currently Listening: episodes you started and have not finished, across every feed you
/// subscribe to. A row resumes the episode in the player bar on click -- a shortcut back to
/// where you left off, not another way to browse. The one in the player pauses instead.
async function renderListening(url,box){
  let rows=[];
  try{ rows=(await api(url)).entries||[]; }catch{}
  box.innerHTML=rows.length?'':'<p class="hint">Nothing in progress. Episodes you start and do not finish show up here.</p>';
  for(const e of rows){
    // Carries its episode, for paintListenRow to repaint as the player moves.
    const el: HTMLDivElement & {entry?: any}=document.createElement('div');
    el.className='childrow';
    el.entry=e;
    el.innerHTML=artHTML(e.image||feedArt(e.feed_id),e.title||'')+
      `<div class="txt"><b>${EQ}<span>${esc(e.title||'(untitled)')}</span></b>`+
      `<small><span class="fd">${esc(feedName(e.feed_id))}</span><span class="left"></span></small></div>`+
      `<button class="iconbtn" data-a="play"></button>`+
      `<button class="iconbtn" data-a="remove" title="Remove from Currently Listening" aria-label="Remove from Currently Listening">${ICON.close}</button>`+
      `<div class="rail"><i></i></div>`;
    el.onclick=ev=>(ev.target as Element).closest('[data-a=remove]')?forget(e)
      :el.classList.contains('now')&&!audio.paused?audio.pause():play(e);
    paintListenRow(el);
    box.appendChild(el);
  }
  return rows.length;
}

/// One row's time left, progress and play button, taken from the player when it is the one in it.
function paintListenRow(el){
  const e=el.entry, now=player.guid===e.guid&&player.feed===e.feed_id;
  // Zero until the player has sought to where you left off; the saved position stands till then.
  if(now&&audio.currentTime) e.position=Math.floor(audio.currentTime);
  // The player's own length first: a feed's can be minutes out.
  const d=(now&&isFinite(audio.duration)&&Math.floor(audio.duration))||e.duration;
  el.classList.toggle('now',now);
  $('.left',el).textContent=d?`${clock(d-e.position)} left`:`${clock(e.position)} in`;
  // With no length there is nothing to show, and an empty rail reads as a heavy border.
  const rail=$('.rail',el); rail.hidden=!d;
  $('i',rail).style.width=`${d?Math.min(100,e.position/d*100):0}%`;
  const b=$('[data-a=play]',el), label=now&&!audio.paused?'Pause':'Resume';
  if(b.title!==label){ b.title=label; b.setAttribute('aria-label',label); b.innerHTML=label==='Pause'?ICON.pause:ICON.play; }
}
/// Keeps the list in step with the player. Only a row that is, or was, the one in it changes.
function syncListening(){
  for(const el of $$('#listening .childrow'))
    if(el.entry&&(el.classList.contains('now')||player.guid===el.entry.guid)) paintListenRow(el);
}

/// Takes an episode off Currently Listening by forgetting where you got to: the list is every
/// episode with a saved position short of the end, so the position is what has to go.
async function forget(e){
  // Closed without saving first, or the player's next save would put it straight back.
  if(player.guid===e.guid){ player.guid=null; $('#pclose').click(); }
  try{
    await api(`/api/entries/${encodeURIComponent(e.feed_id)}/${encodeURIComponent(e.guid)}/position`,
      {method:'POST',body:JSON.stringify({secs:0})});
  }catch(err){ toast(err.message,true); }
  if(S.feed===':listening') renderListed(VIEWS[':listening']);
}

// The toolbar acts on whatever is selected: the feed on the left, the item in the table.
$('#tbRemove').onclick=()=>{ const f=S.feeds.find(x=>x.id===S.feed); if(f) removeFeed(f); };
$('#tbPlay').onclick=()=>{ const e=cur(); if(e) play(e); };
$('#tbRead').onclick=()=>{ const e=cur(); if(e) epAction('read',e,null); };
$('#tbFlag').onclick=()=>{ const e=cur(); if(e) epAction('flag',e,null); };
let searchT;
$('#epSearch').oninput=ev=>{ clearTimeout(searchT);
  searchT=setTimeout(()=>{ S.q=ev.target.value; S.offset=0; loadEntries(); },250); };
// Crossing the phone breakpoint moves the files between their pane and the text.
window.matchMedia?.('(max-width:820px)')?.addEventListener?.('change',()=>{ const e=cur(); if(e) showDetail(e); });

let expanded = new Set(JSON.parse(localStorage.getItem('ipx.expanded')||'[]'));
function toggleGroup(id){
  expanded.has(id) ? expanded.delete(id) : expanded.add(id);
  try{ localStorage.setItem('ipx.expanded', JSON.stringify([...expanded])); }catch{}
  renderFeeds();
}
let globalMax = 3;
function due(ts){
  const d = ts - Date.now()/1000;
  if(d <= 0) return 'due now';
  if(d < 3600) return 'in '+Math.max(1,Math.round(d/60))+'m';
  if(d < 86400) return 'in '+Math.round(d/3600)+'h';
  return 'in '+Math.round(d/86400)+'d';
}

/// Your settings: the theme, your subscriptions as OPML, and, to read, what the server does
/// with feeds. The server's own settings, the accounts and the log are on /admin, which only an
/// admin is sent (issue #19); this used to hold them too, shown to admins only.
async function prefsModal(){
  const g = await api('/api/settings');
  const admin = !!(S.me&&S.me.admin);
  openModal(`<button class="iconbtn cardx" onclick="closeModal()" title="Close" aria-label="Close">${ICON.close}</button><h3>Settings</h3>
    <div class="field"><label>Theme</label>
      <select id="stheme">${Object.entries(THEMES).map(([k,t])=>
        `<option value="${k}"${theme.name===k?' selected':''}>${esc(t.name)}</option>`).join('')}</select></div>
    <div class="field" id="smodefield"${THEMES[theme.name].modes?'':' hidden'}><label>Light or dark</label>
      <select id="smode">${Object.entries(MODES).map(([k,t])=>
        `<option value="${k}"${theme.mode===k?' selected':''}>${esc(t)}</option>`).join('')}</select>
      <span class="hint">Auto follows your system's light/dark setting.</span></div>
    <div class="field"><label>Subscriptions</label>
      <div class="inline">
        <!-- Words as well as icons: a floppy disk and a plus mean nothing on their own here. -->
        <a class="btn" href="/api/opml" download="ipx-subscriptions.opml" title="Export OPML" aria-label="Export OPML">${ICON.save} Export</a>
        <button class="btn" id="gopml" title="Import OPML…" aria-label="Import OPML">${ICON.plus} Import…</button>
      </div>
      <span class="hint">Export saves your subscriptions as OPML for another podcast app. Import
      subscribes you to every feed in one.</span></div>
    <div class="field"><label>Feeds are checked every</label>
      <span class="hint">${everyText(g.every_mins)}, for every feed that does not set its own.
      ${admin?'This and the rest of the server\'s settings are on the <a href="/admin">admin page</a>.':'Only an admin changes this.'}</span></div>
    <div class="field"><label>Download folder</label>
      <span class="hint" style="overflow-wrap:anywhere">${esc(g.download_dir)}</span></div>`);
  $('#stheme').onchange=e=>setTheme(e.target.value,undefined,true);
  $('#smode').onchange=e=>setTheme(undefined,e.target.value,true);
  $('#gopml').onclick=opmlModal;
}

function settingsModal(f, newUrl?: string){
  const isGroup = S.feeds.some(c=>c.group===f.id);
  openModal(`<h3>${esc(f.title||f.id)}</h3>
    ${isGroup?`<p class="hint" style="margin:-6px 0 12px">This is ${isPatreon(f)?'a Patreon creator':'an OPML subscription'}. These
      settings apply to it and are inherited by every feed inside it.</p>`:''}
    ${f.managed?`<p class="hint" style="margin:-6px 0 12px">This feed comes from
      ${isPatreon(S.feeds.find(p=>p.id===f.group))?'a Patreon creator':'an OPML subscription'} and follows its settings. Saving anything here gives it its own entry in
      config.toml, and it stops following the subscription's settings.</p>`:''}
    <p class="hint" style="margin:-4px 0 10px">These are <b>your</b> settings for this feed.
      Everyone else keeps their own.</p>
    <div class="field"><label>Keywords</label>
      <input type="text" id="skw" value="${esc(f.keywords.join(', '))}">
      <span class="hint">Comma separated. Empty takes everything.</span></div>
    <div class="field"><label>Max new downloads per scan</label>
      <input type="number" id="smax" min="0" value="${f.max_new_per_check??''}">
      <span class="hint">Blank follows the global default (${globalMax}). The rest wait for
      the next scan.</span></div>
    <label class="check"><input type="checkbox" id="sauto" ${f.auto_download?'checked':''}> Download new items automatically</label>
    <label class="check"><input type="checkbox" id="sexp" ${f.allow_explicit?'checked':''}> Allow items marked explicit</label>
    <div class="field"><label>Feed URL</label>
      <div class="inline">
        <input type="text" id="surl" value="${esc(newUrl||f.url)}" spellcheck="false" ${S.me&&S.me.admin?'':'readonly'}>
        <button type="button" class="btn ico" id="scopy" title="Copy the URL" aria-label="Copy the URL">${ICON.copy}</button>
      </div>
      <span class="hint">${S.me&&S.me.admin
        ? `Shared with everyone reading this feed. Editing it keeps every item and download —
           handy when an auth token in the URL is rotated. The feed is re-checked from scratch
           on the next scan.`
        : `The same for everyone reading this feed, so only an admin can change it.`}</span></div>
    ${S.me&&S.me.admin?`<div class="field"><label>Download folder (shared)</label>
      <input type="text" id="sfolder" value="${esc(f.folder||'')}" placeholder="${esc(f.title||f.id)}">
      <span class="hint">Where the files land. There is one copy however many people
      subscribe, so this is the same for everyone.</span></div>`:''}
    ${S.me&&S.me.admin?`<div class="field"><label>Directory category (shared)</label>
      <input type="text" id="scat" list="scats" value="${esc(f.category||'')}" placeholder="${esc(f.feed_category||'None')}">
      <datalist id="scats"></datalist>
      <span class="hint">${f.feed_category
        ? `The feed names its own, ${esc(f.feed_category)}, and the Directory uses that.`
        : `The feed names none, so the Directory files it under this. Pick one already listed where it fits.`}</span></div>`:''}
    <div class="cardacts"><button class="btn ico" onclick="closeModal()" title="Cancel" aria-label="Cancel">${ICON.close}</button>
      <button class="btn ico primary" id="ssave" title="Save" aria-label="Save">${ICON.check}</button></div>`);
  $('#scopy').onclick=()=>copyText($('#surl').value,$('#scopy'));
  // Offer the categories the Directory already shows, so a blog about games joins Games rather
  // than starting a second chip beside it.
  if($('#scats')) api('/api/directory').then(rows=>{ $('#scats').innerHTML=[...new Set((rows||[])
    .map(p=>p.category).filter(Boolean))].sort().map(c=>`<option value="${esc(c)}">`).join(''); }).catch(()=>{});
  $('#ssave').onclick=async()=>{
    const max=$('#smax').value;
    try{
      const patch: Record<string, unknown>={
        keywords:$('#skw').value.split(',').map(s=>s.trim()).filter(Boolean),
        max_new_per_check:max===''?null:Number(max),
        auto_download:$('#sauto').checked, allow_explicit:$('#sexp').checked};
      // The shared half is an admin's to change, and the API refuses it from anyone else.
      if(S.me&&S.me.admin){
        patch.url=$('#surl').value.trim();
        patch.folder=$('#sfolder').value.trim()||null;
        patch.category=$('#scat').value.trim()||null;
      }
      await api(`/api/feeds/${encodeURIComponent(f.id)}`,{method:'PATCH',body:JSON.stringify(patch)});
      closeModal(); toast('Saved — applies on the next scan');
      await loadFeeds(true); renderFeed(); loadEntries();
    }catch(e){ toast(e.message,true); }
  };
}

function downloadLatestModal(f){
  openModal(`<h3>Download latest items</h3>
    <div class="field"><label>How many of the newest undownloaded items?</label>
      <input type="number" id="dcount" min="1" max="100" value="5">
      <span class="hint">Queued immediately, ignoring the per-scan limit.</span></div>
    <div class="cardacts"><button class="btn ico" onclick="closeModal()" title="Cancel" aria-label="Cancel">${ICON.close}</button>
      <button class="btn ico primary" id="dgo" title="Download" aria-label="Download">${ICON.download}</button></div>`);
  $('#dgo').onclick=async()=>{
    const n=Number($('#dcount').value)||5;
    try{
      const r=await api(`/api/feeds/${encodeURIComponent(f.id)}/download-latest`,
        {method:'POST',body:JSON.stringify({count:n})});
      closeModal(); toast(`Queued ${r.queued} item${r.queued===1?'':'s'}`);
    }catch(e){ toast(e.message,true); }
  };
}

function removeFeed(f){
  openModal(`<h3>Unsubscribe?</h3>
    <p style="color:var(--dim)">Removes <b>${esc(f.title||f.id)}</b> from your feeds. Anyone else
    reading it keeps it, along with their own read state.
    Downloaded files and history are kept, so re-adding it will not pull the back catalogue again.</p>
    <div class="cardacts"><button class="btn ico" onclick="closeModal()" title="Cancel" aria-label="Cancel">${ICON.close}</button>
      <button class="btn ico danger" id="rgo" title="Unsubscribe" aria-label="Unsubscribe">${ICON.circleMinus}</button></div>`);
  $('#rgo').onclick=async()=>{
    await api(`/api/feeds/${encodeURIComponent(f.id)}`,{method:'DELETE'});
    closeModal(); toast('Unsubscribed'); S.feed=null;
    await loadFeeds(); if(!S.feeds.length) renderFeed();
  };
}

function opmlModal(){
  openModal(`<h3>OPML</h3>
    <p style="color:var(--dim);font-size:13.5px">Move subscriptions between podcast apps.</p>
    <div class="field"><label>Export: save your subscriptions as OPML</label>
      <div class="inline">
        <a class="btn ico" href="/api/opml" download="ipx-subscriptions.opml" title="Export OPML" aria-label="Export OPML">${ICON.save}</a>
      </div></div>
    <div class="field" style="margin-top:16px"><label>Import: choose a file, or paste OPML</label>
      <input type="file" id="opmlFile" accept=".opml,.xml,text/x-opml,text/xml,application/xml" style="margin-bottom:8px">
      <textarea id="opmlText" rows="6" style="width:100%;background:var(--bg);border:1px solid var(--line);color:var(--fg);border-radius:8px;padding:8px;font:12px monospace"></textarea></div>
    <div class="cardacts"><button class="btn ico" onclick="closeModal()" title="Close" aria-label="Close">${ICON.close}</button>
      <button class="btn ico primary" id="oimp" title="Import: subscribe to every feed in it" aria-label="Import">${ICON.plus}</button></div>`);
  $('#oimp').onclick=async()=>{
    // A chosen file is read here and sent as text, so the server never stores it. Clearing
    // the picker lets go of it on this side too, whether it was refused or imported.
    const pick=$('#opmlFile'), file=pick.files[0];
    const xml=file ? await file.text() : $('#opmlText').value;
    const letGo=()=>{ pick.value=''; };
    // A quick look before sending anything. The server parses it properly and has the last word.
    if(!/<opml[\s>]/i.test(xml)){
      letGo(); toast(`${file?file.name:'That'} is not an OPML file`,true); return;
    }
    try{
      const r=await api('/api/opml',{method:'POST',body:JSON.stringify({xml})});
      letGo(); closeModal(); toast(`Subscribed to ${r.added} feed(s)`+(r.already?`, ${r.already} you already had`:'')); loadFeeds(true);
    }catch(e){ letGo(); toast(e.message,true); }
  };
}

// No toast: the spinners on the rows being checked say it (issue #37).
async function scanAll(){ await api('/api/fetch',{method:'POST',body:JSON.stringify({force:true})}); }
$('#scanAll').onclick=scanAll;
$('#prefs').onclick=prefsModal;
// Someone the proxy signed in is signed out by the proxy: ipx's own sign-out cannot stick while
// the proxy still vouches for them. /api/me says where, when that is the case.
$('#signout').onclick=async()=>{ await api('/api/logout',{method:'POST'}); location.href=S.me?.sign_out||'/login'; };
api('/api/me').then(u=>{
  S.me=u;
  $('#who').textContent=u.name+(u.admin?' · admin':'');
}).catch(()=>{});
$('#feedFilter').oninput=renderFeeds;
// The feed list from the keyboard: Enter or Space opens a row, Right and Left open and close a
// folder. Handled keys stop here, or the player's own Space and arrows would act on them too.
$('#feedlist').onkeydown=ev=>{
  const row=ev.target.closest('[data-id]'); if(!row) return;
  const id=row.dataset.id;
  if((ev.key==='Enter'||ev.key===' ')&&ev.target===row) row.click();
  else if(row.classList.contains('group')&&
    (ev.key==='ArrowRight'&&!expanded.has(id)||ev.key==='ArrowLeft'&&expanded.has(id))) toggleGroup(id);
  else return;
  ev.preventDefault(); ev.stopPropagation();
};
$('#burger').onclick=()=>nav(!$('#sidebar').classList.contains('open'));
$('#scrim').onclick=()=>nav(false);