import { useEffect, useRef, useState } from 'react';
import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
import { colors } from '../../../src/theme';
import { useOnboarding } from '../../../src/hooks';
import { ScreenShell } from '../ui/ScreenShell';
import { PrimaryButton } from '../ui/PrimaryButton';

const RESEND_SECONDS = 60;

/** P2W 微信登录短信验证码页：×关闭 + 4格验证码 + 重新发送倒计时 + 语音/收不到短信入口 */
export function P2WechatCode() {
  const { data, navigate, back } = useOnboarding();
  const [code, setCode] = useState('');
  const [left, setLeft] = useState(RESEND_SECONDS);
  const timer = useRef<ReturnType<typeof setInterval> | null>(null);

  useEffect(() => {
    timer.current = setInterval(() => {
      setLeft((l) => {
        if (l <= 1) {
          if (timer.current) clearInterval(timer.current);
          return 0;
        }
        return l - 1;
      });
    }, 1000);
    return () => {
      if (timer.current) clearInterval(timer.current);
    };
  }, []);

  const phone = data.phone;
  /** 尾号：有真实手机号用尾4位，否则演示 9367 */
  const tail = phone.length === 11 ? phone.slice(7) : '9367';
  const canNext = code.length >= 4;

  const resend = () => {
    if (left > 0) return;
    setLeft(RESEND_SECONDS);
    setCode('');
    timer.current = setInterval(() => {
      setLeft((l) => {
        if (l <= 1) {
          if (timer.current) clearInterval(timer.current);
          return 0;
        }
        return l - 1;
      });
    }, 1000);
  };

  return (
    <ScreenShell showBack onBack={back} backIcon="close">
      <Text style={styles.h1}>输入短信验证码</Text>
      <Text style={styles.subtitle}>已向您的手机 {tail} 发送验证码</Text>

      {/* 4 格分离输入：透明输入层覆盖，格子仅做展示 */}
      <Pressable style={styles.cellsWrap}>
        <View style={styles.cellsRow}>
          {[0, 1, 2, 3].map((i) => (
            <View key={i} style={styles.cell}>
              <Text style={styles.cellText}>{code[i] ?? ''}</Text>
              <View style={[styles.cellLine, code.length === i && styles.cellLineActive]} />
            </View>
          ))}
        </View>
        <TextInput
          style={styles.hiddenInput}
          value={code}
          onChangeText={(t) => setCode(t.replace(/[^\d]/g, '').slice(0, 4))}
          keyboardType="number-pad"
          maxLength={4}
          autoFocus
        />
      </Pressable>

      <Pressable onPress={resend} hitSlop={6} disabled={left > 0}>
        <Text style={[styles.resend, left > 0 && styles.resendDisabled]}>
          {left > 0 ? `重新发送（${left}s）` : '重新发送'}
        </Text>
      </Pressable>

      <View style={styles.btnArea}>
        <PrimaryButton label="下一步" active={canNext} onPress={() => navigate('B1')} />
      </View>

      <View style={styles.helpRow}>
        <Pressable hitSlop={6}>
          <Text style={styles.helpText}>语音接听验证码</Text>
        </Pressable>
        <Pressable hitSlop={6}>
          <Text style={styles.helpText}>接收不到短信</Text>
        </Pressable>
      </View>

      <View style={styles.toastBar}>
        <Text style={styles.toastText}>短信验证码正在发送，请注意查收</Text>
      </View>
    </ScreenShell>
  );
}

const styles = StyleSheet.create({
  h1: { fontSize: 24, fontWeight: '800', color: colors.textPrimary, marginTop: 14 },
  subtitle: { fontSize: 14, color: colors.textSecondary, marginTop: 12 },
  cellsWrap: { marginTop: 34 },
  cellsRow: { flexDirection: 'row', gap: 18 },
  cell: { flex: 1, alignItems: 'center' },
  cellText: { fontSize: 26, fontWeight: '700', color: colors.textPrimary, minHeight: 36 },
  cellLine: { width: '100%', height: 2, backgroundColor: colors.border, marginTop: 8 },
  cellLineActive: { backgroundColor: colors.primary },
  hiddenInput: {
    ...StyleSheet.absoluteFill,
    opacity: 0,
  },
  resend: { textAlign: 'center', fontSize: 14, color: colors.textSecondary, marginTop: 22 },
  resendDisabled: { color: colors.textHint },
  btnArea: { marginTop: 30 },
  helpRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 22,
  },
  helpText: { fontSize: 13, color: colors.textHint },
  toastBar: {
    alignSelf: 'center',
    marginTop: 30,
    paddingHorizontal: 18,
    paddingVertical: 10,
    borderRadius: 8,
    backgroundColor: colors.borderLight,
  },
  toastText: { fontSize: 13, color: colors.textDisabled },
});