import {
  Ban,
  ChevronDown,
  ChevronsUp,
  ChevronUp,
  Loader2,
  Search,
} from "lucide-react";
import { useState } from "react";
import type { AnalyzeResult } from "@/api/types";
import { Button } from "@/components/ui/button";
import { toast } from "@/components/ui/toaster";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { useAnalyzeTweet, useCreateReaction } from "@/hooks/use-reactions";
import { ReactionModal } from "./ReactionModal";

interface TweetActionsProps {
  tweetId: string;
  authorHandle: string;
  onAnalyze?: (result: AnalyzeResult) => void;
}

export function TweetActions({
  tweetId,
  authorHandle,
  onAnalyze,
}: TweetActionsProps) {
  const [showModal, setShowModal] = useState<string | null>(null);
  const createReaction = useCreateReaction();
  const analyzeMutation = useAnalyzeTweet();

  const react = (type: string, reason?: string, target?: string) => {
    createReaction.mutate(
      { tweet_id: tweetId, reaction_type: type, reason, target },
      {
        onSuccess: (data) => {
          toast(data.message ?? `Reaction ${type} recorded`, "success");
        },
        onError: () => toast("Failed to save reaction", "error"),
      },
    );
  };

  const handleAnalyze = () => {
    analyzeMutation.mutate(tweetId, {
      onSuccess: (result) => {
        if (result.error) {
          toast(result.error, "error");
        } else {
          onAnalyze?.(result);
        }
      },
      onError: () => toast("Analysis failed", "error"),
    });
  };

  return (
    <div className="tweet-actions flex items-center gap-0.5 opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity">
      <Tooltip>
        <TooltipTrigger asChild>
          <Button
            variant="ghost"
            size="icon"
            className="h-6 w-6 text-zinc-400 hover:text-green-300"
            onClick={() => setShowModal(">>")}
          >
            <ChevronsUp className="h-3.5 w-3.5" />
          </Button>
        </TooltipTrigger>
        <TooltipContent>Top tier</TooltipContent>
      </Tooltip>

      <Tooltip>
        <TooltipTrigger asChild>
          <Button
            variant="ghost"
            size="icon"
            className="h-6 w-6 text-zinc-400 hover:text-cyan-300"
            onClick={() => setShowModal(">")}
          >
            <ChevronUp className="h-3.5 w-3.5" />
          </Button>
        </TooltipTrigger>
        <TooltipContent>Underrated</TooltipContent>
      </Tooltip>

      <Tooltip>
        <TooltipTrigger asChild>
          <Button
            variant="ghost"
            size="icon"
            className="h-6 w-6 text-zinc-400 hover:text-yellow-400"
            onClick={() => setShowModal("<")}
          >
            <ChevronDown className="h-3.5 w-3.5" />
          </Button>
        </TooltipTrigger>
        <TooltipContent>Overrated</TooltipContent>
      </Tooltip>

      <Tooltip>
        <TooltipTrigger asChild>
          <Button
            variant="ghost"
            size="icon"
            className="h-6 w-6 text-zinc-400 hover:text-red-300"
            onClick={() => react("x_author", undefined, authorHandle)}
            disabled={createReaction.isPending}
          >
            <Ban className="h-3.5 w-3.5" />
          </Button>
        </TooltipTrigger>
        <TooltipContent>Mute @{authorHandle}</TooltipContent>
      </Tooltip>

      <Tooltip>
        <TooltipTrigger asChild>
          <Button
            variant="ghost"
            size="icon"
            className="h-6 w-6 text-zinc-400 hover:text-cyan-300"
            onClick={handleAnalyze}
            disabled={analyzeMutation.isPending}
          >
            {analyzeMutation.isPending ? (
              <Loader2 className="h-3.5 w-3.5 animate-spin" />
            ) : (
              <Search className="h-3.5 w-3.5" />
            )}
          </Button>
        </TooltipTrigger>
        <TooltipContent>Deep analyze</TooltipContent>
      </Tooltip>

      {showModal && (
        <ReactionModal
          type={showModal}
          onConfirm={(reason) => {
            react(showModal, reason);
            setShowModal(null);
          }}
          onClose={() => setShowModal(null)}
        />
      )}
    </div>
  );
}
