'use client';

import { motion } from 'framer-motion';
import { Card, CardBody, Avatar, AvatarGroup } from '@heroui/react';
import { useLanguage } from '@/contexts/LanguageContext';
import { useTheme } from '@/contexts/ThemeContext';
import { useCountUp } from '@/hooks/useCountUp';

// 格式化数字 - 确保始终显示正确的单位
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 isDark = theme === 'dark';

  return (
    <section
      className="w-full overflow-x-clip border-b transition-colors bg-bg-base border-border-normal flex-shrink-0 flex justify-center"
      style={{ paddingLeft: 'clamp(16px, 4vw, 80px)', paddingRight: 'clamp(16px, 4vw, 80px)' }}
    >
      <div className="w-full max-w-[1440px] 2xl:max-w-[1760px] 3xl:max-w-[2200px] grid grid-cols-2 md:grid-cols-4">

        {/* TVL */}
        <Card
          className="rounded-none border-r border-b md:border-b-0 transition-colors bg-bg-base border-border-normal"
          shadow="none"
        >
          <CardBody className="flex flex-col gap-2 items-start justify-center py-4 md:py-0 md:h-[182px] px-4 md:px-0">
            <p className="font-domine transition-colors text-text-secondary" style={{ fontSize: 'clamp(14px, 1vw, 20px)' }}>
              {t('stats.tvl')}
            </p>
            <div
              ref={tvl.elementRef}
              className="font-extrabold font-domine transition-colors text-text-primary"
              style={{ fontSize: 'clamp(20px, 2.5vw, 48px)', lineHeight: '110%', letterSpacing: '-0.01em' }}
            >
              {formatNumber(tvl.count, '$', 'M+', 'M')}
            </div>
          </CardBody>
        </Card>

        {/* APY */}
        <Card
          className={`rounded-none border-b md:border-b-0 md:border-r transition-colors ${
            isDark ? 'bg-[#0a0a0a] border-[#27272a]' : 'bg-white border-[#e5e7eb]'
          }`}
          shadow="none"
        >
          <CardBody className="flex flex-col gap-2 items-start justify-center py-4 md:py-0 md:h-[182px] px-4 md:px-8">
            <p className="font-domine transition-colors text-text-secondary" style={{ fontSize: 'clamp(14px, 1vw, 20px)' }}>
              {t('stats.apy')}
            </p>
            <div
              ref={apy.elementRef}
              className="font-extrabold font-domine transition-colors"
              style={{ fontSize: 'clamp(20px, 2.5vw, 48px)', lineHeight: '110%', letterSpacing: '-0.01em', color: '#059669' }}
            >
              {(apy.count / 100).toFixed(2)}%
            </div>
          </CardBody>
        </Card>

        {/* Yield */}
        <Card
          className={`rounded-none border-r transition-colors ${
            isDark ? 'bg-[#0a0a0a] border-[#27272a]' : 'bg-white border-[#e5e7eb]'
          }`}
          shadow="none"
        >
          <CardBody className="flex flex-col gap-2 items-start justify-center py-4 md:py-0 md:h-[182px] px-4 md:px-8">
            <p className="font-domine transition-colors text-text-secondary" style={{ fontSize: 'clamp(14px, 1vw, 20px)' }}>
              {t('stats.yield')}
            </p>
            <div
              ref={yield_.elementRef}
              className="font-extrabold font-domine transition-colors text-text-primary"
              style={{ fontSize: 'clamp(20px, 2.5vw, 48px)', lineHeight: '110%', letterSpacing: '-0.01em' }}
            >
              {formatNumber(yield_.count, '$', 'M', 'M')}
            </div>
          </CardBody>
        </Card>

        {/* Users */}
        <Card
          className="rounded-none transition-colors bg-bg-base overflow-hidden"
          shadow="none"
        >
          <CardBody className="flex flex-col gap-2 items-start justify-center py-4 md:py-0 md:h-[182px] px-4 md:pl-8 overflow-hidden">
            <p className="font-domine transition-colors text-text-secondary" style={{ fontSize: 'clamp(14px, 1vw, 20px)' }}>
              {t('stats.users')}
            </p>
            <div className="flex flex-row items-center gap-4">
              <div
                ref={users.elementRef}
                className="text-xl md:text-2xl xl:text-4xl font-extrabold font-domine transition-colors text-text-primary"
                style={{ lineHeight: '110%', letterSpacing: '-0.01em' }}
              >
                {users.count.toLocaleString()}+
              </div>
              <motion.div
                className="hidden lg:block"
                initial={{ y: '3rem', opacity: 0 }}
                animate={{ y: 0, opacity: 1 }}
                transition={{ duration: 0.7, ease: 'easeOut', delay: 0.5 }}
              >
                <AvatarGroup max={4}>
                  <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>
              </motion.div>
            </div>
          </CardBody>
        </Card>

      </div>
    </section>
  );
}