"use client";

import * as React from "react";
import { ChevronDown, ChevronUp } from "lucide-react";
import { toast } from "sonner";
import { moveServiceAction } from "@/lib/actions/admin-services";
import { adminServicesTexts as t } from "@/lib/i18n/admin-services";
import { cn } from "@/lib/utils";

/**
 * Up/down reordering for a service inside its category. No drag-and-drop
 * library is available in this project, so the saved `position` is moved one
 * slot at a time and the whole section is renumbered server-side.
 */
export function PositionArrows({
  serviceId,
  isFirst,
  isLast,
}: {
  serviceId: number;
  isFirst: boolean;
  isLast: boolean;
}) {
  const [pending, startTransition] = React.useTransition();

  const move = (dir: "up" | "down") => {
    const formData = new FormData();
    formData.set("id", String(serviceId));
    formData.set("dir", dir);
    startTransition(async () => {
      const result = await moveServiceAction(formData);
      if (result && result.ok === false) toast.error(result.error);
    });
  };

  const base =
    "grid size-5 place-items-center rounded border text-muted-foreground transition-colors hover:border-blue-600/40 hover:text-foreground disabled:pointer-events-none disabled:opacity-30";

  return (
    <div className="flex flex-col gap-0.5">
      <button
        type="button"
        aria-label={t.group.moveUp}
        title={t.group.moveUp}
        disabled={isFirst || pending}
        onClick={() => move("up")}
        className={cn(base)}
      >
        <ChevronUp className="size-3" />
      </button>
      <button
        type="button"
        aria-label={t.group.moveDown}
        title={t.group.moveDown}
        disabled={isLast || pending}
        onClick={() => move("down")}
        className={cn(base)}
      >
        <ChevronDown className="size-3" />
      </button>
    </div>
  );
}

export default PositionArrows;