"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState, type FormEvent } from "react";
import { PageShell } from "@/components/layout/PageShell";
import { Reveal } from "@/components/motion/Reveal";
import { Button } from "@/components/ui/Button";
import { Input } from "@/components/ui/Input";
import { useAuth } from "@/context/auth-context";

export default function RegisterPage() {
  const { register } = useAuth();
  const router = useRouter();
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [submitting, setSubmitting] = useState(false);

  const onSubmit = async (event: FormEvent) => {
    event.preventDefault();
    setSubmitting(true);
    const result = await register(name, email, password);
    setSubmitting(false);
    if (result.ok) router.push(result.redirectTo ?? "/account");
  };

  return (
    <PageShell
      crumbs={[{ label: "Home", href: "/" }, { label: "Register" }]}
      eyebrow="Account"
      title="Create your account"
      description="Save your details for faster checkout and order tracking."
      wide={false}
    >
      <Reveal>
        <form
          onSubmit={onSubmit}
          className="space-y-4 rounded-[1.35rem] border border-border bg-card p-5 sm:p-7"
        >
          <Input
            label="Name"
            value={name}
            onChange={(event) => setName(event.target.value)}
            required
          />
          <Input
            label="Email"
            type="email"
            value={email}
            onChange={(event) => setEmail(event.target.value)}
            required
          />
          <Input
            label="Password"
            type="password"
            value={password}
            onChange={(event) => setPassword(event.target.value)}
            minLength={6}
            required
          />
          <Button type="submit" className="w-full" disabled={submitting}>
            {submitting ? "Creating…" : "Create account"}
          </Button>
        </form>
        <p className="mt-4 text-sm text-muted">
          Already have an account?{" "}
          <Link href="/login" className="text-foreground underline underline-offset-4">
            Login
          </Link>
        </p>
      </Reveal>
    </PageShell>
  );
}