import { useTranslation } from "react-i18next";
import CheckIcon from "~/components/ui/icons/CheckIcon";
import XIcon from "~/components/ui/icons/XIcon";
import ShowPayloadModalButton from "~/components/ui/json/ShowPayloadModalButton";
import TableSimple from "~/components/ui/tables/TableSimple";
import { redactDiagnosticJsonString } from "~/utils/redaction";
import { useLocaleFormatters } from "~/locale/format";
import type { IGetMessagesData } from "../services/.server/NotificationService";

export function sanitizeNotificationPayloadForDisplay(payload: unknown) {
  const value = typeof payload === "string" ? payload : JSON.stringify(payload ?? null);
  return redactDiagnosticJsonString(value);
}

export default function NotificationMessagesTable({ items, withPagination = true }: { items: IGetMessagesData | null; withPagination?: boolean }) {
  const { t } = useTranslation();
  const formatters = useLocaleFormatters();
  const channelLabel = (channel: string) =>
    t(`notifications.center.channels.${channel.toLowerCase().replace(/[-\s]/g, "_")}`, { defaultValue: t("notifications.center.channels.unknown") });
  const templateLabel = (templateIdentifier: string) =>
    t(`notifications.admin.messageTemplates.${templateIdentifier}`, { defaultValue: t("notifications.admin.messages.unknownTemplate") });

  return (
    <TableSimple
      items={items?.data ?? []}
      pagination={
        !withPagination
          ? undefined
          : {
              page: (items?.page ?? 0) + 1,
              pageSize: items?.pageSize ?? 0,
              totalItems: items?.totalCount ?? 0,
              totalPages: Math.ceil((items?.totalCount ?? 0) / (items?.pageSize ?? 0)),
            }
      }
      headers={[
        {
          name: "createdAt",
          title: t("notifications.admin.messages.createdAt"),
          value: (i) => (
            <div className="flex flex-col">
              <div>{formatters.date(i.createdAt, { dateStyle: "medium" })}</div>
              <div className="text-xs">{formatters.relativeDate(i.createdAt)}</div>
            </div>
          ),
        },
        { name: "templateIdentifier", title: t("notifications.admin.messages.template"), value: (i) => templateLabel(i.templateIdentifier) },
        { name: "channel", title: t("notifications.admin.messages.channel"), value: (i) => channelLabel(i.channel) },
        {
          name: "seen",
          title: t("notifications.admin.messages.seen"),
          value: (i) => <div>{i.seen ? <CheckIcon className="text-theme-500 h-4 w-4" /> : <XIcon className="text-muted-foreground h-4 w-4" />}</div>,
        },
        {
          name: "read",
          title: t("notifications.admin.messages.read"),
          value: (i) => <div>{i.read ? <CheckIcon className="text-theme-500 h-4 w-4" /> : <XIcon className="text-muted-foreground h-4 w-4" />}</div>,
        },
        {
          name: "payload",
          title: t("notifications.admin.messages.payload"),
          value: (i) => (
            <pre className="max-w-sm truncate">
              <ShowPayloadModalButton payload={sanitizeNotificationPayloadForDisplay(i.payload)} />
            </pre>
          ),
        },
        { name: "provider", title: t("notifications.admin.messages.provider"), value: () => t("notifications.admin.provider.novu") },
      ]}
    ></TableSimple>
  );
}