"use client";

import {useState, useTransition} from "react";
import {toggleTenantStatus} from "@/features/tenants/server/actions";

type Props = {tenantId: string; currentStatus: string};

export function TenantStatusToggle({tenantId, currentStatus}: Props) {
  const [status, setStatus] = useState(currentStatus);
  const [error, setError] = useState<string | null>(null);
  const [isPending, startTransition] = useTransition();

  const isSuspended = status === "SUSPENDED";

  function handleToggle() {
    const next = isSuspended ? "ACTIVE" : "SUSPENDED";
    setError(null);
    startTransition(async () => {
      const result = await toggleTenantStatus(tenantId, next);
      if (result.success) {
        setStatus(next);
      } else {
        setError(result.error ?? "Error");
      }
    });
  }

  return (
    <div className="flex flex-col items-end gap-1">
      <button
        onClick={handleToggle}
        disabled={isPending}
        className={`rounded-lg px-4 py-2 text-sm font-medium transition disabled:opacity-50 ${
          isSuspended
            ? "bg-green-600 text-white hover:bg-green-700"
            : "bg-red-600 text-white hover:bg-red-700"
        }`}
      >
        {isPending ? "Updating..." : isSuspended ? "Activate" : "Suspend"}
      </button>
      {error && <p className="text-xs text-red-600">{error}</p>}
    </div>
  );
}