import { ColumnDef } from "@tanstack/react-table";
import UserRecordsActions from "./userRecordsActions";
import { DataTableColumnHeader } from "@/shared/common/ui/dataTableColumnHeader";
import { t } from "i18next";
import { RecordDto } from "@/record-management/dto/userRecords/userRecordsDto";
import i18n from "i18next";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/shared/common/ui/tooltip";
// Utility component to show tooltip on hover
const OverflowTooltip = ({
  children,
  text,
  maxWidth = 200,
}: {
  children: React.ReactNode;
  text: string;
  maxWidth?: number;
}) => {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <div
          className="overflow-hidden text-ellipsis whitespace-nowrap"
          style={{ maxWidth: `${maxWidth}px` }}
        >
          {children}
        </div>
      </TooltipTrigger>
      <TooltipContent>
        <p className="max-w-xs break-words">{text}</p>
      </TooltipContent>
    </Tooltip>
  );
};

export const SoftDeleteColumns = (
  refetch: () => void
): ColumnDef<RecordDto>[] => {
  return [
    {
      id: "letterName",
      header: ({ column }) => (
        <DataTableColumnHeader
          column={column}
          title={t("viewDetail.fileName")}
        />
      ),
      accessorKey: "letterName",
      cell: ({ row }) => {
        const rowData = row.original;
        const letterName = rowData.letterName || "_";
        return (
          <div className="flex gap-1">
            <span>{letterName}</span>
          </div>
        );
      },
      enableHiding: true,
    },
    {
      id: "Subject",
      header: () => t("userRecord.Subject"),
      cell: ({ row }) => {
        const rowData = row.original;
        const subject = rowData.content?.[0]?.subject || "-";

        return (
          <OverflowTooltip text={subject} maxWidth={200}>
            <div className="overflow-hidden text-ellipsis whitespace-nowrap">
              {subject}
            </div>
          </OverflowTooltip>
        );
      },
      enableHiding: true,
    },
    {
      id: "Date",
      header: () => t("userRecord.Date"),
      cell: ({ row }) => {
        const record = row.original;

        // Check current language
        const isAmharic = i18n.language === "am";

        // Use the Amharic date if language is Amharic and date is available
        if (isAmharic && record.amharicCreatedAt) {
          return <div>{record.amharicCreatedAt}</div>;
        }

        // Otherwise, use the default formatted English date
        const safeLocale = ["am", "en"].includes(i18n.language)
          ? i18n.language
          : "en"; // fallback to English if invalid

        const createdDate = record.createdAt
          ? new Date(record.updatedAt).toLocaleDateString(safeLocale, {
            year: "numeric",
            month: "short",
            day: "numeric",
            hour: "numeric",
            minute: "numeric",
          })
          : "-";

        return <div>{createdDate}</div>;
      },
    },
    {
      id: "Actions",
      header: () => t("userRecord.Actions"),
      cell: ({ row }) => {
        const rowData = row.original;
        return (
          <UserRecordsActions
            rowData={rowData as unknown as RecordDto}
            refetchTable={refetch}
            fromTable={true}
            waitForAllCollaboratorsBeforeAction={false}
          />
        );
      },
    },
  ];
};
