"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { AlertCircle, Lock, Loader2, Mail, PawPrint, Phone, User, UserPlus } from "lucide-react";

export default function RegisterPage() {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setLoading(true); setError("");
    const fd = new FormData(e.currentTarget);
    const pw = fd.get("password") as string;
    const pw2 = fd.get("password2") as string;
    if (pw !== pw2) { setError("Şifreler eşleşmiyor."); setLoading(false); return; }
    try {
      const res = await fetch("/api/auth/register", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name: fd.get("name"), email: fd.get("email"), phone: fd.get("phone"), password: pw }),
      });
      const json = await res.json();
      if (json.ok) { router.push("/hesabim"); router.refresh(); }
      else { setError(json.error ?? "Kayıt başarısız."); setLoading(false); }
    } catch { setError("Bağlantı hatası."); setLoading(false); }
  }

  const inp = "w-full rounded-2xl border-2 border-sand-dark bg-cream/50 py-3.5 pl-12 pr-4 text-sm font-bold text-ink outline-none transition-colors focus:border-brand-400 focus:bg-white";
  return (
    <div className="flex min-h-[70vh] items-center justify-center px-4 py-12">
      <div className="w-full max-w-md animate-pop-in rounded-[2.5rem] bg-white p-10 shadow-2xl ring-1 ring-sand-dark/60">
        <div className="text-center">
          <span className="mx-auto grid size-16 place-items-center rounded-2xl bg-gradient-to-br from-brand-400 to-brand-600 text-white shadow-xl shadow-brand-500/30"><PawPrint className="size-8" /></span>
          <h1 className="mt-4 font-display text-3xl font-extrabold text-ink">Kayıt Ol</h1>
          <p className="mt-1 text-sm font-semibold text-mocha">Hızlıca üye ol, patili dostuna kolayca alışveriş yap</p>
        </div>
        <form onSubmit={onSubmit} className="mt-8 space-y-4">
          <div className="relative"><User className="pointer-events-none absolute left-4 top-1/2 size-5 -translate-y-1/2 text-latte" /><input name="name" required minLength={2} placeholder="Ad Soyad" autoComplete="name" className={inp} /></div>
          <div className="relative"><Mail className="pointer-events-none absolute left-4 top-1/2 size-5 -translate-y-1/2 text-latte" /><input name="email" type="email" required placeholder="E-posta" autoComplete="email" className={inp} /></div>
          <div className="relative"><Phone className="pointer-events-none absolute left-4 top-1/2 size-5 -translate-y-1/2 text-latte" /><input name="phone" type="tel" required minLength={10} placeholder="Telefon (05xx xxx xx xx)" autoComplete="tel" className={inp} /></div>
          <div className="relative"><Lock className="pointer-events-none absolute left-4 top-1/2 size-5 -translate-y-1/2 text-latte" /><input name="password" type="password" required minLength={6} placeholder="Şifre (min 6 karakter)" autoComplete="new-password" className={inp} /></div>
          <div className="relative"><Lock className="pointer-events-none absolute left-4 top-1/2 size-5 -translate-y-1/2 text-latte" /><input name="password2" type="password" required minLength={6} placeholder="Şifre Tekrar" autoComplete="new-password" className={inp} /></div>
          {error && <div className="flex items-center gap-2 rounded-2xl bg-red-50 px-4 py-3 text-sm font-bold text-red-700 ring-1 ring-red-200"><AlertCircle className="size-5 shrink-0" />{error}</div>}
          <button type="submit" disabled={loading} className="flex w-full items-center justify-center gap-2 rounded-full bg-gradient-to-r from-brand-500 to-brand-600 py-4 text-base font-extrabold text-white shadow-xl shadow-brand-500/30 transition-all hover:-translate-y-0.5 active:scale-95 disabled:opacity-50">
            {loading ? <Loader2 className="size-5 animate-spin" /> : <><UserPlus className="size-5" />Kayıt Ol</>}
          </button>
        </form>
        <p className="mt-6 text-center text-sm font-bold text-mocha">
          Zaten hesabın var mı?{" "}
          <Link href="/giris" className="font-extrabold text-brand-600 underline underline-offset-2 hover:text-brand-700">Giriş Yap</Link>
        </p>
      </div>
    </div>
  );
}