import { Link } from "@tanstack/react-router";
import { useState } from "react";
import { listFollows, setFollow } from "~/fns/profile";
import { useOptimisticMutation } from "~/hooks/use-optimistic-mutation";
import { Button } from "~/ui/Button";
import { Avatar } from "~/ui/Avatar";

type Person = { name: string; display_name: string | null; avatar_key: string | null };
type Props = { name: string; followers: number; following: number; isFollowing: boolean; canFollow: boolean };

export function FollowPanel({ name, followers, following, isFollowing, canFollow }: Props) {
  const follow = useOptimisticMutation(
    { isFollowing, followers },
    (state, next: boolean) => ({ isFollowing: next, followers: Math.max(0, state.followers + (next ? 1 : -1)) }),
    (next: boolean) => setFollow({ data: { name, follow: next } }),
  );
  const [list, setList] = useState<{ direction: "followers" | "following"; people: Person[] } | null>(null);

  async function show(direction: "followers" | "following") {
    if (list?.direction === direction) return setList(null);
    setList({ direction, people: await listFollows({ data: { name, direction } }) });
  }

  return (
    <div className="space-y-3 text-sm">
      {canFollow && (
        <Button
          className="w-full"
          variant={follow.state.isFollowing ? "secondary" : "primary"}
          aria-pressed={follow.state.isFollowing}
          onClick={() => follow.run(!follow.state.isFollowing)}
        >
          {follow.state.isFollowing ? "Unfollow" : "Follow"}
        </Button>
      )}
      <div className="flex gap-3 text-kumo-subtle">
        <button type="button" className="hover:text-accent-400" onClick={() => show("followers")}>
          <span className="font-medium text-kumo-strong tabular-nums">{follow.state.followers}</span> followers
        </button>
        <button type="button" className="hover:text-accent-400" onClick={() => show("following")}>
          <span className="font-medium text-kumo-strong">{following}</span> following
        </button>
      </div>
      {follow.error && <p className="text-xs text-kumo-danger">{follow.error}</p>}
      {list && (
        <ul className="space-y-1.5 rounded-md border border-kumo-hairline p-2">
          {list.people.length === 0 && <li className="text-xs text-kumo-subtle">Nobody yet</li>}
          {list.people.map((person) => (
            <li key={person.name}>
              <Link
                to="/$owner"
                params={{ owner: person.name }}
                className="flex items-center gap-2 hover:text-accent-400"
              >
                <Avatar
                  name={person.name}
                  size="sm"
                  src={person.avatar_key ? `/avatars/${person.avatar_key}?s=40` : null}
                />
                <span className="truncate text-kumo-default">{person.display_name ?? person.name}</span>
              </Link>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}