"use client";

import { useState } from "react";

export function AdminUserActions({
  userId,
  role,
  status,
  unlocked,
  courseList,
}: {
  userId: string;
  role: string;
  status: string;
  unlocked: string[];
  courseList: { slug: string; title: string }[];
}) {
  const [msg, setMsg] = useState("");
  const [busy, setBusy] = useState(false);

  async function act(action: string, extra?: Record<string, string>) {
    setBusy(true);
    setMsg("");
    const res = await fetch(`/api/admin/users/${userId}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ action, ...extra }),
    });
    const json = await res.json();
    setBusy(false);
    if (!res.ok) {
      setMsg(json.error || "Failed");
      return;
    }
    window.location.reload();
  }

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap gap-2">
        <button
          disabled={busy}
          onClick={() => act("extend_trial")}
          className="rounded-full bg-forest px-4 py-2 text-xs font-semibold text-gold-2"
        >
          Grant / extend 3-day access
        </button>
        <button
          disabled={busy}
          onClick={() => act("grant_agent")}
          className="rounded-full border border-forest/20 px-4 py-2 text-xs"
        >
          Grant live coach 30d
        </button>
        {status === "disabled" ? (
          <button disabled={busy} onClick={() => act("enable")} className="rounded-full border px-4 py-2 text-xs">
            Enable account
          </button>
        ) : (
          <button disabled={busy} onClick={() => act("disable")} className="rounded-full border px-4 py-2 text-xs text-terra">
            Disable account
          </button>
        )}
        {role === "admin" ? (
          <button disabled={busy} onClick={() => act("make_user")} className="rounded-full border px-4 py-2 text-xs">
            Remove admin
          </button>
        ) : (
          <button disabled={busy} onClick={() => act("make_admin")} className="rounded-full border px-4 py-2 text-xs">
            Make admin
          </button>
        )}
      </div>
      <div>
        <p className="text-xs uppercase tracking-widest text-forest/50">Courses</p>
        <ul className="mt-2 space-y-2">
          {courseList.map((c) => {
            const has = unlocked.includes(c.slug);
            return (
              <li key={c.slug} className="flex items-center justify-between rounded-2xl bg-paper px-3 py-2 text-sm">
                <span>{c.title}</span>
                {has ? (
                  <button
                    disabled={busy}
                    onClick={() => act("revoke_course", { course: c.slug })}
                    className="text-xs text-terra"
                  >
                    Revoke
                  </button>
                ) : (
                  <button
                    disabled={busy}
                    onClick={() => act("grant_course", { course: c.slug })}
                    className="text-xs font-medium text-forest"
                  >
                    Grant
                  </button>
                )}
              </li>
            );
          })}
        </ul>
      </div>
      {msg ? <p className="text-sm text-terra">{msg}</p> : null}
    </div>
  );
}