/* INSTRUCTIONS:
add this code snippet somewhere on the page:
<div id="kibun" data-username="your.username"></div>
optionally, add the attribute `data-styles="none"` if you just want to theme it yourself
also optionally, add `data-kibun="hide"` if you don't want to put a link to kibun.social in the bottom corner
*/

function timeAgo (dateString) {
  const date = Date.parse(dateString);
  const curDate = new Date(date);
  const now = Date.now();
  const yest = new Date(Date.parse(dateString));
  const today = new Date(date);
  yest.setDate(today - 1);
  const diff = (now - date) / 1000; // difference in seconds
  if (diff < 5) {
    return "just now";
  } else if (diff < 60) {
    return `${diff} seconds ago`;
  } else if (diff < 60*60) {
    const min = Math.floor(diff / 60);
    return `${min} minute${min > 1 ? 's' : ''} ago`;
  } else if (diff < 60*60*24) {
    const hr = Math.floor(diff / (60*60));
    return `${hr} hour${hr > 1 ? 's' : ''} ago`;
  } else if (date.getDate() === yest.getDate() && date.getMonth() === yest.getMonth() && date.getYear() === yest.getYear()) {
    return "yesterday";
  }
  return `${curDate.toLocaleDateString(undefined, {
    weekday: 'short',
    year: 'numeric',
    month: 'short',
    day: 'numeric'
  }).toLowerCase()}`;
}

async function getLatest() {
  const kibunBase = document.getElementById('kibun');
  const username = kibunBase.getAttribute('data-username');
  const userDidData = await  fetch(`https://slingshot.microcosm.blue/xrpc/com.bad-example.identity.resolveMiniDoc?identifier=${username}`);
  const userDidDoc = await userDidData.json();
  const userDid = userDidDoc.did;
  const userPds = userDidDoc.pds;
  const userInfoReq = await fetch(`
  ${userPds}/xrpc/com.atproto.repo.getRecord?repo=${userDid}&collection=app.bsky.actor.profile&rkey=self`);
  const userInfoData = await userInfoReq.json();
  const displayName = userInfoData.value.displayName;
  console.log(userInfoData);
  const statusData = await fetch(`${userPds}/xrpc/com.atproto.repo.listRecords?repo=${userDid}&collection=social.kibun.status&limit=1`);
  const statuses = await statusData.json();
  if (statuses.records.length === 0) return;
  const status = statuses.records[0];
  const container = document.createElement('div');
  container.id = 'kibun-container';
  
  const header = document.createElement('div');
  header.id = 'kibun-header';
  
  const userLink = document.createElement('a');
  userLink.href = `https://www.kibun.social/users/${username}`;
  userLink.textContent = displayName;
  userLink.id = 'kibun-displayname';
  
  console.log(status.value.createdAt);
  const parsedDate = Date.parse(status.value.createdAt);
  const postTime = document.createElement('span');
  postTime.textContent = timeAgo(status.value.createdAt);
  postTime.id = 'kibun-datetime';
  
  const emoji = status.value.emoji;
  const emojiSign = document.createElement('span')
  emojiSign.textContent = emoji;
  emojiSign.id = 'kibun-emoji';
  
  const userHandle = document.createElement('a');
  userHandle.href = `https://kibun.social/users/${username}`;
  userHandle.textContent = '@'+username;
  userHandle.id = 'kibun-handle';
  
  header.append(userLink);
  header.append(emojiSign);
  header.append(userHandle);
  header.append(postTime);
  container.append(header);
  
  const statusText = document.createElement('div');
  statusText.textContent = status.value.text;
  statusText.id = 'kibun-status';
  container.append(statusText);
  
  if (kibunBase.getAttribute('data-kibun') !== 'hide') {
    const kibunLink = document.createElement('a');
    kibunLink.id = 'kibun-link';
    kibunLink.href = 'https://www.kibun.social/';
    kibunLink.setAttribute('target', '_blank');
    kibunLink.setAttribute('rel', 'external');
    kibunLink.textContent = 'kibun.social';
    container.append(kibunLink);
  }
  
  if (kibunBase.getAttribute('data-styles') !== 'none') {
    const styles = document.createElement('style');
    styles.setAttribute('type', 'text/css');
    styles.innerHTML = `
    #kibun-container {
      border: 1px #7dd3fc solid;
      box-shadow: 4px 4px 0 #7dd3fc;
      padding: 20px;
      max-width: 400px;
      background-color: #FFFFFF;
      font-family: 'Inter', 'San Francisco', 'Lucida Grande', Arial, sans-serif;
      font-size: 14px;
      position: relative;
    }
  
    #kibun-header {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }
  
    #kibun-displayname {
      color: black;
      font-weight: bold;
    }
  
    #kibun-handle {
      color: #666666;
      font-size: .8em;
    }
    
    #kibun-datetime {
      color: #666666;
      font-size: .8em;
    }
    
    #kibun-datetime:before {
      content: "•";
      margin-right: 10px;
    }
  
    #kibun-status {
      margin-top: 10px;
    }
    
    #kibun-link {
      position: absolute;
      bottom: 5px;
      right: 5px;
      font-size: .6em;
      color: #666666;
    }
  `;
    document.body.append(styles);
  }
  document.body.append(container);
}

getLatest();