import { useState } from 'react';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
import { colors } from '../../../src/theme';
import { useOnboarding } from '../../../src/hooks';
import { ScreenShell } from '../ui/ScreenShell';
import { Illustration } from '../ui/Illustration';
import { AgreementCheckbox } from '../ui/AgreementCheckbox';
import { PrimaryButton } from '../ui/PrimaryButton';
import { AgreementModal } from '../ui/AgreementModal';

/** P2Q 一键登录确认：本机号码认证 —— 掩码手机号 + 一键登录 + 运营商服务声明 */
export function P2QuickLogin() {
  const { data, setData, navigate, back } = useOnboarding();
  const [pending, setPending] = useState<(() => void) | null>(null);

  const agreed = data.agreed;
  const phone = data.phone;

  const gate = (action: () => void) => {
    if (agreed) {
      action();
    } else {
      setPending(() => action);
    }
  };

  const accept = () => {
    setData({ agreed: true });
    const act = pending;
    setPending(null);
    act?.();
  };

  /** 掩码：150****9367；未输入时用演示号段占位 */
  const masked = phone.length === 11 ? `${phone.slice(0, 3)}****${phone.slice(7)}` : '150****9367';

  return (
    <ScreenShell showBack onBack={back}>
      <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.content}>
        <View style={styles.brandArea}>
          <Illustration name="logo" size={88} radius={22} />
        </View>

        <Text style={styles.phone}>{masked}</Text>
        <Text style={styles.subtitle}>首次验证通过即注册有职账号</Text>

        <View style={styles.btnArea}>
          <PrimaryButton label="一键登录" active onPress={() => gate(() => navigate('P3'))} />
        </View>

        <View style={styles.agree}>
          <AgreementCheckbox
            checked={agreed}
            onToggle={() => setData({ agreed: !agreed })}
            text={
              <Text style={styles.agreeText}>
                已阅读并同意
                <Text style={styles.link}>《中国移动认证服务条款》</Text>
                、
                <Text style={styles.link} onPress={() => navigate('B2')}>《有职用户协议》</Text>
                和
                <Text style={styles.link} onPress={() => navigate('B2')}>《隐私政策》</Text>
                ，允许有职统一管理本人账号信息
              </Text>
            }
          />
        </View>
      </ScrollView>

      <View style={styles.footer}>
        <View style={styles.footRow}>
          <Text style={styles.footItem}>服务热线</Text>
          <Text style={styles.footItem}>举报监督电话</Text>
          <Text style={styles.footItem}>资质证照</Text>
        </View>
        <Text style={styles.carrierNote}>认证服务由中国移动提供</Text>
      </View>

      <AgreementModal
        visible={pending !== null}
        onAccept={accept}
        onDecline={() => setPending(null)}
        onOpenAgreement={() => {
          setPending(null);
          navigate('B2');
        }}
      />
    </ScreenShell>
  );
}

const styles = StyleSheet.create({
  content: { flexGrow: 1 },
  brandArea: { alignItems: 'center', marginTop: '16%' },
  phone: {
    textAlign: 'center',
    fontSize: 30,
    fontWeight: '800',
    color: colors.textPrimary,
    marginTop: 40,
  },
  subtitle: { textAlign: 'center', fontSize: 14, color: colors.textSecondary, marginTop: 12 },
  btnArea: { marginTop: 36 },
  agree: { marginTop: 20 },
  agreeText: { fontSize: 12, color: colors.textSecondary, lineHeight: 18 },
  link: { color: colors.primary, fontWeight: '600' },
  footer: { paddingTop: 16, paddingBottom: 8 },
  footRow: { flexDirection: 'row', justifyContent: 'center', gap: 18 },
  footItem: { fontSize: 12, color: colors.textHint },
  carrierNote: { textAlign: 'center', fontSize: 12, color: colors.textHint, marginTop: 12 },
});