import { useState, useEffect } from 'react'
import { statsApi } from '../api/modules/stats'

function Home() {
  const [stats, setStats] = useState({
    totalUsers: 0,
    todayOrders: 0,
    todayRevenue: 0,
  })
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetchStats()
  }, [])

  const fetchStats = async () => {
    try {
      const response = await statsApi.getDashboardStats()
      if (response.code === 0) {
        setStats(response.data)
      }
    } catch (error) {
      console.error('Failed to fetch stats:', error)
    } finally {
      setLoading(false)
    }
  }

  return (
    <div>
      <h1>欢迎来到管理后台</h1>
      {loading ? (
        <p>加载中...</p>
      ) : (
        <div style={styles.cards}>
          <div style={styles.card}>
            <h3>📊 数据统计</h3>
            <p style={styles.number}>{stats.totalUsers.toLocaleString()}</p>
            <p>总用户数</p>
          </div>
          <div style={styles.card}>
            <h3>📦 订单</h3>
            <p style={styles.number}>{stats.todayOrders.toLocaleString()}</p>
            <p>今日订单</p>
          </div>
          <div style={styles.card}>
            <h3>💰 收入</h3>
            <p style={styles.number}>¥{stats.todayRevenue.toLocaleString()}</p>
            <p>今日收入</p>
          </div>
        </div>
      )}
    </div>
  )
}

const styles = {
  cards: {
    display: 'grid',
    gridTemplateColumns: 'repeat(3, 1fr)',
    gap: '24px',
    marginTop: '24px',
  },
  card: {
    backgroundColor: '#fff',
    padding: '24px',
    borderRadius: '8px',
    boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
  },
  number: {
    fontSize: '32px',
    fontWeight: 'bold',
    color: '#1890ff',
    margin: '16px 0',
  },
}

export default Home