import React from 'react';
import { Text, View } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import type { ComponentProps } from 'react';
import { useTheme } from '../../theme';
import { Touchable } from './Touchable';

interface EmptyStateProps {
  /** Ionicons 图标名 */
  icon: ComponentProps<typeof Ionicons>['name'];
  /** 主标题 */
  title: string;
  /** 补充描述（可选） */
  description?: string;
  /** 操作按钮文案（可选，与 onAction 同时提供时渲染） */
  actionLabel?: string;
  /** 操作按钮点击回调 */
  onAction?: () => void;
}

/**
 * 空状态占位组件。
 * 用于列表/页面无数据时的友好提示：圆形底托图标 + 标题 + 描述 + 可选操作按钮。
 */
export function EmptyState({ icon, title, description, actionLabel, onAction }: EmptyStateProps) {
  const { theme } = useTheme();

  return (
    <View
      style={{
        padding: theme.spacing.xl,
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      {/* 图标底托：圆形次级容器弱化空洞感，图标 48px 次级前景色 */}
      <View
        style={{
          width: 88,
          height: 88,
          borderRadius: 44,
          backgroundColor: theme.colors.bgTertiary,
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <Ionicons name={icon} size={48} color={theme.colors.fgSecondary} />
      </View>

      <Text
        style={{
          ...theme.typography.h3,
          color: theme.colors.fgPrimary,
          marginTop: theme.spacing.lg,
          textAlign: 'center',
        }}
      >
        {title}
      </Text>

      {description ? (
        <Text
          style={{
            ...theme.typography.bodySmall,
            color: theme.colors.fgSecondary,
            marginTop: theme.spacing.xs,
            textAlign: 'center',
          }}
        >
          {description}
        </Text>
      ) : null}

      {actionLabel && onAction ? (
        <Touchable
          onPress={onAction}
          accessibilityRole="button"
          accessibilityLabel={actionLabel}
          style={{
            marginTop: theme.spacing.lg,
            paddingVertical: theme.spacing.sm,
            paddingHorizontal: theme.spacing.lg,
            borderRadius: theme.radii.full,
            backgroundColor: theme.colors.accent,
          }}
        >
          <Text
            style={{
              fontSize: theme.typography.body.fontSize,
              fontWeight: '600',
              color: theme.colors.fgInverse,
            }}
          >
            {actionLabel}
          </Text>
        </Touchable>
      ) : null}
    </View>
  );
}
