"use client"

import { Suspense, useState } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import Link from "next/link"
import { signIn } from "next-auth/react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

export default function LoginPage() {
  return (
    <Suspense>
      <LoginForm />
    </Suspense>
  )
}

function LoginForm() {
  const router = useRouter()
  const params = useSearchParams()
  const callbackUrl = params.get("callbackUrl") ?? "/account/orders"

  const [loading, setLoading] = useState(false)
  const [error, setError] = useState("")

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

    const formData = new FormData(e.currentTarget)
    const res = await signIn("credentials", {
      email: formData.get("email"),
      password: formData.get("password"),
      redirect: false,
    })

    setLoading(false)
    if (res?.error) {
      setError("Email ou mot de passe incorrect")
    } else {
      router.push(callbackUrl)
      router.refresh()
    }
  }

  return (
    <div>
      <h1 className="text-2xl font-heading font-bold uppercase tracking-tight text-[var(--text)] mb-8 text-center">
        Connexion
      </h1>

      <Button
        variant="outline"
        size="lg"
        className="w-full mb-6"
        onClick={() => signIn("google", { callbackUrl })}
      >
        Continuer avec Google
      </Button>

      <div className="flex items-center gap-3 mb-6">
        <div className="flex-1 h-px bg-[var(--border)]" />
        <span className="font-mono text-xs text-[var(--text-muted)] uppercase">ou</span>
        <div className="flex-1 h-px bg-[var(--border)]" />
      </div>

      <form onSubmit={handleSubmit} className="space-y-4">
        <Input label="Email" name="email" type="email" required />
        <Input label="Mot de passe" name="password" type="password" required />
        {error && <p className="text-xs text-red-500 font-mono">{error}</p>}
        <Button type="submit" size="lg" className="w-full" disabled={loading}>
          {loading ? "Connexion..." : "Se connecter"}
        </Button>
      </form>

      <p className="text-sm text-[var(--text-secondary)] text-center mt-6">
        Pas encore de compte ?{" "}
        <Link href="/register" className="text-[var(--accent)] hover:underline">
          Créer un compte
        </Link>
      </p>
    </div>
  )
}