'use client';
import { useState, useEffect } from 'react';
import { useTranslations } from 'next-intl';
import { LoginModal } from './LoginModal';
import { trackEvent } from '@/lib/analytics';

type Props = {
  isLoggedIn: boolean;
  slug: string;
  initialLikeCount: number;
  initialDislikeCount: number;
  initialLiked: boolean;
  initialDisliked: boolean;
};

export function VoteButtons({
  isLoggedIn, slug,
  initialLikeCount, initialDislikeCount,
  initialLiked, initialDisliked,
}: Props) {
  const t = useTranslations('blog');
  const [like, setLike] = useState(initialLikeCount);
  const [dislike, setDislike] = useState(initialDislikeCount);
  const [liked, setLiked] = useState(initialLiked);
  const [disliked, setDisliked] = useState(initialDisliked);
  const [showLogin, setShowLogin] = useState(false);
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState<string | null>(null);

  // 提示自动消失（3 秒）
  useEffect(() => {
    if (!message) return;
    const timer = setTimeout(() => setMessage(null), 3000);
    return () => clearTimeout(timer);
  }, [message]);

  const vote = async (type: 'like' | 'dislike') => {
    if (!isLoggedIn) {
      setShowLogin(true);
      return;
    }
    if (loading) return;

    // 记录点击前状态，用于失败回滚
    const prevLike = like;
    const prevDislike = dislike;
    const prevLiked = liked;
    const prevDisliked = disliked;

    setLoading(true);

    // 乐观更新：再次点击同一类型则撤销；切换类型则撤销旧投票
    if (type === 'like') {
      if (prevLiked) {
        setLike((v) => v - 1);
        setLiked(false);
      } else {
        setLike((v) => v + 1);
        setLiked(true);
        if (prevDisliked) {
          setDislike((v) => v - 1);
          setDisliked(false);
        }
      }
    } else {
      if (prevDisliked) {
        setDislike((v) => v - 1);
        setDisliked(false);
      } else {
        setDislike((v) => v + 1);
        setDisliked(true);
        if (prevLiked) {
          setLike((v) => v - 1);
          setLiked(false);
        }
      }
    }

    try {
      const res = await fetch(`/api/blog/${slug}/vote`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ type }),
      });
      const data = await res.json();
      if (res.ok) {
        setLike(data.likeCount);
        setDislike(data.dislikeCount);
        setLiked(data.liked);
        setDisliked(data.disliked);
        trackEvent(type, { meta: { action_type: data.action || 'new', slug } });
      } else {
        // 回滚到点击前状态
        setLike(prevLike);
        setDislike(prevDislike);
        setLiked(prevLiked);
        setDisliked(prevDisliked);
        setMessage(data.error || '操作失败');
      }
    } catch {
      // 回滚到点击前状态
      setLike(prevLike);
      setDislike(prevDislike);
      setLiked(prevLiked);
      setDisliked(prevDisliked);
      setMessage('操作失败，请重试');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="vote-section">
      <button
        className={`vote-btn like ${liked ? 'active' : ''}`}
        onClick={() => vote('like')}
        disabled={loading}
      >
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" />
        </svg>
        <span>{t('like')}</span>
        <span className="vote-count">{like}</span>
      </button>
      <button
        className={`vote-btn dislike ${disliked ? 'active' : ''}`}
        onClick={() => vote('dislike')}
        disabled={loading}
      >
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" />
        </svg>
        <span>{t('dislike')}</span>
        <span className="vote-count">{dislike}</span>
      </button>
      {message && (
        <span style={{ fontSize: '0.8rem', color: 'var(--muted)', marginLeft: '0.5rem' }}>{message}</span>
      )}
      <LoginModal
        open={showLogin}
        onClose={() => setShowLogin(false)}
        onSuccess={() => { setShowLogin(false); window.location.reload(); }}
      />
    </div>
  );
}