import {
  Checkbox,
  Input,
  Select,
  TermsModal,
  Toast,
} from "@/components/common";
import { CITIES } from "@/data/places";
import { COLOR_SCALES } from "@/theme/colors";
import { FLEX } from "@/theme/mixins";
import { paragraph, title } from "@/theme/typography";
import { Ionicons } from "@expo/vector-icons";
import { LinearGradient } from "expo-linear-gradient";
import { router } from "expo-router";
import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import {
  Image,
  KeyboardAvoidingView,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  Platform,
  Dimensions,
} from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { getContractById } from "../../services/contracts";
import { registerUser } from "../../services/user";

export default function Register() {
  const insets = useSafeAreaInsets();
  const { height: screenHeight } = Dimensions.get("window");
  
  const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: "",
    phone: "",
    gender: "",
    age: "",
    city: "",
    education: "",
    password: "",
  });

  const [errors, setErrors] = useState({});
  const [isLoading, setIsLoading] = useState(false);
  const [agreeTerms, setAgreeTerms] = useState(false);
  const [showToast, setShowToast] = useState(false);
  const [showTerms, setShowTerms] = useState(false);
  const [termsContent, setTermsContent] = useState({
    title: "",
    content: "",
  });
  const [passwordStrength, setPasswordStrength] = useState({
    level: "Zayıf",
    score: 0,
  });
  const [contract, setContract] = useState(null);
  const [error, setError] = useState(null);
  const [toastMessage, setToastMessage] = useState("");
  const [toastType, setToastType] = useState("error");

  const handleLogin = () => {
    router.push("/login");
  };

  const fetchContract = async (id) => {
    try {
      setIsLoading(true);
      setError(null);

      const response = await getContractById(id);

      if (!response?.data) {
        throw new Error("Sözleşme bilgisi alınamadı");
      }

      setContract(response.data);
      setTermsContent({
        title:
          response.data.title ||
          (id === 1 ? "KVKK Aydınlatma Metni" : "Kullanım Şartları"),
        content: response.data.content || "Sözleşme içeriği bulunamadı.",
      });
      setShowTerms(true);
    } catch (err) {
      const errorMessage =
        err?.message || "Sözleşme yüklenirken bir hata oluştu";
      setError(errorMessage);
      setToastMessage(errorMessage);
      setToastType("error");
      setShowToast(true);
    } finally {
      setIsLoading(false);
    }
  };

  const handleRegister = async () => {
    if (validateForm()) {
      setIsLoading(true);
      try {
        const registerData = {
          firstName: formData.firstName,
          lastName: formData.lastName,
          email: formData.email,
          phone: formData.phone && formData.phone.trim() !== '' ? formData.phone : null,
          gender: formData.gender && formData.gender.trim() !== '' ? formData.gender : null,
          age: formData.age && formData.age.trim() !== '' ? parseInt(formData.age) : null,
          city: formData.city ? parseInt(formData.city) : null,
          education_level: formData.education,
          password: formData.password,
          profile_image: "default.png",
          device:"ios"
        };
        
        const response = await registerUser(registerData);

        if (response?.success) {
          setToastMessage(response?.message);
          setToastType("success");
          setShowToast(true);

          setTimeout(() => {
            router.push("/login");
          }, 1500);
        } else {
          setToastMessage(response?.message);
          setToastType("error");
          setShowToast(true);
        }
      } catch (error) {
        console.error("Register error:", error);
        console.error("Error details:", JSON.stringify(error, null, 2));
        
        let errorMessage = "Kayıt olurken bir hata oluştu";
        
        if (error?.response?.data?.message) {
          errorMessage = error.response.data.message;
        } else if (error?.message) {
          errorMessage = error.message;
        }
        
        setToastMessage(errorMessage);
        setToastType("error");
        setShowToast(true);
        setErrors({ general: errorMessage });
      } finally {
        setIsLoading(false);
      }
    }
  };

  const handleShowTerms = () => {
    setShowTerms(true);
  };

  const handleAcceptTerms = () => {
    setAgreeTerms(true);
    setShowTerms(false);
  };

  const handleRejectTerms = () => {
    setAgreeTerms(false);
    setShowTerms(false);
  };

  const calculatePasswordStrength = (password) => {
    let score = 0;
    let level = "Zayıf";

    if (password.length >= 8) score += 1;
    if (/[a-z]/.test(password)) score += 1;
    if (/[A-Z]/.test(password)) score += 1;
    if (/[0-9]/.test(password)) score += 1;
    if (/[^A-Za-z0-9]/.test(password)) score += 1;

    if (score >= 4) {
      level = "Güçlü";
    } else if (score >= 2) {
      level = "Orta";
    }

    return { level, score };
  };

  const validateForm = () => {

    const newErrors = {};

    if (!formData.firstName) {
      newErrors.firstName = "İsim gerekli";
    }

    if (!formData.lastName) {
      newErrors.lastName = "Soyisim gerekli";
    }

    if (!formData.email) {
      newErrors.email = "E-posta adresi gerekli";
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
      newErrors.email = "Geçerli bir e-posta adresi girin";
    }

    if (!formData.password) {
      newErrors.password = "Şifre gerekli";
    } else if (formData.password.length < 8) {
      newErrors.password = "Şifre en az 8 karakter olmalı";
    }

    if (!agreeTerms) {
      newErrors.terms = "Kullanım şartlarını kabul etmelisiniz";
    }

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

  return (
    <LinearGradient
      colors={["#E35367", "#B4001A", "#bd4050"]}
      style={styles.container}
    >
      <StatusBar style="light" />

      <SafeAreaView style={styles.safeArea}>
        <TouchableOpacity
          style={styles.backButton}
          onPress={() => router.push("/(auth)/login")}
        >
          <Ionicons
            name="arrow-back"
            size={24}
            color={COLOR_SCALES.white.white}
          />
        </TouchableOpacity>
      </SafeAreaView>

      <View style={styles.topSection}>
        <SafeAreaView style={styles.topContent}>
          <View style={styles.imageContainer}>
            <Image
              source={require("@/assets/images/oturan-lokma.png")}
              style={styles.image}
              resizeMode="contain"
            />
          </View>
          <Text style={styles.title}>
            Hadi kayıt olun, eğitimlerin kapısını açalım!
          </Text>
        </SafeAreaView>
      </View>

      <View style={styles.formSection}>
        <KeyboardAvoidingView
          behavior="padding"
          style={styles.keyboardContainer}
        >
          <ScrollView
            style={styles.scrollContainer}
            contentContainerStyle={styles.formContainer}
            showsVerticalScrollIndicator={false}
            keyboardShouldPersistTaps="handled"
            bounces={false}
          >
            <View style={styles.topLoginContainer}>
              <Text style={styles.topLoginHelperText}>
                Zaten bir hesabınız var mı?
              </Text>
              <TouchableOpacity onPress={handleLogin}>
                <Text style={styles.topLoginLink}>Giriş Yap</Text>
              </TouchableOpacity>
            </View>

            <View style={styles.inputsContainer}>
              <Input
                label="İsim"
                placeholder="İsim"
                value={formData.firstName}
                onChangeText={(text) => {
                  setFormData({ ...formData, firstName: text });
                  if (errors.firstName)
                    setErrors({ ...errors, firstName: "" });
                }}
                error={errors.firstName}
                leftIcon={
                  <Ionicons name="person-outline" size={20} color="#6d6d6d" />
                }
              />
              <Input
                label="Soyisim"
                placeholder="Soyisim"
                value={formData.lastName}
                onChangeText={(text) => {
                  setFormData({ ...formData, lastName: text });
                  if (errors.lastName) setErrors({ ...errors, lastName: "" });
                }}
                error={errors.lastName}
                leftIcon={
                  <Ionicons name="person-outline" size={20} color="#6d6d6d" />
                }
              />
              <Input
                label="E-mail Adresiniz"
                placeholder="info@example.com"
                value={formData.email}
                onChangeText={(text) => {
                  setFormData({ ...formData, email: text });
                  if (errors.email) setErrors({ ...errors, email: "" });
                }}
                error={errors.email}
                keyboardType="email-address"
                autoCapitalize="none"
                leftIcon={
                  <Ionicons name="mail-outline" size={20} color="#6d6d6d" />
                }
              />
              <Input
                label="GSM Numaranız (Opsiyonel)"
                placeholder="0 (___) ___ __ __"
                value={formData.phone}
                onChangeText={(text) => {
                  setFormData({ ...formData, phone: text });
                  if (errors.phone) setErrors({ ...errors, phone: "" });
                }}
                error={errors.phone}
                keyboardType="phone-pad"
                leftIcon={
                  <Ionicons name="call-outline" size={20} color="#6d6d6d" />
                }
              />
              <Select
                label="Cinsiyetiniz (Opsiyonel)"
                placeholder="Cinsiyet Seçiniz"
                value={formData.gender}
                onSelect={(value) => {
                  setFormData({ ...formData, gender: value });
                  if (errors.gender) setErrors({ ...errors, gender: "" });
                }}
                error={errors.gender}
                options={[
                  { label: "Erkek", value: "male" },
                  { label: "Kadın", value: "female" },
                  { label: "Diğer", value: "other" },
                ]}
                iconLeft={
                  <Ionicons
                    name="transgender-outline"
                    size={20}
                    color="#6d6d6d"
                  />
                }
                iconAfter={
                  <Ionicons name="chevron-down" size={24} color="#A8957D" />
                }
              />
              <Input
                label="Yaş (Opsiyonel)"
                placeholder="Yaşınız"
                value={formData.age}
                onChangeText={(text) => {
                  setFormData({ ...formData, age: text });
                  if (errors.age) setErrors({ ...errors, age: "" });
                }}
                error={errors.age}
                keyboardType="numeric"
                leftIcon={
                  <Ionicons
                    name="calendar-outline"
                    size={20}
                    color="#6d6d6d"
                  />
                }
              />
              <Select
                label="Şehir (Opsiyonel)"
                placeholder="Şehir Seçiniz"
                value={formData.city}
                onSelect={(value) => {
                  setFormData({ ...formData, city: value });
                  if (errors.city) setErrors({ ...errors, city: "" });
                }}
                error={errors.city}
                options={CITIES}
                iconLeft={
                  <Ionicons
                    name="location-outline"
                    size={20}
                    color="#6d6d6d"
                  />
                }
                iconAfter={
                  <Ionicons name="chevron-down" size={24} color="#A8957D" />
                }
              />
              <Select
                label="Öğrenim Durumunuz (Opsiyonel)"
                placeholder="Üniversite"
                value={formData.education}
                onSelect={(value) => {
                  setFormData({ ...formData, education: value });
                  if (errors.education)
                    setErrors({ ...errors, education: "" });
                }}
                error={errors.education}
                options={[
                  { label: "İlkokul", value: "primary" },
                  { label: "Ortaokul", value: "secondary" },
                  { label: "Lise", value: "high_school" },
                  { label: "Üniversite", value: "university" },
                  { label: "Yüksek Lisans", value: "master" },
                  { label: "Doktora", value: "phd" },
                ]}
                iconLeft={
                  <Ionicons name="school-outline" size={20} color="#6d6d6d" />
                }
                iconAfter={
                  <Ionicons name="chevron-down" size={24} color="#A8957D" />
                }
              />
              <Input
                label="Şifreniz"
                placeholder="info: XaZka2sa3"
                value={formData.password}
                onChangeText={(text) => {
                  setFormData({ ...formData, password: text });
                  if (errors.password) setErrors({ ...errors, password: "" });
                  setPasswordStrength(calculatePasswordStrength(text));
                }}
                error={errors.password}
                isPassword={true}
                leftIcon={
                  <Ionicons
                    name="lock-closed-outline"
                    size={20}
                    color="#6d6d6d"
                  />
                }
              />
              <View style={styles.passwordStrengthContainer}>
                <Text style={styles.passwordStrengthText}>
                  Şifre güçlülüğü
                </Text>
                <Text style={styles.passwordStrengthLevel}>
                  {passwordStrength.level}
                </Text>
              </View>
              <View style={styles.passwordTipsContainer}>
                <Text style={styles.passwordTipsTitle}>
                  Şifrenizin güçlü olması için ne yapmalısınız
                </Text>
                <View style={styles.passwordTipRow}>
                  <Text style={styles.passwordTipBullet}>•</Text>
                  <Text style={styles.passwordTipText}>
                    Şifreniz en az 8 karakterden oluşturulmalı
                  </Text>
                </View>
                <View style={styles.passwordTipRow}>
                  <Text style={styles.passwordTipBullet}>•</Text>
                  <Text style={styles.passwordTipText}>
                    Bir adet özel karakter (*./){" "}
                  </Text>
                </View>
                <View style={styles.passwordTipRow}>
                  <Text style={styles.passwordTipBullet}>•</Text>
                  <Text style={styles.passwordTipText}>
                    Bir adet Büyük harf (A,B,C)
                  </Text>
                </View>
              </View>
              <View style={styles.termsContainer}>
                <Checkbox
                  checked={agreeTerms}
                  onChange={(checked) => {
                    setAgreeTerms(checked);
                    if (errors.terms) setErrors({ ...errors, terms: "" });
                  }}
                  error={errors.terms}
                  label={
                    <Text style={styles.termsText}>
                      <Text
                        style={styles.termsLink}
                        onPress={() => fetchContract(1)}
                      >
                        KVKK
                      </Text>{" "}
                      ve{" "}
                      <Text
                        style={styles.termsLink}
                        onPress={() => fetchContract(2)}
                      >
                        Kullanım Şartlarını
                      </Text>{" "}
                      okudum kabul ediyorum
                    </Text>
                  }
                />
              </View>
            </View>

            <TouchableOpacity
              style={styles.loginButton}
              onPress={handleRegister}
              disabled={isLoading}
              activeOpacity={0.8}
            >
              <LinearGradient
                colors={["#FF0025", "#FF0025", "#FF0025"]}
                style={styles.loginButtonGradient}
              >
                <Text style={styles.loginButtonText}>
                  {isLoading ? "Kayıt olunuyor..." : "Kayıt Ol"}
                </Text>
              </LinearGradient>
            </TouchableOpacity>
          </ScrollView>
        </KeyboardAvoidingView>
      </View>

      <View style={[
        styles.logoContainer,
        {
          paddingBottom: Platform.select({
            ios: Math.max(insets.bottom + 50, 60),
            android: Math.max(insets.bottom + 40, 50),
            default: 50,
          }),
        }
      ]}>
        <Image
          source={require("@/assets/images/icons/small-logo.png")}
          style={styles.formBackgroundImage}
        />
      </View>

      <Toast
        visible={showToast}
        message={toastMessage}
        type={toastType}
        onHide={() => setShowToast(false)}
      />
      <TermsModal
        visible={showTerms}
        title={termsContent.title}
        content={termsContent.content}
        onAccept={handleAcceptTerms}
        onReject={handleRejectTerms}
      />
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  logoContainer: {
    position: "absolute",
    width: "100%",
    alignItems: "center",
    bottom: 0,
    zIndex: 10,
  },
  formBackgroundImage: {
    width: 80,
    height: 80,
  },
  container: {
    ...FLEX.fill,
  },
  safeArea: {
    width: "100%",
    zIndex: 2,
  },
  backButton: {
    padding: 16,
    position: "absolute",
    zIndex: 10,
    top: 40,
  },
  topSection: {
    flex: 0.4,
    width: "100%",
  },
  topContent: {
    flex: 1,
    alignItems: "center",
    justifyContent: "space-between",
    paddingTop: 20,
    paddingBottom: 20,
  },
  imageContainer: {
    alignItems: "center",
    justifyContent: "center",
    marginTop: 30,
  },
  image: {
    width: 153,
    height: 96,
    resizeMode: "cover",
    marginBottom: 20,
  },
  title: {
    ...title["M/Bold"],
    color: "#ffffff",
    marginBottom: 34,
    textAlign: "center",
    paddingHorizontal: 20,
  },
  keyboardContainer: {
    flex: 1,
  },
  formSection: {
    flex: 1,
    width: "100%",
    
    paddingHorizontal: 20,
    marginTop: 20,
    paddingTop: 34,
    paddingBottom: 30,
    backgroundColor: "#fff",
    borderTopLeftRadius: 30,
    borderTopRightRadius: 30,
    borderBottomLeftRadius: 30,
    borderBottomRightRadius: 30,
    marginBottom: Platform.select({
      ios: 120,
      android: 110,
      default: 110,
    }),
  },
  scrollContainer: {
    flex: 1,
  },
  formContainer: {
    paddingHorizontal: 24,
    paddingBottom: 40,
  },
  inputsContainer: {
    width: "100%",
    gap: 16,
  },
  topLoginContainer: {
    flexDirection: "column",
    alignItems: "center",
    marginBottom: 20,
  },
  topLoginHelperText: {
    ...paragraph["S/Regular"],
    color: COLOR_SCALES.gray[50],
  },
  topLoginLink: {
    ...paragraph["S/Bold"],
    color: "#FF0025",
    marginTop: 4,
    textDecorationLine: "underline",
  },
  loginButton: {
    alignSelf: "center",
    marginTop: 40,
    marginBottom: 20,
    borderRadius: 32,
    overflow: "hidden",
    width: "100%",
    borderBottomWidth: 3,
    borderTopWidth: 1,
    borderLeftWidth: 3,
    borderRightWidth: 3,
    borderColor: "#52000C",
  },
  loginButtonGradient: {
    paddingVertical: 15,
    paddingHorizontal: 40,
    alignItems: "center",
    justifyContent: "center",
  },
  loginButtonText: {
    ...paragraph["M/Bold"],
    color: "#fff",
    textAlign: "center",
  },
  passwordStrengthContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginTop: 4,
  },
  passwordStrengthText: {
    ...paragraph["S/Regular"],
    color: "#4f4f4f",
    fontSize: 12,
  },
  passwordStrengthLevel: {
    ...paragraph["S/Bold"],
    color: "#4f4f4f",
    fontSize: 12,
  },
  passwordTipsContainer: {
    marginTop: 8,
  },
  passwordTipsTitle: {
    ...paragraph["S/Medium"],
    color: "#A72942",
    marginBottom: 8,
    fontSize: 15,
  },
  passwordTipRow: {
    flexDirection: "row",
    marginBottom: 4,
  },
  passwordTipBullet: {
    ...paragraph["S/Regular"],
    color: "#DB0020",
    marginRight: 8,
    fontSize: 12,
  },
  passwordTipText: {
    ...paragraph["S/Regular"],
    color: "#4f4f4f",
    fontSize: 12,
  },
  termsContainer: {
    marginTop: 6,
    paddingBottom: 0,
    flexDirection: "row",
    alignItems: "flex-start",
    justifyContent: "flex-start",
  },
  termsText: {
    ...paragraph["S/Regular"],
    color: "#4f4f4f",
    fontSize: 13,
    marginTop: 12,
  },
  termsLink: {
    ...paragraph["S/Medium"],
    color: "#DB0020",
    textDecorationLine: "underline",
    fontSize: 13,
  },
});