import React, { useState, useEffect } from 'react'
import { Card, Row, Col, Statistic, Spin } from 'antd'
import { UserOutlined, ShoppingOutlined, DollarOutlined } from '@ant-design/icons'
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>
      <h2 style={styles.title}>欢迎来到 Atlas Console</h2>
      
      {loading ? (
        <div style={styles.loading}>
          <Spin size="large" />
        </div>
      ) : (
        <Row gutter={[16, 16]}>
          <Col xs={24} sm={8}>
            <Card>
              <Statistic
                title="总用户数"
                value={stats.totalUsers}
                prefix={<UserOutlined />}
                // @ts-ignore - antd v5 types incomplete
                styles={{ value: { color: '#3f8600' } }}
              />
            </Card>
          </Col>
          <Col xs={24} sm={8}>
            <Card>
              <Statistic
                title="今日订单"
                value={stats.todayOrders}
                prefix={<ShoppingOutlined />}
                // @ts-ignore
                styles={{ value: { color: '#1890ff' } }}
              />
            </Card>
          </Col>
          <Col xs={24} sm={8}>
            <Card>
              <Statistic
                title="今日收入"
                value={stats.todayRevenue}
                prefix={<DollarOutlined />}
                precision={2}
                suffix="元"
              />
            </Card>
          </Col>
        </Row>
      )}
    </div>
  )
}

const styles = {
  title: {
    marginBottom: '24px',
  },
  loading: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    minHeight: '200px',
  },
}

export default Home