"use client";
import { TNotificationDetailsResponse } from "@/lib/api/types/NotificationHistory";
import { capitalize, unixToDate } from "@/utils/shared";
import { sanitizeHtmlWithStyles } from "@/lib/utils";
import { FC } from "react";
import IsVisible from "./IsVisible";
import Status from "./Status";

interface IProps {
  data: TNotificationDetailsResponse;
}

export const NotificationDetailsCard: FC<IProps> = ({ data }) => {
  return (
    <div className="rounded-2xl bg-white p-6 shadow-default dark:bg-gray-dark">
      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
        <DetailItem title="Recipient" value={data.recipient?.full_name} />
        <DetailItem title="Event Type" value={data.event_type} />
        <DetailItem title="Link" value={data.link} />
        <DetailItem title="Priority">
          <Status status={data.priority ?? ""}>
            {capitalize(data.priority ?? "")}
          </Status>
        </DetailItem>
        <DetailItem title="Type">
          <Status status={data.type ?? ""}>
            {capitalize(data.type ?? "")}
          </Status>
        </DetailItem>
        <DetailItem
          title="Seen at"
          value={unixToDate({ unix: data.seen_at ?? 0, hasTime: false })}
        />
        <DetailItem
          title="Is Scheduled"
          value={data.is_scheduled ? "Yes" : "No"}
        />
        <DetailItem title="Has seen">
          <Status status={data.seen ? "success" : "failed"}>
            {data.seen ? "Yes" : "No"}
          </Status>
        </DetailItem>
      </div>
      <IsVisible condition={!!data.message}>
        <hr className="my-5" />
        <DetailItem title="Message">
          <div 
            className="text-base leading-relaxed"
            dangerouslySetInnerHTML={{ 
              __html: sanitizeHtmlWithStyles(data.message || '') 
            }}
          />
        </DetailItem>
      </IsVisible>
    </div>
  );
};

const DetailItem: FC<{
  title: string;
  value?: string;
  children?: React.ReactNode;
}> = ({ title, value, children }) => {
  return (
    <div className="rounded-lg bg-gray-2 p-4 shadow-sm dark:bg-gray-7">
      <small className="text-sm font-light text-black dark:text-white">
        {title}
      </small>
      {value ? <p className="mt-2 text-base font-normal">{value}</p> : null}
      {children ? <div className="mt-1">{children}</div> : null}
    </div>
  );
};
