import { ColumnDef } from "@tanstack/react-table";
import { IncomingRecordDto } from "@/record-management/dto/userRecords/userRecordsDto";
import { Badge } from "@/shared/common/ui/badge";
import { Button } from "@/shared/common/ui/button";
import { Download, Eye, MoreHorizontal, Trash2 } from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/shared/common/ui/dropdown-menu";
import { LetterRecordDto } from "@/shared/dto/External-Portal/External-PortalDto";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { renderStatus } from "@/record-management/utils/renderDetails";

export const portalOutgoingColumn = (
  localizedName: (name?: { am?: string; en?: string }) => string
): ColumnDef<LetterRecordDto>[] => {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const { t, i18n } = useTranslation();
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const navigate = useNavigate();
  const handleViewRecord = (recordId: string) => {
    navigate(`/external-portal/view/${recordId}`);
  };
  return [
    {
      accessorKey: "referenceNumber",
      header: t("userRecord.Letter Number"),
      cell: ({ row }) => (
        <div className="font-medium">{row?.original?.letterNumber}</div>
      ),
    },
    {
      accessorKey: "subject",
      header: t("userRecord.Subject"),
      cell: ({ row }) => {
        const subject = row.original.content[0]?.subject || "-";
        return <div className="text-sm text-gray-700">{subject}</div>;
      },
    },

    {
      accessorKey: "Receiver",
      header: t("userRecord.ReceivingUnit"),
      cell: ({ row }) => {
        const receivingUnit =
          localizedName(row.original.receivingUnits?.[0]?.unit?.name) || "-";
        return <div className="text-sm text-gray-700">{receivingUnit}</div>;
      },
    },
    {
      accessorKey: "status",
      header: t("userRecord.Status"),
      cell: ({ row }) => {
        const status = row?.original?.statusKey;
        return renderStatus(status, status);
      },
    },

    {
      accessorKey: "Date",
      header: t("userRecord.Date Received"),
      cell: ({ row }) => {
        const lang = i18n.language;
        const dispatchedDate = row.original.createdAt;
        const amharicDate = row.original.amharicCreatedAt;
        if (lang.startsWith("am")) {
          return amharicDate ?? "-";
        } else {
          const date = new Date(dispatchedDate).toLocaleDateString(
            i18n.language,
            {
              year: "numeric",
              month: "short",
              day: "numeric",
              hour: "numeric",
              minute: "numeric",
            }
          );

          return date ?? "-";
        }
      },
    },
    {
      id: "actions",
      header: t("userIncoming.Actions"),
      cell: ({ row }) => {
        const record = row.original;

        return (
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="sm">
                <MoreHorizontal className="h-4 w-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem onClick={() => handleViewRecord(record.id)}>
                <Eye className="h-4 w-4 mr-2" />
                {t("userRecord.View")}
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        );
      },
    },
  ];
};
