// Credential views use only the host's JSON API. Secrets leave the browser encrypted.
const credentialView=document.getElementById('credential-view');
const credentialNotice=document.getElementById('credential-notice');
document.getElementById('register-first').onclick=()=>{location.hash='passkeys';};
async function credentialGet(path){
  const response=await fetch('/api/cred/'+path);
  const value=await response.json();
  if(!response.ok)throw new Error(value.message||value.error);
  return value;
}
function credentialError(error){(document.getElementById('credential-status')||document.getElementById('error')).textContent=error.message;}
function credentialForm(action){
  credentialView.querySelector('form').onsubmit=async event=>{
    event.preventDefault();
    const buttons=[...event.target.querySelectorAll('button')];
    buttons.forEach(button=>button.disabled=true);
    try{await action(new FormData(event.target),event.submitter.value);document.getElementById('credential-status').textContent='Complete.';await credentialState();}
    catch(error){credentialError(error);}
    finally{buttons.forEach(button=>button.disabled=false);}
  };
}
async function credentialState(){
  const passkeys=await credentialGet('passkeys');
  credentialNotice.hidden=passkeys.length>0;
  return passkeys;
}
async function credentialNavigate(){
  const parts=location.hash.slice(1).split('/').map(decodeURIComponent);
  credentialView.hidden=!['passkeys','approve','entry'].includes(parts[0]);
  if(credentialView.hidden)return;
  credentialView.innerHTML='<button type="button" id="credential-close">Return to chat</button><h2></h2><div id="credential-content"></div><p id="credential-status" role="status"></p>';
  document.getElementById('credential-close').onclick=()=>{location.hash='';};
  const content=document.getElementById('credential-content');
  try{
    if(parts[0]==='passkeys'){
      credentialView.querySelector('h2').textContent='Passkeys';
      const passkeys=await credentialState();
      const list=document.createElement('ul');
      for(const key of passkeys){const row=document.createElement('li');row.textContent=key.label;list.append(row);}
      content.append(list);
      const form=document.createElement('form');form.innerHTML='<label>Passkey label <input name="label" required></label><button>Register passkey</button>';content.append(form);
      credentialForm(async data=>{
        const label=data.get('label');let gate;
        if((await credentialGet('passkeys')).length){const proof=await assertion(await post('/cred/passkeys/register/challenge',{label}));gate={id:proof.challenge_id,response:proof.assertion};}
        const challenge=await post('/cred/passkeys/register/start',{label,gate});
        const credential=await navigator.credentials.create(options(challenge));
        await post('/cred/passkeys/register/finish',{challenge_id:challenge.id,response:serialize(credential)});
        await credentialNavigate();
      });
    }else if(parts[0]==='approve'){
      credentialView.querySelector('h2').textContent='Review credential request';
      const id=parts[1],request=await credentialGet('requests/'+encodeURIComponent(id));
      const summary=document.createElement('p'),details=document.createElement('pre');summary.textContent=request.summary;details.textContent=JSON.stringify(request,null,2);content.append(summary,details);
      const grant=request.payload.grant_create||request.payload;
      const limits=!!request.payload.grant_create||!!request.payload.items?.length;
      const form=document.createElement('form');
      form.innerHTML='<fieldset '+(limits?'':'hidden disabled')+'><legend>Limits</legend><label>Duration in seconds <input type="number" name="duration" min="1" required></label><label>Maximum uses <input type="number" name="uses" min="1" placeholder="Unlimited"></label></fieldset><button value="approve">Approve</button><button value="deny" formnovalidate>Deny</button>';
      form.elements.duration.value=grant.duration_secs||(grant.exp?Math.max(1,grant.exp-Math.floor(Date.now()/1000)):3600);form.elements.uses.value=grant.max_uses||'';content.append(form);
      credentialForm(async(data,decision)=>{
        const path='/cred/requests/'+encodeURIComponent(id);
        const overrides=decision==='deny'||!limits?{}:{duration_secs:Number(data.get('duration')),max_uses:data.get('uses')?Number(data.get('uses')):null};
        const challenge=await post(path+'/challenge',{decision,overrides});
        await post(path+'/decide',challenge.unlocked?{decision,overrides}:await assertion(challenge));
      });
    }else{
      credentialView.querySelector('h2').textContent='Enter a credential secret';
      const items=await credentialGet('items');
      const form=document.createElement('form');form.innerHTML='<label>Secret field <select name="field" required></select></label><label>Secret <textarea name="secret" required></textarea></label><button>Encrypt and submit</button>';content.append(form);
      for(const item of items)for(const field of item.fields.filter(field=>!field.public)){
        const option=document.createElement('option');option.value=JSON.stringify([item.id,field.field_id]);option.textContent=item.name+' / '+field.name;form.elements.field.append(option);
        if(item.id===parts[1]&&field.field_id===parts[2])option.selected=true;
      }
      credentialForm(async data=>{
        const [item,field]=JSON.parse(data.get('field'));
        const path='/cred/items/'+encodeURIComponent(item)+'/fields/'+encodeURIComponent(field);
        const {public_key}=await credentialGet('entry/key');
        const encrypted=await encrypt(public_key,data.get('secret'));form.elements.secret.value='';
        const proof=await assertion(await post(path+'/challenge',{ciphertext_sha256:encrypted.ciphertext_sha256}));
        await post(path,{...proof,envelope:encrypted.envelope});
      });
    }
  }catch(error){credentialError(error);}
}
window.addEventListener('hashchange',credentialNavigate);
credentialNavigate();
credentialState().catch(credentialError);