"use client";

import { useMemo } from "react";
import { useParams } from "next/navigation";
import { useQueryClient } from "@tanstack/react-query";
import type {
  NotificationItem,
  NotificationListResponse,
} from "@/app/(dashboard)/notifications/notification.types";
import { notificationKeys } from "@/app/(dashboard)/notifications/notification.keys";

function findCachedNotification(
  cache: ReturnType<typeof useQueryClient>,
  id: string,
): NotificationItem | undefined {
  const entries = cache.getQueriesData<NotificationListResponse>({
    queryKey: notificationKeys.all,
  });
  for (const [, response] of entries) {
    const notification = response?.data.notifications.data.find(
      (item) => item.id === id,
    );
    if (notification) return notification;
  }
  return undefined;
}

export default function NotificationDetailsPage() {
  const params = useParams<{ id: string }>();
  const queryClient = useQueryClient();
  const notification = useMemo(
    () => findCachedNotification(queryClient, params.id),
    [params.id, queryClient],
  );
  if (!notification)
    return (
      <section className="bg-expertise-box-bg flex w-full items-center justify-center p-8">
        <div className="rounded-xl bg-white p-8 text-center shadow-sm">
          <h1 className="text-xl font-bold">Notification not found</h1>
          <p className="mt-2 text-sm text-gray-500">
            This notification is no longer available in your local notification
            cache.
          </p>
        </div>
      </section>
    );

  const dataEntries = Object.entries(notification.data ?? {}).filter(
    ([, value]) => value !== undefined && value !== null && value !== "",
  );
  const actionUrl = notification.action_url ?? notification.data?.action_url;
  return (
    <section className="bg-expertise-box-bg w-full p-6">
      <article className="mx-auto w-full max-w-3xl rounded-2xl bg-white p-6 shadow-sm">
        <span className="rounded-full bg-blue-100 px-3 py-1 text-xs font-semibold text-blue-600">
          {notification.notification_type}
        </span>
        <h1 className="mt-4 text-2xl font-bold">{notification.title}</h1>
        <p className="mt-3 whitespace-pre-wrap text-gray-700">
          {notification.message}
        </p>
        <dl className="mt-6 grid gap-4 border-t pt-5 text-sm sm:grid-cols-2">
          <div>
            <dt className="font-medium text-gray-500">Created at</dt>
            <dd className="mt-1">
              {new Date(notification.created_at).toLocaleString()}
            </dd>
          </div>
          <div>
            <dt className="font-medium text-gray-500">Read at</dt>
            <dd className="mt-1">
              {notification.read_at
                ? new Date(notification.read_at).toLocaleString()
                : "Unread"}
            </dd>
          </div>
          {/* {dataEntries.map(([key, value]) => (
            <div key={key}>
              <dt className="font-medium text-gray-500 capitalize">
                {key.replace(/_/g, " ")}
              </dt>
              <dd className="mt-1 break-all">{String(value)}</dd>
            </div>
          ))} */}
        </dl>
        {/* {actionUrl && (
          <a
            href={actionUrl}
            target="_blank"
            rel="noreferrer"
            className="mt-6 inline-flex rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
          >
            Review Activity
          </a>
        )} */}
      </article>
    </section>
  );
}