import React, { useState, useRef, useEffect } from 'react';
import {
  View,
  Text,
  TextInput,
  StyleSheet,
  TouchableOpacity,
  KeyboardAvoidingView,
  Platform,
  Animated,
  StatusBar,
  ActivityIndicator,
  Dimensions,
} from 'react-native';
import { LOGIN_URL } from '../utils/ApiUrls';
import axios from 'axios';
import { useNavigation } from '@react-navigation/native';
import type { StackNavigationProp } from '@react-navigation/stack';
import { RootStackParamList } from '../navigation/AppNavigator';
import LinearGradient from 'react-native-linear-gradient';
import Ionicons from '@react-native-vector-icons/ionicons';
import MaterialRipple from 'react-native-material-ripple'; // For the button ripple effect
import CustomAlert from '../components/CostomAlart';
import colors from '../components/colors';

const { width } = Dimensions.get('window');
const BLOCK_SIZE = width / 3;

// Note: You will need to install react-native-material-ripple
// npm install react-native-material-ripple

export default function LoginScreen() {
  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
  const [mobile, setMobile] = useState('');
  const [loading, setLoading] = useState(false);
  const [alertInfo, setAlertInfo] = useState({
    visible: false,
    title: '',
    message: '',
    buttons: [] as { text: string; onPress: () => void; style?: 'cancel' | 'destructive' | 'default' }[],
    alertType: 'info' as 'info' | 'success' | 'error',
  });

  const fade = useRef(new Animated.Value(0)).current;
  const slide = useRef(new Animated.Value(30)).current;
  const ctaScale = useRef(new Animated.Value(1)).current;

  useEffect(() => {
    Animated.parallel([
      Animated.timing(fade, { toValue: 1, duration: 800, useNativeDriver: true }),
      Animated.spring(slide, { toValue: 0, friction: 5, tension: 40, useNativeDriver: true }),
    ]).start();
  }, []);

  const showAlert = (
    title: string,
    message: string,
    buttons: { text: string; onPress: () => void; style?: 'cancel' | 'destructive' | 'default' }[],
    alertType: 'info' | 'success' | 'error' = 'info',
  ) => {
    setAlertInfo({ visible: true, title, message, buttons, alertType });
  };

  const hideAlert = () => {
    setAlertInfo({ ...alertInfo, visible: false });
  };

  const handleContinue = async () => {
    if (mobile.length === 10) {
      setLoading(true);
      try {
        const res = await axios.get(LOGIN_URL, { params: { mobile } });
        if (res.data.statusCode === 200) {
          navigation.navigate('OtpVarify', { mobile });
        } else {
          showAlert('Login Failed', res.data.message || 'Could not send OTP.', [{ text: 'Try Again', onPress: hideAlert }], 'error');
        }
      } catch (error: any) {
        showAlert('An Error Occurred', 'Failed to send OTP. Please check your connection and try again.', [{ text: 'OK', onPress: hideAlert }], 'error');
      } finally {
        setLoading(false);
      }
    } else {
      showAlert('Invalid Number', 'Please enter a valid 10-digit mobile number.', [{ text: 'Got it', onPress: hideAlert }], 'info');
    }
  };

  const colorsBlocks = [
    colors.pastelPink,
    colors.pastelBlue,
    colors.pastelGreen,
    colors.pastelOrange,
    colors.pastelBlue,
    colors.pastelPink,
    colors.pastelGreen,
    colors.pastelOrange,
    colors.pastelPink,
  ];

  return (
    <View style={styles.container}>
      <StatusBar barStyle="dark-content" backgroundColor={colors.pastelOrange} />

      {/* Funky grid blocks background (Unchanged) */}
      <View style={styles.gridContainer}>
        {colorsBlocks.map((bgColor, index) => (
          <View
            key={index}
            style={[
              styles.gridBlock,
              { backgroundColor: bgColor },
              index % 2 === 0 ? styles.elevatedBlock : {},
            ]}
          />
        ))}
      </View>

      <KeyboardAvoidingView
        style={styles.keyboardAvoidingContainer}
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      >
        <View style={styles.contentContainer}>
          <View style={styles.topSection}>
            <Animated.View style={{ opacity: fade, transform: [{ translateY: slide }] }}>
              <Text style={styles.brand}>CircleCollect</Text>
              <Text style={styles.title}>Welcome Back!</Text>
              <Text style={styles.subtitle}>
                Let's get you signed in to your community.
              </Text>
            </Animated.View>
          </View>

          <Animated.View style={{ opacity: fade, transform: [{ translateY: slide }] }}>
            <View style={styles.inputWrapper}>
              <Ionicons name="call-outline" size={24} color={colors.textLight} style={styles.inputIcon} />
              <TextInput
                style={styles.input}
                placeholder="Enter your mobile number"
                placeholderTextColor={colors.textLight}
                value={mobile}
                onChangeText={setMobile}
                keyboardType="phone-pad"
                maxLength={10}
                selectionColor={colors.textLight}
              />
            </View>
          </Animated.View>

          <Animated.View style={[styles.bottomSection, { transform: [{ scale: ctaScale }] }]}> 
            <MaterialRipple
              onPress={handleContinue}
              disabled={loading}
              rippleColor={colors.white}
              style={styles.button}
              rippleCentered
              rippleContainerBorderRadius={30}
            >
              <LinearGradient
                colors={[colors.pastelPink, colors.pastelOrange]}
                style={styles.buttonGradient}
                start={{x: 0, y: 0}}
                end={{x: 1, y: 1}}
              >
                {loading ? (
                  <ActivityIndicator color={colors.white} />
                ) : (
                  <View style={styles.buttonContent}>
                    <Text style={styles.buttonText}>Continue</Text>
                    <Ionicons name="arrow-forward-circle-outline" size={22} color={colors.white} style={{marginLeft: 8}} />
                  </View>
                )}
              </LinearGradient>
            </MaterialRipple>
            <Text style={styles.footerText}>
              Your privacy is our priority. Your information is always secure.
            </Text>
          </Animated.View>
        </View>
      </KeyboardAvoidingView>

      <CustomAlert
        visible={alertInfo.visible}
        title={alertInfo.title}
        message={alertInfo.message}
        buttons={alertInfo.buttons}
        alertType={alertInfo.alertType}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  gridContainer: {
    ...StyleSheet.absoluteFillObject,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  gridBlock: {
    width: BLOCK_SIZE,
    height: BLOCK_SIZE,
    margin: 2,
    borderRadius: 16,
  },
  elevatedBlock: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 5 },
    shadowOpacity: 0.15,
    shadowRadius: 10,
    elevation: 7,
  },
  keyboardAvoidingContainer: {
    flex: 1,
  },
  contentContainer: {
    flex: 1,
    justifyContent: 'space-between',
    padding: 24,
  },
  topSection: {
    flex: 0.8,
    justifyContent: 'center',
    alignItems: 'center',
  },
  brand: {
    fontSize: 28,
    fontWeight: '700',
    color: colors.primary,
    textAlign: 'center',
    letterSpacing: 2,
    marginBottom: 16,
    textShadowColor: 'rgba(0, 0, 0, 0.1)',
    textShadowOffset: { width: 1, height: 1 },
    textShadowRadius: 2,
  },
  title: {
    fontSize: 40,
    fontWeight: 'bold',
    color: colors.textDark,
    textAlign: 'center',
    marginBottom: 14,
  },
  subtitle: {
    fontSize: 16,
    color: colors.textDark,
    textAlign: 'center',
    lineHeight: 26,
    maxWidth: 320,
  },
  inputWrapper: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'rgba(255, 255, 255, 0.85)',
    borderRadius: 36,
    borderWidth: 2,
    borderColor: colors.pastelPink,
    paddingHorizontal: 20,
    shadowColor: colors.primary,
    shadowOffset: { width: 0, height: 6 },
    shadowOpacity: 0.2,
    shadowRadius: 14,
    elevation: 8,
  },
  inputIcon: {
    marginRight: 16,
  },
  input: {
    flex: 1,
    fontSize: 18,
    fontWeight: '600',
    color: colors.textLight,
    height: 58,
  },
  bottomSection: {
    alignItems: 'center',
    paddingBottom: Platform.OS === 'ios' ? 20 : 10,
  },
  button: {
    width: '100%',
    borderRadius: 30,
    shadowColor: colors.primary,
    shadowOffset: { width: 0, height: 10 },
    shadowOpacity: 0.4,
    shadowRadius: 20,
    elevation: 14,
    marginTop: 20,
  },
  buttonGradient: {
    borderRadius: 30,
    paddingVertical: 18,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonContent: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  buttonText: {
    color: colors.white,
    fontWeight: '800',
    fontSize: 18,
  },
  footerText: {
    fontSize: 14,
    color: 'rgba(0,0,0,0.5)',
    marginTop: 28,
    textAlign: 'center',
    maxWidth: 300,
  },
});