'use client';

import { useState, useEffect, useRef } from 'react';
import Image from 'next/image';

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

  // 客户端挂载后设置随机起始值
  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 && !hasAnimated) {
          setHasAnimated(true);
          const start = startValueRef.current;
          const startTime = Date.now();

          const timer = 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); // 确保最终值准确
              clearInterval(timer);
            }
          }, 16);

          return () => clearInterval(timer);
        }
      },
      { threshold: 0.1 }
    );

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

    return () => observer.disconnect();
  }, [end, duration, hasAnimated, 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 tvl = useCountUp(485, 1500, 0.80);     // 从80-95%开始
  const apy = useCountUp(515, 1500, 0.85);     // 5.15 * 100，从85-100%开始
  const yield_ = useCountUp(45, 1500, 0.75);   // 从75-90%开始
  const users = useCountUp(23928, 1800, 0.80); // 从80-95%开始

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

  useEffect(() => {
    // 客户端挂载
    setMounted(true);

    // 延迟显示图片动画
    const timer = setTimeout(() => {
      setImagesVisible(true);
    }, 500);
    return () => clearTimeout(timer);
  }, []);
  return (
    <section
      className="bg-white flex flex-row items-center justify-center flex-shrink-0 w-full relative"
      style={{
        borderStyle: 'solid',
        borderColor: '#e5e7eb',
        borderWidth: '0px 0px 1px 0px',
        padding: '0px 0px 1px 0px'
      }}
    >
      {/* .section2 */}
      <div
        className="flex flex-row items-center justify-center w-[1440px] h-[183px] relative"
      >
        {/* .container4 - Grid container */}
        <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 1 - Total Value Locked */}
          <div
            className="bg-white flex flex-row items-center justify-between h-[182px] relative"
            style={{
              borderStyle: 'solid',
              borderColor: '#e5e7eb',
              borderWidth: '0px 1px 0px 0px',
              gridColumn: '1 / span 1',
              gridRow: '1 / span 1'
            }}
          >
            <div className="flex flex-col gap-2 items-start justify-center flex-1 relative">
              <div
                className="text-[#4b5563] text-left relative font-inter"
                style={{
                  fontSize: '16px',
                  lineHeight: '150%',
                  fontWeight: 400
                }}
              >
                Total Value Locked
              </div>
              <div
                ref={tvl.elementRef}
                className="text-[#111827] text-left relative font-jetbrains"
                style={{
                  fontSize: '48px',
                  lineHeight: '110%',
                  letterSpacing: '-0.01em',
                  fontWeight: 800
                }}
              >
                {formatNumber(tvl.count, '$', 'M+', 'M')}
              </div>
            </div>
          </div>

          {/* Card 2 - Avg. APY */}
          <div
            className="bg-white flex flex-row items-center justify-between h-[182px] relative"
            style={{
              borderStyle: 'solid',
              borderColor: '#e5e7eb',
              borderWidth: '0px 1px 0px 0px',
              padding: '0px 32px',
              gridColumn: '2 / span 1',
              gridRow: '1 / span 1'
            }}
          >
            <div className="flex flex-col gap-2 items-start justify-center flex-1 relative">
              <div
                className="text-[#4b5563] text-left relative font-inter"
                style={{
                  fontSize: '16px',
                  lineHeight: '150%',
                  fontWeight: 400
                }}
              >
                Avg. APY
              </div>
              <div
                ref={apy.elementRef}
                className="text-[#111827] text-left relative font-jetbrains"
                style={{
                  fontSize: '48px',
                  lineHeight: '110%',
                  letterSpacing: '-0.01em',
                  fontWeight: 800
                }}
              >
                {(apy.count / 100).toFixed(2)}%
              </div>
            </div>
          </div>

          {/* Card 3 - Yield Captured */}
          <div
            className="bg-white flex flex-row items-center justify-between h-[182px] relative"
            style={{
              borderStyle: 'solid',
              borderColor: '#e5e7eb',
              borderWidth: '0px 1px 0px 0px',
              padding: '0px 32px',
              gridColumn: '3 / span 1',
              gridRow: '1 / span 1'
            }}
          >
            <div className="flex flex-col gap-2 items-start justify-center flex-1 relative">
              <div
                className="text-[#4b5563] text-left relative font-inter"
                style={{
                  fontSize: '16px',
                  lineHeight: '150%',
                  fontWeight: 400
                }}
              >
                Yield Captured
              </div>
              <div
                ref={yield_.elementRef}
                className="text-[#111827] text-left relative self-stretch font-jetbrains"
                style={{
                  fontSize: '48px',
                  lineHeight: '110%',
                  letterSpacing: '-0.01em',
                  fontWeight: 800
                }}
              >
                {formatNumber(yield_.count, '$', 'M', 'M')}
              </div>
            </div>
          </div>

          {/* Card 4 - Connected Users */}
          <div
            className="bg-white flex flex-row items-center justify-between h-[182px] relative"
            style={{
              borderStyle: 'solid',
              borderColor: 'transparent',
              borderWidth: '0px 1px 0px 0px',
              padding: '0px 0px 0px 32px',
              gridColumn: '4 / span 1',
              gridRow: '1 / span 1'
            }}
          >
            <div className="flex flex-col gap-2 items-start justify-center flex-1 relative">
              <div
                className="text-[#4b5563] text-left relative font-inter"
                style={{
                  fontSize: '16px',
                  lineHeight: '150%',
                  fontWeight: 400
                }}
              >
                Connected Users
              </div>

              {/* .frame-38 - Number and avatars */}
              <div className="flex flex-row items-center justify-between self-stretch flex-shrink-0 relative">
                {/* Number */}
                <div
                  ref={users.elementRef}
                  className="text-[#111827] text-left relative font-jetbrains"
                  style={{
                    fontSize: '48px',
                    lineHeight: '110%',
                    letterSpacing: '-0.01em',
                    fontWeight: 800
                  }}
                >
                  {users.count.toLocaleString()}+
                </div>

                {/* .container9 - Avatar group */}
                <div className="flex flex-row items-center justify-start flex-shrink-0 relative overflow-hidden">
                  {/* Avatar 1 - image-23 */}
                  <div
                    className={`flex-shrink-0 w-9 h-9 relative overflow-hidden border-white transition-all duration-700 ease-out ${
                      mounted && imagesVisible ? 'translate-y-0 opacity-100' : 'translate-y-12 opacity-0'
                    }`}
                    style={{
                      borderRadius: '15239273px',
                      borderStyle: 'solid',
                      borderWidth: '1.82px',
                      padding: '1.82px',
                      aspectRatio: 1,
                      transitionDelay: '100ms'
                    }}
                  >
                    <Image
                      src="/image-230.png"
                      alt="User"
                      width={33}
                      height={33}
                      className="absolute object-cover"
                      style={{
                        left: '1.82px',
                        top: '1.82px',
                        aspectRatio: 1
                      }}
                    />
                  </div>

                  {/* Avatar 2 - image-24 */}
                  <div
                    className={`flex-shrink-0 w-9 h-9 relative overflow-hidden border-white transition-all duration-700 ease-out ${
                      mounted && imagesVisible ? 'translate-y-0 opacity-100' : 'translate-y-12 opacity-0'
                    }`}
                    style={{
                      margin: '0 0 0 -8px',
                      borderRadius: '15239273px',
                      borderStyle: 'solid',
                      borderWidth: '1.82px',
                      padding: '1.82px',
                      aspectRatio: 1,
                      transitionDelay: '200ms'
                    }}
                  >
                    <Image
                      src="/image-240.png"
                      alt="User"
                      width={36}
                      height={36}
                      className="absolute object-cover"
                      style={{
                        left: '0px',
                        top: '0px',
                        aspectRatio: 1
                      }}
                    />
                  </div>

                  {/* Avatar 3 - image-25 */}
                  <div
                    className={`flex-shrink-0 w-9 h-9 relative overflow-hidden border-white transition-all duration-700 ease-out ${
                      mounted && imagesVisible ? 'translate-y-0 opacity-100' : 'translate-y-12 opacity-0'
                    }`}
                    style={{
                      margin: '0 0 0 -8px',
                      borderRadius: '15239273px',
                      borderStyle: 'solid',
                      borderWidth: '1.82px',
                      padding: '1.82px',
                      aspectRatio: 1,
                      transitionDelay: '300ms'
                    }}
                  >
                    <Image
                      src="/image-250.png"
                      alt="User"
                      width={40}
                      height={40}
                      className="absolute object-cover"
                      style={{
                        left: '6px',
                        top: '0.5px',
                        aspectRatio: 1
                      }}
                    />
                  </div>

                  {/* Avatar 4 - image-252 */}
                  <div
                    className={`flex-shrink-0 w-9 h-9 relative overflow-hidden border-white transition-all duration-700 ease-out ${
                      mounted && imagesVisible ? 'translate-y-0 opacity-100' : 'translate-y-12 opacity-0'
                    }`}
                    style={{
                      margin: '0 0 0 -8px',
                      borderRadius: '15239273px',
                      borderStyle: 'solid',
                      borderWidth: '1.82px',
                      padding: '1.82px',
                      aspectRatio: 1,
                      transitionDelay: '400ms'
                    }}
                  >
                    <Image
                      src="/image-251.png"
                      alt="User"
                      width={36}
                      height={36}
                      className="absolute object-cover"
                      style={{
                        left: '0px',
                        top: '0px',
                        aspectRatio: 1
                      }}
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
