"use client";

import { useState } from "react";
import { Heart } from "lucide-react";
import { apiToggleLike } from "@/lib/api";

interface LikeButtonProps {
  postId: string;
  liked: boolean;
  likeCount: number;
  variant?: "default" | "compact";
}

export default function LikeButton({ postId, liked: initialLiked, likeCount: initialCount, variant = "default" }: LikeButtonProps) {
  const [liked, setLiked] = useState(initialLiked);
  const [count, setCount] = useState(initialCount);
  const [loading, setLoading] = useState(false);

  const handleClick = async () => {
    if (loading) return;
    setLoading(true);
    try {
      const res = await apiToggleLike(postId);
      if (res.error === "未登录") {
        window.location.href = "/login";
        return;
      }
      if (typeof res.liked === "boolean") {
        setLiked(res.liked);
        setCount(res.like_count ?? count);
      }
    } finally {
      setLoading(false);
    }
  };

  const sizing = variant === "compact" ? "px-2 py-1 gap-1" : "px-3 py-1.5 gap-1.5";
  const iconSize = variant === "compact" ? 14 : 16;

  return (
    <button
      onClick={handleClick}
      disabled={loading}
      title={liked ? "取消点赞" : "点赞"}
      className={`flex items-center ${sizing} rounded-full text-sm font-medium transition-all disabled:opacity-50 ${
        liked
          ? "text-red-500 bg-red-50 dark:bg-red-900/20"
          : "text-gray-500 hover:text-red-500 hover:bg-gray-100 dark:hover:bg-gray-800"
      }`}
    >
      <Heart size={iconSize} fill={liked ? "currentColor" : "none"} />
      <span>{count}</span>
    </button>
  );
}