import { ScrollView, StyleSheet, Text, View } from 'react-native';
import { colors } from '../../../src/theme';
import { useAgreementGate, useLogin, useOnboarding } from '../../../src/hooks';
import { useAuth } from '../../../src/context/AuthContext';
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 { gate, modalProps } = useAgreementGate();
  const { loginByCarrier, loading, error } = useLogin();
  /** 登录态写入：此前本页只跳 P3 不写 token */
  const { login: writeAuth } = useAuth();

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

  /** 一键登录：运营商返回本机号码并换取令牌，成功后才进 P3 */
  const handleLogin = async () => {
    try {
      const result = await loginByCarrier();
      writeAuth(result.token);
    } catch {
      // 失败原因由 useLogin 记录，页面下方展示
      return;
    }
    navigate('P3');
  };

  /** 掩码：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={!loading}
            loading={loading}
            onPress={() => gate(handleLogin)}
          />
        </View>

        {error ? <Text style={styles.formError}>{error.message}</Text> : null}

        <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 {...modalProps} />
    </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 },
  formError: { marginTop: 10, textAlign: 'center', fontSize: 12, color: colors.danger },
  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 },
});