import { ColumnDef } from "@tanstack/react-table";
import { IncomingRecordActions } from "./incomingRecordActions";
import { t } from "i18next";
import i18n from "i18next";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/shared/common/ui/tooltip";
import { renderStatus } from "@/record-management/utils/renderDetails";

export const IncomingRecordsColumns = (
  refetch: () => void,
  localizedName: (name?: { am?: string; en?: string }) => string,
  pageIndex: number,
  openDropdownId?: string | null,
  onDropdownChange?: (id: string | null) => void,
): ColumnDef<any>[] => [
  {
    id: "referenceNumber",
    accessorKey: "record.referenceNumber",
    header: () => t("userRecord.Reference Number"),
    cell: ({ row }) => {
      const referenceNumber = row.original.record?.referenceNumber || "-";

      return (
        <TooltipProvider>
          <Tooltip>
            <TooltipTrigger asChild>
              <div className="max-w-[200px] truncate cursor-help font-medium">
                {referenceNumber}
              </div>
            </TooltipTrigger>
            <TooltipContent>
              <p>{referenceNumber}</p>
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>
      );
    },
  },
  {
    id: "Letter_Number",
    accessorKey: "record.letterNumber",
    header: () => t("userRecord.Letter Number"),
    cell: ({ row }) => {
      const letterNumber = row.original.record?.letterNumber || "-";

      return (
        <TooltipProvider>
          <Tooltip>
            <TooltipTrigger asChild>
              <div className="max-w-[200px] truncate cursor-help">
                {letterNumber}
              </div>
            </TooltipTrigger>
            <TooltipContent>
              <p>{letterNumber}</p>
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>
      );
    },
  },
  {
    id: "sendingOrganization",
    accessorKey: "record.metadata.organizationName.en",
    header: () => t("userIncoming.Sending Organization"),
    cell: ({ row }) => {
      const orgName =
        localizedName(row.original.record?.metadata?.organizationName) ||
        localizedName(row.original.record?.initiator?.unit?.name);

      return (
        <TooltipProvider>
          <Tooltip>
            <TooltipTrigger asChild>
              <div className="max-w-[200px] truncate cursor-help">
                {orgName}
              </div>
            </TooltipTrigger>
            <TooltipContent>
              <p>{orgName}</p>
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>
      );
    },
  },
  {
    id: "Subject",
    accessorKey: "record.content",
    header: () => t("userRecord.Subject"),
    cell: ({ row }) => {
      const subject = row.original.record?.content?.[0]?.subject || "-";
      return (
        <TooltipProvider>
          <Tooltip>
            <TooltipTrigger asChild>
              <div className="max-w-[200px] truncate cursor-help">
                {subject}
              </div>
            </TooltipTrigger>
            <TooltipContent>
              <p>{subject}</p>
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>
      );
    },
  },
  {
    id: "Status",
    header: () => t("userRecord.Status"),
    cell: ({ row }) => {
      const status = row.original.status;
      return renderStatus(status, status);
    },
    enableHiding: true,
  },
  {
    id: "dispatchedDate",
    accessorKey: "record.dispatchedDate",
    header: () => t("userRecord.Date"),
    cell: ({ row }) => {
      const record = row.original.record;
      const isAmharic = i18n.language === "am";
      const amharicDate = record?.amharicDispatchedDate;
      const submittedDate = record?.dispatchedDate;

      if (isAmharic && amharicDate) return <div>{amharicDate}</div>;

      const formattedDate = submittedDate
        ? new Date(submittedDate).toLocaleDateString(i18n.language, {
            year: "numeric",
            month: "short",
            day: "numeric",
            hour: "numeric",
            minute: "numeric",
          })
        : "-";

      return <div>{formattedDate}</div>;
    },
  },
  {
    id: "Actions",
    header: () => t("userRecord.Actions"),
    cell: ({ row }) => {
      const rowData = row.original;
      const dropdownId = rowData.id || "";
      return (
        <IncomingRecordActions
          shouldAddEditAction={
            row.original.statusKey === "Draft" ? true : false
          }
          rowData={rowData}
          refetchTable={refetch}
          type="history"
          pageIndex={pageIndex}
          isDropdownOpen={openDropdownId === dropdownId}
          onDropdownOpenChange={(open) => {
            onDropdownChange?.(open ? dropdownId : null);
          }}
          dropdownId={dropdownId}
        />
      );
    },
  },
];
