// Tempo landing — Login & Sign-up modals

function AuthModal({ mode, onClose, onSwitch }) {
  const isLogin = mode === 'login';
  const [email, setEmail] = React.useState('');
  const [username, setUsername] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [showPw, setShowPw] = React.useState(false);
  const [loading, setLoading] = React.useState(false);

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [onClose]);

  const handleGoogleLogin = async (e) => {
    if (e) e.preventDefault();
    if (!window.supabaseClient) {
      alert('Dịch vụ xác thực đang khởi tạo. Vui lòng thử lại sau giây lát.');
      return;
    }
    setLoading(true);
    try {
      const { error } = await window.supabaseClient.auth.signInWithOAuth({
        provider: 'google',
        options: {
          redirectTo: window.location.origin + '/ui_kits/tempo-app/index.html'
        }
      });
      if (error) throw error;
    } catch (err) {
      alert('Đăng nhập Google thất bại: ' + err.message);
      setLoading(false);
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!window.supabaseClient) {
      alert('Dịch vụ xác thực đang khởi tạo. Vui lòng thử lại sau.');
      return;
    }
    setLoading(true);
    try {
      if (isLogin) {
        const { data, error } = await window.supabaseClient.auth.signInWithPassword({
          email,
          password
        });
        if (error) throw error;
        window.location.href = '/ui_kits/tempo-app/index.html';
      } else {
        const { data, error } = await window.supabaseClient.auth.signUp({
          email,
          password,
          options: {
            data: {
              username: username,
              full_name: username
            }
          }
        });
        if (error) throw error;

        if (data.session) {
          window.location.href = '/ui_kits/tempo-app/index.html';
        } else {
          alert('Đăng ký thành công! Vui lòng kiểm tra email để xác nhận tài khoản của bạn.');
          setLoading(false);
        }
      }
    } catch (err) {
      alert('Xác thực thất bại: ' + err.message);
      setLoading(false);
    }
  };

  const inputWrap = {
    display: 'flex', flexDirection: 'column', gap: 6,
  };
  const labelStyle = {
    fontSize: 13, fontWeight: 600, color: 'var(--text-secondary)',
    fontFamily: 'var(--font-sans)',
  };
  const inputStyle = {
    height: 44, padding: '0 14px',
    background: 'var(--surface-2)', color: 'var(--text-primary)',
    border: '1px solid var(--border)', borderRadius: 'var(--radius-md)',
    fontFamily: 'var(--font-sans)', fontSize: 14, outline: 'none',
    transition: 'border-color 0.15s ease, box-shadow 0.15s ease',
    width: '100%', boxSizing: 'border-box',
  };
  const inputFocus = (e) => { e.target.style.borderColor = 'var(--violet-500)'; e.target.style.boxShadow = 'var(--glow-focus)'; };
  const inputBlur  = (e) => { e.target.style.borderColor = 'var(--border)'; e.target.style.boxShadow = 'none'; };

  return (
    <div onMouseDown={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 200,
      background: 'rgba(4,6,11,0.72)', backdropFilter: 'blur(16px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20,
    }}>
      <div onMouseDown={e => e.stopPropagation()} style={{
        width: 440, maxHeight: '90vh', overflow: 'auto',
        background: 'var(--surface-1)', border: '1px solid var(--border-strong)',
        borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-xl)',
        padding: '36px 32px 32px',
      }}>
        {/* Close */}
        <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 4 }}>
          <button onClick={onClose} style={{
            width: 32, height: 32, background: 'transparent', border: 'none',
            borderRadius: 'var(--radius-sm)', color: 'var(--text-tertiary)',
            cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <i data-lucide="x" style={{ width: 18, height: 18 }}></i>
          </button>
        </div>

        {/* Logo + heading */}
        <div style={{ textAlign: 'center', marginBottom: 28 }}>
          <img src="../../assets/logo.png" alt="Tempo" style={{ width: 48, height: 48, borderRadius: 'var(--radius-md)', marginBottom: 16 }} />
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 26,
            color: 'var(--text-primary)', margin: '0 0 6px',
          }}>{isLogin ? 'Welcome back' : 'Create your account'}</h2>
          <p style={{ fontSize: 14, color: 'var(--text-secondary)', margin: 0 }}>
            {isLogin ? 'Sign in to continue learning with Tempo' : 'Start your learning journey with Tempo'}
          </p>
        </div>

        {/* Google button */}
        <button onClick={handleGoogleLogin} style={{
          width: '100%', height: 48, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
          background: 'var(--surface-2)', color: 'var(--text-primary)',
          border: '1px solid var(--border-strong)', borderRadius: 'var(--radius-md)',
          fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 14.5,
          cursor: 'pointer', transition: 'var(--t-colors), transform 0.12s ease',
        }}
          onMouseEnter={e => { e.currentTarget.style.background = 'var(--surface-3)'; e.currentTarget.style.transform = 'translateY(-1px)'; }}
          onMouseLeave={e => { e.currentTarget.style.background = 'var(--surface-2)'; e.currentTarget.style.transform = 'translateY(0)'; }}>
          <GoogleIcon />
          Continue with Google
        </button>

        {/* Divider */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, margin: '22px 0' }}>
          <div style={{ flex: 1, height: 1, background: 'var(--border)' }} />
          <span style={{ fontSize: 12, color: 'var(--text-tertiary)', fontWeight: 500 }}>or</span>
          <div style={{ flex: 1, height: 1, background: 'var(--border)' }} />
        </div>

        {/* Form */}
        <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* Email */}
          <div style={inputWrap}>
            <label style={labelStyle}>Email</label>
            <div style={{ position: 'relative' }}>
              <span style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', color: 'var(--text-tertiary)', pointerEvents: 'none', display: 'flex' }}>
                <i data-lucide="mail" style={{ width: 16, height: 16 }}></i>
              </span>
              <input type="email" placeholder="name@example.com" value={email} onChange={e => setEmail(e.target.value)}
                style={{ ...inputStyle, paddingLeft: 40 }} onFocus={inputFocus} onBlur={inputBlur} required />
            </div>
          </div>

          {/* Username — sign up only */}
          {!isLogin && (
            <div style={inputWrap}>
              <label style={labelStyle}>Username</label>
              <div style={{ position: 'relative' }}>
                <span style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', color: 'var(--text-tertiary)', pointerEvents: 'none', display: 'flex' }}>
                  <i data-lucide="user" style={{ width: 16, height: 16 }}></i>
                </span>
                <input type="text" placeholder="Choose a username" value={username} onChange={e => setUsername(e.target.value)}
                  style={{ ...inputStyle, paddingLeft: 40 }} onFocus={inputFocus} onBlur={inputBlur} required />
              </div>
            </div>
          )}

          {/* Password */}
          <div style={inputWrap}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <label style={labelStyle}>Password</label>
              {isLogin && (
                <a href="#" onClick={e => e.preventDefault()} style={{ fontSize: 12.5, color: 'var(--violet-400)', textDecoration: 'none', fontWeight: 500 }}>
                  Forgot password?
                </a>
              )}
            </div>
            <div style={{ position: 'relative' }}>
              <span style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', color: 'var(--text-tertiary)', pointerEvents: 'none', display: 'flex' }}>
                <i data-lucide="lock" style={{ width: 16, height: 16 }}></i>
              </span>
              <input type={showPw ? 'text' : 'password'} placeholder={isLogin ? 'Enter your password' : 'Create a password'} value={password} onChange={e => setPassword(e.target.value)}
                style={{ ...inputStyle, paddingLeft: 40, paddingRight: 42 }} onFocus={inputFocus} onBlur={inputBlur} required />
              <button type="button" onClick={() => setShowPw(!showPw)} style={{
                position: 'absolute', right: 4, top: '50%', transform: 'translateY(-50%)',
                width: 34, height: 34, background: 'transparent', border: 'none',
                borderRadius: 'var(--radius-sm)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: 'var(--text-tertiary)',
              }}>
                <i data-lucide={showPw ? 'eye-off' : 'eye'} style={{ width: 16, height: 16 }}></i>
              </button>
            </div>
          </div>

          {/* Submit */}
          <button type="submit" disabled={loading} style={{
            width: '100%', height: 48, marginTop: 4,
            background: 'var(--grad-brand)', color: '#fff',
            border: 'none', borderRadius: 'var(--radius-md)',
            fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 15,
            cursor: loading ? 'wait' : 'pointer',
            opacity: loading ? 0.7 : 1,
            transition: 'transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease',
            boxShadow: '0 6px 24px -6px rgba(139,92,246,0.45)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          }}
            onMouseEnter={e => { if (!loading) { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.boxShadow = '0 10px 32px -6px rgba(139,92,246,0.6)'; } }}
            onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 6px 24px -6px rgba(139,92,246,0.45)'; }}>
            {loading ? (
              <span className="auth-spinner" />
            ) : (
              <>
                {isLogin ? 'Sign in' : 'Create account'}
                <i data-lucide="arrow-right" style={{ width: 16, height: 16 }}></i>
              </>
            )}
          </button>
        </form>

        {/* Switch */}
        <p style={{ textAlign: 'center', fontSize: 13.5, color: 'var(--text-secondary)', marginTop: 22 }}>
          {isLogin ? "Don't have an account? " : 'Already have an account? '}
          <a href="#" onClick={(e) => { e.preventDefault(); onSwitch(); }}
            style={{ color: 'var(--violet-400)', fontWeight: 600, textDecoration: 'none' }}>
            {isLogin ? 'Sign up' : 'Log in'}
          </a>
        </p>
      </div>
    </div>
  );
}

function GoogleIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
      <path d="M17.64 9.205c0-.639-.057-1.252-.164-1.841H9v3.481h4.844a4.14 4.14 0 0 1-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615Z" fill="#4285F4"/>
      <path d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18Z" fill="#34A853"/>
      <path d="M3.964 10.71A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.997 8.997 0 0 0 0 9c0 1.452.348 2.827.957 4.042l3.007-2.332Z" fill="#FBBC05"/>
      <path d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.958L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58Z" fill="#EA4335"/>
    </svg>
  );
}

Object.assign(window, { AuthModal, GoogleIcon });