UAPI 更新日志里的点赞反馈动效
'use client';

import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { ThumbsUp } from 'lucide-react';
import { cn } from '@/lib/utils';

interface UsefulFeedbackButtonProps {
  postId: string;
}

const LIKE_THEME = {
  active: '#14b8a6',
} as const;
const LIKED_POSTS_STORAGE_KEY = 'uapi_changelog_liked_posts_v1';
const LIKE_COMBO_STORAGE_KEY = 'uapi_changelog_like_combo_v1';

export function UsefulFeedbackButton({ postId }: UsefulFeedbackButtonProps) {
  const [liked, setLiked] = React.useState(false);
  const [combo, setCombo] = React.useState(0);
  const [animState, setAnimState] = React.useState<'idle' | 'popping' | 'pressed'>('idle');
  const popTimerRef = React.useRef<number | null>(null);

  React.useEffect(() => {
    try {
      const comboRaw = localStorage.getItem(LIKE_COMBO_STORAGE_KEY);
      if (comboRaw) {
        const comboMap = JSON.parse(comboRaw);
        if (comboMap && typeof comboMap === 'object') {
          const savedCombo = Number(comboMap[postId]);
          if (Number.isFinite(savedCombo) && savedCombo > 0) {
            setCombo(savedCombo);
          }
        }
      }

      const raw = localStorage.getItem(LIKED_POSTS_STORAGE_KEY);
      if (!raw) return;
      const likedPosts = JSON.parse(raw);
      if (Array.isArray(likedPosts) && likedPosts.includes(postId)) {
        setLiked(true);
        setCombo((prev) => (prev > 0 ? prev : 1));
      }
    } catch {
      // ignore invalid storage
    }
  }, [postId]);

  React.useEffect(() => {
    return () => {
      if (popTimerRef.current) {
        window.clearTimeout(popTimerRef.current);
      }
    };
  }, []);

  const getMilestoneType = (c: number) => {
    if (c > 0 && c % 100 === 0) return 'epic';
    if (c > 0 && c % 10 === 0) return 'major';
    return 'normal';
  };

  const milestone = getMilestoneType(combo);

  const handleLike = () => {
    setAnimState('popping');
    if (popTimerRef.current) {
      window.clearTimeout(popTimerRef.current);
    }
    popTimerRef.current = window.setTimeout(() => setAnimState('idle'), 200);

    setLiked(true);
    setCombo((prev) => {
      const next = prev + 1;
      try {
        const comboRaw = localStorage.getItem(LIKE_COMBO_STORAGE_KEY);
        const comboMap = comboRaw ? JSON.parse(comboRaw) : {};
        const nextComboMap = (comboMap && typeof comboMap === 'object') ? comboMap : {};
        nextComboMap[postId] = next;
        localStorage.setItem(LIKE_COMBO_STORAGE_KEY, JSON.stringify(nextComboMap));
      } catch {
        // ignore combo storage failure
      }
      return next;
    });

    try {
      const raw = localStorage.getItem(LIKED_POSTS_STORAGE_KEY);
      const likedPosts = raw ? JSON.parse(raw) : [];
      const nextLikedPosts = Array.isArray(likedPosts)
        ? Array.from(new Set([...likedPosts, postId]))
        : [postId];
      localStorage.setItem(LIKED_POSTS_STORAGE_KEY, JSON.stringify(nextLikedPosts));
    } catch {
      // ignore storage failure
    }
  };

  return (
    <div className="relative flex items-center justify-center">
      <motion.button
        layout
        transition={{ type: 'spring', stiffness: 500, damping: 50 }}
        type="button"
        onClick={handleLike}
        onPointerDown={() => {
          if (animState !== 'popping') setAnimState('pressed');
        }}
        onPointerLeave={() => {
          if (animState !== 'popping') setAnimState('idle');
        }}
        aria-pressed={liked}
        style={{ WebkitTapHighlightColor: 'transparent', outline: 'none' }}
        className={cn(
          'relative h-8 flex items-center gap-1.5 rounded-full px-1 text-sm select-none transition-colors bg-transparent',
          liked
            ? 'text-teal-600 dark:text-teal-400'
            : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
        )}
      >
        <span className="relative z-10 flex h-5 w-5 flex-shrink-0 items-center justify-center">
          <span
            className="relative z-10 flex items-center justify-center"
            style={{
              transition:
                animState === 'popping'
                  ? 'transform 0.2s cubic-bezier(0.22, 1, 0.36, 1)'
                  : 'transform 0.12s ease-out',
              transform:
                animState === 'pressed'
                  ? 'scale(0.85)'
                  : animState === 'popping'
                    ? 'scale(1.25) rotate(-15deg)'
                    : liked
                      ? 'scale(1) rotate(-12deg)'
                      : 'scale(1) rotate(0deg)',
              transformOrigin: 'center center',
            }}
          >
            <ThumbsUp
              size={16}
              strokeWidth={0}
              fill={LIKE_THEME.active}
              className={cn(
                'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transition-all duration-300',
                liked ? 'opacity-100 scale-100' : 'opacity-0 scale-50'
              )}
            />
            <ThumbsUp
              size={16}
              strokeWidth={2}
              color="currentColor"
              className={cn(
                'transition-all duration-300',
                liked ? 'opacity-0 scale-110' : 'opacity-100 scale-100'
              )}
            />
          </span>
        </span>

        <div className="relative z-10 flex items-center h-full">
          <span className="whitespace-nowrap font-medium">有用</span>
          <div className="relative flex items-center overflow-visible">
            <AnimatePresence mode="popLayout" initial={false}>
              {liked && combo <= 1 && (
                <motion.span
                  key="suffix-marked"
                  initial={{ width: 0, opacity: 0 }}
                  animate={{ width: 'auto', opacity: 0.6 }}
                  exit={{ width: 0, opacity: 0 }}
                  transition={{ type: 'spring', stiffness: 500, damping: 30 }}
                  className="whitespace-nowrap font-normal text-xs ml-1 overflow-hidden"
                >
                  (已标记)
                </motion.span>
              )}

              {liked && combo > 1 && (
                <motion.div
                  key="suffix-combo"
                  className="flex items-center ml-1.5 pr-1.5"
                  initial={{ opacity: 0, scale: 0.8 }}
                  animate={{ opacity: 1, scale: 1 }}
                  exit={{ opacity: 0, scale: 0.8 }}
                  transition={{ type: 'spring', stiffness: 500, damping: 30 }}
                >
                  <div className="flex items-baseline gap-[0.16em]">
                    <motion.span
                      initial={{ scale: 0.8, opacity: 0 }}
                      animate={{ scale: 1, opacity: 0.5 }}
                      className="font-sans italic text-xs"
                    >
                      x
                    </motion.span>
                    <div className="relative h-5 flex flex-col justify-center min-w-[1.6ch] pr-[0.08em]">
                      <AnimatePresence mode="popLayout" initial={false}>
                        <motion.span
                          key={combo}
                          initial={
                            milestone === 'epic'
                              ? { y: 20, opacity: 0, scale: 1.5 }
                              : milestone === 'major'
                                ? { y: 20, opacity: 0, scale: 1.2 }
                                : { y: 15, opacity: 0, scale: 1 }
                          }
                          animate={
                            milestone === 'epic'
                              ? { y: 0, opacity: 1, scale: 1.2, rotate: [0, -10, 10, 0] }
                              : milestone === 'major'
                                ? { y: 0, opacity: 1, scale: 1.1 }
                                : { y: 0, opacity: 1, scale: 1 }
                          }
                          exit={{ y: -15, opacity: 0, position: 'absolute' }}
                          transition={{
                            type: 'spring',
                            stiffness: milestone === 'normal' ? 600 : 400,
                            damping: milestone === 'normal' ? 26 : 15,
                            rotate:
                              milestone === 'epic'
                                ? { type: 'tween', duration: 0.3, ease: 'easeOut' }
                                : undefined,
                          }}
                          className={cn(
                            'inline-block font-bold italic tabular-nums text-sm leading-none',
                            milestone === 'epic'
                              ? 'text-rose-500 dark:text-rose-400'
                              : milestone === 'major'
                                ? 'text-amber-500 dark:text-amber-400'
                                : ''
                          )}
                        >
                          {combo}
                        </motion.span>
                      </AnimatePresence>
                    </div>
                  </div>
                </motion.div>
              )}
            </AnimatePresence>
          </div>
        </div>
      </motion.button>
    </div>
  );
}