"use client";

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

export function InquiryToggle({ id, status }: { id: string; status: "new" | "handled" }) {
  const router = useRouter();
  const [busy, setBusy] = useState(false);
  const next = status === "new" ? "handled" : "new";

  return (
    <button
      disabled={busy}
      onClick={async () => {
        setBusy(true);
        await fetch(`/api/inquiries/${id}`, {
          method: "PATCH",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ status: next }),
        });
        setBusy(false);
        router.refresh();
      }}
      className="rounded-lg border border-white/15 px-3 py-1.5 text-[0.8rem] text-tmid transition-colors hover:border-azure hover:text-azure-bright disabled:opacity-50"
    >
      {busy ? "…" : status === "new" ? "Mark handled" : "Reopen"}
    </button>
  );
}

export function ServiceStatusSelect({
  id,
  status,
}: {
  id: string;
  status: "active" | "provisioning" | "suspended";
}) {
  const router = useRouter();
  const [busy, setBusy] = useState(false);

  return (
    <select
      value={status}
      disabled={busy}
      aria-label="Change service status"
      onChange={async (e) => {
        setBusy(true);
        await fetch(`/api/admin/services/${id}`, {
          method: "PATCH",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ status: e.target.value }),
        });
        setBusy(false);
        router.refresh();
      }}
      className="rounded-lg border border-white/15 bg-ink px-2.5 py-1.5 text-[0.82rem] text-tmid disabled:opacity-50"
    >
      <option value="active">active</option>
      <option value="provisioning">provisioning</option>
      <option value="suspended">suspended</option>
    </select>
  );
}