import React, { useEffect, useState } from 'react';
import { Button, Form, Input, Card, Typography, message, Space, Checkbox } from 'antd';
import {
  LockOutlined, ThunderboltOutlined,
  PlayCircleOutlined, BulbOutlined, HistoryOutlined,
  MobileOutlined, SafetyOutlined,
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { useAuthStore } from '../store/useAuthStore';
import { sendSms,phonelogin, getSiteInfo, register  } from '../api';

const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8000/api';

const LoginPage: React.FC = () => {
  const { checkAuth } = useAuthStore();
  const [loading, setLoading] = useState(false);
  const [mode, setMode] = useState<'password' | 'phone' | 'register'>('password');
  const [tab, setTab] = useState<'password' | 'phone'>('password');
  const [countdown, setCountdown] = useState(0);
  const [regCountdown, setRegCountdown] = useState(0);
  const [agreed, setAgreed] = useState(false);
  const [showSliderVerify, setShowSliderVerify] = useState(false);
  const [sliderVerified, setSliderVerified] = useState(false);
  const [loginSliderVerified, setLoginSliderVerified] = useState(false);
  const [sliderKey, setSliderKey] = useState(0);
  const [showResend, setShowResend] = useState(false);
  const [loginShowResend, setLoginShowResend] = useState(false);
  const [siteName, setSiteName] = useState('VideoGen.AI');
  const [siteLogo, setSiteLogo] = useState('');
  const [agreementUrl, setAgreementUrl] = useState('');
  const [policyUrl, setPolicyUrl] = useState('');
  const navigate = useNavigate();
  const { login } = useAuthStore();
  const [pwdForm] = Form.useForm();
  const [phoneForm] = Form.useForm();
  const [regForm] = Form.useForm();

  useEffect(() => {
    getSiteInfo().then(info => {
      setSiteName(info.siteName);
      setSiteLogo(info.siteLogo);
      setAgreementUrl(info.userAgreementUrl);
      setPolicyUrl(info.privacyPolicyUrl);
    }).catch(() => {});
  }, []);

  const checkAgreed = (): boolean => {
    if (!agreed) {
      message.warning('请先阅读并同意用户协议和隐私政策');
      return false;
    }
    return true;
  };

  const handlePasswordLogin = async () => {
    if (!checkAgreed()) return;
    try {
      const values = await pwdForm.validateFields();
      // setLoading(true);
      await login(values.phone, values.password, undefined, values.rememberMe);
      message.success('登录成功，欢迎回来');
      await checkAuth();
      navigate('/projects');
    } catch (error: any) {
      const errorMsg = error?.response?.data?.detail || error?.response?.data?.message || error?.message || '登录失败';
      message.error(errorMsg);
    } finally {
      // setLoading(false);
    }
  };

  const handlePhoneLogin = async () => {
    if (!checkAgreed()) return;
    try {
      const values = phoneForm.getFieldsValue();
      if (!values.phone || !values.code) {
        message.error('请填写手机号和验证码');
        return;
      }
      setLoading(true);
      await phonelogin(values.phone, values.code);
      message.success('登录成功，欢迎回来');
      await checkAuth();
      navigate('/projects');
    } catch (error: any) {
      const errorMsg = error?.response?.data?.detail || error?.response?.data?.message || error?.message || '登录失败';
      message.error(errorMsg);
    } finally {
      setLoading(false);
    }
  };

  const handleRegister = async () => {
    if (!checkAgreed()) return;
    try {
      const values = await regForm.validateFields();
      setLoading(true);
      const user = await register(values.phone, values.regCode, values.password);
      message.success('注册成功');
      await checkAuth();
      navigate('/projects');
    } catch (error: any) {
      const errorMsg = error?.response?.data?.detail || error?.response?.data?.message || error?.message || '注册失败';
      message.error(errorMsg);
    } finally {
      setLoading(false);
    }
  };

  const startCountdown = (setter: React.Dispatch<React.SetStateAction<number>>, isReg?: boolean) => {
    setter(60);
    const timer = setInterval(() => {
      setter((c) => { 
        if (c <= 1) { 
          clearInterval(timer); 
          setShowSliderVerify(false);
          // 倒计时结束后，设置重新发送状态
          if (isReg) {
            setShowResend(true);
          } else {
            setLoginShowResend(true);
          }
          return 0; 
        } 
        return c - 1; 
      });
    }, 1000);
  };

  // 登录模式倒计时结束后重置验证状态
  useEffect(() => {
    if (countdown === 0 && mode === 'phone') {
      setLoginSliderVerified(false);
    }
  }, [countdown, mode]);

  const handleSendCode = async (phone: string, isReg?: boolean) => {
    try {
      if (!phone || !/^1\d{10}$/.test(phone)) {
        message.error('请输入正确的手机号');
        return;
      }
      
      // 注册时需要滑动验证
      if (isReg) {
        setShowSliderVerify(true);
        setSliderVerified(false);
        return;
      }
      
      // 登录时也需要滑动验证
      if (!loginSliderVerified) {
        setShowSliderVerify(true);
        setLoginSliderVerified(false);
        return;
      }

      let mode2 = '';
      if (mode === 'register') {
        mode2 = 'register';
      } else {
        mode2 = 'login';
      }
      
      await sendSms(phone,mode2);
      startCountdown(isReg ? setRegCountdown : setCountdown);
      message.success('验证码已发送');
    } catch (error: any) {
      const errorMsg = error?.response?.data?.detail || error?.response?.data?.message || error?.message || '登录失败';
      message.error(errorMsg);
      // 发送失败，重置验证状态、倒计时和滑块组件
      if (mode === 'register') {
        setSliderVerified(false);
        setRegCountdown(0);
      } else {
        setLoginSliderVerified(false);
        setCountdown(0);
      }
      // 通过更新 key 强制刷新滑块组件
      setSliderKey(prev => prev + 1);
    }
  };
  
  // 滑动验证成功后的回调
  const handleSliderSuccess = async (isResend = false) => {
    // 根据当前模式获取手机号
    const phone = mode === 'register' ? regForm.getFieldValue('phone') : phoneForm.getFieldValue('phone');
    try {


      let mode2 = '';
      if (mode === 'register') {
        mode2 = 'register';
      } else {
        mode2 = 'login';
      }
      
      await sendSms(phone,mode2);
      // 设置对应的验证状态
      if (mode === 'register') {
        setSliderVerified(true);
        startCountdown(setRegCountdown, true);
      } else {
        setLoginSliderVerified(true);
        startCountdown(setCountdown, false);
      }
      message.success('验证码已发送');
    } catch (error: any) {
      const errorMsg = error?.response?.data?.detail || error?.response?.data?.message || error?.message || '登录失败';
      message.error(errorMsg);
      // 发送失败，重置验证状态、倒计时和滑块组件
      if (mode === 'register') {
        setSliderVerified(false);
        setRegCountdown(0);
        setShowResend(true);
      } else {
        setLoginSliderVerified(false);
        setCountdown(0);
        setLoginShowResend(true);
      }
      // 通过更新 key 强制刷新滑块组件
      setSliderKey(prev => prev + 1);
    }
  };

  const switchTab = (t: 'password' | 'phone') => {
    setTab(t);
    setMode(t);
    setCountdown(0);
    setRegCountdown(0);
    setLoginSliderVerified(false);
    setSliderVerified(false);
    setShowSliderVerify(false);
    setShowResend(false);
    setLoginShowResend(false);
    // 刷新滑动验证组件
    setSliderKey(prev => prev + 1);
    // 清空当前模式相关的表单
    if (t === 'password') {
      pwdForm.resetFields();
    } else {
      phoneForm.resetFields();
    }
  };

  const features = [
    { icon: <BulbOutlined />, title: 'AI 智能优化', desc: '输入原始提示词，AI 自动为您生成专业级视频描述' },
    { icon: <PlayCircleOutlined />, title: '一键生成视频', desc: '支持多种画质与时长选择，最快 30 秒出片' },
    { icon: <HistoryOutlined />, title: '项目维度管理', desc: '按项目组织视频，支持多种行业模板' },
  ];

  const inputStyle: React.CSSProperties = {
    background: '#fff',
    border: '1.5px solid #e2e8f0',
    color: '#1e293b',
    height: 48,
    borderRadius: 10,
    fontSize: 14,
  };

  const openPdf = (url: string) => {
    if (url) window.open(`${API_BASE.replace(/\/api$/, '')}${url}`, '_blank');
  };

  return (
    <div style={{
      minHeight: '100vh',
      display: 'flex',
      background: 'linear-gradient(135deg, #f0f4ff 0%, #e8ecf8 40%, #f0f0ff 70%, #f8f9ff 100%)',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute',
        width: 500, height: 500, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(99,102,241,0.08) 0%, transparent 70%)',
        top: -150, right: -100, filter: 'blur(40px)',
      }} />
      <div style={{
        position: 'absolute',
        width: 400, height: 400, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(139,92,246,0.06) 0%, transparent 70%)',
        bottom: -100, left: -80, filter: 'blur(50px)',
      }} />

      {/* Left side - features */}
      <div style={{
        flex: 1, display: 'flex', flexDirection: 'column',
        justifyContent: 'center', padding: '0 80px', zIndex: 1,
      }}>
        <Space direction="vertical" size={36}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 20 }}>
              {siteLogo ? (
                <img src={siteLogo} alt="logo" style={{ width: 52, height: 52, borderRadius: 14, objectFit: 'contain' }} />
              ) : (
                <div style={{
                  width: 52, height: 52, borderRadius: 14,
                  background: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  boxShadow: '0 8px 24px rgba(99,102,241,0.25)',
                }}>
                  <ThunderboltOutlined style={{ fontSize: 26, color: '#fff' }} />
                </div>
              )}
              <span style={{ color: '#1e293b', fontSize: 28, fontWeight: 800, letterSpacing: -0.5 }}>
                {siteName}
              </span>
            </div>
            <Typography.Paragraph style={{ color: '#64748b', fontSize: 17, maxWidth: 480, lineHeight: 1.8 }}>
              专业的 AI 视频生成平台，通过智能提示词优化，<br />让您的创意快速转化为精美视频
            </Typography.Paragraph>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {features.map((f, i) => (
              <div key={i} style={{
                display: 'flex', gap: 16, alignItems: 'flex-start',
                padding: '18px 22px', borderRadius: 14,
                background: 'rgba(255,255,255,0.7)',
                border: '1px solid rgba(99,102,241,0.1)',
                backdropFilter: 'blur(10px)',
              }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 12, flexShrink: 0,
                  background: 'linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.15))',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: '#6366f1', fontSize: 20,
                }}>{f.icon}</div>
                <div>
                  <Typography.Text style={{ color: '#1e293b', fontSize: 15, fontWeight: 600, display: 'block', marginBottom: 4 }}>{f.title}</Typography.Text>
                  <Typography.Text style={{ color: '#64748b', fontSize: 13, lineHeight: 1.6 }}>{f.desc}</Typography.Text>
                </div>
              </div>
            ))}
          </div>
        </Space>
      </div>

      {/* Right side - login/register form */}
      <div style={{
        flex: 1, display: 'flex', alignItems: 'center',
        justifyContent: 'center', zIndex: 1, padding: '40px 24px',
      }}>
        <Card style={{
          width: 440, maxWidth: '100%', borderRadius: 20,
          boxShadow: '0 20px 60px rgba(0,0,0,0.08)',
          border: '1px solid #e2e8f0', background: '#fff',
        }} styles={{ body: { padding: '36px 28px' } }}>
          <Typography.Title level={3} style={{ textAlign: 'center', marginBottom: 6, color: '#1e293b', fontWeight: 700 }}>
            {mode === 'register' ? '创建账号' : '欢迎回来'}
          </Typography.Title>
          <Typography.Text style={{ display: 'block', textAlign: 'center', marginBottom: 28, color: '#94a3b8', fontSize: 14 }}>
            {mode === 'register' ? '注册新账号，开始创作视频' : '登录您的账号，开始创作视频'}
          </Typography.Text>

          {/* Tab switcher - only for login modes */}
          {mode !== 'register' && (
            <div style={{
              display: 'flex', gap: 0, marginBottom: 24,
              background: '#f1f5f9', borderRadius: 10, padding: 4,
              border: '1px solid #e2e8f0',
            }}>
              {(['password', 'phone'] as const).map((t) => (
                <div key={t} onClick={() => switchTab(t)} style={{
                  flex: 1, textAlign: 'center', padding: '10px 0',
                  borderRadius: 8, cursor: 'pointer', fontSize: 14,
                  fontWeight: tab === t ? 600 : 400,
                  color: tab === t ? '#6366f1' : '#64748b',
                  background: tab === t ? '#fff' : 'transparent',
                  border: tab === t ? '1px solid rgba(99,102,241,0.2)' : '1px solid transparent',
                  boxShadow: tab === t ? '0 2px 8px rgba(99,102,241,0.1)' : 'none',
                  transition: 'all 0.3s ease',
                }}>
                  {t === 'password' ? '密码登录' : '验证码登录'}
                </div>
              ))}
            </div>
          )}

          {/* Password Login */}
          {mode === 'password' && (
            <Form form={pwdForm} size="large" layout="vertical" onFinish={handlePasswordLogin}>
              <Form.Item name="phone" rules={[{ required: true, message: '请输入手机号' }, { pattern: /^1\d{10}$/, message: '请输入正确的手机号' }]}>
                <Input prefix={<MobileOutlined style={{ color: '#94a3b8', marginRight: 8 }} />} placeholder="请输入手机号" style={inputStyle} />
              </Form.Item>
              <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
                <Input.Password prefix={<LockOutlined style={{ color: '#94a3b8', marginRight: 8 }} />} placeholder="请输入密码" style={inputStyle} />
              </Form.Item>
              <Form.Item name="rememberMe" valuePropName="checked" style={{ marginBottom: 12 }}>
                <Checkbox>记住我的登录状态</Checkbox>
              </Form.Item>
              <Form.Item style={{ marginBottom: 12 }}>
                <Button type="primary" htmlType="submit" loading={loading} block style={{
                  height: 48, borderRadius: 10, fontSize: 16, fontWeight: 600,
                  background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
                  border: 'none', boxShadow: '0 8px 24px rgba(99,102,241,0.25)',
                }}>登 录</Button>
              </Form.Item>
            </Form>
          )}

          {/* Phone Login */}
          {mode === 'phone' && (
            <Form form={phoneForm} size="large" layout="vertical">
              <Form.Item name="phone" rules={[{ required: true, message: '请输入手机号' }, { pattern: /^1\d{10}$/, message: '请输入正确的手机号' }]}>
                <Input prefix={<MobileOutlined style={{ color: '#94a3b8', marginRight: 8 }} />} placeholder="请输入手机号" maxLength={11} style={inputStyle} />
              </Form.Item>
              <Form.Item name="code" rules={[{ required: true, message: '请输入验证码' }]}>
                <Space.Compact style={{ width: '100%' }}>
                  <Input 
                    prefix={<SafetyOutlined style={{ color: '#94a3b8', marginRight: 8 }} />} 
                    placeholder="请输入验证码" 
                    maxLength={6}
                    disabled={!loginSliderVerified}
                    style={{ ...inputStyle, borderRadius: '10px 0 0 10px', flex: 1 }} />
                  <Button disabled={countdown > 0}
                    onClick={() => {
                      if (loginShowResend) {
                        // 重新发送时，只刷新滑块，不启动倒计时
                        setLoginSliderVerified(false);
                        setShowSliderVerify(true);
                        setSliderKey(prev => prev + 1);
                      } else {
                        // 首次点击，调用发送验证码，等待滑块验证
                        handleSendCode(phoneForm.getFieldValue('phone'));
                      }
                    }}
                    style={{
                      height: 48, borderRadius: '0 10px 10px 0',
                      background: countdown > 0 ? '#f1f5f9' : (loginSliderVerified ? '#f1f5f9' : 'rgba(99,102,241,0.1)'),
                      border: '1.5px solid #e2e8f0', borderLeft: 'none',
                      color: countdown > 0 ? '#94a3b8' : '#6366f1',
                      fontWeight: 600, minWidth: 100,
                    }}>
                    {countdown > 0 ? `${countdown}s` : (loginShowResend ? '重新发送' : '获取验证码')}
                  </Button>
                </Space.Compact>
              </Form.Item>
              {/* 滑动验证 - 获取验证码后显示 */}
              {showSliderVerify && (
                <Form.Item style={{ marginBottom: 12 }} key={sliderKey}>
                  <SliderVerify 
                    onSuccess={handleSliderSuccess}
                    isVerified={loginSliderVerified}
                  />
                </Form.Item>
              )}
              
              <Form.Item style={{ marginBottom: 12 }}>
                <Button type="primary" onClick={handlePhoneLogin} loading={loading} block style={{
                  height: 48, borderRadius: 10, fontSize: 16, fontWeight: 600,
                  background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
                  border: 'none', boxShadow: '0 8px 24px rgba(99,102,241,0.25)',
                }}>登 录</Button>
              </Form.Item>
            </Form>
          )}

          {/* Register */}
          {mode === 'register' && (
            <Form form={regForm} size="large" layout="vertical">
              <Form.Item name="phone" rules={[{ required: true, message: '请输入手机号' }, { pattern: /^1\d{10}$/, message: '请输入正确的手机号' }]}>
                <Input prefix={<MobileOutlined style={{ color: '#94a3b8', marginRight: 8 }} />} placeholder="请输入手机号" maxLength={11} style={inputStyle} />
              </Form.Item>
              <Form.Item name="regCode" rules={[{ required: true, message: '请输入验证码' }]}>
                <Space.Compact style={{ width: '100%' }}>
                  <Input 
                    prefix={<SafetyOutlined style={{ color: '#94a3b8', marginRight: 8 }} />} 
                    placeholder="请输入验证码" 
                    maxLength={6}
                    disabled={!sliderVerified}
                    style={{ ...inputStyle, borderRadius: '10px 0 0 10px', flex: 1 }} />
                  <Button disabled={regCountdown > 0}
                    onClick={() => {
                      if (showResend) {
                        // 重新发送时，只刷新滑块，不启动倒计时
                        setSliderVerified(false);
                        setShowSliderVerify(true);
                        setSliderKey(prev => prev + 1);
                      } else {
                        // 首次点击，调用发送验证码，等待滑块验证
                        handleSendCode(regForm.getFieldValue('phone'), true);
                      }
                    }}
                    style={{
                      height: 48, borderRadius: '0 10px 10px 0',
                      background: regCountdown > 0 ? '#f1f5f9' : (sliderVerified ? '#f1f5f9' : 'rgba(99,102,241,0.1)'),
                      border: '1.5px solid #e2e8f0', borderLeft: 'none',
                      color: regCountdown > 0 ? '#94a3b8' : '#6366f1',
                      fontWeight: 600, minWidth: 100,
                    }}>
                    {regCountdown > 0 ? `${regCountdown}s` : (showResend ? '重新发送' : '获取验证码')}
                  </Button>
                </Space.Compact>
              </Form.Item>
              {/* 滑动验证 - 获取验证码后显示 */}
              {showSliderVerify && (
                <Form.Item style={{ marginBottom: 12 }} key={sliderKey}>
                  <SliderVerify 
                    onSuccess={handleSliderSuccess}
                    isVerified={sliderVerified}
                  />
                </Form.Item>
              )}
              <Form.Item name="password" rules={[{ required: true, message: '请设置密码' }, { min: 6, message: '密码至少6位' }]}>
                <Input.Password prefix={<LockOutlined style={{ color: '#94a3b8', marginRight: 8 }} />} placeholder="请设置密码（至少6位）" style={inputStyle} />
              </Form.Item>
                    
              
              
              <Form.Item style={{ marginBottom: 12 }}>
                <Button type="primary" onClick={handleRegister} loading={loading} block style={{
                  height: 48, borderRadius: 10, fontSize: 16, fontWeight: 600,
                  background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
                  border: 'none', boxShadow: '0 8px 24px rgba(99,102,241,0.25)',
                }}>注 册</Button>
              </Form.Item>
            </Form>
          )}

          {/* Agreement checkbox */}
          <div style={{ marginBottom: 16 }}>
            <Checkbox checked={agreed} onChange={e => setAgreed(e.target.checked)}>
              <span style={{ fontSize: 13, color: '#64748b' }}>
                我已阅读并同意
                <span
                  onClick={e => { e.stopPropagation(); openPdf(agreementUrl); }}
                  style={{ color: '#6366f1', cursor: 'pointer' }}
                >《用户协议》</span>
                和
                <span
                  onClick={e => { e.stopPropagation(); openPdf(policyUrl); }}
                  style={{ color: '#6366f1', cursor: 'pointer' }}
                >《隐私政策》</span>
              </span>
            </Checkbox>
          </div>

          {/* Bottom left: switch between login and register */}
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            {mode === 'register' ? (
              <Typography.Text
                style={{ fontSize: 13, color: '#6366f1', cursor: 'pointer' }}
                onClick={() => { 
                  setMode('password'); 
                  setTab('password'); 
                  setShowResend(false); 
                  setLoginShowResend(false);
                  setSliderVerified(false);
                  setShowSliderVerify(false);
                  setSliderKey(prev => prev + 1);
                  regForm.resetFields();
                }}
              >
                已有账号？去登录
              </Typography.Text>
            ) : (
              <Typography.Text
                style={{ fontSize: 13, color: '#6366f1', cursor: 'pointer' }}
                onClick={() => { 
                  setMode('register'); 
                  setShowResend(false); 
                  setLoginShowResend(false);
                  setSliderVerified(false);
                  setShowSliderVerify(false);
                  setSliderKey(prev => prev + 1);
                }}
              >
                没有账号？立即注册
              </Typography.Text>
            )}
          </div>
        </Card>
      </div>
    </div>
  );
};

// 滑动验证组件
const SliderVerify: React.FC<{
  onSuccess: () => void;
  isVerified: boolean;
}> = ({ onSuccess, isVerified }) => {
  const containerRef = React.useRef<HTMLDivElement>(null);
  const sliderRef = React.useRef<HTMLDivElement>(null);
  const trackRef = React.useRef<HTMLDivElement>(null);
  const positionRef = React.useRef(0);
  const successRef = React.useRef(false); // 防止重复触发成功回调
  
  const [containerWidth, setContainerWidth] = React.useState(360); // 容器宽度，自适应
  const sliderWidth = 50; // 滑块宽度
  const maxPosition = containerWidth - sliderWidth;
  
  // 监听容器尺寸变化，使其自适应父容器宽度
  React.useEffect(() => {
    const updateWidth = () => {
      if (containerRef.current) {
        const width = containerRef.current.offsetWidth;
        if (width > 0) {
          setContainerWidth(width);
        }
      }
    };
    
    updateWidth();
    
    const resizeObserver = new ResizeObserver(updateWidth);
    if (containerRef.current) {
      resizeObserver.observe(containerRef.current);
    }
    
    window.addEventListener('resize', updateWidth);
    
    return () => {
      resizeObserver.disconnect();
      window.removeEventListener('resize', updateWidth);
    };
  }, []);
  
  const updatePosition = (x: number) => {
    // 如果已经成功，不再处理
    if (successRef.current || isVerified) return;
    
    const newPosition = Math.max(0, Math.min(x, maxPosition));
    positionRef.current = newPosition;
    
    // 直接操作DOM，避免React状态更新的开销
    if (sliderRef.current) {
      sliderRef.current.style.left = `${newPosition}px`;
    }
    if (trackRef.current) {
      trackRef.current.style.width = `${newPosition + sliderWidth}px`;
    }
    
    // 验证成功
    if (newPosition >= maxPosition - 5) {
      // 设置成功标志，防止重复触发
      successRef.current = true;
      
      // 设置验证成功状态
      if (sliderRef.current) {
        sliderRef.current.style.background = '#22c55e';
        sliderRef.current.innerHTML = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`;
      }
      if (trackRef.current) {
        trackRef.current.style.width = `${containerWidth}px`;
        trackRef.current.style.background = '#dcfce7';
      }
      
      // 调用成功回调
      onSuccess();
    }
  };
  
  const handleMouseDown = (e: React.MouseEvent) => {
    e.preventDefault();
    if (successRef.current || isVerified) return;
    
    const container = containerRef.current;
    if (!container) return;
    
    const rect = container.getBoundingClientRect();
    
    const handleMouseMove = (moveEvent: MouseEvent) => {
      const x = moveEvent.clientX - rect.left - sliderWidth / 2;
      updatePosition(x);
    };
    
    const handleMouseUp = () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
      
      // 如果没有滑到终点，重置位置
      if (!successRef.current && positionRef.current < maxPosition - 5) {
        positionRef.current = 0;
        if (sliderRef.current) {
          sliderRef.current.style.left = '0px';
        }
        if (trackRef.current) {
          trackRef.current.style.width = `${sliderWidth}px`;
        }
      }
    };
    
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
  };
  
  return (
    <div 
      ref={containerRef}
      onMouseDown={handleMouseDown}
      style={{
        width: '100%',
        height: 50,
        background: '#ffffff',
        borderRadius: 25,
        position: 'relative',
        overflow: 'hidden',
        border: '1px solid rgba(99, 102, 241, 0.1)',
        boxShadow: 'inset 0 2px 6px rgba(148, 163, 184, 0.15), 0 4px 12px rgba(0, 0, 0, 0.04)',
        cursor: isVerified ? 'default' : 'pointer',
        userSelect: 'none',
        touchAction: 'none',
      }}
    >
      {/* 已滑动部分背景 - 包含阴影弧度 */}
      <div 
        ref={trackRef}
        style={{
          position: 'absolute',
          left: -2,
          top: 0,
          bottom: 0,
          width: isVerified ? containerWidth + 4 : sliderWidth,
          background: isVerified 
            ? 'linear-gradient(90deg, #dcfce7 0%, #bbf7d0 100%)' 
            : 'linear-gradient(90deg, rgba(224, 231, 255, 0.6) 0%, rgba(199, 210, 254, 0.8) 100%)',
          borderRadius: isVerified ? 0 : '0 25px 25px 0',
          boxShadow: isVerified 
            ? 'none' 
            : '4px 0 12px rgba(99, 102, 241, 0.2), 2px 0 4px rgba(99, 102, 241, 0.1)',
          transition: successRef.current ? 'all 0.3s ease' : 'none',
        }}
      />
      
      {/* 文字提示 */}
      <div 
        style={{
          position: 'absolute',
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: 14,
          fontWeight: 500,
          color: isVerified ? '#16a34a' : '#64748b',
          zIndex: 1,
          pointerEvents: 'none',
          letterSpacing: 0.5,
        }}
      >
        {isVerified ? (
          <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="20 6 9 17 4 12"></polyline>
            </svg>
            验证成功
          </span>
        ) : (
          '滑动发送'
        )}
      </div>
      
      {/* 滑块 */}
      <div
        ref={sliderRef}
        style={{
          position: 'absolute',
          left: isVerified ? maxPosition : 0,
          top: 5,
          width: sliderWidth - 10,
          height: 40,
          background: isVerified 
            ? 'linear-gradient(135deg, #22c55e 0%, #16a34a 100%)' 
            : 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
          borderRadius: '50%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          boxShadow: isVerified 
            ? '0 4px 12px rgba(34, 197, 94, 0.4), 0 0 0 4px rgba(34, 197, 94, 0.1)' 
            : '0 4px 12px rgba(99, 102, 241, 0.35), 0 0 0 4px rgba(255, 255, 255, 0.8)',
          cursor: isVerified ? 'default' : 'grab',
          transition: successRef.current ? 'all 0.3s ease' : 'none',
          userSelect: 'none',
          zIndex: 2,
        }}
      >
        {isVerified ? (
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
        ) : (
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="9 18 15 12 9 6"></polyline>
          </svg>
        )}
      </div>
    </div>
  );
};

export default LoginPage;
