'use client'

import { useState } from 'react'
import { signIn } from 'next-auth/react'
import Link from 'next/link'
import { useRouter, useSearchParams } from 'next/navigation'

import { Suspense } from 'react'

function LoginContent() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const callbackUrl = searchParams.get('callbackUrl') || '/dashboard'
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [loading, setLoading] = useState(false)
  const [googleLoading, setGoogleLoading] = useState(false)
  const [error, setError] = useState('')

  const handleCredentialsLogin = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    setError('')
    try {
      const result = await signIn('credentials', {
        email,
        password,
        redirect: false,
      })
      if (result?.error) {
        // NextAuth wraps thrown errors — map known codes to friendly messages
        const errMap: Record<string, string> = {
          CredentialsSignin: 'Email atau password salah',
          'Email dan password diperlukan': 'Email dan password diperlukan',
          'Email atau password salah': 'Email atau password salah',
          'Akun kamu telah diblokir. Hubungi admin.': 'Akun kamu telah diblokir. Hubungi admin.',
        }
        setError(errMap[result.error] ?? result.error)
        setLoading(false)
      } else if (result?.ok) {
        router.push(callbackUrl)
        router.refresh()
      } else {
        setError('Terjadi kesalahan saat login. Coba lagi.')
        setLoading(false)
      }
    } catch (err: any) {
      setError('Terjadi kesalahan jaringan. Periksa koneksi kamu.')
      setLoading(false)
    }
  }

  const handleGoogleLogin = async () => {
    setGoogleLoading(true)
    await signIn('google', { callbackUrl })
  }

  return (
    <main style={{
      minHeight: '100vh',
      background: '#0a0a0f',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      padding: '24px',
    }}>
      {/* Background gradient */}
      <div style={{
        position: 'fixed', top: '20%', left: '30%',
        width: 400, height: 400,
        background: 'radial-gradient(circle, rgba(245,158,11,0.06), transparent 70%)',
        borderRadius: '50%', pointerEvents: 'none',
      }} />

      <div style={{ width: '100%', maxWidth: '420px', position: 'relative', zIndex: 1 }}>
        {/* Logo */}
        <div style={{ textAlign: 'center', marginBottom: '40px' }}>
          <Link href="/" style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: '10px' }}>
            <div style={{
              width: 44,
              height: 44,
              background: 'linear-gradient(135deg, #f59e0b, #d97706)',
              borderRadius: '12px',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: '22px',
            }}>⚡</div>
            <span className="font-game" style={{ fontSize: '24px', fontWeight: 700, color: '#f1f5f9' }}>
              Amane<span style={{ color: '#f59e0b' }}>Nime</span>
            </span>
          </Link>
          <h1 style={{ marginTop: '24px', fontSize: '24px', fontWeight: 700, color: '#f1f5f9', marginBottom: '8px' }}>
            Masuk ke Akun
          </h1>
          <p style={{ color: '#64748b', fontSize: '14px' }}>
            Selamat datang kembali! 👋
          </p>
        </div>

        <div className="card" style={{ padding: '32px' }}>
          {/* Google Login */}
          <button
            onClick={handleGoogleLogin}
            disabled={googleLoading}
            className="btn btn-secondary"
            style={{ width: '100%', padding: '12px', marginBottom: '24px', gap: '10px', justifyContent: 'center' }}
          >
            {googleLoading ? <span className="spinner" /> : (
              <>
                <svg width="18" height="18" viewBox="0 0 24 24">
                  <path fill="#4285F4" 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="#34A853" 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="#FBBC05" 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="#EA4335" 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>
                Masuk dengan Google
              </>
            )}
          </button>

          <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '24px' }}>
            <hr style={{ flex: 1, border: 'none', borderTop: '1px solid rgba(255,255,255,0.06)' }} />
            <span style={{ color: '#475569', fontSize: '12px' }}>atau dengan email</span>
            <hr style={{ flex: 1, border: 'none', borderTop: '1px solid rgba(255,255,255,0.06)' }} />
          </div>

          <form onSubmit={handleCredentialsLogin}>
            {error && (
              <div style={{
                padding: '12px 16px',
                background: 'rgba(239,68,68,0.1)',
                border: '1px solid rgba(239,68,68,0.2)',
                borderRadius: '10px',
                color: '#ef4444',
                fontSize: '13px',
                marginBottom: '16px',
              }}>
                ❌ {error}
              </div>
            )}

            <div style={{ marginBottom: '16px' }}>
              <label className="label">Email</label>
              <input
                className="input"
                type="email"
                placeholder="nama@email.com"
                value={email}
                onChange={e => setEmail(e.target.value)}
                required
              />
            </div>

            <div style={{ marginBottom: '24px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '6px' }}>
                <label className="label" style={{ margin: 0 }}>Password</label>
                <Link href="/auth/forgot-password" style={{ fontSize: '12px', color: '#f59e0b', textDecoration: 'none' }}>
                  Lupa password?
                </Link>
              </div>
              <input
                className="input"
                type="password"
                placeholder="••••••••"
                value={password}
                onChange={e => setPassword(e.target.value)}
                required
              />
            </div>

            <button
              type="submit"
              className="btn btn-primary"
              style={{ width: '100%', padding: '13px', fontSize: '15px' }}
              disabled={loading}
            >
              {loading ? <><span className="spinner" /> Masuk...</> : 'Masuk'}
            </button>
          </form>

          <p style={{ textAlign: 'center', marginTop: '20px', fontSize: '14px', color: '#64748b' }}>
            Belum punya akun?{' '}
            <Link href="/auth/register" style={{ color: '#f59e0b', textDecoration: 'none', fontWeight: 600 }}>
              Daftar gratis
            </Link>
          </p>
        </div>
      </div>
    </main>
  )
}

export default function LoginPage() {
  return (
    <Suspense fallback={<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', background: '#0a0a0f' }}><span className="spinner" /></div>}>
      <LoginContent />
    </Suspense>
  )
}