'use client'

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

function LoginForm() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const inactive = searchParams.get('error') === 'inactive'
  const [error, setError] = useState<string | null>(null)
  const [loading, setLoading] = useState(false)

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()
    setError(null)
    setLoading(true)

    const formData = new FormData(e.currentTarget)
    const result = await signIn('credentials', {
      dealerCode: formData.get('dealerCode'),
      password: formData.get('password'),
      redirect: false,
    })

    setLoading(false)

    if (result?.error) {
      setError('Bayi kodu veya şifre hatalı.')
    } else {
      // Role'e göre yönlendirmeyi middleware yapar
      router.push('/')
      router.refresh()
    }
  }

  return (
    <main className="min-h-screen flex bg-dark">
      {/* Left branding panel */}
      <div className="hidden md:flex flex-1 flex-col justify-between p-12 bg-[#141414]">
        <div>
          <p className="font-display text-2xl text-cream">
            Peyzaj<span className="text-orange">Art</span>
          </p>
          <p className="font-body text-xs tracking-widest uppercase text-cream/30 mt-1">Bayi Paneli</p>
        </div>
        <div>
          <p className="font-display text-3xl font-light text-cream/80 leading-snug max-w-xs">
            Toptan sipariş ve stok yönetimi tek panelde.
          </p>
          <div className="mt-8 space-y-3">
            {['USD sabit fiyat', 'Anlık stok durumu', 'Sipariş takibi'].map(f => (
              <div key={f} className="flex items-center gap-2">
                <span className="w-4 h-4 bg-orange/20 flex items-center justify-center">
                  <span className="w-1.5 h-1.5 bg-orange rounded-full" />
                </span>
                <span className="font-body text-sm text-cream/50">{f}</span>
              </div>
            ))}
          </div>
        </div>
        <p className="font-body text-xs text-cream/20">© {new Date().getFullYear()} PeyzajArt</p>
      </div>

      {/* Right login form */}
      <div className="flex-1 flex items-center justify-center px-6 py-12">
        <div className="w-full max-w-sm">
          <div className="md:hidden text-center mb-10">
            <p className="font-display text-2xl text-cream">
              Peyzaj<span className="text-orange">Art</span>
            </p>
            <p className="font-body text-xs tracking-widest uppercase text-cream/30 mt-1">Bayi Paneli</p>
          </div>

          <h2 className="font-display text-3xl font-light text-cream mb-8">Giriş Yap</h2>

          {inactive && (
            <div className="mb-6 font-body text-sm text-amber-200 bg-amber-900/20 rounded-lg px-4 py-3 border border-amber-600/30">
              Hesabınız henüz onaylanmamış. Onay için{' '}
              <a href="mailto:iletisim@peyzajart.com" className="underline hover:text-amber-100">
                iletisim@peyzajart.com
              </a>{' '}
              ile iletişime geçin.
            </div>
          )}

          <form onSubmit={handleSubmit} className="space-y-5">
            <div>
              <label className="block font-body text-xs tracking-widest uppercase text-cream/40 mb-2">
                Bayi Kodu
              </label>
              <input type="text" name="dealerCode" placeholder="PA-0001" required
                className="w-full px-4 py-3 rounded-lg bg-white/5 border border-white/10 text-cream font-body text-sm placeholder-cream/20 focus:outline-none focus:border-orange transition-colors" />
            </div>
            <div>
              <label className="block font-body text-xs tracking-widest uppercase text-cream/40 mb-2">
                Şifre
              </label>
              <input type="password" name="password" required
                className="w-full px-4 py-3 rounded-lg bg-white/5 border border-white/10 text-cream font-body text-sm focus:outline-none focus:border-orange transition-colors" />
            </div>

            {error && (
              <p className="font-body text-sm text-red-400 bg-red-900/20 rounded-lg px-4 py-3 border border-red-800/30">
                {error}
              </p>
            )}

            <button type="submit" disabled={loading}
              className="w-full py-3 rounded-lg bg-orange text-cream font-body text-sm tracking-widest uppercase hover:bg-orange-hover transition-colors disabled:opacity-60">
              {loading ? 'Giriş yapılıyor...' : 'Giriş Yap'}
            </button>
          </form>

          {/* Kayıt CTA */}
          <div className="mt-8 pt-6 border-t border-white/10 text-center">
            <p className="font-body text-sm text-cream/40 mb-3">Hesabınız yok mu?</p>
            <Link href="/register"
              className="inline-block px-6 py-2.5 rounded-lg border border-orange/60 text-orange font-body text-sm tracking-widest uppercase hover:bg-orange hover:text-cream transition-colors">
              Bayi Başvurusu Yap →
            </Link>
          </div>
        </div>
      </div>
    </main>
  )
}

export default function LoginPage() {
  return (
    <Suspense fallback={<main className="min-h-screen bg-dark" />}>
      <LoginForm />
    </Suspense>
  )
}