"use client";

import { MessageSquare } from "lucide-react";
import LikeButton from "./LikeButton";
import { scrollBehavior } from "@/lib/motion";

/**
 * 帖子详情移动端浮动操作条（lg 以下显示）：
 * 长文读到中途也能点赞 / 跳评论框；回顶由全局 BackToTop 承担。
 */
export default function MobilePostBar({
  postId,
  liked,
  likeCount,
  allowComments = true,
}: {
  postId: string;
  liked: boolean;
  likeCount: number;
  allowComments?: boolean;
}) {
  const scrollToComments = () => {
    document.getElementById("comment-input")?.scrollIntoView({
      behavior: scrollBehavior(),
      block: "center",
    });
  };

  return (
    <div className="lg:hidden fixed bottom-4 left-1/2 -translate-x-1/2 z-40" role="navigation" aria-label="阅读操作">
      <div
        className="flex items-center gap-0.5 rounded-full border px-1.5 py-1.5"
        style={{
          background: "color-mix(in srgb, var(--panel) 90%, transparent)",
          borderColor: "var(--line-2)",
          boxShadow: "var(--shadow-lg)",
          backdropFilter: "blur(14px)",
          WebkitBackdropFilter: "blur(14px)",
        }}
      >
        {allowComments ? (
          <button
            type="button"
            onClick={scrollToComments}
            className="w-11 h-11 flex items-center justify-center rounded-full transition-colors hover:bg-[var(--panel-2)] focus-visible:bg-[var(--panel-2)]"
            style={{ color: "var(--ink-2)" }}
            aria-label="跳到评论框"
          >
            <MessageSquare size={18} />
          </button>
        ) : null}
        <div className="j13-bar-like">
          <LikeButton postId={postId} liked={liked} likeCount={likeCount} variant="compact" />
        </div>
      </div>
    </div>
  );
}