import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
import Form from '../index';
import Button from '../../Button';
import { ScrollView } from 'react-native';
import BottomSafeArea from '../../BottomSafeArea';
import { Fill, Toast } from '@xrnjs/ui';
import Card from '_global/Card';
import PasswordInput from '../../PasswordInput';

type FormData = {
  password: string;
  confirmPassword: string;
  oldPassword: string;
  newPassword: string;
  loginPassword: string;
  paymentPassword: string;
};

const PasswordInputExamplesDemo: React.FC = () => {
  const form = Form.useForm<FormData>({
    defaultValues: {
      password: '',
      confirmPassword: '',
      oldPassword: '',
      newPassword: '',
      loginPassword: '',
      paymentPassword: '',
    },
  });

  const [fixedPassword, setFixedPassword] =
    React.useState<string>('External@123');

  const onSubmit = (data: FormData) => {
    console.log('Form submitted:', data);
    Toast('密码设置成功！');
  };

  const onError = (errors: Record<string, unknown>) => {
    console.log('Form errors:', errors);
  };

  return (
    <View style={styles.container}>
      <ScrollView
        style={styles.scrollContainer}
        keyboardShouldPersistTaps="handled"
      >
        <Form.FormProvider {...form}>
          {/* Form.PasswordInput 快捷用法 */}
          <Card
            title="1. Form.PasswordInput 快捷用法"
            style={styles.cardStyle}
            noSpace
          >
            <Form.PasswordInput
              name="password"
              label="登录密码"
              placeholder="请输入密码"
              message="密码长度至少8位，包含字母和数字"
              rules={{
                required: '请输入密码',
                minLength: {
                  value: 8,
                  message: '密码长度至少8位',
                },
                pattern: {
                  value: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*?&]{8,}$/,
                  message: '密码必须包含字母和数字',
                },
              }}
            />
          </Card>

          {/* Form.Item + PasswordInput 组合用法 */}
          <Card
            title="2. Form.Item + PasswordInput 组合用法"
            style={styles.cardStyle}
            noSpace
          >
            <Form.Item
              name="confirmPassword"
              label="确认密码"
              message="请再次输入密码进行确认"
              rules={{
                required: '请确认密码',
                validate: (value: string) => {
                  const password = form.getValues('password');
                  return value === password || '两次输入的密码不一致';
                },
              }}
            >
              <PasswordInput
                placeholder="请再次输入密码"
                showSecureControl
                defaultSecureTextEntry
              />
            </Form.Item>
          </Card>

          {/* 密码修改示例 */}
          <Card title="3. 密码修改示例" style={styles.cardStyle} noSpace>
            <Form.PasswordInput
              name="oldPassword"
              label="当前密码"
              placeholder="请输入当前密码"
              showSecureControl
              defaultSecureTextEntry
              rules={{
                required: '请输入当前密码',
              }}
            />

            <Form.PasswordInput
              name="newPassword"
              label="新密码"
              placeholder="请输入新密码"
              message="新密码必须包含大小写字母、数字和特殊字符"
              showSecureControl
              defaultSecureTextEntry={false}
              rules={{
                required: '请输入新密码',
                minLength: {
                  value: 8,
                  message: '新密码长度至少8位',
                },
                validate: (value: string) => {
                  const oldPassword = form.getValues('oldPassword');
                  if (value === oldPassword) {
                    return '新密码不能与当前密码相同';
                  }
                  if (
                    !/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/.test(
                      value
                    )
                  ) {
                    return '密码必须包含大小写字母、数字和特殊字符';
                  }
                  return true;
                },
              }}
            />
          </Card>

          {/* 高级配置示例 */}
          <Card title="4. 高级配置示例" style={styles.cardStyle} noSpace>
            <Form.PasswordInput
              name="loginPassword"
              label="登录密码"
              placeholder="请输入登录密码"
              message="支持自定义眼睛图标样式"
              showSecureControl
              eyeSize={20}
              eyeColor="#007AFF"
              eyeStyle={{ marginRight: 5 }}
              onChangeSecureTextEntry={(secure) => {
                console.log('密码显示状态:', secure ? '隐藏' : '显示');
              }}
              rules={{
                required: '请输入登录密码',
                validate: (value: string) => {
                  if (value.length < 6) {
                    return '登录密码至少6位';
                  }
                  if (!/\d/.test(value)) {
                    return '密码必须包含数字';
                  }
                  return true;
                },
              }}
            />

            <Form.PasswordInput
              name="paymentPassword"
              label="支付密码"
              placeholder="请输入6位数字支付密码"
              message="仅支持数字，用于支付验证"
              showSecureControl={false}
              secureTextEntry
              maxLength={6}
              keyboardType="numeric"
              rules={{
                required: '请输入支付密码',
                pattern: {
                  value: /^\d{6}$/,
                  message: '支付密码必须是6位数字',
                },
              }}
            />
          </Card>

          {/* 复杂验证示例 */}
          <Card title="5. 复杂验证示例" style={styles.cardStyle} noSpace>
            <Form.PasswordInput
              name="complexPassword"
              label="复杂密码"
              placeholder="请输入复杂密码"
              message="密码强度检测：包含大小写字母、数字、特殊字符，长度12-20位"
              showSecureControl
              defaultSecureTextEntry
              rules={{
                required: '请输入密码',
                minLength: {
                  value: 12,
                  message: '密码长度至少12位',
                },
                maxLength: {
                  value: 20,
                  message: '密码长度不能超过20位',
                },
                validate: (value: string) => {
                  const checks = [
                    { test: /[a-z]/, message: '缺少小写字母' },
                    { test: /[A-Z]/, message: '缺少大写字母' },
                    { test: /\d/, message: '缺少数字' },
                    { test: /[@$!%*?&]/, message: '缺少特殊字符(@$!%*?&)' },
                  ];

                  for (const check of checks) {
                    if (!check.test.test(value)) {
                      return check.message;
                    }
                  }

                  // 检查是否包含连续字符
                  if (/(.)\1{2,}/.test(value)) {
                    return '不能包含3个或以上连续相同字符';
                  }

                  // 检查是否包含常见弱密码模式
                  const weakPatterns = ['123', 'abc', 'password', 'qwerty'];
                  for (const pattern of weakPatterns) {
                    if (value.toLowerCase().includes(pattern)) {
                      return `不能包含常见弱密码模式: ${pattern}`;
                    }
                  }

                  return true;
                },
              }}
            />
          </Card>

          {/* 禁用状态示例 */}
          <Card title="6. 禁用状态示例" style={styles.cardStyle} noSpace>
            <Form.PasswordInput
              name="disabledPassword"
              label="禁用密码输入"
              placeholder="此输入框已禁用"
              message="演示禁用状态下的密码输入框"
              disabled
              defaultValue="disabled123"
              showSecureControl
            />
          </Card>
          <Card
            title="7. 传入 value 优先级示例"
            style={styles.cardStyle}
            noSpace
          >
            <View style={{ padding: 12 }}>
              <Text style={{ marginBottom: 8 }}>当前值：{fixedPassword}</Text>
              <Form.PasswordInput
                control={form.control}
                name="fixedPassword"
                label="登录密码（外部指定）"
                value={fixedPassword}
                showSecureControl
                onChange={(v) => setFixedPassword(v)}
              />
            </View>
          </Card>
        </Form.FormProvider>
      </ScrollView>

      <View style={styles.fixedButtonContainer}>
        <Button onPress={form.handleSubmit(onSubmit, onError)}>提交</Button>
        <View style={styles.buttonSpacer} />
        <Button fill={Fill.dashed} onPress={() => form.reset()}>
          重置
        </Button>
        <BottomSafeArea />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  scrollContainer: {
    flex: 1,
    padding: 20,
    paddingBottom: 0,
  },
  cardStyle: {
    marginBottom: 16,
  },
  fixedButtonContainer: {
    backgroundColor: '#fff',
    paddingHorizontal: 20,
    paddingTop: 16,
    paddingBottom: 30,
    borderTopWidth: 1,
    borderTopColor: '#e5e5e5',
    flexDirection: 'row',
    justifyContent: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: -2,
    },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 8,
  },
  buttonSpacer: {
    width: 20,
  },
});

export default PasswordInputExamplesDemo;