"use client";

import { useTransition } from "react";
import { useRouter } from "next/navigation";
import { claimOrderAction, releaseOrderAction } from "@/lib/actions/admin";

export function OrderAssigneeBadge({
  orderId,
  assignedStaffName,
  isViewer,
  canEdit,
}: {
  orderId: string;
  assignedStaffName: string | null;
  isViewer: boolean;
  canEdit: boolean;
}) {
  const [pending, startTransition] = useTransition();
  const router = useRouter();

  function claim() {
    if (assignedStaffName && !isViewer && !confirm(`„${assignedStaffName}" hat den Auftrag bereits übernommen. Trotzdem übernehmen?`)) {
      return;
    }
    startTransition(async () => {
      await claimOrderAction(orderId);
      router.refresh();
    });
  }

  function release() {
    startTransition(async () => {
      await releaseOrderAction(orderId);
      router.refresh();
    });
  }

  return (
    <div className="flex items-center gap-2 text-xs">
      <span className={assignedStaffName ? "text-[var(--rk-ink-muted)]" : "text-amber-400"}>
        {assignedStaffName ? (isViewer ? "Von dir übernommen" : `Übernommen von ${assignedStaffName}`) : "Nicht übernommen"}
      </span>
      {canEdit &&
        (isViewer ? (
          <button
            type="button"
            disabled={pending}
            onClick={release}
            className="border border-white/15 rounded-full px-3 py-1.5 hover:border-white/50 transition-colors disabled:opacity-50"
          >
            Abgeben
          </button>
        ) : (
          <button
            type="button"
            disabled={pending}
            onClick={claim}
            className="border border-white/15 rounded-full px-3 py-1.5 hover:border-white/50 transition-colors disabled:opacity-50"
          >
            Übernehmen
          </button>
        ))}
    </div>
  );
}