/**
 * 页面状态组件
 * 
 * 提供：
 * - PageLoading: 页面级加载状态
 * - PageEmpty: 页面级空状态
 * - PageError: 页面级错误状态
 */

import { Spin, Button, Result, Empty, type ButtonProps } from 'antd'
import { ReloadOutlined, PlusOutlined } from '@ant-design/icons'
import { Children, type ReactNode } from 'react'
import styles from './PageState.module.css'

// ==================== PageLoading ====================

interface PageLoadingProps {
  /** 加载提示文字 */
  tip?: string
}

export function PageLoading({ tip = '加载中...' }: PageLoadingProps) {
  return (
    <div className={styles.container}>
      <Spin size="large" tip={tip}>
        <div className={styles.spinContent} />
      </Spin>
    </div>
  )
}

// ==================== PageEmpty ====================

interface PageEmptyProps {
  /** 空状态描述 */
  description?: string | ReactNode
  /** 主操作按钮文字 */
  actionText?: string
  /** 主操作按钮点击 */
  onAction?: () => void
  /** 主操作按钮属性 */
  actionProps?: ButtonProps
}

export function PageEmpty({
  description = '暂无数据',
  actionText,
  onAction,
  actionProps,
}: PageEmptyProps) {
  return (
    <div className={styles.emptyContainer}>
      <Empty description={description}>
        {actionText && onAction && (
          <Button
            type="primary"
            icon={<PlusOutlined />}
            onClick={onAction}
            {...actionProps}
          >
            {actionText}
          </Button>
        )}
      </Empty>
    </div>
  )
}

// ==================== PageError ====================

interface PageErrorProps {
  /** 错误标题 */
  title?: string
  /** 错误描述 */
  description?: string | ReactNode
  /** 重试按钮文字 */
  retryText?: string
  /** 重试按钮点击 */
  onRetry?: () => void
  /** 额外操作 */
  extra?: ReactNode
}

export function PageError({
  title = '加载失败',
  description = '数据加载失败，请稍后重试',
  retryText = '重新加载',
  onRetry,
  extra,
}: PageErrorProps) {
  return (
    <div className={styles.errorContainer}>
      <Result
        status="error"
        title={title}
        subTitle={description}
        extra={Children.toArray([
          onRetry ? (
            <Button type="primary" icon={<ReloadOutlined />} onClick={onRetry}>
              {retryText}
            </Button>
          ) : null,
          extra,
        ])}
      />
    </div>
  )
}
