import { useMemo } from "react";
import { t } from "@lingui/core/macro"
import { Trans } from "@lingui/react/macro";
import { ErrorCard } from "../../components/ErrorCard.tsx";
import {
  JournalCard,
  type JournalTier,
} from "../../components/JournalCard.tsx";
import { hotScore } from "../../utils/hotScore.ts";
import type { MainFeedProps } from "./types.ts";

export function JournalFeed(
  {
    dumps,
    loading,
    error,
    hasMore,
    loadingMore,
    sentinelRef,
    voteCounts,
    myVotes,
    user,
    castVote,
    removeVote,
  }: MainFeedProps,
) {
  const tiered = useMemo(() => {
    const sorted = [...dumps].sort((a, b) => hotScore(b) - hotScore(a));
    const n = sorted.length;
    return sorted.map((dump, i) => {
      const rank = i / n;
      const tier: JournalTier = rank < 0.2
        ? "large"
        : rank < 0.5
        ? "medium"
        : "small";
      return { dump, tier };
    });
  }, [dumps]);

  if (loading) return <p className="index-status"><Trans>Loading…</Trans></p>;
  if (error) return <ErrorCard title={t`Failed to load`} message={error} />;
  if (tiered.length === 0) {
    return <p className="index-status"><Trans>No dumps yet. Be the first!</Trans></p>;
  }

  return (
    <>
      <ul className="journal-grid">
        {tiered.map(({ dump, tier }) => (
          <JournalCard
            key={dump.id}
            dump={dump}
            tier={tier}
            voteCount={voteCounts[dump.id] ?? dump.voteCount}
            voted={myVotes.has(dump.id)}
            canVote={!!user}
            castVote={castVote}
            removeVote={removeVote}
            isOwner={user?.id === dump.userId}
          />
        ))}
      </ul>
      <div ref={sentinelRef} />
      {loadingMore && <p className="feed-loading-more"><Trans>Loading more…</Trans></p>}
      {!hasMore && tiered.length > 0 && (
        <p className="feed-end"><Trans>You've reached the end.</Trans></p>
      )}
    </>
  );
}