// import spinner from "@/assets/icons/spinner.svg";
import Composer from "@/components/composer/Composer";
import PostList from "@/components/feed/PostList";
import Profile from "@/components/profile/Profile";
import useLocalState, { useStore } from "@/state/state";
import Icon from "@/components/Icon";
import toast from "react-hot-toast";
import { useState } from "react";
import type { FC } from "@/types/trill";
import type { UserType } from "@/types/nostrill";
import { isValidPatp } from "urbit-ob";
import { isValidNostrPubkey } from "@/logic/nostrill";
import { ErrorPage } from "@/Router";

function UserLoader({ userString }: { userString: string }) {
  const { api, pubkey } = useLocalState((s) => ({
    api: s.api,
    pubkey: s.pubkey,
  }));
  // auto updating on SSE doesn't work if we do shallow

  const user = isValidPatp(userString)
    ? { urbit: userString }
    : isValidNostrPubkey(userString)
      ? { nostr: userString }
      : { error: "" };

  const isOwnProfile =
    "urbit" in user
      ? user.urbit === api?.airlock.our
      : "nostr" in user
        ? pubkey === user.nostr
        : false;
  if ("error" in user) return <ErrorPage msg={"Invalid user"} />;
  else
    return <UserFeed user={user} userString={userString} isMe={isOwnProfile} />;
}

function UserFeed({
  user,
  userString,
  isMe,
}: {
  user: UserType;
  userString: string;
  isMe: boolean;
}) {
  const { api, addProfile } = useLocalState((s) => ({
    api: s.api,
    addProfile: s.addProfile,
  }));
  // auto updating on SSE doesn't work if we do shallow
  const { following } = useStore();
  const feed = following.get(userString);
  const refetch = () => feed;
  const isFollowing = following.has(userString);

  const [isFollowLoading, setIsFollowLoading] = useState(false);
  const [isAccessLoading, setIsAccessLoading] = useState(false);
  const [fc, setFC] = useState<FC>();

  const handleFollow = async () => {
    if (!api) return;

    setIsFollowLoading(true);
    try {
      if (isFollowing) {
        await api.unfollow(user);
        toast.success(`Unfollowed ${userString}`);
      } else {
        await api.follow(user);
        toast.success(`Now following ${userString}`);
      }
    } catch (error) {
      toast.error(
        `Failed to ${isFollowing ? "unfollow" : "follow"} ${userString}`,
      );
      console.error("Follow error:", error);
    } finally {
      setIsFollowLoading(false);
    }
  };

  const handleRequestAccess = async () => {
    if (!api) return;
    if (!("urbit" in user)) return;

    setIsAccessLoading(true);
    try {
      const res = await api.peekFeed(user.urbit);
      toast.success(`Access request sent to ${user.urbit}`);
      if ("error" in res) toast.error(res.error);
      else {
        console.log("peeked", res.ok.feed);
        setFC(res.ok.feed);
        if (res.ok.profile) addProfile(userString, res.ok.profile);
      }
    } catch (error) {
      toast.error(`Failed to request access from ${user.urbit}`);
      console.error("Access request error:", error);
    } finally {
      setIsAccessLoading(false);
    }
  };

  return (
    <div id="user-page">
      <Profile user={user} userString={userString} isMe={isMe} />

      {!isMe && (
        <div className="user-actions">
          <button
            onClick={handleFollow}
            disabled={isFollowLoading}
            className={`action-btn ${isFollowing ? "" : "follow"}`}
          >
            {isFollowLoading ? (
              <>
                <Icon name="settings" size={16} />
                {isFollowing ? "Unfollowing..." : "Following..."}
              </>
            ) : (
              <>
                <Icon name={isFollowing ? "bell" : "pals"} size={16} />
                {isFollowing ? "Unfollow" : "Follow"}
              </>
            )}
          </button>

          <button
            onClick={handleRequestAccess}
            disabled={isAccessLoading}
            className="action-btn access"
          >
            {isAccessLoading ? (
              <>
                <Icon name="settings" size={16} />
                Requesting...
              </>
            ) : (
              <>
                <Icon name="key" size={16} />
                Request Access
              </>
            )}
          </button>
        </div>
      )}

      {feed ? (
        <div id="feed-proper">
          <Composer />
          <PostList data={feed} refetch={refetch} />
        </div>
      ) : fc ? (
        <div id="feed-proper">
          <Composer />
          <PostList data={fc} refetch={refetch} />
        </div>
      ) : null}

      {!isMe && !feed && !fc && (
        <div id="other-user-feed">
          <div className="empty-feed-message">
            <Icon name="messages" size={48} color="textMuted" />
            <h3>No Posts Available</h3>
            <p>
              This user's posts are not publicly visible.
              {!isFollowing && " Try following them"} or request temporary
              access to see their content.
            </p>
          </div>
        </div>
      )}
    </div>
  );
}

export default UserLoader;