import { useState } from 'react'

export default function AuthModal({ mode, onModeChange, onLogin, onRegister, onClose }) {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [err, setErr] = useState('')
  const [loading, setLoading] = useState(false)

  const handleSubmit = async (e) => {
    e.preventDefault()
    setErr('')
    if (!username || !password) return setErr('Please fill in all fields.')
    if (password.length < 6) return setErr('Password must be at least 6 characters.')
    if (mode === 'register') {
      if (username.length < 3) return setErr('Username must be at least 3 characters.')
      if (!/^[a-zA-Z0-9_]+$/.test(username)) {
        return setErr('Username can only contain letters, numbers, and underscores. No spaces or special characters (e.g. no @, ., -).')
      }
    }

    setLoading(true)
    try {
      if (mode === 'login') await onLogin(username, password)
      else await onRegister(username, password)
    } catch (e) {
      setErr(e.message || 'Something went wrong. Please try again.')
    } finally {
      setLoading(false)
    }
  }

  const handleGoogle = () => {
    window.location.href = '/auth/google/login'
  }

  return (
    <div className="modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
      <div className="modal-card" style={{ maxWidth: 380 }}>
        <div className="modal-header">
          <span className="modal-title">Welcome to OwnGPT v2</span>
          <button className="modal-close" onClick={onClose}>
            <svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
          </button>
        </div>
        
        <div className="modal-body">
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 20 }}>
            <div className="sidebar-logo-icon" style={{ animation: 'logoPulse 3s infinite', width: 48, height: 48, fontSize: 24 }}>✦</div>
          </div>

          <div className="auth-tabs" style={{ position: 'relative' }}>
            <div style={{
              position: 'absolute', top: 3, bottom: 3, width: 'calc(50% - 3px)',
              background: 'var(--s2)', borderRadius: 'var(--rx)', zIndex: 0,
              transform: `translateX(${mode === 'login' ? '0' : 'calc(100% + 3px)'})`,
              transition: 'transform 0.3s var(--spring)', boxShadow: '0 2px 8px rgba(0,0,0,0.20)'
            }} />
            <button style={{ position: 'relative', zIndex: 1, backgroundColor: 'transparent', boxShadow: 'none' }} className={`auth-tab ${mode === 'login' ? 'active' : ''}`} onClick={() => { onModeChange('login'); setErr('') }}>Sign In</button>
            <button style={{ position: 'relative', zIndex: 1, backgroundColor: 'transparent', boxShadow: 'none' }} className={`auth-tab ${mode === 'register' ? 'active' : ''}`} onClick={() => { onModeChange('register'); setErr('') }}>Sign Up</button>
          </div>

          <form onSubmit={handleSubmit}>
            <label className="field-label">Username</label>
            <input 
              className="field-input" 
              type="text" 
              value={username} onChange={e => setUsername(e.target.value)} 
              placeholder={mode === 'register' ? "Letters, numbers, underscores only" : "Your username"}
              autoFocus 
            />

            <label className="field-label">Password</label>
            <input 
              className="field-input" 
              type="password" 
              value={password} onChange={e => setPassword(e.target.value)} 
              placeholder="••••••••" 
            />

            {mode === 'register' && password.length > 0 && (
              <div style={{ display: 'flex', gap: 4, marginTop: -8, marginBottom: 16 }}>
                {[1, 2, 3].map(i => (
                  <div key={i} style={{
                    height: 4, flex: 1, borderRadius: 2,
                    background: password.length > i * 3 ? (password.length > 8 ? 'var(--em)' : 'var(--am)') : 'var(--b2)',
                    transition: 'all 0.3s'
                  }} />
                ))}
              </div>
            )}

            {err && <div className="field-error">{err}</div>}

            <button type="submit" className="btn btn-primary" style={{ width: '100%', justifyContent: 'center' }} disabled={loading}>
              {loading ? 'Processing...' : (mode === 'login' ? 'Sign In' : 'Create Account')}
            </button>
          </form>

          <div className="divider-or">or continue with</div>

          <button className="btn btn-google" onClick={handleGoogle} type="button">
            <svg width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
            Google
          </button>
        </div>
      </div>
    </div>
  )
}