import { Feather, Ionicons } from "@expo/vector-icons";
import { LinearGradient } from "expo-linear-gradient";
import React, { useEffect, useRef, useState } from "react";
import {
  ActivityIndicator,
  Alert,
  Animated,
  Dimensions,
  KeyboardAvoidingView,
  Modal,
  Platform,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

import { useAuth } from "@/hooks/use-auth";
import { authClient } from "@/lib/auth/client";
import { storage } from "@/lib/storage";

interface LoginModalProps {
  visible: boolean;
  onClose: () => void;
}

export function LoginModal({ visible, onClose }: LoginModalProps) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [isPasswordVisible, setPasswordVisible] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const { isAuthenticated } = useAuth();
  const slideAnim = useRef(new Animated.Value(Dimensions.get("window").height)).current;
  const fadeAnim = useRef(new Animated.Value(0)).current;

  // Web端CSS样式 - 覆盖autofill + 禁用密码自动填充
  useEffect(() => {
    if (Platform.OS === 'web') {
      const cssStyles = `
        /* 输入框基础样式 */
        .login-input-field,
        .login-input-field input,
        .login-input-field textarea {
          background-color: #1a1d23 !important;
          color: #f5f6f8 !important;
        }

        /* 自动填充状态覆盖 */
        .login-input-field:-webkit-autofill,
        .login-input-field:-webkit-autofill:hover,
        .login-input-field:-webkit-autofill:focus,
        .login-input-field:-webkit-autofill:active {
          background-color: #1a1d23 !important;
          color: #f5f6f8 !important;
          -webkit-box-shadow: 0 0 0 1000px #1a1d23 inset !important;
          box-shadow: 0 0 0 1000px #1a1d23 inset !important;
          -webkit-text-fill-color: #f5f6f8 !important;
          caret-color: #f5f6f8 !important;
          transition: background-color 9999s ease-in-out 0s;
        }

        .login-input-field input:-webkit-autofill,
        .login-input-field input:-webkit-autofill:hover,
        .login-input-field input:-webkit-autofill:focus,
        .login-input-field input:-webkit-autofill:active,
        .login-input-field textarea:-webkit-autofill,
        .login-input-field textarea:-webkit-autofill:hover,
        .login-input-field textarea:-webkit-autofill:focus,
        .login-input-field textarea:-webkit-autofill:active {
          background-color: #1a1d23 !important;
          color: #f5f6f8 !important;
          -webkit-box-shadow: 0 0 0 1000px #1a1d23 inset !important;
          box-shadow: 0 0 0 1000px #1a1d23 inset !important;
          -webkit-text-fill-color: #f5f6f8 !important;
          caret-color: #f5f6f8 !important;
          transition: background-color 9999s ease-in-out 0s;
        }

        /* Chrome内部autofill状态 */
        .login-input-field:-internal-autofill-selected,
        .login-input-field:-internal-autofill-previewed,
        .login-input-field input:-internal-autofill-selected,
        .login-input-field input:-internal-autofill-previewed,
        .login-input-field textarea:-internal-autofill-selected,
        .login-input-field textarea:-internal-autofill-previewed {
          background-color: #1a1d23 !important;
          color: #f5f6f8 !important;
          -webkit-text-fill-color: #f5f6f8 !important;
          caret-color: #f5f6f8 !important;
          -webkit-box-shadow: 0 0 0 1000px #1a1d23 inset !important;
          box-shadow: 0 0 0 1000px #1a1d23 inset !important;
          transition: background-color 9999s ease-in-out 0s;
        }

        /* 文本选择高亮 */
        .login-input-field::selection {
          background-color: #f6474d;
        }

        /* 密码输入框禁用自动填充 */
        input[type="password"][class*="login-input-field"] {
          -webkit-text-security: disc !important;
        }

        /* 隐藏自动填充样式覆盖提示 */
        input[class*="login-input-field"]:-webkit-autofill,
        input[class*="login-input-field"]:-webkit-autofill:hover,
        input[class*="login-input-field"]:-webkit-autofill:focus,
        input[class*="login-input-field"]:-webkit-autofill:active {
          -webkit-box-shadow: 0 0 0 1000px #1a1d23 inset !important;
        }
      `;

      // 创建style标签
      const style = document.createElement('style');
      style.innerHTML = cssStyles;
      style.id = 'login-autofill-styles';

      // 添加到head
      const existingStyle = document.getElementById('login-autofill-styles');
      if (!existingStyle) {
        document.head.appendChild(style);
      }

      // 清理函数
      return () => {
        const element = document.getElementById('login-autofill-styles');
        if (element) {
          element.remove();
        }
      };
    }
  }, []);

  useEffect(() => {
    if (visible) {
      Animated.parallel([
        Animated.timing(slideAnim, {
          toValue: 0,
          duration: 300,
          useNativeDriver: true,
        }),
        Animated.timing(fadeAnim, {
          toValue: 0.5,
          duration: 300,
          useNativeDriver: true,
        }),
      ]).start();
    } else {
      Animated.parallel([
        Animated.timing(slideAnim, {
          toValue: Dimensions.get("window").height,
          duration: 300,
          useNativeDriver: true,
        }),
        Animated.timing(fadeAnim, {
          toValue: 0,
          duration: 300,
          useNativeDriver: true,
        }),
      ]).start();
    }
  }, [visible]);

  useEffect(() => {
    if (isAuthenticated && visible) {
      onClose();
      setEmail("");
      setPassword("");
    }
  }, [isAuthenticated, visible, onClose]);

  const handleClose = () => {
    Animated.parallel([
      Animated.timing(slideAnim, {
        toValue: Dimensions.get("window").height,
        duration: 300,
        useNativeDriver: true,
      }),
      Animated.timing(fadeAnim, {
        toValue: 0,
        duration: 300,
        useNativeDriver: true,
      }),
    ]).start(() => onClose());
  };

  const handleLogin = async () => {
    if (!email.trim() || !password.trim()) {
      Alert.alert("错误", "请输入邮箱和密码");
      return;
    }

    setIsLoading(true);

    try {
      await new Promise<void>(async (resolve, reject) => {
        await authClient.signIn.username(
          {
            username: email.trim(),
            password,
          },
          {
            onSuccess: async (ctx) => {
              const authToken = ctx.response.headers.get("set-auth-token");
              if (authToken) {
                await storage.setItem(
                  `bestaibest.better-auth.session_token`,
                  authToken
                );
                resolve();
              } else {
                console.error("Bearer token not set");
                reject();
              }
            },
          }
        );
      });
      Alert.alert("成功", "登录成功！");
    } catch (error: any) {
      Alert.alert("登录失败", error?.message || "邮箱或密码错误");
    } finally {
      setIsLoading(false);
    }
  };

  const handleBackdropPress = () => {
    handleClose();
  };

  // Web端CSS类名 - 仅使用CSS类名，避开类型限制
  const webInputProps = Platform.select({
    web: {
      className: 'login-input-field',
    },
    default: {},
  });

  return (
    <Modal visible={visible} transparent animationType="none">
        <Animated.View
          style={[
            styles.overlay,
            {
              opacity: fadeAnim,
            },
          ]}
        >
          <TouchableOpacity
            activeOpacity={1}
            style={styles.backdrop}
            onPress={handleBackdropPress}
          >
            <LinearGradient
              colors={["rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 0.5)"]}
              style={StyleSheet.absoluteFillObject}
            />
          </TouchableOpacity>
        </Animated.View>

      <Animated.View
        style={[
          styles.modalContainer,
          {
            transform: [{ translateY: slideAnim }],
          },
        ]}
      >
        <TouchableOpacity activeOpacity={1} style={styles.modalContent}>
          <View style={styles.sheetIndicator} />

          <SafeAreaView style={styles.safeArea}>
            <KeyboardAvoidingView
              behavior={Platform.OS === "ios" ? "padding" : undefined}
              style={styles.flex}
            >
              <View style={styles.content}>
                <View style={styles.header}>
                  <View style={styles.titleGroup}>
                    <View style={styles.iconBadge}>
                      <Ionicons name="mail-open" size={16} color="#ffffff" />
                    </View>
                    <Text style={styles.title}>Email Login</Text>
                  </View>

                  <TouchableOpacity
                    activeOpacity={0.7}
                    onPress={handleClose}
                    style={styles.closeButton}
                  >
                    <Feather name="x" size={20} color="#f2f4f8" />
                  </TouchableOpacity>
                </View>

                <View style={styles.form}>
                  <View style={styles.inputWrapper}>
                    <TextInput
                      style={[styles.input, Platform.select({ web: { outline: 'none' } as any })]}
                      placeholder="yours@example.com"
                      placeholderTextColor="#70737c"
                      value={email}
                      onChangeText={setEmail}
                      autoCapitalize="none"
                      autoCorrect={false}
                      keyboardType="email-address"
                      editable={!isLoading}
                      keyboardAppearance="dark"
                      {...webInputProps}
                    />
                  </View>

                  <View style={styles.inputWrapper}>
                    <TextInput
                      style={[styles.input, Platform.select({ web: { outline: 'none' } as any })]}
                      placeholder="email password"
                      placeholderTextColor="#70737c"
                      value={password}
                      onChangeText={setPassword}
                      secureTextEntry={!isPasswordVisible}
                      autoCorrect={false}
                      editable={!isLoading}
                      keyboardAppearance="dark"
                      // 密码框专用属性
                      textContentType={Platform.select({ web: undefined, default: "newPassword" })}
                      {...webInputProps}
                    />
                    <TouchableOpacity
                      activeOpacity={0.7}
                      onPress={() => setPasswordVisible((visible) => !visible)}
                      style={styles.visibilityToggle}
                    >
                      <Feather
                        name={isPasswordVisible ? "eye-off" : "eye"}
                        size={18}
                        color="#8a8e97"
                      />
                    </TouchableOpacity>
                  </View>

                  <TouchableOpacity
                    style={[styles.loginButton, isLoading && styles.loginButtonDisabled]}
                    onPress={handleLogin}
                    disabled={isLoading}
                    activeOpacity={0.85}
                  >
                    {isLoading ? (
                      <ActivityIndicator color="#0f100f" />
                    ) : (
                      <Text style={styles.loginButtonText}>Log in</Text>
                    )}
                  </TouchableOpacity>

                  <View style={styles.termsRow}>
                    <Ionicons name="checkmark-circle" size={16} color="#d7ff1f" />
                    <Text style={styles.termsText}>
                      已阅读并同意
                      <Text style={styles.linkText}> 用户协议 </Text>
                      和
                      <Text style={styles.linkText}> 隐私政策</Text>
                    </Text>
                  </View>
                </View>
              </View>
            </KeyboardAvoidingView>
          </SafeAreaView>
        </TouchableOpacity>
      </Animated.View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  overlay: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  backdrop: {
    flex: 1,
  },
  modalContainer: {
    position: "absolute",
    left: 0,
    right: 0,
    bottom: 0,
  },
  modalContent: {
    backgroundColor: "#14161c",
    borderTopLeftRadius: 28,
    borderTopRightRadius: 28,
    borderWidth: 1,
    borderColor: "rgba(255, 255, 255, 0.08)",
    shadowColor: "#000",
    shadowOffset: { width: 0, height: -8 },
    shadowRadius: 18,
    shadowOpacity: 0.25,
    elevation: 24,
    maxHeight: Dimensions.get("window").height * 0.75,
  },
  sheetIndicator: {
    width: 40,
    height: 4,
    backgroundColor: "rgba(255, 255, 255, 0.3)",
    borderRadius: 2,
    alignSelf: "center",
    marginTop: 12,
    marginBottom: 8,
  },
  safeArea: {
    flex: 1,
  },
  flex: {
    flex: 1,
  },
  content: {
    flex: 1,
    paddingHorizontal: 24,
    paddingBottom: 34,
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    marginTop: 16,
    marginBottom: 28,
  },
  titleGroup: {
    flexDirection: "row",
    alignItems: "center",
  },
  iconBadge: {
    width: 40,
    height: 40,
    borderRadius: 16,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#f6474d",
    marginRight: 12,
  },
  title: {
    color: "#f5f6f8",
    fontSize: 22,
    fontWeight: "700",
    letterSpacing: 0.2,
  },
  closeButton: {
    width: 40,
    height: 40,
    borderRadius: 20,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "rgba(255, 255, 255, 0.05)",
    borderWidth: 1,
    borderColor: "rgba(255, 255, 255, 0.06)",
  },
  form: {
    marginTop: 4,
  },
  inputWrapper: {
    position: "relative",
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 18,
    backgroundColor: "#1a1d23",
    borderRadius: 18,
    borderWidth: 1,
    borderColor: "rgba(255, 255, 255, 0.05)",
    marginBottom: 18,
  },
  input: {
    flex: 1,
    paddingVertical: 16,
    fontSize: 16,
    color: "#f5f6f8",
    backgroundColor: "transparent",
    letterSpacing: 0.3,
  },
  visibilityToggle: {
    marginLeft: 12,
  },
  loginButton: {
    height: 56,
    borderRadius: 18,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#d7ff1f",
    shadowColor: "#d7ff1f",
    shadowOpacity: 0.35,
    shadowRadius: 16,
    shadowOffset: { width: 0, height: 10 },
    elevation: 10,
    marginTop: 4,
  },
  loginButtonDisabled: {
    opacity: 0.7,
  },
  loginButtonText: {
    color: "#10120d",
    fontSize: 17,
    fontWeight: "700",
    letterSpacing: 0.5,
  },
  termsRow: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    marginTop: 18,
  },
  termsText: {
    color: "#a7abb5",
    fontSize: 13,
    lineHeight: 18,
    marginLeft: 8,
  },
  linkText: {
    color: "#f5f6f8",
    fontWeight: "600",
  },
});
