"use client";
import { useState } from "react";

export default function SettingsClient() {
  const [oldPw, setOldPw] = useState("");
  const [newPw, setNewPw] = useState("");
  const [msg, setMsg] = useState("");
  const [busy, setBusy] = useState(false);

  async function changePassword(e: React.FormEvent) {
    e.preventDefault();
    setMsg("");
    setBusy(true);
    const r = await fetch("/api/settings/password", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ oldPassword: oldPw, newPassword: newPw }),
    });
    setBusy(false);
    const j = await r.json().catch(() => ({}));
    if (r.ok) {
      setMsg("✓ Đã đổi mật khẩu");
      setOldPw(""); setNewPw("");
    } else {
      setMsg(j.error || "thất bại");
    }
  }

  return (
    <div className="card p-5 space-y-3">
      <h2 className="font-medium">Đổi mật khẩu</h2>
      <form onSubmit={changePassword} className="space-y-3">
        <div>
          <label className="label">Mật khẩu cũ</label>
          <input type="password" className="input" value={oldPw} onChange={(e) => setOldPw(e.target.value)} required />
        </div>
        <div>
          <label className="label">Mật khẩu mới</label>
          <input type="password" className="input" value={newPw} onChange={(e) => setNewPw(e.target.value)} required minLength={4} />
        </div>
        {msg && <div className={`text-sm ${msg.startsWith("✓") ? "text-ok" : "text-bad"}`}>{msg}</div>}
        <button className="btn btn-primary" type="submit" disabled={busy}>
          {busy ? "Đang lưu..." : "Đổi mật khẩu"}
        </button>
      </form>
    </div>
  );
}