asset-homepage/components/StatsSection.tsx

'use client';

import { useState, useEffect, useRef } from 'react';
import { Card, CardBody, Avatar, AvatarGroup } from '@heroui/react';
import { useLanguage } from '@/contexts/LanguageContext';
import { useTheme } from '@/contexts/ThemeContext';

// 数字增长动画Hook - 可重复触发
function useCountUp(end: number, duration: number = 1500, startRangePercent: number = 0.75) {
  const [mounted, setMounted] = useState(false);
  const [count, setCount] = useState(end); // 初始值设为目标值，避免hydration错误
  const elementRef = useRef<HTMLDivElement>(null);
  const startValueRef = useRef<number>(end);
  const timerRef = useRef<NodeJS.Timeout | null>(null);

  // 客户端挂载后设置随机起始值
  useEffect(() => {
    setMounted(true);
    startValueRef.current = Math.floor(end * (startRangePercent + Math.random() * 0.15));
    setCount(startValueRef.current);
  }, [end, startRangePercent]);

  useEffect(() => {
    if (!mounted) return;

    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) {
          // 进入视口 - 检查是否需要开始动画
          if (!timerRef.current) {
            const start = startValueRef.current;
            const startTime = Date.now();

            timerRef.current = setInterval(() => {
              const elapsed = Date.now() - startTime;
              const progress = Math.min(elapsed / duration, 1);

              // 使用缓动函数 - easeOutCubic 更自然
              const easeOutCubic = 1 - Math.pow(1 - progress, 3);
              const currentCount = Math.floor(start + (end - start) * easeOutCubic);

              setCount(currentCount);

              if (progress === 1) {
                setCount(end); // 确保最终值准确
                if (timerRef.current) {
                  clearInterval(timerRef.current);
                  timerRef.current = null;
                }
              }
            }, 16);
          }
        } else {
          // 离开视口 - 停止并重置
          if (timerRef.current) {
            clearInterval(timerRef.current);
            timerRef.current = null;
          }
          setCount(startValueRef.current);
        }
      },
      { threshold: 0.1 }
    );

    if (elementRef.current) {
      observer.observe(elementRef.current);
    }

    return () => {
      observer.disconnect();
      if (timerRef.current) {
        clearInterval(timerRef.current);
        timerRef.current = null;
      }
    };
  }, [end, duration, mounted]);

  return { count, elementRef };
}

// 格式化数字 - 确保始终显示正确的单位
function formatNumber(num: number, prefix: string = '', suffix: string = '', forceUnit: 'M' | 'K' | '' = '') {
  if (forceUnit === 'M') {
    return `${prefix}${Math.floor(num)}${suffix}`;
  } else if (forceUnit === 'K') {
    return `${prefix}${Math.floor(num)}${suffix}`;
  } else if (num >= 1000000) {
    return `${prefix}${Math.floor(num / 1000000)}M${suffix}`;
  } else if (num >= 1000) {
    return `${prefix}${Math.floor(num / 1000)}K${suffix}`;
  }
  return `${prefix}${num.toLocaleString()}${suffix}`;
}

export default function StatsSection() {
  const { t } = useLanguage();
  const { theme } = useTheme();
  const tvl = useCountUp(485, 1500, 0.80);
  const apy = useCountUp(515, 1500, 0.85);
  const yield_ = useCountUp(45, 1500, 0.75);
  const users = useCountUp(23928, 1800, 0.80);

  const [mounted, setMounted] = useState(false);
  const [imagesVisible, setImagesVisible] = useState(false);

  useEffect(() => {
    setMounted(true);
    const timer = setTimeout(() => {
      setImagesVisible(true);
    }, 500);
    return () => clearTimeout(timer);
  }, []);

  const isDark = theme === 'dark';
  return (
    <section
      className={`flex flex-row items-center justify-center flex-shrink-0 w-full relative border-b transition-colors ${
        isDark ? 'bg-[#0a0a0a] border-[#27272a]' : 'bg-white border-[#e5e7eb]'
      }`}
    >
      <div className="flex flex-row items-center justify-center w-[1440px] h-[183px] relative">
        <div
          className="flex-shrink-0 grid gap-0 relative w-full"
          style={{
            gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
            gridTemplateRows: 'repeat(1, minmax(0, 1fr))'
          }}
        >
          <Card
            className={`h-[182px] rounded-none border-r transition-colors ${
              isDark ? 'bg-[#0a0a0a] border-[#27272a]' : 'bg-white border-[#e5e7eb]'
            }`}
            shadow="none"
            style={{
              gridColumn: '1 / span 1',
              gridRow: '1 / span 1'
            }}
          >
            <CardBody className="flex flex-col gap-2 items-start justify-center">
              <p className={`text-base font-domine transition-colors ${isDark ? 'text-[#a1a1aa]' : 'text-[#4b5563]'}`}>
                {t('stats.tvl')}
              </p>
              <div
                ref={tvl.elementRef}
                className={`text-5xl font-extrabold font-domine transition-colors ${isDark ? 'text-[#fafafa]' : 'text-[#111827]'}`}
                style={{
                  lineHeight: '110%',
                  letterSpacing: '-0.01em'
                }}
              >
                {formatNumber(tvl.count, '$', 'M+', 'M')}
              </div>
            </CardBody>
          </Card>

          <Card
            className={`h-[182px] rounded-none border-r px-8 transition-colors ${
              isDark ? 'bg-[#0a0a0a] border-[#27272a]' : 'bg-white border-[#e5e7eb]'
            }`}
            shadow="none"
            style={{
              gridColumn: '2 / span 1',
              gridRow: '1 / span 1'
            }}
          >
            <CardBody className="flex flex-col gap-2 items-start justify-center">
              <p className={`text-base font-domine transition-colors ${isDark ? 'text-[#a1a1aa]' : 'text-[#4b5563]'}`}>
                {t('stats.apy')}
              </p>
              <div
                ref={apy.elementRef}
                className={`text-5xl font-extrabold font-domine transition-colors ${isDark ? 'text-[#fafafa]' : 'text-[#111827]'}`}
                style={{
                  lineHeight: '110%',
                  letterSpacing: '-0.01em'
                }}
              >
                {(apy.count / 100).toFixed(2)}%
              </div>
            </CardBody>
          </Card>

          <Card
            className={`h-[182px] rounded-none border-r px-8 transition-colors ${
              isDark ? 'bg-[#0a0a0a] border-[#27272a]' : 'bg-white border-[#e5e7eb]'
            }`}
            shadow="none"
            style={{
              gridColumn: '3 / span 1',
              gridRow: '1 / span 1'
            }}
          >
            <CardBody className="flex flex-col gap-2 items-start justify-center">
              <p className={`text-base font-domine transition-colors ${isDark ? 'text-[#a1a1aa]' : 'text-[#4b5563]'}`}>
                {t('stats.yield')}
              </p>
              <div
                ref={yield_.elementRef}
                className={`text-5xl font-extrabold font-domine transition-colors ${isDark ? 'text-[#fafafa]' : 'text-[#111827]'}`}
                style={{
                  lineHeight: '110%',
                  letterSpacing: '-0.01em'
                }}
              >
                {formatNumber(yield_.count, '$', 'M', 'M')}
              </div>
            </CardBody>
          </Card>

          <Card
            className={`h-[182px] rounded-none pl-8 transition-colors ${
              isDark ? 'bg-[#0a0a0a]' : 'bg-white'
            }`}
            shadow="none"
            style={{
              gridColumn: '4 / span 1',
              gridRow: '1 / span 1'
            }}
          >
            <CardBody className="flex flex-col gap-2 items-start justify-center">
              <p className={`text-base font-domine transition-colors ${isDark ? 'text-[#a1a1aa]' : 'text-[#4b5563]'}`}>
                {t('stats.users')}
              </p>

              <div className="flex flex-row items-center justify-between self-stretch">
                <div
                  ref={users.elementRef}
                  className={`text-5xl font-extrabold font-domine transition-colors ${isDark ? 'text-[#fafafa]' : 'text-[#111827]'}`}
                  style={{
                    lineHeight: '110%',
                    letterSpacing: '-0.01em'
                  }}
                >
                  {users.count.toLocaleString()}+
                </div>

                <AvatarGroup
                  max={4}
                  className={`transition-all duration-700 ease-out ${
                    mounted && imagesVisible ? 'translate-y-0 opacity-100' : 'translate-y-12 opacity-0'
                  }`}
                >
                  <Avatar
                    src="/image-230.png"
                    size="sm"
                  />
                  <Avatar
                    src="/image-240.png"
                    size="sm"
                  />
                  <Avatar
                    src="/image-250.png"
                    size="sm"
                  />
                  <Avatar
                    src="/image-251.png"
                    size="sm"
                  />
                </AvatarGroup>
              </div>
            </CardBody>
          </Card>
        </div>
      </div>
    </section>
  );
}