"use client";
import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import AuthShell, { Field } from "@/components/AuthShell";
import { GoogleButton, OrDivider } from "@/components/GoogleAuth";
import { api, setToken } from "@/lib/api";

export default function Signup() {
  const r = useRouter();
  const [form, setForm] = useState({ name: "", email: "", password: "" });
  const [err, setErr] = useState("");
  const [loading, setLoading] = useState(false);

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setErr(""); setLoading(true);
    try {
      const res = await api("/auth/signup", { method: "POST", body: JSON.stringify(form) });
      setToken(res.access_token);
      r.push(`/verify-email?email=${encodeURIComponent(form.email)}`);
    } catch (e: any) {
      setErr(typeof e.detail === "string" ? e.detail : "Signup failed");
    } finally { setLoading(false); }
  }

  const set = (k: string) => (e: any) => setForm({ ...form, [k]: e.target.value });

  return (
    <AuthShell title="Sign up" subtitle="Create a free account">
      <GoogleButton label="Sign up with Google" />
      <OrDivider text="Or, sign up with your email" />
      <form onSubmit={submit}>
        <Field label="Full name" value={form.name} onChange={set("name")} required />
        <Field label="Email" type="email" value={form.email} onChange={set("email")} required />
        <Field label="Password" type="password" value={form.password} onChange={set("password")} required />
        {err && <p className="text-sm text-rose-600 mb-3">{err}</p>}
        <button disabled={loading}
          className="w-full bg-brand-600 text-white py-3 rounded-full font-semibold disabled:opacity-60">
          {loading ? "Creating..." : "Sign up"}
        </button>
      </form>
      <p className="mt-5 text-sm text-center text-slate-500">
        Already have an account? <Link href="/login" className="text-brand-600 font-semibold">Log In</Link>
      </p>
    </AuthShell>
  );
}