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

export default function LoginForm() {
  const router = useRouter();
  const [pw, setPw] = useState("");
  const [err, setErr] = useState("");
  const [loading, setLoading] = useState(false);

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setErr("");
    setLoading(true);
    const r = await fetch("/api/auth/login", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ password: pw }),
    });
    setLoading(false);
    if (!r.ok) {
      setErr("Sai mật khẩu");
      return;
    }
    router.push("/dashboard");
    router.refresh();
  }

  return (
    <form onSubmit={submit} className="space-y-3">
      <div>
        <label className="label">Mật khẩu</label>
        <input
          type="password"
          className="input"
          value={pw}
          onChange={(e) => setPw(e.target.value)}
          autoFocus
        />
      </div>
      {err && (
        <div className="text-sm text-bad px-3 py-2 rounded-md border border-bad/30 bg-bad/5">
          {err}
        </div>
      )}
      <button className="btn btn-primary w-full justify-center py-2.5" type="submit" disabled={loading}>
        {loading ? "Đang đăng nhập..." : "Đăng nhập"}
      </button>
    </form>
  );
}