"use client";
import { reactToPostAction, repostAction } from "@/lib/actions/user";
import { Post } from "@/types/custom/user";
import { ReactToPostSchemaType } from "@/types/validation/user";
import { MessageCircle, Repeat2, Vote, Eye, Bookmark } from "lucide-react";
import React, { startTransition, useOptimistic, useState } from "react";

const PostActionBar: React.FC<{ post: Post; token: string }> = ({
  post,
  token,
}) => {
  const [hasCommented, setHasCommented] = useState(
    Boolean(post.hasCommented ? JSON.parse(post.hasCommented) : null)
  );
  const [hasLiked, setHasLiked] = useState(
    Boolean(post.hasLiked ? JSON.parse(post.hasLiked) : null)
  );
  const [hasBookmarked, setHasBookmarked] = useState(false);

  const [optimisticRepost, updateOptimisticRepost] = useOptimistic<
    { reposts: number; userHasReposted: boolean },
    { post_id: number; action: "repost" | "unrepost" }
  >(
    { reposts: post.repost_count, userHasReposted: false },
    (current, newAction) => {
      const repostChange = newAction.action === "repost" ? 1 : -1;
      return {
        reposts: current.reposts + repostChange,
        userHasReposted: newAction.action === "repost",
      };
    }
  );

  const [optimisticState, updateOptimistic] = useOptimistic<
    { likes: number; userHasLiked: boolean },
    { post_id: number; action: "like" | "unlike" }
  >(
    { likes: post.like_count, userHasLiked: hasLiked },
    (current, newAction) => {
      const likesChange = newAction.action === "like" ? 1 : -1;
      return {
        likes: current.likes + likesChange,
        userHasLiked: newAction.action === "like",
      };
    }
  );

  const handleReaction = async (action: "like" | "unlike") => {
    startTransition(() => {
      updateOptimistic({ post_id: post.post_id, action });
    });

    try {
      const res = await reactToPostAction(
        { post_id: post.post_id, action },
        token
      );

      if (res?.error) {
        console.error("Failed to react to post:", res.error);
        rollbackOptimisticUpdate(action);
      }
    } catch (error) {
      rollbackOptimisticUpdate(action);
    }
  };

  const rollbackOptimisticUpdate = (action: "like" | "unlike") => {
    const rollbackAction = action === "like" ? "unlike" : "like";
    startTransition(() => {
      updateOptimistic({ post_id: post.post_id, action: rollbackAction });
    });
  };

  const handleRepost = async (action: "repost" | "unrepost") => {
    startTransition(() => {
      updateOptimisticRepost({ post_id: post.post_id, action });
    });

    try {
      const res = await repostAction(
        { original_post_id: post.post_id, location: "Ahoada, Rivers" },
        token
      );

      if (res?.error) {
        console.error("Failed to repost:", res.error);
        rollbackOptimisticRepost(action);
      }
    } catch (error) {
      rollbackOptimisticRepost(action);
    }
  };

  const rollbackOptimisticRepost = (action: "repost" | "unrepost") => {
    const rollbackAction = action === "repost" ? "unrepost" : "repost";
    startTransition(() => {
      updateOptimisticRepost({ post_id: post.post_id, action: rollbackAction });
    });
  };

  return (
    <>
      <span
        role="button"
        className="space-x-0.5 flex items-center text-sm group relative"
        onClick={() =>
          handleReaction(optimisticState.userHasLiked ? "unlike" : "like")
        }
      >
        <span className="relative flex items-center justify-center">
          <MessageCircle
            className={`transition-colors duration-300 !m-0 relative z-10 ${
              hasCommented ? "text-blue-600" : ""
            } group-hover:text-blue-600`}
            size={20}
          />
          <span className="absolute rounded-full bg-blue-600/10 size-9 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
        </span>
        <span
          className={`transition-colors duration-300 ${
            hasCommented ? "text-blue-600" : ""
          } group-hover:text-blue-600`}
        >
          {post.comment_count}{" "}
        </span>
      </span>

      <span
        role="button"
        className="space-x-0.5 flex items-center text-sm group relative"
        onClick={() =>
          handleRepost(optimisticRepost.userHasReposted ? "unrepost" : "repost")
        }
      >
        <span className="relative flex items-center justify-center">
          <Repeat2
            className={`transition-colors duration-300 !m-0 relative z-10 ${
              optimisticRepost.userHasReposted ? "text-green-600" : ""
            } group-hover:text-green-600`}
            size={20}
          />
          <span className="absolute rounded-full bg-green-600/10 size-9 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
        </span>
        <span
          className={`transition-colors duration-300 ${
            optimisticRepost.userHasReposted ? "text-green-600" : ""
          } group-hover:text-green-600`}
        >
          {optimisticRepost.reposts}
        </span>
      </span>

      <span
        role="button"
        className="space-x-0.5 flex items-center text-sm group relative"
        onClick={() =>
          handleReaction(optimisticState.userHasLiked ? "unlike" : "like")
        }
      >
        <span className="relative flex items-center justify-center">
          <Vote
            className={`transition-colors duration-300 !m-0 relative z-10 ${
              optimisticState.userHasLiked ? "text-red-600" : ""
            } group-hover:text-red-600`}
            size={20}
          />
          <span className="absolute rounded-full bg-red-600/10 size-9 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
        </span>
        <span
          className={`transition-colors duration-300 ${
            optimisticState.userHasLiked ? "text-red-600" : ""
          } group-hover:text-red-600`}
        >
          {optimisticState.likes}
        </span>
      </span>

      <span
        role="button"
        className="space-x-1 flex items-center cursor-default text-sm"
      >
        <Eye className="" size={20} />
        <span>{post.view_count}</span>
      </span>

      <span
        role="button"
        className="space-x-0.5 flex items-center text-sm group relative"
        onClick={() =>
          handleReaction(optimisticState.userHasLiked ? "unlike" : "like")
        }
      >
        <span className="relative flex items-center justify-center">
          <Bookmark
            className={`transition-colors duration-300 !m-0 relative z-10 ${
              hasBookmarked ? "text-blue-600" : ""
            } group-hover:text-blue-600`}
            size={20}
          />
          <span className="absolute rounded-full bg-blue-600/10 size-9 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
        </span>
        <span
          className={`transition-colors duration-300 ${
            hasBookmarked ? "text-blue-600" : ""
          } group-hover:text-blue-600`}
        >
          {post.bookmark_count}
        </span>
      </span>
    </>
  );
};

export default PostActionBar;