import React from 'react';
import { View, StyleSheet } from 'react-native';
import { useAuth } from '@/hooks/use-auth';
import { useAuthGuard } from '@/hooks/use-auth-guard';
import { ThemedText } from '@/components/themed-text';

interface AuthGuardProps {
  children: React.ReactNode;
  fallback?: React.ReactNode;
  showLoginPrompt?: boolean;
  title?: string;
  subtitle?: string;
}

/**
 * 认证守卫组件
 * 用于包装需要登录才能访问的内容
 *
 * @param children - 需要保护的内容
 * @param fallback - 未登录时显示的自定义内容（可选）
 * @param showLoginPrompt - 是否显示默认的登录提示（默认true）
 * @param title - 自定义提示标题
 * @param subtitle - 自定义提示副标题
 *
 * @example
 * ```typescript
 * <AuthGuard>
 *   <ProtectedComponent />
 * </AuthGuard>
 *
 * // 自定义提示
 * <AuthGuard
 *   title="需要登录"
 *   subtitle="登录后即可使用此功能"
 * >
 *   <ProtectedComponent />
 * </AuthGuard>
 * ```
 */
export function AuthGuard({
  children,
  fallback,
  showLoginPrompt = true,
  title = '需要登录',
  subtitle = '请先登录以继续使用',
}: AuthGuardProps) {
  const { isAuthenticated, isLoading } = useAuth();
  const { requireAuth } = useAuthGuard();

  if (isLoading) {
    return <View style={styles.loadingContainer} />;
  }

  if (!isAuthenticated) {
    if (fallback) {
      return <>{fallback}</>;
    }

    if (showLoginPrompt) {
      return (
        <View style={styles.promptContainer}>
          <View style={styles.iconContainer}>
            <ThemedText style={styles.lockIcon}>🔒</ThemedText>
          </View>
          <ThemedText style={styles.title}>{title}</ThemedText>
          <ThemedText style={styles.subtitle}>{subtitle}</ThemedText>
        </View>
      );
    }

    return null;
  }

  return <>{children}</>;
}

const styles = StyleSheet.create({
  loadingContainer: {
    flex: 1,
  },
  promptContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 32,
  },
  iconContainer: {
    width: 80,
    height: 80,
    borderRadius: 40,
    backgroundColor: 'rgba(0, 122, 255, 0.1)',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 24,
  },
  lockIcon: {
    fontSize: 40,
  },
  title: {
    fontSize: 24,
    fontWeight: '700',
    marginBottom: 12,
    textAlign: 'center',
  },
  subtitle: {
    fontSize: 16,
    opacity: 0.7,
    textAlign: 'center',
    lineHeight: 24,
  },
});