"use client";
import { useState, Suspense } from "react";
import { useRouter, useSearchParams } from "next/navigation";

function LoginForm() {
  const [email, setEmail] = useState("admin@ravneetbrar.in");
  const [password, setPassword] = useState("");
  const [err, setErr] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const router = useRouter();
  const sp = useSearchParams();
  const next = sp.get("next") || "/admin";

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    setErr(null); setLoading(true);
    try {
      const res = await fetch("/api/admin/login", { method:"POST", headers:{ "Content-Type":"application/json" }, body: JSON.stringify({ email, password }) });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "Login failed");
      router.push(next);
      router.refresh();
    } catch (e:any) { setErr(e.message); }
    finally { setLoading(false); }
  };

  return (
    <div className="fixed inset-0 z-50 bg-[#07080c] grid place-items-center px-6">
      <div className="w-full max-w-[420px]">
        <div className="text-center">
          <div className="w-12 h-12 mx-auto rounded-full bg-white text-black grid place-items-center font-black">RB</div>
          <h1 className="mt-4 text-[28px] font-[800] tracking-[-0.04em] text-white">WELCOME BACK.</h1>
          <p className="text-sm text-white/50">Manage your website, projects and content.</p>
        </div>
        <form onSubmit={submit} className="mt-8 rounded-[20px] border border-white/10 bg-white/[0.04] p-6 space-y-4 backdrop-blur">
          <div>
            <label className="text-xs tracking-widest text-white/40">Email</label>
            <input value={email} onChange={e=>setEmail(e.target.value)} type="email" required autoComplete="email" className="mt-1 w-full rounded-xl bg-black/40 border border-white/10 px-3 py-2.5 text-sm text-white outline-none focus:border-white/20" />
          </div>
          <div>
            <label className="text-xs tracking-widest text-white/40">Password</label>
            <input value={password} onChange={e=>setPassword(e.target.value)} type="password" required autoComplete="current-password" className="mt-1 w-full rounded-xl bg-black/40 border border-white/10 px-3 py-2.5 text-sm text-white outline-none focus:border-white/20" />
            <p className="text-[11px] text-white/20 mt-1">Demo: admin@ravneetbrar.in / Ravneet@2026 (or password)</p>
          </div>
          <label className="flex items-center gap-2 text-sm text-white/60"><input type="checkbox" className="rounded" /> Remember me</label>
          {err && <p className="text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-xl px-3 py-2">{err}</p>}
          <button disabled={loading} className="w-full rounded-full bg-white text-black font-semibold py-3 hover:bg-white/90 disabled:opacity-50">
            {loading ? "Signing in…" : "Sign In →"}
          </button>
        </form>
        <p className="text-center text-xs text-white/20 mt-4">Secure • HTTP-only cookie • Rate limited</p>
      </div>
    </div>
  );
}

export default function AdminLogin() {
  return (
    <Suspense fallback={<div className="min-h-screen bg-[#07080c] grid place-items-center text-white/40">Loading…</div>}>
      <LoginForm />
    </Suspense>
  );
}