import React from 'react';
import { View, StyleSheet, TouchableOpacity } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import { ThemedText } from '@/components/themed-text';
import { useAuthGuard } from '@/hooks/use-auth-guard';

interface AuthPromptProps {
  variant?: 'card' | 'fullscreen' | 'inline';
  title?: string;
  subtitle?: string;
  actionLabel?: string;
  showIcon?: boolean;
  iconName?: keyof typeof Ionicons.glyphMap;
  gradientColors?: [string, string, ...string[]];
  onLoginPress?: () => void;
}

/**
 * 认证提示组件
 * 为未登录用户提供清晰的登录引导
 */
export function AuthPrompt({
  variant = 'card',
  title = '需要登录',
  subtitle = '登录后即可使用所有功能',
  actionLabel = '立即登录',
  showIcon = true,
  iconName = 'log-in-outline',
  gradientColors = ['#007AFF', '#0056D2'] as [string, string],
  onLoginPress,
}: AuthPromptProps) {
  const { requireAuth } = useAuthGuard();

  const handleLogin = () => {
    if (onLoginPress) {
      onLoginPress();
    } else {
      requireAuth();
    }
  };

  if (variant === 'fullscreen') {
    return (
      <View style={styles.fullscreenContainer}>
        <View style={styles.fullscreenContent}>
          {showIcon && (
            <View style={styles.iconContainer}>
              <Ionicons name={iconName} size={32} color="#007AFF" />
            </View>
          )}
          <ThemedText style={styles.title}>{title}</ThemedText>
          <ThemedText style={styles.subtitle}>{subtitle}</ThemedText>
          <TouchableOpacity style={styles.actionButton} onPress={handleLogin}>
            <LinearGradient
              colors={gradientColors}
              start={{ x: 0, y: 0 }}
              end={{ x: 1, y: 1 }}
              style={styles.buttonGradient}
            >
              <Ionicons name={iconName} size={20} color="#fff" style={styles.buttonIcon} />
              <ThemedText style={styles.buttonText}>{actionLabel}</ThemedText>
            </LinearGradient>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

  if (variant === 'card') {
    return (
      <View style={styles.cardContainer}>
        {showIcon && (
          <View style={styles.iconContainer}>
            <Ionicons name={iconName} size={32} color="#007AFF" />
          </View>
        )}
        <ThemedText style={styles.title}>{title}</ThemedText>
        <ThemedText style={styles.subtitle}>{subtitle}</ThemedText>
        <TouchableOpacity style={styles.cardButton} onPress={handleLogin}>
          <LinearGradient
            colors={gradientColors}
            start={{ x: 0, y: 0 }}
            end={{ x: 1, y: 1 }}
            style={styles.buttonGradient}
          >
            <Ionicons name={iconName} size={16} color="#fff" style={styles.buttonIcon} />
            <ThemedText style={styles.buttonText}>{actionLabel}</ThemedText>
          </LinearGradient>
        </TouchableOpacity>
      </View>
    );
  }

  return (
    <View style={styles.inlineContainer}>
      <ThemedText style={styles.inlineTitle}>{title}</ThemedText>
      <TouchableOpacity style={styles.inlineButton} onPress={handleLogin}>
        <ThemedText style={styles.inlineButtonText}>{actionLabel}</ThemedText>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  fullscreenContainer: {
    flex: 1,
    backgroundColor: '#050505',
  },
  fullscreenContent: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 40,
  },
  iconContainer: {
    width: 100,
    height: 100,
    borderRadius: 50,
    backgroundColor: 'rgba(0, 122, 255, 0.1)',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 32,
  },
  title: {
    fontSize: 28,
    fontWeight: '700',
    color: '#ffffff',
    marginBottom: 16,
    textAlign: 'center',
  },
  subtitle: {
    fontSize: 16,
    color: 'rgba(255, 255, 255, 0.6)',
    textAlign: 'center',
    lineHeight: 24,
    marginBottom: 48,
  },
  actionButton: {
    width: '100%',
    height: 56,
    borderRadius: 16,
    overflow: 'hidden',
    elevation: 8,
  },
  cardContainer: {
    backgroundColor: 'rgba(255, 255, 255, 0.05)',
    borderRadius: 20,
    padding: 24,
    alignItems: 'center',
    borderWidth: 1,
    borderColor: 'rgba(255, 255, 255, 0.1)',
    margin: 20,
  },
  cardButton: {
    width: '100%',
    height: 48,
    borderRadius: 12,
    overflow: 'hidden',
  },
  buttonGradient: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    height: '100%',
  },
  buttonIcon: {
    marginRight: 8,
  },
  buttonText: {
    color: '#fff',
    fontSize: 17,
    fontWeight: '700',
  },
  inlineContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 12,
    backgroundColor: 'rgba(255, 255, 255, 0.05)',
    borderRadius: 12,
  },
  inlineTitle: {
    flex: 1,
    fontSize: 14,
    color: '#ffffff',
    marginRight: 12,
  },
  inlineButton: {
    paddingHorizontal: 16,
    paddingVertical: 8,
    backgroundColor: '#007AFF',
    borderRadius: 8,
  },
  inlineButtonText: {
    color: '#fff',
    fontSize: 14,
    fontWeight: '600',
  },
});