"use client"

import { useActionState, useEffect } from "react"
import { useRouter } 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"
import { registerUser, type RegisterState } from "../actions"

const initialState: RegisterState = {}

export default function RegisterPage() {
  const router = useRouter()
  const [state, formAction, pending] = useActionState(registerUser, initialState)

  useEffect(() => {
    if (state.success) {
      router.push("/login")
    }
  }, [state.success, router])

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

      <Button
        variant="outline"
        size="lg"
        className="w-full mb-6"
        onClick={() => signIn("google", { callbackUrl: "/account/orders" })}
      >
        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 action={formAction} className="space-y-4">
        <Input label="Nom" name="name" type="text" required />
        <Input label="Email" name="email" type="email" required />
        <Input label="Mot de passe" name="password" type="password" required minLength={8} />
        {state.error && <p className="text-xs text-red-500 font-mono">{state.error}</p>}
        <Button type="submit" size="lg" className="w-full" disabled={pending}>
          {pending ? "Création..." : "Créer mon compte"}
        </Button>
      </form>

      <p className="text-sm text-[var(--text-secondary)] text-center mt-6">
        Déjà un compte ?{" "}
        <Link href="/login" className="text-[var(--accent)] hover:underline">
          Se connecter
        </Link>
      </p>
    </div>
  )
}