J621/frontend/src/features/follows/FollowedPage.tsx

import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { ChevronDown, ChevronRight, Eye, StarOff } from "lucide-react";
import { useState } from "react";
import { Link } from "react-router-dom";

import { Button, EmptyState, Spinner } from "@/components/ui";
import { api } from "@/lib/api";
import { cn } from "@/lib/cn";
import { formatDate } from "@/lib/format";
import type {
  FollowCloud,
  FollowCoverData,
  FollowedPool,
  FollowedTag,
  FollowFeed,
} from "@/lib/types";

const ratingPill: Record<string, string> = {
  s: "bg-ctp-green text-ctp-crust",
  q: "bg-ctp-peach text-ctp-crust",
  e: "bg-ctp-red text-ctp-crust",
};

function invalidateFollows(queryClient: ReturnType<typeof useQueryClient>) {
  void queryClient.invalidateQueries({ queryKey: ["follows-tags"] });
  void queryClient.invalidateQueries({ queryKey: ["follows-pools"] });
  void queryClient.invalidateQueries({ queryKey: ["follows-feed"] });
}

function unseenLabel(count: number): string {
  return count > 99 ? "99+ unseen" : `${count} unseen`;
}

function FollowCard({
  title,
  meta,
  cover,
  unseen,
  syncedAt,
  selected,
  onSelect,
  onSeen,
  onUnfollow,
}: {
  title: string;
  meta: string;
  cover: FollowCoverData | null;
  unseen: number;
  syncedAt: string | null;
  selected: boolean;
  onSelect: () => void;
  onSeen: () => void;
  onUnfollow: () => void;
}) {
  const metaLine = [meta, syncedAt ? `synced ${formatDate(syncedAt)}` : null]
    .filter(Boolean)
    .join(" · ");

  return (
    <div
      className={cn(
        "overflow-hidden rounded-lg border bg-ctp-base transition",
        selected
          ? "border-ctp-mauve ring-2 ring-ctp-mauve/30"
          : "border-ctp-surface0 hover:border-ctp-surface2",
      )}
    >
      <button
        type="button"
        onClick={onSelect}
        className="relative block aspect-[4/3] w-full overflow-hidden bg-ctp-mantle"
        title={selected ? "Clear the feed filter" : "Show only this in the feed"}
      >
        {cover?.preview_url ? (
          <img
            src={cover.preview_url}
            alt={title}
            loading="lazy"
            className="h-full w-full object-cover"
          />
        ) : (
          <span className="flex h-full w-full items-center justify-center text-xs text-ctp-overlay0">
            No cover yet — run a sync
          </span>
        )}
        {unseen > 0 ? (
          <span className="absolute right-2 top-2 rounded-full bg-ctp-red px-2 py-0.5 font-mono text-[10px] font-bold text-ctp-crust">
            {unseenLabel(unseen)}
          </span>
        ) : null}
        {cover?.rating ? (
          <span
            className={cn(
              "absolute left-2 top-2 rounded-full px-1.5 py-0.5 font-mono text-[10px] font-semibold uppercase",
              ratingPill[cover.rating] ?? "bg-ctp-surface1 text-ctp-text",
            )}
          >
            {cover.rating}
          </span>
        ) : null}
      </button>

      <div className="p-3">
        <div className="flex items-start justify-between gap-2">
          <div className="min-w-0">
            <p
              className="truncate font-mono text-sm text-ctp-text"
              title={title}
            >
              {title}
            </p>
            {metaLine ? (
              <p className="truncate text-[11px] text-ctp-overlay0">
                {metaLine}
              </p>
            ) : null}
          </div>
          <button
            type="button"
            onClick={onUnfollow}
            title="Unfollow"
            className="shrink-0 rounded p-1 text-ctp-overlay0 transition hover:bg-ctp-red/15 hover:text-ctp-red"
          >
            <StarOff className="h-4 w-4" />
          </button>
        </div>

        <div className="mt-2 flex items-center gap-2">
          <Button
            variant="secondary"
            className="px-2 py-1 text-xs"
            disabled={unseen === 0}
            onClick={onSeen}
          >
            <Eye className="h-3.5 w-3.5" /> Mark seen
          </Button>
        </div>
      </div>
    </div>
  );
}

function BlacklistCloudPanel() {
  const query = useQuery({
    queryKey: ["follows-cloud"],
    queryFn: () => api<FollowCloud>("/api/follows/cloud/"),
    refetchInterval: (q) =>
      q.state.data?.status === "building" ? 2000 : false,
  });
  const cloud = query.data;
  const [expanded, setExpanded] = useState(false);

  return (
    <section className="rounded-lg border border-ctp-surface0 bg-ctp-base p-4">
      <button
        type="button"
        onClick={() => setExpanded((value) => !value)}
        title={expanded ? "Hide the tags" : "Show the tags"}
        className="flex w-full items-center justify-between gap-2 text-left"
      >
        <h2 className="text-sm font-semibold text-ctp-subtext1">
          Blacklisted tags
        </h2>
        <span className="flex items-center gap-1.5 font-mono text-[11px] text-ctp-overlay0">
          {cloud ? `${cloud.blacklist_count} entries` : "…"}
          {cloud?.status === "building" ? (
            <Spinner className="h-3 w-3" />
          ) : null}
          {expanded ? (
            <ChevronDown className="h-3.5 w-3.5" />
          ) : (
            <ChevronRight className="h-3.5 w-3.5" />
          )}
        </span>
      </button>

      {expanded ? (
        <>
          <p className="mt-2 text-xs text-ctp-overlay0">
            {cloud?.source === "user"
              ? "From your e621 blacklist"
              : "From e621's anonymous default blacklist"}
            {cloud ? ` · ${cloud.posts} feed post(s) scanned` : ""}
            {cloud?.computed_at
              ? ` · computed ${formatDate(cloud.computed_at)}`
              : ""}
          </p>
          {query.isPending ? (
            <div className="mt-3 flex justify-center py-4">
              <Spinner className="h-4 w-4" />
            </div>
          ) : cloud && cloud.tags.length > 0 ? (
            <div className="mt-3 flex flex-wrap gap-1.5">
              {cloud.tags.map(([tag, count]) => (
                <span
                  key={tag}
                  className="rounded border border-ctp-red/30 bg-ctp-red/10 px-1.5 py-0.5 font-mono text-[11px] text-ctp-red"
                >
                  {tag} ({count})
                </span>
              ))}
            </div>
          ) : (
            <p className="mt-3 text-xs text-ctp-overlay0">
              No blacklisted tags in your feeds.
            </p>
          )}
        </>
      ) : null}
    </section>
  );
}

export default function FollowedPage() {
  const queryClient = useQueryClient();
  const [feedSource, setFeedSource] = useState<{
    kind: "all" | "tag" | "pool";
    id?: number;
    label?: string;
  }>({ kind: "all" });
  const [unseenOnly, setUnseenOnly] = useState(false);
  const [page, setPage] = useState(1);

  const tagsQuery = useQuery({
    queryKey: ["follows-tags"],
    // Unpaginated: this is the complete follow list, shown as cards below.
    queryFn: () => api<FollowedTag[]>("/api/follows/tags/"),
  });
  const poolsQuery = useQuery({
    queryKey: ["follows-pools"],
    queryFn: () => api<FollowedPool[]>("/api/follows/pools/"),
  });

  const feedQuery = useQuery({
    queryKey: [
      "follows-feed",
      feedSource.kind,
      feedSource.id ?? null,
      unseenOnly,
      page,
    ],
    queryFn: () => {
      const params = new URLSearchParams({
        page: String(page),
        per_page: "48",
      });
      if (feedSource.kind === "tag") params.set("tag", String(feedSource.id));
      if (feedSource.kind === "pool") params.set("pool", String(feedSource.id));
      if (unseenOnly) params.set("unseen", "1");
      return api<FollowFeed>(`/api/follows/feed/?${params.toString()}`);
    },
  });

  const seenFollow = useMutation({
    mutationFn: ({ kind, id }: { kind: "tag" | "pool"; id: number }) =>
      api(`/api/follows/${kind === "tag" ? "tags" : "pools"}/${id}/seen/`, {
        method: "POST",
      }),
    onSuccess: () => invalidateFollows(queryClient),
  });

  const seenPost = useMutation({
    mutationFn: (postId: number) =>
      api(`/api/follows/posts/${postId}/seen/`, { method: "POST" }),
    onSuccess: () => invalidateFollows(queryClient),
  });

  const unfollow = useMutation({
    mutationFn: ({ kind, id }: { kind: "tag" | "pool"; id: number }) =>
      api(`/api/follows/${kind === "tag" ? "tags" : "pools"}/${id}/`, {
        method: "DELETE",
      }),
    onSuccess: () => invalidateFollows(queryClient),
  });

  function selectSource(source: {
    kind: "all" | "tag" | "pool";
    id?: number;
    label?: string;
  }) {
    setPage(1);
    setFeedSource((current) =>
      current.kind === source.kind && current.id === source.id
        ? { kind: "all" }
        : source,
    );
  }

  const tags = tagsQuery.data ?? [];
  const pools = poolsQuery.data ?? [];
  const feed = feedQuery.data;

  return (
    <div className="mx-auto flex w-full max-w-6xl flex-col gap-6">
      <header>
        <h1 className="text-lg font-semibold">Followed</h1>
        <p className="mt-1 text-sm text-ctp-overlay0">
          New posts from your followed e621 tags and pools. Follow tags with
          the + on any tag chip in the online or library detail views, and
          pools from a pool page. The periodic commands refresh these feeds
          and their covers.
        </p>
      </header>

      <section className="flex flex-col gap-3">
        <h2 className="text-sm font-semibold text-ctp-subtext1">
          Tags{" "}
          <span className="font-mono text-[11px] text-ctp-overlay0">
            {tags.length}
          </span>
        </h2>
        {tagsQuery.isPending ? (
          <div className="flex justify-center py-8">
            <Spinner className="h-5 w-5" />
          </div>
        ) : tags.length === 0 ? (
          <p className="text-xs text-ctp-overlay0">
            No followed tags yet — use the + on any tag chip.
          </p>
        ) : (
          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
            {tags.map((follow) => (
              <FollowCard
                key={follow.id}
                title={follow.tag}
                meta={
                  follow.cover_data?.post_id
                    ? `latest #${follow.cover_data.post_id}`
                    : ""
                }
                cover={follow.cover_data}
                unseen={follow.unseen_count}
                syncedAt={follow.last_synced_at}
                selected={
                  feedSource.kind === "tag" && feedSource.id === follow.id
                }
                onSelect={() =>
                  selectSource({
                    kind: "tag",
                    id: follow.id,
                    label: `tag:${follow.tag}`,
                  })
                }
                onSeen={() => seenFollow.mutate({ kind: "tag", id: follow.id })}
                onUnfollow={() => unfollow.mutate({ kind: "tag", id: follow.id })}
              />
            ))}
          </div>
        )}
      </section>

      <section className="flex flex-col gap-3">
        <h2 className="text-sm font-semibold text-ctp-subtext1">
          Pools{" "}
          <span className="font-mono text-[11px] text-ctp-overlay0">
            {pools.length}
          </span>
        </h2>
        {poolsQuery.isPending ? (
          <div className="flex justify-center py-8">
            <Spinner className="h-5 w-5" />
          </div>
        ) : pools.length === 0 ? (
          <p className="text-xs text-ctp-overlay0">
            No followed pools yet — open a pool and use "Follow pool".
          </p>
        ) : (
          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
            {pools.map((follow) => (
              <FollowCard
                key={follow.id}
                title={follow.name || `Pool #${follow.pool_id}`}
                meta={`#${follow.pool_id}${
                  follow.cover_data?.post_id
                    ? ` · latest #${follow.cover_data.post_id}`
                    : ""
                }`}
                cover={follow.cover_data}
                unseen={follow.unseen_count}
                syncedAt={follow.last_synced_at}
                selected={
                  feedSource.kind === "pool" && feedSource.id === follow.id
                }
                onSelect={() =>
                  selectSource({
                    kind: "pool",
                    id: follow.id,
                    label: follow.name || `Pool #${follow.pool_id}`,
                  })
                }
                onSeen={() =>
                  seenFollow.mutate({ kind: "pool", id: follow.id })
                }
                onUnfollow={() =>
                  unfollow.mutate({ kind: "pool", id: follow.id })
                }
              />
            ))}
          </div>
        )}
      </section>

      <section className="flex flex-col gap-3">
        <div className="flex flex-wrap items-center justify-between gap-2">
          <h2 className="text-sm font-semibold text-ctp-subtext1">
            Feed{" "}
            <span className="font-mono text-[11px] text-ctp-overlay0">
              {feed ? `${feed.count}` : "…"}
              {feedSource.kind !== "all" ? ` · showing ${feedSource.label}` : ""}
            </span>
          </h2>
          <div className="flex items-center gap-2">
            <button
              type="button"
              onClick={() => {
                setPage(1);
                setUnseenOnly((value) => !value);
              }}
              className={cn(
                "rounded-full border px-2.5 py-1 text-xs font-medium transition",
                unseenOnly
                  ? "border-ctp-blue/40 bg-ctp-blue/15 text-ctp-blue"
                  : "border-ctp-surface1 text-ctp-subtext0 hover:border-ctp-surface2 hover:text-ctp-text",
              )}
            >
              Unseen only
            </button>
            {feedSource.kind !== "all" ? (
              <button
                type="button"
                onClick={() => {
                  setPage(1);
                  setFeedSource({ kind: "all" });
                }}
                className="text-xs text-ctp-blue hover:underline"
              >
                Clear filter
              </button>
            ) : null}
          </div>
        </div>

        {feedQuery.isPending ? (
          <div className="flex justify-center py-12">
            <Spinner className="h-5 w-5" />
          </div>
        ) : !feed || feed.results.length === 0 ? (
          <EmptyState
            title="Nothing in the feed"
            description={
              unseenOnly
                ? "Everything here is marked seen."
                : "Follow tags or pools, or run a sync command to fetch posts."
            }
          />
        ) : (
          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-4">
            {feed.results.map((entry) => (
              <Link
                key={entry.post_id}
                to={`/detail/${entry.post_id}`}
                onClick={() => {
                  if (!entry.seen) seenPost.mutate(entry.post_id);
                }}
                className="group block overflow-hidden rounded-lg border border-ctp-surface0 bg-ctp-base transition hover:border-ctp-surface2"
              >
                <span className="relative block aspect-square overflow-hidden bg-ctp-mantle">
                  {entry.data.preview?.url ? (
                    <img
                      src={entry.data.preview.url}
                      alt={`Post #${entry.post_id}`}
                      loading="lazy"
                      className="h-full w-full object-cover transition group-hover:scale-[1.03]"
                    />
                  ) : (
                    <span className="flex h-full w-full items-center justify-center text-[10px] text-ctp-overlay0">
                      No preview
                    </span>
                  )}
                  {!entry.seen ? (
                    <span
                      className="absolute left-2 top-2 h-2.5 w-2.5 rounded-full bg-ctp-blue ring-2 ring-ctp-crust"
                      title="Unseen"
                    />
                  ) : null}
                  {entry.data.rating ? (
                    <span
                      className={cn(
                        "absolute right-2 top-2 rounded-full px-1.5 py-0.5 font-mono text-[10px] font-semibold uppercase",
                        ratingPill[entry.data.rating] ??
                          "bg-ctp-surface1 text-ctp-text",
                      )}
                    >
                      {entry.data.rating}
                    </span>
                  ) : null}
                </span>
                <span className="block px-2 py-1.5">
                  <span className="block font-mono text-[11px] text-ctp-subtext0">
                    #{entry.post_id}
                    <span className="text-ctp-overlay0">
                      {" "}
                      ▲ {entry.data.score?.total ?? 0}
                      {entry.data.fav_count
                        ? ` · ${entry.data.fav_count} ★`
                        : ""}
                    </span>
                  </span>
                  <span className="block truncate text-[10px] text-ctp-overlay0">
                    {entry.sources.map((source) => source.label).join(", ")}
                  </span>
                </span>
              </Link>
            ))}
          </div>
        )}

        {feed && (page > 1 || feed.has_next) ? (
          <div className="flex items-center justify-center gap-3">
            <Button
              variant="secondary"
              disabled={page <= 1 || feedQuery.isFetching}
              onClick={() => setPage((current) => Math.max(1, current - 1))}
            >
              Previous
            </Button>
            <span className="font-mono text-xs text-ctp-subtext0">
              Page {page}
            </span>
            <Button
              variant="secondary"
              disabled={!feed.has_next || feedQuery.isFetching}
              onClick={() => setPage((current) => current + 1)}
            >
              Next
            </Button>
          </div>
        ) : null}
      </section>

      <BlacklistCloudPanel />
    </div>
  );
}