import React, { useState, useEffect } from 'react';
import {
  Text,
  Image,
  TouchableOpacity,
  KeyboardAvoidingView,
  Platform,
  ScrollView,
  ActivityIndicator,
  Alert,
  useWindowDimensions,
} from 'react-native';
import { useRouter } from 'expo-router';
import { useColorScheme } from 'nativewind';
import { Lock, Eye, EyeOff, X, ContactRound } from 'lucide-react-native';
import Animated, { FadeInUp } from 'react-native-reanimated';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { Container } from '~/src/components/Container';
import Input from '~/src/components/Input';
import { supabase } from '~/src/lib/supabase';

const ChangePasswordScreen = () => {
  const router = useRouter();
  const { colorScheme } = useColorScheme();
  const isDark = colorScheme === 'dark';
  const { width } = useWindowDimensions();

  const [newPassword, setNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [showNewPassword, setShowNewPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [errors, setErrors] = useState<{ newPassword?: string; confirmPassword?: string }>({});

  const validateForm = () => {
    const newErrors: { newPassword?: string; confirmPassword?: string } = {};

    if (!newPassword) {
      newErrors.newPassword = 'New password is required';
    } else if (newPassword.length < 8) {
      newErrors.newPassword = 'Password must be at least 8 characters';
    }

    if (!confirmPassword) {
      newErrors.confirmPassword = 'Please confirm your password';
    } else if (confirmPassword !== newPassword) {
      newErrors.confirmPassword = 'Passwords do not match';
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleBack = async () => {
    const isResetting = await AsyncStorage.getItem('handlingPasswordReset');

    if (isResetting) {
      Alert.alert(
        'Warning',
        "You haven't changed your password yet. Are you sure you want to leave?",
        [
          {
            text: 'Stay',
            style: 'cancel',
          },
          {
            text: 'Leave',
            style: 'destructive',
            onPress: async () => {
              await AsyncStorage.removeItem('handlingPasswordReset');
              router.back();
            },
          },
        ]
      );
    } else {
      router.back();
    }
  };

  
  const handleChangePassword = async () => {
    console.log('Starting handleChangePassword');

    if (!validateForm()) {
      console.log('Form validation failed');
      return;
    }

    console.log('Form validation passed');
    setIsLoading(true);

    const result = await supabase.auth.updateUser({ password: newPassword });
    console.log('updateUser result:', JSON.stringify(result, null, 2));
  };

  return (
    <Container>
      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        className="flex-1">
        <ScrollView
          contentContainerClassName="flex-grow justify-center px-6"
          keyboardShouldPersistTaps="handled">
          {/* Close Button */}
          <TouchableOpacity onPress={handleBack} className="absolute right-4 top-4 z-10">
            <X size={24} color={isDark ? '#9CA3AF' : '#6B7280'} />
          </TouchableOpacity>

          {/* MIT Logo */}
          <Animated.View
            entering={FadeInUp.duration(1000).springify()}
            className="mb-6 mt-8 items-center">
            <Image
              source={require('~/assets/MIT_logos/mit_long.png')}
              className="h-24 w-full"
              resizeMode="contain"
            />
          </Animated.View>

          {/* Change Password Illustration */}
          <Animated.View
            entering={FadeInUp.delay(200).duration(1000).springify()}
            className="mb-8 items-center">
            <Image
              source={require('~/assets/auth/change-password.png')}
              style={{
                width: width * 0.7,
                height: width * 0.5,
              }}
              resizeMode="contain"
            />
          </Animated.View>

          <Animated.View entering={FadeInUp.delay(400).duration(1000).springify()}>
            {/* Header Text */}
            <Text
              className={`mb-2 text-center text-3xl font-bold ${
                isDark ? 'text-dark-text-primary' : 'text-light-text-primary'
              }`}>
              Change Password
            </Text>
            <Text
              className={`mb-8 text-center text-base ${
                isDark ? 'text-dark-text-secondary' : 'text-light-text-secondary'
              }`}>
              Create a new secure password
            </Text>

            {/* New Password Input */}
            <Input
              icon={<Lock size={22} color={isDark ? '#9CA3AF' : '#6B7280'} />}
              label="New Password"
              placeholder="Enter new password"
              value={newPassword}
              onChangeText={(text) => {
                setNewPassword(text);
                setErrors({ ...errors, newPassword: undefined });
              }}
              secureTextEntry={!showNewPassword}
              error={errors.newPassword}
              rightIcon={<Eye size={20} color={isDark ? '#9CA3AF' : '#6B7280'} />}
              onRightIconPress={() => setShowNewPassword(!showNewPassword)}
              helper="Password must be at least 8 characters"
              required
            />

            {/* Confirm Password Input */}
            <Input
              icon={<Lock size={22} color={isDark ? '#9CA3AF' : '#6B7280'} />}
              placeholder="Confirm New Password"
              value={confirmPassword}
              onChangeText={(text) => {
                setConfirmPassword(text);
                setErrors({ ...errors, confirmPassword: undefined });
              }}
              secureTextEntry={!showConfirmPassword}
              error={errors.confirmPassword}
              rightIcon={
                <TouchableOpacity
                  onPress={() => setShowConfirmPassword(!showConfirmPassword)}
                  className="p-1">
                  {showConfirmPassword ? (
                    <EyeOff size={20} color={isDark ? '#9CA3AF' : '#6B7280'} />
                  ) : (
                    <Eye size={20} color={isDark ? '#9CA3AF' : '#6B7280'} />
                  )}
                </TouchableOpacity>
              }
            />

            {/* Submit Button */}
            <TouchableOpacity
              onPress={handleChangePassword}
              disabled={isLoading}
              className={`mt-4 rounded-xl py-4 ${
                isDark ? 'bg-primary-red' : 'bg-primary-blue'
              } ${isLoading ? 'opacity-70' : ''}`}>
              {isLoading ? (
                <ActivityIndicator color="white" />
              ) : (
                <Text className="text-center text-lg font-semibold text-white">
                  Change Password
                </Text>
              )}
            </TouchableOpacity>

            {/* Cancel Button */}
            <TouchableOpacity onPress={handleBack} className="mt-4">
              <Text
                className={`text-center text-sm font-medium ${
                  isDark ? 'text-dark-text-secondary' : 'text-light-text-secondary'
                }`}>
                Cancel
              </Text>
            </TouchableOpacity>
          </Animated.View>
        </ScrollView>
      </KeyboardAvoidingView>
    </Container>
  );
};

export default ChangePasswordScreen;