import { useState, useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { User, Lock, LogIn, AlertCircle, Loader2 } from 'lucide-react';
import StarBackground from '@/shared/components/StarBackground';
import { iamLogin, saveSession } from '@/shared/services/iamAuth';
import { useTheme } from '@/shared/context/ThemeContext';

const inputStyle = (isDark: boolean): React.CSSProperties => ({
  width: '100%',
  boxSizing: 'border-box',
  padding: '12px 14px 12px 42px',
  borderRadius: 10,
  border: `1px solid ${isDark ? 'rgba(0,212,255,0.25)' : 'rgba(0,0,0,0.12)'}`,
  background: isDark ? 'rgba(0,212,255,0.06)' : '#fff',
  color: isDark ? '#e8f4ff' : '#1e293b',
  fontSize: 14,
  outline: 'none',
  transition: 'border-color 0.2s, box-shadow 0.2s',
});

const iconStyle = (isDark: boolean): React.CSSProperties => ({
  position: 'absolute',
  left: 14,
  top: '50%',
  transform: 'translateY(-50%)',
  color: isDark ? 'rgba(0,212,255,0.6)' : '#94a3b8',
});

export default function LoginPage() {
  const navigate = useNavigate();
  const location = useLocation();
  const { theme } = useTheme();
  const isDark = theme === 'dark';

  const [userId, setUserId] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  useEffect(() => {
    document.body.style.overflow = 'auto';
    return () => { document.body.style.overflow = ''; };
  }, []);

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!userId.trim() || !password) {
      setError('请输入账号和密码');
      return;
    }
    setLoading(true);
    setError('');
    try {
      const result = await iamLogin({ userId: userId.trim(), password });
      saveSession(result.token, result.userInfo);
      // 回跳原页面（RequireAuth 记录的 from），否则去首页
      const from = (location.state as { from?: string })?.from ?? '/';
      navigate(from, { replace: true });
    } catch (ex) {
      setError(ex instanceof Error ? ex.message : '登录失败，请稍后重试');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{
      width: '100vw',
      minHeight: '100vh',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      position: 'relative',
      boxSizing: 'border-box',
      fontFamily: "-apple-system, 'SF Pro Display', 'SF Pro Text', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif",
      color: isDark ? '#a8d8ff' : '#1e3a6e',
    }}>
      {isDark ? <StarBackground theme="dark" /> : (
        <div style={{
          position: 'fixed', top: 0, left: 0, width: '100%', height: '100%',
          background: 'linear-gradient(160deg, #f8f8fb 0%, #f2f3f7 50%, #eef1f7 100%)',
          zIndex: 0,
        }} />
      )}

      <div style={{
        position: 'relative', zIndex: 1,
        width: 400, maxWidth: '92vw',
        padding: '40px 36px 32px',
        borderRadius: 20,
        background: isDark ? 'rgba(10,22,40,0.75)' : 'rgba(255,255,255,0.9)',
        backdropFilter: 'blur(16px)',
        border: `1px solid ${isDark ? 'rgba(0,212,255,0.2)' : 'rgba(0,0,0,0.06)'}`,
        boxShadow: isDark ? '0 24px 64px rgba(0,0,0,0.5), 0 0 48px rgba(0,212,255,0.08)' : '0 24px 64px rgba(30,58,110,0.12)',
      }}>
        {/* 品牌区 */}
        <div style={{ textAlign: 'center', marginBottom: 32 }}>
          <img
            src="/digiwin.svg"
            alt="Digiwin"
            style={{ height: 36, objectFit: 'contain', filter: isDark ? 'drop-shadow(0 0 8px rgba(0,212,255,0.4))' : 'none' }}
          />
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, marginTop: 14 }}>
            <h1 style={{
              fontSize: 26, fontWeight: 800, letterSpacing: '0.04em', margin: 0,
              ...(isDark
                ? { color: '#e8f4ff', textShadow: '0 0 16px rgba(0,212,255,0.5)' }
                : { color: '#111827' }),
            }}>
              EIOSpace
            </h1>
          </div>
          <p style={{ fontSize: 13, marginTop: 6, ...(isDark ? { color: 'rgba(168,216,255,0.6)' } : { color: '#6b7280' }) }}>
            企业智能 · 数据驱动 · 产业赋能
          </p>
        </div>

        {/* 登录表单 */}
        <form onSubmit={handleLogin}>
          <div style={{ marginBottom: 16 }}>
            <label style={{ display: 'block', fontSize: 13, marginBottom: 6, color: isDark ? 'rgba(168,216,255,0.8)' : '#475569' }}>
              账号（用户ID / 手机号 / 邮箱）
            </label>
            <div style={{ position: 'relative' }}>
              <User size={16} style={iconStyle(isDark)} />
              <input
                type="text"
                value={userId}
                onChange={(e) => setUserId(e.target.value)}
                placeholder="请输入账号"
                autoComplete="username"
                style={inputStyle(isDark)}
                onFocus={(e) => { e.currentTarget.style.borderColor = '#00d4ff'; }}
                onBlur={(e) => { e.currentTarget.style.borderColor = isDark ? 'rgba(0,212,255,0.25)' : 'rgba(0,0,0,0.12)'; }}
              />
            </div>
          </div>

          <div style={{ marginBottom: 20 }}>
            <label style={{ display: 'block', fontSize: 13, marginBottom: 6, color: isDark ? 'rgba(168,216,255,0.8)' : '#475569' }}>
              密码
            </label>
            <div style={{ position: 'relative' }}>
              <Lock size={16} style={iconStyle(isDark)} />
              <input
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="请输入密码"
                autoComplete="current-password"
                style={inputStyle(isDark)}
                onFocus={(e) => { e.currentTarget.style.borderColor = '#00d4ff'; }}
                onBlur={(e) => { e.currentTarget.style.borderColor = isDark ? 'rgba(0,212,255,0.25)' : 'rgba(0,0,0,0.12)'; }}
              />
            </div>
          </div>

          {error && (
            <div style={{
              display: 'flex', alignItems: 'center', gap: 8,
              padding: '10px 12px', marginBottom: 16,
              borderRadius: 8, fontSize: 13,
              background: 'rgba(239,68,68,0.12)',
              border: '1px solid rgba(239,68,68,0.4)',
              color: '#fca5a5',
            }}>
              <AlertCircle size={15} style={{ flexShrink: 0 }} />
              {error}
            </div>
          )}

          <button
            type="submit"
            disabled={loading}
            style={{
              width: '100%',
              padding: '13px 0',
              borderRadius: 10,
              border: 'none',
              cursor: loading ? 'wait' : 'pointer',
              fontSize: 15,
              fontWeight: 600,
              letterSpacing: '0.08em',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 8,
              color: '#04121f',
              background: 'linear-gradient(90deg, #00d4ff, #4f9eff)',
              boxShadow: '0 8px 24px rgba(0,212,255,0.35)',
              transition: 'transform 0.15s, box-shadow 0.15s, opacity 0.15s',
              opacity: loading ? 0.7 : 1,
            }}
            onMouseEnter={(e) => { if (!loading) e.currentTarget.style.transform = 'translateY(-1px)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; }}
          >
            {loading ? <Loader2 size={17} style={{ animation: 'spin 1s linear infinite' }} /> : <LogIn size={17} />}
            {loading ? '登录中...' : '登 录'}
          </button>
        </form>

        <p style={{
          textAlign: 'center', fontSize: 12, marginTop: 24,
          ...(isDark ? { color: 'rgba(168,216,255,0.45)' } : { color: '#94a3b8' }),
        }}>
          鼎捷云统一身份认证 · IAM
        </p>
      </div>
    </div>
  );
}