'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';

export function UserActions({ id, role }: { id: string; role: string }) {
  const router = useRouter();
  const [busy, setBusy] = useState(false);

  async function update(nextRole: string) {
    setBusy(true);
    await fetch(`/api/admin/users/${id}`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ role: nextRole }),
    });
    setBusy(false);
    router.refresh();
  }

  async function remove() {
    if (!window.confirm('Delete this user? This cannot be undone.')) return;
    setBusy(true);
    await fetch(`/api/admin/users/${id}`, { method: 'DELETE' });
    setBusy(false);
    router.refresh();
  }

  return (
    <div className="flex justify-end gap-2">
      <button
        type="button"
        className="btn-secondary"
        disabled={busy}
        onClick={() => update(role === 'admin' ? 'user' : 'admin')}
      >
        {role === 'admin' ? 'Make user' : 'Make admin'}
      </button>
      <button type="button" className="btn-danger" disabled={busy} onClick={remove}>
        Delete
      </button>
    </div>
  );
}