import { useAuth } from '@/components/AuthProvider';
import AuthHeader from '@/components/ui/AuthHeader';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useMutation } from '@tanstack/react-query';
import * as Haptics from 'expo-haptics';
import { LinearGradient } from 'expo-linear-gradient';
import { Redirect, useRouter } from 'expo-router';
import { ArrowLeft, MessageCircle, ShieldCheck } from 'lucide-react-native';
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
  Alert,
  Linking,
  Platform,
  StyleSheet,
  Text,
  ToastAndroid,
  TouchableOpacity,
  View,
} from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import { SafeAreaView } from 'react-native-safe-area-context';
import { auth_api } from '../login/lib/api';
import ConfirmForm from './ConfirmForm';

const RegisterConfirmScreen = () => {
  const router = useRouter();
  const [phoneOTP, setPhone] = useState<string | null>('');
  const [error, setError] = useState<string>('');
  const { login } = useAuth();

  const [resendTimer, setResendTimer] = useState<number>(60);

  const { t } = useTranslation();

  useEffect(() => {
    const loadPhone = async () => {
      try {
        const storedPhone = await AsyncStorage.getItem('phone');
        if (storedPhone) setPhone(storedPhone);
        else setPhone(null);
      } catch (error) {
        console.log('AsyncStorage error:', error);
      }
    };
    loadPhone();
  }, []);

  useEffect(() => {
    if (resendTimer === 0) return;
    const timer = setTimeout(() => {
      setResendTimer((prev) => prev - 1);
    }, 1000);
    return () => clearTimeout(timer);
  }, [resendTimer]);

  const { mutate, isPending } = useMutation({
    mutationFn: (body: { code: string; phone: string }) => auth_api.register_confirm(body),
    onSuccess: async (res) => {
      await AsyncStorage.removeItem('phone');
      await AsyncStorage.setItem('access_token', res.data.data.token.access);
      await AsyncStorage.setItem('refresh_token', res.data.data.token.refresh);
      await login(res.data.data.token.access);
      router.replace('/(dashboard)');
    },
    onError: (err: any) => {
      const errorMessage = err?.response?.data?.data?.detail || t("Kod noto'g'ri kiritildi");
      Alert.alert(t('Xatolik yuz berdi'), errorMessage);
      setError(errorMessage);
    },
  });

  const resendMutation = useMutation({
    mutationFn: async (body: { phone: string }) => auth_api.register_resend(body),
    onSuccess: () => {
      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
      setResendTimer(60);
      if (Platform.OS === 'android') {
        ToastAndroid.show(t('Kod qayta yuborildi'), ToastAndroid.SHORT);
      }
    },
    onError: () => {
      Alert.alert(t('Xatolik yuz berdi'), t('Kodni qayta yuborishda xatolik yuz berdi'));
    },
  });

  const openBotLink = () => {
    const linkApp = `tg://resolve?domain=infotargetbot&start=register_${phoneOTP}`;
    Linking.openURL(linkApp).catch(() => {
      const webLink = `https://t.me/infotargetbot?start=register_${phoneOTP}`;
      Linking.openURL(webLink);
    });
  };

  if (phoneOTP === null) {
    return <Redirect href={'/'} />;
  }

  return (
    <View style={styles.container}>
      <LinearGradient
        colors={['#0f172a', '#1e293b', '#334155']}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 1 }}
        style={StyleSheet.absoluteFill}
      />

      <View style={styles.decorCircle1} />
      <View style={styles.decorCircle2} />
      <AuthHeader />
      <SafeAreaView style={{ flex: 1 }}>
        <KeyboardAwareScrollView
          contentContainerStyle={styles.scrollContent}
          showsVerticalScrollIndicator={false}
          keyboardShouldPersistTaps="handled"
        >
          <View style={styles.header}>
            <View style={styles.iconContainer}>
              <LinearGradient colors={['#3b82f6', '#2563eb']} style={styles.iconGradient}>
                <ShieldCheck size={32} color="#ffffff" strokeWidth={2.2} />
              </LinearGradient>
            </View>

            <Text style={styles.title}>{t('Kodni tasdiqlash')}</Text>
            <Text style={styles.subtitle}>
              {t("Tasdiqlash kodi sizning Telegram botingizga yuboriladi. Botni ko'rish")}
            </Text>

            <View style={styles.phoneBadge}>
              <Text style={styles.phoneText}>+998 {phoneOTP}</Text>
            </View>

            {/* Telegram Button */}
            <TouchableOpacity
              style={styles.telegramBanner}
              onPress={openBotLink}
              activeOpacity={0.8}
            >
              <LinearGradient
                colors={['#0088cc', '#00a2ed']}
                style={styles.telegramGradient}
                start={{ x: 0, y: 0 }}
                end={{ x: 1, y: 0 }}
              >
                <View style={styles.botIconCircle}>
                  <MessageCircle size={20} color="#0088cc" fill="#fff" />
                </View>
                <View style={{ flex: 1 }}>
                  <Text style={styles.telegramTitle}>{t('Botni ochish')}</Text>
                  <Text style={styles.telegramSub}>
                    {t('Telegram botni ochish uchun tugmani bosing va kodni oling')}
                  </Text>
                </View>
                <ArrowLeft size={20} color="#fff" style={{ transform: [{ rotate: '180deg' }] }} />
              </LinearGradient>
            </TouchableOpacity>
          </View>

          <View style={styles.card}>
            <ConfirmForm
              onSubmit={(otp) => mutate({ code: otp, phone: `998${phoneOTP}` || '' })}
              isLoading={isPending}
              error={error}
              onResendPress={() => resendMutation.mutate({ phone: `998${phoneOTP}` || '' })}
              resendTimer={resendTimer}
            />
          </View>

          {/* <View style={styles.infoBox}>
            <Text style={styles.infoText}>
              <Text style={{ fontWeight: '700' }}>Eslatma:</Text> Kod SMS orqali kelmaydi. Agar
              botni ishga tushirmagan bo'lsangiz, yuqoridagi tugmani bosing.
            </Text>
          </View> */}
        </KeyboardAwareScrollView>
      </SafeAreaView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#0f172a' },
  scrollContent: {
    paddingHorizontal: 24,
    paddingBottom: 40,
    flexGrow: 1,
    justifyContent: 'center',
  },
  languageHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: 24,
    paddingVertical: 12,
    zIndex: 1000,
  },
  backButton: {
    width: 44,
    height: 44,
    backgroundColor: 'rgba(255, 255, 255, 0.1)',
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1,
    borderColor: 'rgba(255, 255, 255, 0.15)',
  },
  languageButton: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    backgroundColor: 'rgba(255, 255, 255, 0.1)',
    paddingHorizontal: 16,
    paddingVertical: 10,
    borderRadius: 12,
    borderWidth: 1,
    borderColor: 'rgba(255, 255, 255, 0.15)',
  },
  languageText: { fontSize: 14, fontWeight: '600', color: '#94a3b8' },
  header: { alignItems: 'center', marginBottom: 24 },
  iconContainer: { marginBottom: 20 },
  iconGradient: {
    width: 72,
    height: 72,
    borderRadius: 22,
    alignItems: 'center',
    justifyContent: 'center',
    elevation: 8,
    shadowColor: '#3b82f6',
    shadowOpacity: 0.4,
    shadowRadius: 12,
  },
  title: { fontSize: 28, fontWeight: '800', color: '#ffffff', marginBottom: 8 },
  subtitle: {
    fontSize: 15,
    color: '#94a3b8',
    textAlign: 'center',
    lineHeight: 22,
    paddingHorizontal: 20,
  },
  highlightText: { color: '#38bdf8', fontWeight: '700' },
  phoneBadge: {
    marginTop: 16,
    backgroundColor: 'rgba(59, 130, 246, 0.1)',
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 12,
    borderWidth: 1,
    borderColor: 'rgba(59, 130, 246, 0.2)',
  },
  phoneText: { color: '#60a5fa', fontWeight: '700', fontSize: 16 },
  telegramBanner: {
    marginTop: 24,
    width: '100%',
    borderRadius: 18,
    overflow: 'hidden',
    elevation: 6,
    shadowColor: '#0088cc',
    shadowOpacity: 0.3,
    shadowRadius: 10,
  },
  telegramGradient: { flexDirection: 'row', alignItems: 'center', padding: 14, gap: 12 },
  botIconCircle: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  telegramTitle: { color: '#ffffff', fontSize: 16, fontWeight: '700' },
  telegramSub: { color: 'rgba(255, 255, 255, 0.8)', fontSize: 12 },
  card: {
    backgroundColor: '#ffffff',
    borderRadius: 28,
    padding: 24,
    elevation: 10,
    shadowColor: '#000',
    shadowOpacity: 0.2,
    shadowRadius: 15,
  },
  infoBox: {
    marginTop: 20,
    padding: 16,
    backgroundColor: 'rgba(245, 158, 11, 0.08)',
    borderRadius: 16,
    borderWidth: 1,
    borderColor: 'rgba(245, 158, 11, 0.2)',
  },
  infoText: { fontSize: 13, color: '#fbbf24', textAlign: 'center', lineHeight: 20 },
  dropdown: {
    position: 'absolute',
    top: 55,
    right: 0,
    backgroundColor: '#fff',
    borderRadius: 16,
    padding: 8,
    minWidth: 170,
    elevation: 10,
    zIndex: 2000,
  },
  dropdownOption: { padding: 12, borderRadius: 10 },
  dropdownOptionActive: { backgroundColor: '#eff6ff' },
  dropdownOptionText: { fontSize: 14, color: '#475569', fontWeight: '600' },
  dropdownOptionTextActive: { color: '#3b82f6' },
  decorCircle1: {
    position: 'absolute',
    top: -100,
    right: -80,
    width: 300,
    height: 300,
    borderRadius: 150,
    backgroundColor: 'rgba(59, 130, 246, 0.1)',
  },
  decorCircle2: {
    position: 'absolute',
    bottom: -50,
    left: -100,
    width: 250,
    height: 250,
    borderRadius: 125,
    backgroundColor: 'rgba(59, 130, 246, 0.05)',
  },
});

export default RegisterConfirmScreen;