import { useState, useEffect } from 'react'
import { getStats } from '../api'

const fallback = {
  nodes: 1280,
  tasksToday: 45000,
  hoursSaved: 8600,
}

function formatNum(n) {
  if (n >= 10000) return (n / 10000).toFixed(1) + '万+'
  return n.toLocaleString() + '+'
}

export default function StatsFooter() {
  const [stats, setStats] = useState(fallback)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    getStats()
      .then(setStats)
      .catch(() => setStats(fallback))
      .finally(() => setLoading(false))
  }, [])

  const items = [
    { label: '已激活「阿虾」节点', value: formatNum(stats.nodes) },
    { label: '今日处理自动化任务', value: formatNum(stats.tasksToday) },
    { label: '已节省人力时长', value: formatNum(stats.hoursSaved) + ' 小时' },
  ]

  return (
    <footer className="border-t border-white/10 bg-space-black">
      <div className="max-w-5xl mx-auto px-4 sm:px-6 py-12">
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-8 text-center">
          {items.map((item, i) => (
            <div key={i}>
              <div className="text-2xl sm:text-3xl font-bold text-brand-orange mb-1">
                {loading ? '—' : item.value}
              </div>
              <div className="text-gray-400 text-sm">{item.label}</div>
            </div>
          ))}
        </div>
        <div className="mt-10 pt-8 border-t border-white/5 text-center text-gray-500 text-sm">
          Aiclw · 连接算力，执行万物
        </div>
      </div>
    </footer>
  )
}