tkmind_go/ui/plaza/components/post/PostActions.tsx

'use client';

import { useState } from 'react';
import type { PlazaStats } from '@/types/plaza';
import { LoginPrompt } from '@/components/auth/LoginPrompt';
import { formatCount } from '@/lib/format';
import { PlazaApiError, togglePostReaction } from '@/lib/api';
import { plazaPath, siteOrigin } from '@/lib/site';

type PostActionsProps = {
  postId: string;
  stats: PlazaStats;
  viewerReacted?: { liked: boolean; collected: boolean } | null;
};

export function PostActions({ postId, stats, viewerReacted }: PostActionsProps) {
  const [liked, setLiked] = useState(viewerReacted?.liked ?? false);
  const [collected, setCollected] = useState(viewerReacted?.collected ?? false);
  const [likeCount, setLikeCount] = useState(stats.like_count);
  const [collectCount, setCollectCount] = useState(stats.collect_count);
  const [shareHint, setShareHint] = useState('');
  const [shareOpen, setShareOpen] = useState(false);
  const [loginOpen, setLoginOpen] = useState(false);
  const [busy, setBusy] = useState<'like' | 'collect' | null>(null);

  const handleReaction = async (type: 'like' | 'collect') => {
    if (busy) return;
    const active = type === 'like' ? liked : collected;
    setBusy(type);
    try {
      await togglePostReaction(postId, type, active);
      if (type === 'like') {
        setLiked(!active);
        setLikeCount((value) => Math.max(0, value + (active ? -1 : 1)));
      } else {
        setCollected(!active);
        setCollectCount((value) => Math.max(0, value + (active ? -1 : 1)));
      }
    } catch (error) {
      if (error instanceof PlazaApiError && error.code === 'unauthorized') {
        setLoginOpen(true);
      }
    } finally {
      setBusy(null);
    }
  };

  const shareUrl = `${siteOrigin()}${plazaPath(`p/${postId}`)}`;
  const shareImageUrl = `${siteOrigin()}${plazaPath(`p/${postId}/opengraph-image`)}`;

  const handleShare = async () => {
    try {
      await navigator.clipboard.writeText(shareUrl);
      setShareHint('链接已复制');
    } catch {
      setShareHint(shareUrl);
    }
    try {
      await togglePostReaction(postId, 'share', false);
    } catch {
      // 未登录时忽略 share 计数
    }
    window.setTimeout(() => setShareHint(''), 2500);
  };

  const handleCopyImageLink = async () => {
    try {
      await navigator.clipboard.writeText(shareImageUrl);
      setShareHint('分享图链接已复制');
    } catch {
      setShareHint(shareImageUrl);
    }
    setShareOpen(false);
    window.setTimeout(() => setShareHint(''), 2500);
  };

  return (
    <>
      <div className="flex flex-wrap items-center gap-3 rounded-2xl border border-[#d6d0c3] bg-[#fffdf7] px-5 py-4">
        <button
          type="button"
          disabled={busy === 'like'}
          onClick={() => handleReaction('like')}
          className={`inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold transition ${
            liked
              ? 'bg-[#2f6f57] text-white'
              : 'border border-[#d6d0c3] text-[#17221d] hover:border-[#2f6f57] hover:text-[#2f6f57]'
          }`}
        >
          👍 {formatCount(likeCount)}
        </button>
        <button
          type="button"
          disabled={busy === 'collect'}
          onClick={() => handleReaction('collect')}
          className={`inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold transition ${
            collected
              ? 'bg-amber-600 text-white'
              : 'border border-[#d6d0c3] text-[#17221d] hover:border-amber-600 hover:text-amber-700'
          }`}
        >
          🔖 {formatCount(collectCount)}
        </button>
        <button
          type="button"
          onClick={() => setShareOpen((open) => !open)}
          className="inline-flex items-center gap-2 rounded-full border border-[#d6d0c3] px-4 py-2 text-sm font-semibold text-[#17221d] transition hover:border-[#2f6f57] hover:text-[#2f6f57]"
        >
          📤 分享
        </button>
        {shareOpen ? (
          <div className="flex w-full flex-wrap gap-2 border-t border-[#ebe4d6] pt-3">
            <button
              type="button"
              onClick={() => void handleShare()}
              className="rounded-full border border-[#d6d0c3] px-4 py-2 text-sm text-[#17221d]"
            >
              复制链接
            </button>
            <button
              type="button"
              onClick={() => void handleCopyImageLink()}
              className="rounded-full border border-[#d6d0c3] px-4 py-2 text-sm text-[#17221d]"
            >
              复制分享图链接
            </button>
            <a
              href={shareImageUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="rounded-full border border-[#d6d0c3] px-4 py-2 text-sm text-[#17221d]"
            >
              预览分享图
            </a>
          </div>
        ) : null}
        {shareHint ? <span className="text-sm text-[#2f6f57]">{shareHint}</span> : null}
      </div>
      <LoginPrompt open={loginOpen} onClose={() => setLoginOpen(false)} />
    </>
  );
}