"use client";

import Link from "next/link";
import { useState } from "react";
import { useRouter } from "next/navigation";

export function UserActions({ id }: { id: string }) {
  const router = useRouter();
  const [message, setMessage] = useState("");

  async function resetPassword() {
    const response = await fetch("/api/password-reset", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ userId: id })
    });
    const payload = await response.json();
    const devLink = payload.devResetUrl ? ` Dev link: ${payload.devResetUrl}` : "";
    setMessage(response.ok ? `Reset email queued.${devLink}` : payload.error ?? "Reset failed.");
  }

  async function deactivate() {
    await fetch(`/api/users/${id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ status: "inactive" })
    });
    router.refresh();
  }

  async function remove() {
    if (!confirm("Delete this user?")) return;
    await fetch(`/api/users/${id}`, { method: "DELETE" });
    router.refresh();
  }

  return (
    <div className="grid gap-2">
      <div className="flex flex-wrap gap-2">
        <Link className="rounded-lg border border-slate-300 px-3 py-1 text-xs font-semibold" href={`/admin/users/${id}`}>Edit</Link>
        <button className="rounded-lg bg-brand-secondary px-3 py-1 text-xs font-semibold text-white" onClick={() => void resetPassword()} type="button">Reset</button>
        <button className="rounded-lg border border-slate-300 px-3 py-1 text-xs font-semibold" onClick={() => void deactivate()} type="button">Inactive</button>
        <button className="rounded-lg bg-brand-primary px-3 py-1 text-xs font-semibold text-white" onClick={() => void remove()} type="button">Delete</button>
      </div>
      {message ? <p className="max-w-sm break-all text-xs text-brand-secondary">{message}</p> : null}
    </div>
  );
}