import '../components/links-bar.css';
import './catchup.css';

import autoAnimate from '@formkit/auto-animate';
import { getBlurHashAverageColor } from 'fast-blurhash';
import { Fragment } from 'preact';
import { memo } from 'preact/compat';
import {
  useCallback,
  useEffect,
  useMemo,
  useReducer,
  useRef,
  useState,
} from 'preact/hooks';
import punycode from 'punycode';
import { useSearchParams } from 'react-router-dom';
import { uid } from 'uid/single';

import catchupUrl from '../assets/features/catch-up.png';

import Avatar from '../components/avatar';
import Icon from '../components/icon';
import Link from '../components/link';
import Loader from '../components/loader';
import Modal from '../components/modal';
import NameText from '../components/name-text';
import NavMenu from '../components/nav-menu';
import RelativeTime from '../components/relative-time';
import { api } from '../utils/api';
import { oklab2rgb, rgb2oklab } from '../utils/color-utils';
import db from '../utils/db';
import emojifyText from '../utils/emojify-text';
import { isFiltered } from '../utils/filters';
import htmlContentLength from '../utils/html-content-length';
import niceDateTime from '../utils/nice-date-time';
import shortenNumber from '../utils/shorten-number';
import showToast from '../utils/show-toast';
import states, { statusKey } from '../utils/states';
import statusPeek from '../utils/status-peek';
import store from '../utils/store';
import { getCurrentAccountID, getCurrentAccountNS } from '../utils/store-utils';
import { assignFollowedTags } from '../utils/timeline-utils';
import useHotkeys from '../utils/useHotkeys';
import useTitle from '../utils/useTitle';

const FILTER_CONTEXT = 'home';

const RANGES = [
  { label: 'last 1 hour', value: 1 },
  { label: 'last 2 hours', value: 2 },
  { label: 'last 3 hours', value: 3 },
  { label: 'last 4 hours', value: 4 },
  { label: 'last 5 hours', value: 5 },
  { label: 'last 6 hours', value: 6 },
  { label: 'last 7 hours', value: 7 },
  { label: 'last 8 hours', value: 8 },
  { label: 'last 9 hours', value: 9 },
  { label: 'last 10 hours', value: 10 },
  { label: 'last 11 hours', value: 11 },
  { label: 'last 12 hours', value: 12 },
  { label: 'beyond 12 hours', value: 13 },
];

const FILTER_LABELS = [
  'Original',
  'Replies',
  'Boosts',
  'Followed tags',
  'Groups',
  'Filtered',
];
const FILTER_SORTS = [
  'createdAt',
  'repliesCount',
  'favouritesCount',
  'reblogsCount',
  'density',
];
const FILTER_GROUPS = [null, 'account'];
const FILTER_VALUES = {
  Filtered: 'filtered',
  Groups: 'group',
  Boosts: 'boost',
  Replies: 'reply',
  'Followed tags': 'followedTags',
  Original: 'original',
};
const FILTER_CATEGORY_TEXT = {
  Filtered: 'filtered posts',
  Groups: 'group posts',
  Boosts: 'boosts',
  Replies: 'replies',
  'Followed tags': 'followed-tag posts',
  Original: 'original posts',
};
const SORT_BY_TEXT = {
  // asc, desc
  createdAt: ['oldest', 'latest'],
  repliesCount: ['fewest replies', 'most replies'],
  favouritesCount: ['fewest likes', 'most likes'],
  reblogsCount: ['fewest boosts', 'most boosts'],
  density: ['least dense', 'most dense'],
};

function Catchup() {
  useTitle('Catch-up', '/catchup');
  const { masto, instance } = api();
  const [searchParams, setSearchParams] = useSearchParams();
  const id = searchParams.get('id');
  const [uiState, setUIState] = useState('start');
  const [showTopLinks, setShowTopLinks] = useState(false);

  const currentAccount = useMemo(() => {
    return getCurrentAccountID();
  }, []);
  const isSelf = (accountID) => accountID === currentAccount;

  async function fetchHome({ maxCreatedAt }) {
    const maxCreatedAtDate = maxCreatedAt ? new Date(maxCreatedAt) : null;
    console.debug('fetchHome', maxCreatedAtDate);
    const allResults = [];
    const homeIterator = masto.v1.timelines.home.list({ limit: 40 });
    mainloop: while (true) {
      try {
        const results = await homeIterator.next();
        const { value } = results;
        if (value?.length) {
          // This ignores maxCreatedAt filter, but it's ok for now
          await assignFollowedTags(value, instance);
          let addedResults = false;
          for (let i = 0; i < value.length; i++) {
            const item = value[i];
            const createdAtDate = new Date(item.createdAt);
            if (!maxCreatedAtDate || createdAtDate >= maxCreatedAtDate) {
              // Filtered
              const selfPost = isSelf(
                item.reblog?.account?.id || item.account.id,
              );
              const filterInfo =
                !selfPost &&
                isFiltered(
                  item.reblog?.filtered || item.filtered,
                  FILTER_CONTEXT,
                );
              if (filterInfo?.action === 'hide') continue;
              item._filtered = filterInfo;

              // Followed tags
              const sKey = statusKey(item.id, instance);
              item._followedTags = states.statusFollowedTags[sKey]
                ? [...states.statusFollowedTags[sKey]]
                : [];

              allResults.push(item);
              addedResults = true;
            } else {
              // Don't immediately stop, still add the other items that might still be within range
              // break mainloop;
            }
            // Only stop when ALL items are outside of range
            if (!addedResults) {
              break mainloop;
            }
          }
        } else {
          break mainloop;
        }
        // Pause 1s
        await new Promise((resolve) => setTimeout(resolve, 1000));
      } catch (e) {
        console.error(e);
        break mainloop;
      }
    }

    // Post-process all results
    // 1. Threadify - tag 1st-post in a thread
    allResults.forEach((status) => {
      if (status?.inReplyToId) {
        const replyToStatus = allResults.find(
          (s) => s.id === status.inReplyToId,
        );
        if (replyToStatus && !replyToStatus.inReplyToId) {
          replyToStatus._thread = true;
        }
      }
    });

    return allResults;
  }

  const [posts, setPosts] = useState([]);
  const catchupRangeRef = useRef();
  const catchupLastRef = useRef();
  const NS = useMemo(() => getCurrentAccountNS(), []);
  const handleCatchupClick = useCallback(async ({ duration } = {}) => {
    const now = Date.now();
    const maxCreatedAt = duration ? now - duration : null;
    setUIState('loading');
    const results = await fetchHome({ maxCreatedAt });
    // Namespaced by account ID
    // Possible conflict if ID matches between different accounts from different instances
    const catchupID = `${NS}-${uid()}`;
    try {
      await db.catchup.set(catchupID, {
        id: catchupID,
        posts: results,
        count: results.length,
        startAt: maxCreatedAt,
        endAt: now,
      });
      setSearchParams({ id: catchupID });
    } catch (e) {
      console.error(e, results);
    }
  }, []);

  useEffect(() => {
    if (id) {
      (async () => {
        const catchup = await db.catchup.get(id);
        if (catchup) {
          catchup.posts.sort((a, b) => (a.createdAt > b.createdAt ? 1 : -1));
          setPosts(catchup.posts);
          setUIState('results');
        }
      })();
    } else if (uiState === 'results') {
      setPosts([]);
      setUIState('start');
    }
  }, [id]);

  const [reloadCatchupsCount, reloadCatchups] = useReducer((c) => c + 1, 0);
  const [lastCatchupEndAt, setLastCatchupEndAt] = useState(null);
  const [prevCatchups, setPrevCatchups] = useState([]);
  useEffect(() => {
    (async () => {
      try {
        const catchups = await db.catchup.keys();
        if (catchups.length) {
          const ns = getCurrentAccountNS();
          const ownKeys = catchups.filter((key) => key.startsWith(`${ns}-`));
          if (ownKeys.length) {
            let ownCatchups = await db.catchup.getMany(ownKeys);
            ownCatchups.sort((a, b) => b.endAt - a.endAt);

            // Split to 1st 3 last catchups, and the rest
            let lastCatchups = ownCatchups.slice(0, 3);
            let restCatchups = ownCatchups.slice(3);

            const trimmedCatchups = lastCatchups.map((c) => {
              const { id, count, startAt, endAt } = c;
              return {
                id,
                count,
                startAt,
                endAt,
              };
            });
            setPrevCatchups(trimmedCatchups);
            setLastCatchupEndAt(lastCatchups[0].endAt);

            // GC time
            ownCatchups = null;
            lastCatchups = null;

            queueMicrotask(() => {
              if (restCatchups.length) {
                // delete them
                db.catchup
                  .delMany(restCatchups.map((c) => c.id))
                  .then(() => {
                    // GC time
                    restCatchups = null;
                  })
                  .catch((e) => {
                    console.error(e);
                  });
              }
            });

            return;
          }
        }
      } catch (e) {
        console.error(e);
      }
      setPrevCatchups([]);
    })();
  }, [reloadCatchupsCount]);
  useEffect(() => {
    if (uiState === 'start') {
      reloadCatchups();
    }
  }, [uiState === 'start']);

  const [filterCounts, links] = useMemo(() => {
    let filtereds = 0,
      groups = 0,
      boosts = 0,
      replies = 0,
      followedTags = 0,
      originals = 0;
    const links = {};
    for (const post of posts) {
      if (post._filtered) {
        filtereds++;
        post.__FILTER = 'filtered';
      } else if (post.group) {
        groups++;
        post.__FILTER = 'group';
      } else if (post.reblog) {
        boosts++;
        post.__FILTER = 'boost';
      } else if (post._followedTags?.length) {
        followedTags++;
        post.__FILTER = 'followedTags';
      } else if (
        post.inReplyToId &&
        post.inReplyToAccountId !== post.account?.id
      ) {
        replies++;
        post.__FILTER = 'reply';
      } else {
        originals++;
        post.__FILTER = 'original';
      }

      const thePost = post.reblog || post;
      if (
        post.__FILTER !== 'filtered' &&
        thePost.card?.url &&
        thePost.card?.image &&
        thePost.card?.type === 'link'
      ) {
        const { card, favouritesCount, reblogsCount } = thePost;
        let { url } = card;
        url = url.replace(/\/$/, '');
        if (!links[url]) {
          links[url] = {
            postID: thePost.id,
            card,
            shared: 1,
            sharers: [post.account],
            likes: favouritesCount,
            boosts: reblogsCount,
          };
        } else {
          if (links[url].sharers.find((a) => a.id === post.account.id)) {
            continue;
          }
          links[url].shared++;
          links[url].sharers.push(post.account);
          if (links[url].postID !== thePost.id) {
            links[url].likes += favouritesCount;
            links[url].boosts += reblogsCount;
          }
        }
      }
    }

    let topLinks = [];
    for (const link in links) {
      topLinks.push({
        url: link,
        ...links[link],
      });
    }
    topLinks.sort((a, b) => {
      if (a.shared > b.shared) return -1;
      if (a.shared < b.shared) return 1;
      if (a.boosts > b.boosts) return -1;
      if (a.boosts < b.boosts) return 1;
      if (a.likes > b.likes) return -1;
      if (a.likes < b.likes) return 1;
      return 0;
    });

    // Slice links to shared > 1 but min 10 links
    if (topLinks.length > 10) {
      linksLoop: for (let i = 10; i < topLinks.length; i++) {
        const { shared } = topLinks[i];
        if (shared <= 1) {
          topLinks = topLinks.slice(0, i);
          break linksLoop;
        }
      }
    }

    return [
      {
        Filtered: filtereds,
        Groups: groups,
        Boosts: boosts,
        Replies: replies,
        'Followed tags': followedTags,
        Original: originals,
      },
      topLinks,
    ];
  }, [posts]);

  const [selectedFilterCategory, setSelectedFilterCategory] = useState('All');
  const [selectedAuthor, setSelectedAuthor] = useState(null);

  const [range, setRange] = useState(1);

  const [sortBy, setSortBy] = useState('createdAt');
  const [sortOrder, setSortOrder] = useState('asc');
  const [groupBy, setGroupBy] = useState(null);

  const [filteredPosts, authors, authorCounts] = useMemo(() => {
    const authorsHash = {};
    const authorCountsMap = new Map();

    let filteredPosts = posts.filter((post) => {
      const postFilterMatches =
        selectedFilterCategory === 'All' ||
        post.__FILTER === FILTER_VALUES[selectedFilterCategory];

      if (postFilterMatches) {
        authorsHash[post.account.id] = post.account;
        authorCountsMap.set(
          post.account.id,
          (authorCountsMap.get(post.account.id) || 0) + 1,
        );
      }

      return postFilterMatches;
    });

    // Deduplicate boosts
    const boostedPosts = {};
    filteredPosts.forEach((post) => {
      if (post.reblog) {
        if (boostedPosts[post.reblog.id]) {
          if (boostedPosts[post.reblog.id].__BOOSTERS) {
            boostedPosts[post.reblog.id].__BOOSTERS.add(post.account);
          } else {
            boostedPosts[post.reblog.id].__BOOSTERS = new Set([post.account]);
          }
          post.__HIDDEN = true;
        } else {
          boostedPosts[post.reblog.id] = post;
        }
      }
    });

    if (selectedAuthor && authorCountsMap.has(selectedAuthor)) {
      filteredPosts = filteredPosts.filter(
        (post) =>
          post.account.id === selectedAuthor ||
          [...(post.__BOOSTERS || [])].find((a) => a.id === selectedAuthor),
      );
    }

    return [filteredPosts, authorsHash, Object.fromEntries(authorCountsMap)];
  }, [selectedFilterCategory, selectedAuthor, posts]);

  const filteredPostsMap = useMemo(() => {
    const map = {};
    filteredPosts.forEach((post) => {
      map[post.id] = post;
    });
    return map;
  }, [filteredPosts]);

  const authorCountsList = useMemo(
    () =>
      Object.keys(authorCounts).sort(
        (a, b) => authorCounts[b] - authorCounts[a],
      ),
    [authorCounts],
  );

  const sortedFilteredPosts = useMemo(() => {
    const authorIndices = {};
    authorCountsList.forEach((authorID, index) => {
      authorIndices[authorID] = index;
    });
    return filteredPosts
      .filter((post) => !post.__HIDDEN)
      .sort((a, b) => {
        if (groupBy === 'account') {
          const aAccountID = a.account.id;
          const bAccountID = b.account.id;
          const aIndex = authorIndices[aAccountID];
          const bIndex = authorIndices[bAccountID];
          const order = aIndex - bIndex;
          if (order !== 0) {
            return order;
          }
        }
        if (sortBy !== 'createdAt') {
          a = a.reblog || a;
          b = b.reblog || b;
          if (sortBy !== 'density' && a[sortBy] === b[sortBy]) {
            return a.createdAt > b.createdAt ? 1 : -1;
          }
        }
        if (sortBy === 'density') {
          const aDensity = postDensity(a);
          const bDensity = postDensity(b);
          if (sortOrder === 'asc') {
            return aDensity > bDensity ? 1 : -1;
          } else {
            return bDensity > aDensity ? 1 : -1;
          }
        }
        if (sortOrder === 'asc') {
          return a[sortBy] > b[sortBy] ? 1 : -1;
        } else {
          return b[sortBy] > a[sortBy] ? 1 : -1;
        }
      });
  }, [filteredPosts, sortBy, sortOrder, groupBy, authorCountsList]);

  const prevGroup = useRef(null);

  const authorsListParent = useRef(null);
  const autoAnimated = useRef(false);
  useEffect(() => {
    if (posts.length > 100 || autoAnimated.current) return;
    if (authorsListParent.current) {
      autoAnimate(authorsListParent.current, {
        duration: 200,
      });
      autoAnimated.current = true;
    }
  }, [posts, authorsListParent]);

  const postsBarType = posts.length > 160 ? '3d' : '2d';

  const postsBar = useMemo(() => {
    if (postsBarType !== '2d') return null;
    return posts.map((post) => {
      // If part of filteredPosts
      const isFiltered = filteredPostsMap[post.id];
      return (
        <span
          key={post.id}
          class={`post-dot ${isFiltered ? 'post-dot-highlight' : ''}`}
        />
      );
    });
  }, [filteredPostsMap]);

  const postsBins = useMemo(() => {
    if (postsBarType !== '3d') return null;
    if (!posts?.length) return null;
    const bins = binByTime(posts, 'createdAt', 320);
    return bins.map((posts, i) => {
      return (
        <div class="posts-bin" key={i}>
          {posts.map((post) => {
            const isFiltered = filteredPostsMap[post.id];
            return (
              <span
                key={post.id}
                class={`post-dot ${isFiltered ? 'post-dot-highlight' : ''}`}
              />
            );
          })}
        </div>
      );
    });
  }, [filteredPostsMap]);

  const scrollableRef = useRef(null);

  // if range value exceeded lastCatchupEndAt, show error
  const lastCatchupRange = useMemo(() => {
    // return hour, not ms
    if (!lastCatchupEndAt) return null;
    return (Date.now() - lastCatchupEndAt) / 1000 / 60 / 60;
  }, [lastCatchupEndAt, range]);

  useEffect(() => {
    if (uiState !== 'results') return;
    const authorUsername =
      selectedAuthor && authors[selectedAuthor]
        ? authors[selectedAuthor].username
        : '';
    const sortOrderIndex = sortOrder === 'asc' ? 0 : 1;
    const groupByText = {
      account: 'authors',
    };
    let toast = showToast({
      duration: 5_000, // 5 seconds
      text: `Showing ${
        FILTER_CATEGORY_TEXT[selectedFilterCategory] || 'all posts'
      }${authorUsername ? ` by @${authorUsername}` : ''}, ${
        SORT_BY_TEXT[sortBy][sortOrderIndex]
      } first${
        !!groupBy
          ? `, grouped by ${groupBy === 'account' ? groupByText[groupBy] : ''}`
          : ''
      }`,
    });
    return () => {
      toast?.hideToast?.();
    };
  }, [
    uiState,
    selectedFilterCategory,
    selectedAuthor,
    sortBy,
    sortOrder,
    groupBy,
    authors,
  ]);

  useEffect(() => {
    if (selectedAuthor) {
      if (authors[selectedAuthor]) {
        // Check if author is visible and within the scrollable area viewport
        const authorElement = authorsListParent.current.querySelector(
          `[data-author="${selectedAuthor}"]`,
        );
        const scrollableRect =
          authorsListParent.current?.getBoundingClientRect();
        const authorRect = authorElement?.getBoundingClientRect();
        console.log({
          sLeft: scrollableRect.left,
          sRight: scrollableRect.right,
          aLeft: authorRect.left,
          aRight: authorRect.right,
        });
        if (
          authorRect.left < scrollableRect.left ||
          authorRect.right > scrollableRect.right
        ) {
          authorElement.scrollIntoView({
            block: 'nearest',
            inline: 'center',
            behavior: 'smooth',
          });
        } else if (authorRect.top < 0) {
          authorElement.scrollIntoView({
            block: 'nearest',
            inline: 'nearest',
            behavior: 'smooth',
          });
        }
      }
    }
  }, [selectedAuthor, authors]);

  const [showHelp, setShowHelp] = useState(false);

  const itemsSelector = '.catchup-list > li > a';
  const jRef = useHotkeys(
    'j',
    () => {
      const activeItem = document.activeElement.closest(itemsSelector);
      const activeItemRect = activeItem?.getBoundingClientRect();
      const allItems = Array.from(
        scrollableRef.current.querySelectorAll(itemsSelector),
      );
      if (
        activeItem &&
        activeItemRect.top < scrollableRef.current.clientHeight &&
        activeItemRect.bottom > 0
      ) {
        const activeItemIndex = allItems.indexOf(activeItem);
        const nextItem = allItems[activeItemIndex + 1];
        if (nextItem) {
          nextItem.focus();
          nextItem.scrollIntoView({
            block: 'center',
            inline: 'center',
            behavior: 'smooth',
          });
        }
      } else {
        const topmostItem = allItems.find((item) => {
          const itemRect = item.getBoundingClientRect();
          return itemRect.top >= 0;
        });
        if (topmostItem) {
          topmostItem.focus();
          topmostItem.scrollIntoView({
            block: 'nearest',
            inline: 'center',
            behavior: 'smooth',
          });
        }
      }
    },
    {
      preventDefault: true,
      ignoreModifiers: true,
    },
  );

  const kRef = useHotkeys(
    'k',
    () => {
      const activeItem = document.activeElement.closest(itemsSelector);
      const activeItemRect = activeItem?.getBoundingClientRect();
      const allItems = Array.from(
        scrollableRef.current.querySelectorAll(itemsSelector),
      );
      if (
        activeItem &&
        activeItemRect.top < scrollableRef.current.clientHeight &&
        activeItemRect.bottom > 0
      ) {
        const activeItemIndex = allItems.indexOf(activeItem);
        let prevItem = allItems[activeItemIndex - 1];
        if (prevItem) {
          prevItem.focus();
          prevItem.scrollIntoView({
            block: 'center',
            inline: 'center',
            behavior: 'smooth',
          });
        }
      } else {
        const topmostItem = allItems.find((item) => {
          const itemRect = item.getBoundingClientRect();
          return itemRect.top >= 44 && itemRect.left >= 0;
        });
        if (topmostItem) {
          topmostItem.focus();
          topmostItem.scrollIntoView({
            block: 'nearest',
            inline: 'center',
            behavior: 'smooth',
          });
        }
      }
    },
    {
      preventDefault: true,
      ignoreModifiers: true,
    },
  );

  const hlRef = useHotkeys(
    'h, l',
    (_, handler) => {
      // Go next/prev selectedAuthor in authorCountsList list
      const key = handler.keys[0];
      if (selectedAuthor) {
        const index = authorCountsList.indexOf(selectedAuthor);
        if (key === 'h') {
          if (index > 0 && index < authorCountsList.length) {
            setSelectedAuthor(authorCountsList[index - 1]);
            scrollableRef.current?.focus();
          }
        } else if (key === 'l') {
          if (index < authorCountsList.length - 1 && index >= 0) {
            setSelectedAuthor(authorCountsList[index + 1]);
            scrollableRef.current?.focus();
          }
        }
      } else if (key === 'l') {
        setSelectedAuthor(authorCountsList[0]);
        scrollableRef.current?.focus();
      }
    },
    {
      preventDefault: true,
      ignoreModifiers: true,
      enableOnFormTags: ['input'],
    },
  );

  const escRef = useHotkeys(
    'esc',
    () => {
      setSelectedAuthor(null);
      scrollableRef.current?.focus();
    },
    {
      preventDefault: true,
      ignoreModifiers: true,
      enableOnFormTags: ['input'],
    },
  );

  const dotRef = useHotkeys(
    '.',
    () => {
      scrollableRef.current?.scrollTo({
        top: 0,
        behavior: 'smooth',
      });
    },
    {
      preventDefault: true,
      ignoreModifiers: true,
      enableOnFormTags: ['input'],
    },
  );

  return (
    <div
      ref={(node) => {
        scrollableRef.current = node;
        jRef.current = node;
        kRef.current = node;
        hlRef.current = node;
        escRef.current = node;
      }}
      id="catchup-page"
      class="deck-container"
      tabIndex="-1"
    >
      <div class="timeline-deck deck wide">
        <header
          class={`${uiState === 'loading' ? 'loading' : ''}`}
          onClick={(e) => {
            if (!e.target.closest('a, button')) {
              scrollableRef.current?.scrollTo({
                top: 0,
                behavior: 'smooth',
              });
            }
          }}
        >
          <div class="header-grid">
            <div class="header-side">
              <NavMenu />
              {uiState === 'results' && (
                <Link to="/catchup" class="button plain">
                  <Icon icon="history2" size="l" />
                </Link>
              )}
              {uiState === 'start' && (
                <Link to="/" class="button plain">
                  <Icon icon="home" size="l" />
                </Link>
              )}
            </div>
            <h1>
              {uiState !== 'start' && (
                <>
                  Catch-up <sup>beta</sup>
                </>
              )}
            </h1>
            <div class="header-side">
              {uiState !== 'start' && uiState !== 'loading' && (
                <button
                  type="button"
                  class="plain"
                  onClick={() => {
                    setShowHelp(true);
                  }}
                >
                  Help
                </button>
              )}
            </div>
          </div>
        </header>
        <main>
          {uiState === 'start' && (
            <div class="catchup-start">
              <h1>
                Catch-up <sup>beta</sup>
              </h1>
              <details>
                <summary>What is this?</summary>
                <p>
                  Catch-up is a separate timeline for your followings, offering
                  a high-level view at a glance, with a simple, email-inspired
                  interface to effortlessly sort and filter through posts.
                </p>
                <img
                  src={catchupUrl}
                  width="1200"
                  height="900"
                  alt="Preview of Catch-up UI"
                />
                <p>
                  <button
                    type="button"
                    onClick={(e) => {
                      e.target.closest('details').open = false;
                    }}
                  >
                    Let's catch up
                  </button>
                </p>
              </details>
              <p>Let's catch up on the posts from your followings.</p>
              <p>
                <b>Show me all posts from…</b>
              </p>
              <div class="catchup-form">
                <input
                  ref={catchupRangeRef}
                  type="range"
                  value={range}
                  min={RANGES[0].value}
                  max={RANGES[RANGES.length - 1].value}
                  step="1"
                  list="catchup-ranges"
                  onChange={(e) => setRange(+e.target.value)}
                />{' '}
                <span
                  style={{
                    width: '8em',
                  }}
                >
                  {RANGES[range - 1].label}
                  <br />
                  <small class="insignificant">
                    {range == RANGES[RANGES.length - 1].value
                      ? 'until the max'
                      : niceDateTime(
                          new Date(Date.now() - range * 60 * 60 * 1000),
                        )}
                  </small>
                </span>
                <datalist id="catchup-ranges">
                  {RANGES.map(({ label, value }) => (
                    <option value={value} label={label} />
                  ))}
                </datalist>{' '}
                <button
                  type="button"
                  onClick={() => {
                    if (range < RANGES[RANGES.length - 1].value) {
                      let duration;
                      if (
                        range === RANGES[RANGES.length - 1].value &&
                        catchupLastRef.current?.checked
                      ) {
                        duration = Date.now() - lastCatchupEndAt;
                      } else {
                        duration = range * 60 * 60 * 1000;
                      }
                      handleCatchupClick({ duration });
                    } else {
                      handleCatchupClick();
                    }
                  }}
                >
                  Catch up
                </button>
              </div>
              {lastCatchupRange && range > lastCatchupRange ? (
                <p class="catchup-info">
                  <Icon icon="info" /> Overlaps with your last catch-up
                </p>
              ) : range === RANGES[RANGES.length - 1].value &&
                lastCatchupEndAt ? (
                <p class="catchup-info">
                  <label>
                    <input
                      type="checkbox"
                      switch
                      checked
                      ref={catchupLastRef}
                    />{' '}
                    Until the last catch-up (
                    {dtf.format(new Date(lastCatchupEndAt))})
                  </label>
                </p>
              ) : null}
              <p class="insignificant">
                <small>
                  Note: your instance might only show a maximum of 800 posts in
                  the Home timeline regardless of the time range. Could be less
                  or more.
                </small>
              </p>
              {!!prevCatchups?.length && (
                <div class="catchup-prev">
                  <p>Previously…</p>
                  <ul>
                    {prevCatchups.map((pc) => (
                      <li key={pc.id}>
                        <Link to={`/catchup?id=${pc.id}`}>
                          <Icon icon="history2" />{' '}
                          <span>
                            {pc.startAt
                              ? dtf.formatRange(
                                  new Date(pc.startAt),
                                  new Date(pc.endAt),
                                )
                              : `… – ${dtf.format(new Date(pc.endAt))}`}
                          </span>
                        </Link>{' '}
                        <span>
                          <small class="ib insignificant">
                            {pc.count} posts
                          </small>{' '}
                          <button
                            type="button"
                            class="light danger small"
                            onClick={async () => {
                              const yes = confirm('Remove this catch-up?');
                              if (yes) {
                                let t = showToast(`Removing Catch-up ${pc.id}`);
                                await db.catchup.del(pc.id);
                                t?.hideToast?.();
                                showToast(`Catch-up ${pc.id} removed`);
                                reloadCatchups();
                              }
                            }}
                          >
                            <Icon icon="x" />
                          </button>
                        </span>
                      </li>
                    ))}
                  </ul>
                  {prevCatchups.length >= 3 && (
                    <p>
                      <small>
                        Note: Only max 3 will be stored. The rest will be
                        automatically removed.
                      </small>
                    </p>
                  )}
                </div>
              )}
            </div>
          )}
          {uiState === 'loading' && (
            <div class="ui-state catchup-start">
              <Loader abrupt />
              <p class="insignificant">Fetching posts…</p>
              <p class="insignificant">This might take a while.</p>
            </div>
          )}
          {uiState === 'results' && (
            <>
              <div class="catchup-header">
                {posts.length > 0 && (
                  <p>
                    <b class="ib">
                      {dtf.formatRange(
                        new Date(posts[0].createdAt),
                        new Date(posts[posts.length - 1].createdAt),
                      )}
                    </b>
                  </p>
                )}
                <aside>
                  <button
                    hidden={
                      selectedFilterCategory === 'All' &&
                      !selectedAuthor &&
                      sortBy === 'createdAt' &&
                      sortOrder === 'asc'
                    }
                    type="button"
                    class="plain4 small"
                    onClick={() => {
                      setSelectedFilterCategory('All');
                      setSelectedAuthor(null);
                      setSortBy('createdAt');
                      setGroupBy(null);
                      setSortOrder('asc');
                    }}
                  >
                    Reset filters
                  </button>
                  {links?.length > 0 && (
                    <button
                      type="button"
                      class="plain small"
                      onClick={() => setShowTopLinks(!showTopLinks)}
                    >
                      Top links{' '}
                      <Icon
                        icon="chevron-down"
                        style={{
                          transform: showTopLinks
                            ? 'rotate(180deg)'
                            : 'rotate(0deg)',
                        }}
                      />
                    </button>
                  )}
                </aside>
              </div>
              <div class="shazam-container no-animation" hidden={!showTopLinks}>
                <div class="shazam-container-inner">
                  <div class="catchup-top-links links-bar">
                    {links.map((link) => {
                      const { card, shared, sharers, likes, boosts } = link;
                      const {
                        blurhash,
                        title,
                        description,
                        url,
                        image,
                        imageDescription,
                        language,
                        width,
                        height,
                        publishedAt,
                      } = card;
                      const domain = punycode.toUnicode(
                        new URL(url).hostname
                          .replace(/^www\./, '')
                          .replace(/\/$/, ''),
                      );
                      let accentColor;
                      if (blurhash) {
                        const averageColor = getBlurHashAverageColor(blurhash);
                        const labAverageColor = rgb2oklab(averageColor);
                        accentColor = oklab2rgb([
                          0.6,
                          labAverageColor[1],
                          labAverageColor[2],
                        ]);
                      }

                      return (
                        <a
                          key={url}
                          href={url}
                          target="_blank"
                          rel="noopener noreferrer"
                          style={
                            accentColor
                              ? {
                                  '--accent-color': `rgb(${accentColor.join(
                                    ',',
                                  )})`,
                                  '--accent-alpha-color': `rgba(${accentColor.join(
                                    ',',
                                  )}, 0.4)`,
                                }
                              : {}
                          }
                        >
                          <article>
                            <figure>
                              <img
                                src={image}
                                alt={imageDescription}
                                width={width}
                                height={height}
                                loading="lazy"
                              />
                            </figure>
                            <div class="article-body">
                              <header>
                                <div class="article-meta">
                                  <span class="domain">{domain}</span>{' '}
                                  {!!publishedAt && <>&middot; </>}
                                  {!!publishedAt && (
                                    <>
                                      <RelativeTime
                                        datetime={publishedAt}
                                        format="micro"
                                      />
                                    </>
                                  )}
                                </div>
                                {!!title && (
                                  <h1
                                    class="title"
                                    lang={language}
                                    dir="auto"
                                    title={title}
                                  >
                                    {title}
                                  </h1>
                                )}
                              </header>
                              {!!description && (
                                <p
                                  class="description"
                                  lang={language}
                                  dir="auto"
                                  title={description}
                                >
                                  {description}
                                </p>
                              )}
                              <hr />
                              <p
                                style={{
                                  whiteSpace: 'nowrap',
                                }}
                              >
                                Shared by{' '}
                                {sharers.map((s) => {
                                  const { avatarStatic, displayName } = s;
                                  return (
                                    <Avatar
                                      url={avatarStatic}
                                      size="s"
                                      alt={displayName}
                                    />
                                  );
                                })}
                              </p>
                            </div>
                          </article>
                        </a>
                      );
                    })}
                  </div>
                </div>
              </div>
              {posts.length >= 5 &&
                (postsBarType === '3d' ? (
                  <div class="catchup-posts-viz-time-bar">{postsBins}</div>
                ) : (
                  <div class="catchup-posts-viz-bar">{postsBar}</div>
                ))}
              {posts.length >= 2 && (
                <div class="catchup-filters">
                  <label class="filter-cat">
                    <input
                      type="radio"
                      name="filter-cat"
                      checked={selectedFilterCategory.toLowerCase() === 'all'}
                      onChange={() => {
                        setSelectedFilterCategory('All');
                      }}
                    />
                    All <span class="count">{posts.length}</span>
                  </label>
                  {FILTER_LABELS.map(
                    (label) =>
                      !!filterCounts[label] && (
                        <label
                          class="filter-cat"
                          key={label}
                          title={
                            (
                              (filterCounts[label] / posts.length) *
                              100
                            ).toFixed(2) + '%'
                          }
                        >
                          <input
                            type="radio"
                            name="filter-cat"
                            checked={
                              selectedFilterCategory.toLowerCase() ===
                              label.toLowerCase()
                            }
                            onChange={() => {
                              setSelectedFilterCategory(label);
                              // setSelectedAuthor(null);
                            }}
                          />
                          {label}{' '}
                          <span class="count">{filterCounts[label]}</span>
                        </label>
                      ),
                  )}
                </div>
              )}
              {posts.length >= 2 && !!authorCounts && (
                <div
                  class="catchup-filters authors-filters"
                  ref={authorsListParent}
                >
                  {authorCountsList.map((author) => (
                    <label
                      class="filter-author"
                      data-author={author}
                      key={`${author}-${authorCounts[author]}`}
                      // Preact messed up the order sometimes, need additional key besides just `author`
                      // https://github.com/preactjs/preact/issues/2849
                    >
                      <input
                        type="radio"
                        name="filter-author"
                        checked={selectedAuthor === author}
                        onChange={() => {
                          setSelectedAuthor(author);
                          // setGroupBy(null);
                        }}
                        onClick={() => {
                          if (selectedAuthor === author) {
                            setSelectedAuthor(null);
                          }
                        }}
                      />
                      <Avatar
                        url={
                          authors[author].avatarStatic || authors[author].avatar
                        }
                        size="xxl"
                        alt={`${authors[author].displayName} (@${authors[author].acct})`}
                      />{' '}
                      <span class="count">{authorCounts[author]}</span>
                      <span class="username">{authors[author].username}</span>
                    </label>
                  ))}
                  {authorCountsList.length > 5 && (
                    <small
                      key="authors-count"
                      style={{
                        whiteSpace: 'nowrap',
                        paddingInline: '1em',
                        opacity: 0.33,
                      }}
                    >
                      {authorCountsList.length} authors
                    </small>
                  )}
                </div>
              )}
              {posts.length >= 2 && (
                <div class="catchup-filters">
                  <span class="filter-label">Sort</span>{' '}
                  <fieldset class="radio-field-group">
                    {FILTER_SORTS.map((key) => (
                      <label
                        class="filter-sort"
                        key={key}
                        onClick={(e) => {
                          if (sortBy === key) {
                            e.preventDefault();
                            e.stopPropagation();
                            setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
                          }
                        }}
                      >
                        <input
                          type="radio"
                          name="filter-sort-cat"
                          checked={sortBy === key}
                          onChange={() => {
                            setSortBy(key);
                            const order = /(replies|favourites|reblogs)/.test(
                              key,
                            )
                              ? 'desc'
                              : 'asc';
                            setSortOrder(order);
                          }}
                        />
                        {
                          {
                            createdAt: 'Date',
                            repliesCount: 'Replies',
                            favouritesCount: 'Likes',
                            reblogsCount: 'Boosts',
                            density: 'Density',
                          }[key]
                        }
                        {sortBy === key && (sortOrder === 'asc' ? ' ↑' : ' ↓')}
                      </label>
                    ))}
                  </fieldset>
                  {/* <fieldset class="radio-field-group">
                    {['asc', 'desc'].map((key) => (
                      <label class="filter-sort" key={key}>
                        <input
                          type="radio"
                          name="filter-sort-dir"
                          checked={sortOrder === key}
                          onChange={() => {
                            setSortOrder(key);
                          }}
                        />
                        {key === 'asc' ? '↑' : '↓'}
                      </label>
                    ))}
                  </fieldset> */}
                  <span class="filter-label">Group</span>{' '}
                  <fieldset class="radio-field-group">
                    {FILTER_GROUPS.map((key) => (
                      <label class="filter-group" key={key || 'none'}>
                        <input
                          type="radio"
                          name="filter-group"
                          checked={groupBy === key}
                          onChange={() => {
                            setGroupBy(key);
                          }}
                          disabled={key === 'account' && selectedAuthor}
                        />
                        {{
                          account: 'Authors',
                        }[key] || 'None'}
                      </label>
                    ))}
                  </fieldset>
                  {
                    selectedAuthor && authorCountsList.length > 1 ? (
                      <button
                        type="button"
                        class="plain6 small"
                        onClick={() => {
                          setSelectedAuthor(null);
                        }}
                        style={{
                          whiteSpace: 'nowrap',
                        }}
                      >
                        Show all authors
                      </button>
                    ) : null
                    // <button
                    //   type="button"
                    //   class="plain4 small"
                    //   onClick={() => {}}
                    // >
                    //   Group by authors
                    // </button>
                  }
                </div>
              )}
              <ul
                class={`catchup-list catchup-filter-${
                  FILTER_VALUES[selectedFilterCategory] || ''
                } ${sortBy ? `catchup-sort-${sortBy}` : ''} ${
                  selectedAuthor && authors[selectedAuthor]
                    ? `catchup-selected-author`
                    : ''
                } ${groupBy ? `catchup-group-${groupBy}` : ''}`}
              >
                {sortedFilteredPosts.map((post, i) => {
                  const id = post.reblog?.id || post.id;
                  let showSeparator = false;
                  if (groupBy === 'account') {
                    if (
                      prevGroup.current &&
                      post.account.id !== prevGroup.current &&
                      i > 0
                    ) {
                      showSeparator = true;
                    }
                    prevGroup.current = post.account.id;
                  }
                  return (
                    <Fragment key={`${post.id}-${showSeparator}`}>
                      {showSeparator && <li class="separator" />}
                      <IntersectionPostLineItem
                        to={`/${instance}/s/${id}`}
                        post={post}
                        root={scrollableRef.current}
                      />
                    </Fragment>
                  );
                })}
              </ul>
              <footer>
                {filteredPosts.length > 5 && (
                  <p>
                    {selectedFilterCategory === 'Boosts'
                      ? "You don't have to read everything."
                      : "That's all."}{' '}
                    <button
                      type="button"
                      class="textual"
                      onClick={() => {
                        scrollableRef.current.scrollTop = 0;
                      }}
                    >
                      Back to top
                    </button>
                    .
                  </p>
                )}
              </footer>
            </>
          )}
        </main>
      </div>
      {showHelp && (
        <Modal onClose={() => setShowHelp(false)}>
          <div class="sheet" id="catchup-help-sheet">
            <button
              type="button"
              class="sheet-close"
              onClick={() => setShowHelp(false)}
            >
              <Icon icon="x" />
            </button>
            <header>
              <h2>Help</h2>
            </header>
            <main>
              <dl>
                <dt>Top links</dt>
                <dd>
                  Links shared by followings, sorted by shared counts, boosts
                  and likes.
                </dd>
                <dt>Sort: Density</dt>
                <dd>
                  Posts are sorted by information density or depth. Shorter
                  posts are "lighter" while longer posts are "heavier". Posts
                  with photos are "heavier" than posts without photos.
                </dd>
                <dt>Group: Authors</dt>
                <dd>
                  Posts are grouped by authors, sorted by posts count per
                  author.
                </dd>
                <dt>Keyboard shortcuts</dt>
                <dd>
                  <kbd>j</kbd>: Next post
                </dd>
                <dd>
                  <kbd>k</kbd>: Previous post
                </dd>
                <dd>
                  <kbd>l</kbd>: Next author
                </dd>
                <dd>
                  <kbd>h</kbd>: Previous author
                </dd>
                <dd>
                  <kbd>Enter</kbd>: Open post details
                </dd>
                <dd>
                  <kbd>.</kbd>: Scroll to top
                </dd>
              </dl>
            </main>
          </div>
        </Modal>
      )}
    </div>
  );
}

const PostLine = memo(
  function ({ post }) {
    const {
      id,
      account,
      group,
      reblog,
      inReplyToId,
      inReplyToAccountId,
      _followedTags: isFollowedTags,
      _filtered: filterInfo,
      visibility,
      __BOOSTERS,
    } = post;
    const isReplyTo = inReplyToId && inReplyToAccountId !== account.id;
    const isFiltered = !!filterInfo;

    const debugHover = (e) => {
      if (e.shiftKey) {
        console.log({
          ...post,
        });
      }
    };

    return (
      <article
        class={`post-line ${
          group
            ? 'group'
            : reblog
            ? 'reblog'
            : isFollowedTags?.length
            ? 'followed-tags'
            : ''
        } ${isReplyTo ? 'reply-to' : ''} ${
          isFiltered ? 'filtered' : ''
        } visibility-${visibility}`}
        onMouseEnter={debugHover}
      >
        <span class="post-author">
          {reblog ? (
            <span class="post-reblog-avatar">
              <Avatar
                url={account.avatarStatic || account.avatar}
                squircle={account.bot}
              />
              {__BOOSTERS?.size > 0
                ? [...__BOOSTERS].map((b) => (
                    <Avatar url={b.avatarStatic || b.avatar} squircle={b.bot} />
                  ))
                : ''}{' '}
              <Icon icon="rocket" />{' '}
              {/* <Avatar
              url={reblog.account.avatarStatic || reblog.account.avatar}
              squircle={reblog.account.bot}
            /> */}
              <NameText account={reblog.account} showAvatar />
            </span>
          ) : (
            <NameText account={account} showAvatar />
          )}
        </span>
        <PostPeek post={reblog || post} filterInfo={filterInfo} />
        <span class="post-meta">
          <PostStats post={reblog || post} />{' '}
          <RelativeTime
            datetime={new Date(reblog?.createdAt || post.createdAt)}
            format="micro"
          />
        </span>
      </article>
    );
  },
  (oldProps, newProps) => {
    return oldProps?.post?.id === newProps?.post?.id;
  },
);

const IntersectionPostLineItem = ({ root, to, ...props }) => {
  const ref = useRef();
  const [show, setShow] = useState(false);
  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        const entry = entries[0];
        if (entry.isIntersecting) {
          queueMicrotask(() => setShow(true));
          observer.unobserve(ref.current);
        }
      },
      {
        root,
        rootMargin: `${Math.max(320, screen.height * 0.75)}px`,
      },
    );
    if (ref.current) observer.observe(ref.current);
    return () => {
      if (ref.current) observer.unobserve(ref.current);
    };
  }, []);

  return show ? (
    <li>
      <Link to={to}>
        <PostLine {...props} />
      </Link>
    </li>
  ) : (
    <li ref={ref} style={{ height: '4em' }} />
  );
};

// A media speak a thousand words
const MEDIA_DENSITY = 8;
const CARD_DENSITY = 8;
function postDensity(post) {
  const { spoilerText, content, poll, mediaAttachments, card } = post;
  const pollContent = poll?.options?.length
    ? poll.options.reduce((acc, cur) => acc + cur.title, '')
    : '';
  const density =
    (spoilerText.length + htmlContentLength(content) + pollContent.length) /
      140 +
    (mediaAttachments?.length
      ? MEDIA_DENSITY * mediaAttachments.length
      : card?.image
      ? CARD_DENSITY
      : 0);
  return density;
}

const MEDIA_SIZE = 48;

function PostPeek({ post, filterInfo }) {
  const {
    spoilerText,
    sensitive,
    content,
    emojis,
    poll,
    mediaAttachments,
    card,
    inReplyToId,
    inReplyToAccountId,
    account,
    _thread,
  } = post;
  const isThread =
    (inReplyToId && inReplyToAccountId === account.id) || !!_thread;
  const showMedia = !spoilerText && !sensitive;
  const postText = content ? statusPeek(post) : '';

  return (
    <div class="post-peek" title={!spoilerText ? postText : ''}>
      <span class="post-peek-content">
        {!!filterInfo ? (
          <>
            {isThread && (
              <>
                <span class="post-peek-tag post-peek-thread">Thread</span>{' '}
              </>
            )}
            <span class="post-peek-filtered">
              Filtered{filterInfo?.titlesStr ? `: ${filterInfo.titlesStr}` : ''}
            </span>
          </>
        ) : !!spoilerText ? (
          <>
            {isThread && (
              <>
                <span class="post-peek-tag post-peek-thread">Thread</span>{' '}
              </>
            )}
            <span class="post-peek-spoiler">
              <Icon icon="eye-close" /> {spoilerText}
            </span>
          </>
        ) : (
          <div class="post-peek-html">
            {isThread && (
              <>
                <span class="post-peek-tag post-peek-thread">Thread</span>{' '}
              </>
            )}
            {!!content && (
              <div
                dangerouslySetInnerHTML={{
                  __html: emojifyText(content, emojis),
                }}
              />
            )}
            {!!poll?.options?.length &&
              poll.options.map((o) => (
                <div>
                  {poll.multiple ? '▪️' : '•'} {o.title}
                </div>
              ))}
            {!content &&
              mediaAttachments?.length === 1 &&
              mediaAttachments[0].description && (
                <>
                  <span class="post-peek-tag post-peek-alt">ALT</span>{' '}
                  <div>{mediaAttachments[0].description}</div>
                </>
              )}
          </div>
        )}
      </span>
      {!filterInfo && (
        <span class="post-peek-post-content">
          {!!poll && (
            <span class="post-peek-tag post-peek-poll">
              <Icon icon="poll" size="s" />
              Poll
            </span>
          )}
          {!!mediaAttachments?.length
            ? mediaAttachments.map((m) => {
                const mediaURL = m.previewUrl || m.url;
                const remoteMediaURL = m.previewRemoteUrl || m.remoteUrl;
                return (
                  <span key={m.id} class="post-peek-media">
                    {{
                      image:
                        (mediaURL || remoteMediaURL) && showMedia ? (
                          <img
                            src={mediaURL}
                            width={MEDIA_SIZE}
                            height={MEDIA_SIZE}
                            alt={m.description}
                            loading="lazy"
                            onError={(e) => {
                              const { src } = e.target;
                              if (src === mediaURL) {
                                e.target.src = remoteMediaURL;
                              }
                            }}
                          />
                        ) : (
                          <span class="post-peek-faux-media">🖼</span>
                        ),
                      gifv:
                        (mediaURL || remoteMediaURL) && showMedia ? (
                          <img
                            src={mediaURL}
                            width={MEDIA_SIZE}
                            height={MEDIA_SIZE}
                            alt={m.description}
                            loading="lazy"
                            onError={(e) => {
                              const { src } = e.target;
                              if (src === mediaURL) {
                                e.target.src = remoteMediaURL;
                              }
                            }}
                          />
                        ) : (
                          <span class="post-peek-faux-media">🎞️</span>
                        ),
                      video:
                        (mediaURL || remoteMediaURL) && showMedia ? (
                          <img
                            src={mediaURL}
                            width={MEDIA_SIZE}
                            height={MEDIA_SIZE}
                            alt={m.description}
                            loading="lazy"
                            onError={(e) => {
                              const { src } = e.target;
                              if (src === mediaURL) {
                                e.target.src = remoteMediaURL;
                              }
                            }}
                          />
                        ) : (
                          <span class="post-peek-faux-media">📹</span>
                        ),
                      audio: <span class="post-peek-faux-media">🎵</span>,
                    }[m.type] || null}
                  </span>
                );
              })
            : !!card &&
              card.image &&
              showMedia && (
                <span
                  class={`post-peek-media post-peek-card card-${
                    card.type || ''
                  }`}
                >
                  {card.image ? (
                    <img
                      src={card.image}
                      width={MEDIA_SIZE}
                      height={MEDIA_SIZE}
                      alt={
                        card.title || card.description || card.imageDescription
                      }
                      loading="lazy"
                    />
                  ) : (
                    <span class="post-peek-faux-media">🔗</span>
                  )}
                </span>
              )}
        </span>
      )}
    </div>
  );
}

function PostStats({ post }) {
  const { reblogsCount, repliesCount, favouritesCount } = post;
  return (
    <span class="post-stats">
      {repliesCount > 0 && (
        <span class="post-stat-replies">
          <Icon icon="comment2" size="s" /> {shortenNumber(repliesCount)}
        </span>
      )}
      {favouritesCount > 0 && (
        <span class="post-stat-likes">
          <Icon icon="heart" size="s" /> {shortenNumber(favouritesCount)}
        </span>
      )}
      {reblogsCount > 0 && (
        <span class="post-stat-boosts">
          <Icon icon="rocket" size="s" /> {shortenNumber(reblogsCount)}
        </span>
      )}
    </span>
  );
}

const { locale } = new Intl.DateTimeFormat().resolvedOptions();
const dtf = new Intl.DateTimeFormat(locale, {
  year: 'numeric',
  month: 'short',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
});

function binByTime(data, key, numBins) {
  // Extract dates from data objects
  const dates = data.map((item) => new Date(item[key]));

  // Find minimum and maximum dates directly (avoiding Math.min/max)
  const minDate = dates.reduce(
    (acc, date) => (date < acc ? date : acc),
    dates[0],
  );
  const maxDate = dates.reduce(
    (acc, date) => (date > acc ? date : acc),
    dates[0],
  );

  // Calculate the time span in milliseconds
  const range = maxDate.getTime() - minDate.getTime();

  // Create empty bins and loop through data
  const bins = Array.from({ length: numBins }, () => []);
  data.forEach((item) => {
    const date = new Date(item[key]);
    const normalized = (date.getTime() - minDate.getTime()) / range;
    const binIndex = Math.floor(normalized * (numBins - 1));
    bins[binIndex].push(item);
  });

  return bins;
}

export default Catchup;