import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { LinearGradient } from 'expo-linear-gradient';
import { SafeAreaView } from 'react-native-safe-area-context';
import { colors, spacing } from '../../../src/theme';
import { useAgreementGate, useOnboarding } from '../../../src/hooks';
import { Illustration } from '../ui/Illustration';
import { AgreementCheckbox } from '../ui/AgreementCheckbox';
import { AgreementModal } from '../ui/AgreementModal';
import { PrimaryButton } from '../ui/PrimaryButton';
import { SupportFooter } from '../ui/SupportFooter';

/**
 * P1 登录主页：淡渐变顶部 + 居中 Logo + 三种登录方式。
 *
 * 2026-09-15 按产品决定摘除微信登录入口（代码与页面保留，见 微信登录接入方案.md），
 * 现为：验证码登录（主）/ 一键登录（次）/ 密码登录（弱）。
 */
export function P1Login() {
  const { data, setData, navigate } = useOnboarding();
  const { gate, modalProps } = useAgreementGate();
  const agreed = data.agreed;

  return (
    <SafeAreaView style={styles.screen} edges={['top', 'bottom']}>
      <StatusBar style="dark" />
      <LinearGradient colors={[colors.primaryLight, colors.pageBg]} style={styles.topGlow} />

      <ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false} bounces={false}>
        <View style={styles.brandArea}>
          <Illustration name="logo" size={96} radius={24} />
        </View>

        <View style={styles.flexSpacer} />

        {/* 登录方式：主通道为验证码登录，其余两种降级展示 */}
        <PrimaryButton label="验证码登录" onPress={() => gate(() => navigate('P2'))} />

        <Pressable style={styles.quickBtn} onPress={() => gate(() => navigate('P2Q'))}>
          <Text style={styles.quickText}>一键登录</Text>
        </Pressable>

        <Pressable onPress={() => gate(() => navigate('P2P'))} hitSlop={8}>
          <Text style={styles.otherLink}>密码登录</Text>
        </Pressable>

        {/* 协议勾选 */}
        <View style={styles.agree}>
          <AgreementCheckbox
            checked={agreed}
            onToggle={() => setData({ agreed: !agreed })}
            text={
              <Text style={styles.agreeText}>
                已阅读并同意
                <Text style={styles.link} onPress={() => navigate('B2')}>《轻松聘用户协议》</Text>
                和
                <Text style={styles.link} onPress={() => navigate('B2')}>《隐私政策》</Text>
                ，允许轻松聘统一登录本账号信息
              </Text>
            }
          />
        </View>

        <View style={styles.flexSpacer} />

        <View style={styles.footer}>
          <SupportFooter />
        </View>
      </ScrollView>

      <AgreementModal {...modalProps} />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, backgroundColor: colors.pageBg },
  topGlow: { position: 'absolute', top: 0, left: 0, right: 0, height: 200 },
  content: { flexGrow: 1, paddingHorizontal: 8, paddingBottom: spacing.block },
  brandArea: { alignItems: 'center', marginTop: '22%' },
  flexSpacer: { flex: 1, minHeight: 28 },
  quickBtn: {
    height: 50,
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: spacing.block,
    backgroundColor: colors.borderLight,
  },
  quickText: { fontSize: 16, fontWeight: '700', color: colors.textPrimary },
  otherLink: {
    textAlign: 'center',
    marginTop: 20,
    fontSize: 14,
    color: colors.textSecondary,
  },
  agree: { marginTop: spacing.section },
  agreeText: { fontSize: 12, color: colors.textSecondary, lineHeight: 18 },
  link: { color: colors.primary, fontWeight: '600' },
  footer: { paddingTop: 24, paddingBottom: 8 },
});