/**
 * Dashboard 页面
 * 
 * 展示系统统计信息：
 * - 用户统计卡片
 * - 登录统计卡片
 */

import { useState, useEffect, useCallback } from 'react'
import { Row, Col, Statistic, Typography, Tooltip } from 'antd'
import {
  UserOutlined,
  TeamOutlined,
  LockOutlined,
  StopOutlined,
  UserAddOutlined,
  LoginOutlined,
  CloseCircleOutlined,
  InfoCircleOutlined,
} from '@ant-design/icons'
import { PageHeader } from '@/components/common'
import { PageLoading, PageError } from '@/components/feedback'
import { PageLayout, ContentCard } from '@/components/layout'
import { getErrorMessage } from '@/lib/errors'
import { getDashboardStats } from '@/services/stats'
import type { DashboardStats } from '@/types/stats'
import styles from './DashboardPage.module.css'

const { Text } = Typography

export function DashboardPage() {
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [stats, setStats] = useState<DashboardStats | null>(null)

  const fetchStats = useCallback(async () => {
    setLoading(true)
    setError(null)
    try {
      const data = await getDashboardStats()
      setStats(data)
    } catch (err) {
      setError(getErrorMessage(err, '获取统计数据失败'))
    } finally {
      setLoading(false)
    }
  }, [])

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

  if (loading) {
    return <PageLoading tip="加载统计数据..." />
  }

  if (error) {
    return <PageError description={error} onRetry={fetchStats} />
  }

  if (!stats) {
    return <PageError description="暂无统计数据" />
  }

  return (
    <PageLayout>
      <PageHeader
        title="总览"
        description="系统运行状态与用户统计"
      />

      {/* 用户状态统计 */}
      <div className={styles.section}>
        <Text type="secondary" className={styles.sectionTitle}>
          用户状态分布
        </Text>
        <Row gutter={[16, 16]}>
          <Col xs={12} sm={8} lg={6}>
            <ContentCard>
              <Statistic
                title="用户总数"
                value={stats.users.total_users}
                prefix={<TeamOutlined />}
                valueStyle={{ color: 'var(--color-text-strong)' }}
              />
            </ContentCard>
          </Col>
          <Col xs={12} sm={8} lg={6}>
            <ContentCard>
              <Statistic
                title="已激活"
                value={stats.users.active_users}
                prefix={<UserOutlined />}
                valueStyle={{ color: 'var(--color-success)' }}
              />
            </ContentCard>
          </Col>
          <Col xs={12} sm={8} lg={6}>
            <ContentCard>
              <Statistic
                title="未激活"
                value={stats.users.inactive_users}
                prefix={<UserOutlined />}
                valueStyle={{ color: 'var(--color-text-muted)' }}
              />
            </ContentCard>
          </Col>
          <Col xs={12} sm={8} lg={6}>
            <ContentCard>
              <Statistic
                title="已锁定"
                value={stats.users.locked_users}
                prefix={<LockOutlined />}
                valueStyle={{ color: 'var(--color-warning)' }}
              />
            </ContentCard>
          </Col>
          <Col xs={12} sm={8} lg={6}>
            <ContentCard>
              <Statistic
                title="已禁用"
                value={stats.users.disabled_users}
                prefix={<StopOutlined />}
                valueStyle={{ color: 'var(--color-danger)' }}
              />
            </ContentCard>
          </Col>
        </Row>
      </div>

      {/* 新增用户统计 */}
      <div className={styles.section}>
        <Text type="secondary" className={styles.sectionTitle}>
          新增用户
        </Text>
        <Row gutter={[16, 16]}>
          <Col xs={12} sm={8} lg={6}>
            <ContentCard>
              <Statistic
                title="今日新增"
                value={stats.users.new_users_today}
                prefix={<UserAddOutlined />}
                valueStyle={{ color: 'var(--color-primary)' }}
              />
            </ContentCard>
          </Col>
          <Col xs={12} sm={8} lg={6}>
            <ContentCard>
              <Statistic
                title="本周新增"
                value={stats.users.new_users_week}
                prefix={<UserAddOutlined />}
                valueStyle={{ color: 'var(--color-primary)' }}
              />
            </ContentCard>
          </Col>
          <Col xs={12} sm={8} lg={6}>
            <ContentCard>
              <Statistic
                title="本月新增"
                value={stats.users.new_users_month}
                prefix={<UserAddOutlined />}
                valueStyle={{ color: 'var(--color-primary)' }}
              />
            </ContentCard>
          </Col>
        </Row>
      </div>

      {/* 登录统计 */}
      <div className={styles.section}>
        <Text type="secondary" className={styles.sectionTitle}>
          登录统计
        </Text>
        <Row gutter={[16, 16]}>
          <Col xs={12} sm={8} lg={6}>
            <ContentCard>
              <Statistic
                title="今日成功登录"
                value={stats.logins.logins_today_success}
                prefix={<LoginOutlined />}
                valueStyle={{ color: 'var(--color-success)' }}
              />
            </ContentCard>
          </Col>
          <Col xs={12} sm={8} lg={6}>
            <ContentCard>
              <Statistic
                title={
                  <span>
                    今日失败登录
                    <Tooltip title="包含密码错误、验证码错误、账号锁定等失败原因">
                      <InfoCircleOutlined style={{ marginLeft: 4, color: 'var(--color-text-muted)' }} />
                    </Tooltip>
                  </span>
                }
                value={stats.logins.logins_today_failed}
                prefix={<CloseCircleOutlined />}
                valueStyle={{ color: 'var(--color-danger)' }}
              />
            </ContentCard>
          </Col>
          <Col xs={12} sm={8} lg={6}>
            <ContentCard>
              <Statistic
                title="本周成功登录"
                value={stats.logins.logins_week}
                prefix={<LoginOutlined />}
                valueStyle={{ color: 'var(--color-success)' }}
              />
            </ContentCard>
          </Col>
        </Row>
      </div>

      {/* 说明卡片 */}
      <ContentCard>
        <Text type="secondary">
          当前版本展示基础统计信息。趋势图、地域分布、在线用户等高级功能将在后续版本中提供。
        </Text>
      </ContentCard>
    </PageLayout>
  )
}
