"use client";

import * as React from "react";
import Link from "next/link";

import { Button } from "@/components/ui/button";
import { useDashboardStatusChange } from "@/app/dashboard/_components/use-dashboard-status-change";

type MasterReviewStatusCellProps = {
  id: number;
  masterName: string;
  editHref: string;
  status: string;
  changeStatusUrl: string;
  fallbackError: string;
  defaultSuccessMessage: string;
  nameContent?: React.ReactNode;
};

export function MasterReviewStatusCell({
  id,
  masterName,
  editHref,
  status,
  changeStatusUrl,
  fallbackError,
  defaultSuccessMessage,
  nameContent,
}: MasterReviewStatusCellProps) {
  const { pendingStatus, changeStatus } = useDashboardStatusChange({
    changeUrl: changeStatusUrl,
    fallbackError,
    defaultSuccessMessage,
  });

  const nameBlock =
    nameContent ?? (
      <Link href={editHref} className="font-medium text-primary hover:underline">
        {masterName}
      </Link>
    );

  if (status !== "R") {
    return <>{nameBlock}</>;
  }

  return (
    <div className="space-y-2 min-w-[200px]">
      {nameBlock}
      <p className="text-amber-800 text-xs font-medium">Under review</p>
      <div className="flex flex-wrap gap-1">
        <Button
          type="button"
          size="sm"
          variant="secondary"
          className="h-7 text-xs"
          disabled={pendingStatus !== null}
          onClick={() => changeStatus(id, "A")}
        >
          {pendingStatus === "A" ? "Approving..." : "Approve"}
        </Button>
        <Button
          type="button"
          size="sm"
          variant="outline"
          className="h-7 text-xs"
          disabled={pendingStatus !== null}
          onClick={() => changeStatus(id, "I")}
        >
          {pendingStatus === "I" ? "Saving..." : "Inactive"}
        </Button>
      </div>
    </div>
  );
}