"use client";
import { Suspense, useState } from "react";
import Link from "next/link";
import { useSearchParams, useRouter } from "next/navigation";
import AuthShell, { Field } from "@/components/AuthShell";
import { api } from "@/lib/api";

function Inner() {
  const sp = useSearchParams();
  const r = useRouter();
  const token = sp.get("token") || "";
  const [password, setPassword] = useState("");
  const [done, setDone] = useState(false);
  const [err, setErr] = useState("");

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    try {
      await api("/auth/reset-password", { method: "POST", body: JSON.stringify({ token, password }) });
      setDone(true);
      setTimeout(() => r.push("/login"), 1500);
    } catch (e: any) {
      setErr(typeof e.detail === "string" ? e.detail : "Reset failed");
    }
  }

  return (
    <AuthShell title="Reset password">
      {done ? (
        <p className="text-emerald-600">✓ Password updated. Redirecting to login…</p>
      ) : (
        <form onSubmit={submit}>
          <Field label="New password" type="password" value={password}
                 onChange={(e: any) => setPassword(e.target.value)} required />
          {err && <p className="text-sm text-rose-600 mb-3">{err}</p>}
          <button className="w-full bg-brand-600 text-white py-2.5 rounded-lg font-semibold">Reset password</button>
        </form>
      )}
      <Link href="/login" className="text-brand-600 text-sm mt-4 inline-block">Back to login</Link>
    </AuthShell>
  );
}

export default function Reset() {
  return <Suspense><Inner /></Suspense>;
}