'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { signInWithPassword } from '@/lib/auth/client'

export default function LoginPage() {
  const router = useRouter()
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError('')
    setLoading(true)

    try {
      await signInWithPassword(email, password)
      router.refresh()
    } catch (err) {
      if (err instanceof Error && err.message.length > 0) {
        setError(err.message)
      } else {
        setError('Login failed. Please try again.')
      }
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="min-h-screen bg-[#0b1326] flex items-center justify-center p-4">
      {/* Background glows */}
      <div className="fixed top-[-10%] right-[-10%] w-[500px] h-[500px] bg-[#fb7185]/5 rounded-full blur-[120px] pointer-events-none" />
      <div className="fixed bottom-[-10%] left-[20%] w-[400px] h-[400px] bg-[#ac8aff]/5 rounded-full blur-[100px] pointer-events-none" />

      <div className="w-full max-w-md relative z-10">
        {/* Logo */}
        <div className="text-center mb-10">
          <h1
            className="text-3xl font-black text-[#fb7185] tracking-widest uppercase mb-2"
            style={{ fontFamily: 'Manrope, sans-serif' }}
          >
            Mspacez
          </h1>
          <p className="text-[11px] text-slate-500 font-bold tracking-[0.3em] uppercase">
            Partner Prospecting Tool
          </p>
        </div>

        {/* Card */}
        <div className="bg-[#131b2e] rounded-2xl p-8 border border-[#574143]/15 shadow-2xl">
          <h2
            className="text-xl font-extrabold text-[#dae2fd] mb-1"
            style={{ fontFamily: 'Manrope, sans-serif' }}
          >
            Sign in
          </h2>
          <p className="text-sm text-slate-500 mb-8">Internal access only</p>

          <form onSubmit={handleSubmit} className="space-y-5">
            <div className="flex flex-col gap-1.5">
              <label className="text-[11px] font-bold text-slate-400 uppercase tracking-tighter">
                Email
              </label>
              <input
                type="email"
                value={email}
                onChange={e => setEmail(e.target.value)}
                placeholder="you@mspacez.com"
                className="bg-[#222a3d] px-4 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none focus:ring-1 focus:ring-[#fb7185]/50 placeholder-slate-600"
                autoComplete="email"
                required
              />
            </div>

            <div className="flex flex-col gap-1.5">
              <label className="text-[11px] font-bold text-slate-400 uppercase tracking-tighter">
                Password
              </label>
              <input
                type="password"
                value={password}
                onChange={e => setPassword(e.target.value)}
                placeholder="••••••••"
                className="bg-[#222a3d] px-4 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none focus:ring-1 focus:ring-[#fb7185]/50 placeholder-slate-600"
                autoComplete="current-password"
                required
              />
            </div>

            {error && (
              <div className="flex items-center gap-2 p-3 bg-red-500/10 border border-red-500/20 rounded-xl">
                <span className="material-symbols-outlined text-red-400 text-lg">error</span>
                <span className="text-sm text-red-300">{error}</span>
              </div>
            )}

            <button
              type="submit"
              disabled={loading}
              className="w-full py-3.5 bg-gradient-to-br from-[#ffb2b9] to-[#fb7185] text-[#6f0122] font-black rounded-xl shadow-lg hover:opacity-90 active:scale-95 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
            >
              {loading ? (
                <>
                  <span className="material-symbols-outlined animate-spin text-lg">refresh</span>
                  Signing in…
                </>
              ) : (
                'Sign In'
              )}
            </button>
          </form>

          <div className="mt-8 pt-6 border-t border-[#574143]/20">
            <p className="text-[11px] text-slate-600 text-center">
              Access is managed by the app server using PostgreSQL-backed users and secure httpOnly sessions.
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}