"use client";

import { memo, useCallback } from "react";
import Link from "next/link";
import { XMarkIcon } from "@heroicons/react/24/outline";
import {
  CheckCircleIcon,
  ExclamationCircleIcon,
  InformationCircleIcon,
} from "@heroicons/react/24/solid";
import type { Notification } from "@customer-portal/domain/notifications";
import { NOTIFICATION_TYPE } from "@customer-portal/domain/notifications";
import { cn, formatIsoRelative } from "@/shared/utils";

interface NotificationItemProps {
  notification: Notification;
  onMarkAsRead?: (id: string) => void;
  onDismiss?: (id: string) => void;
}

const getNotificationIcon = (type: Notification["type"]) => {
  switch (type) {
    case NOTIFICATION_TYPE.ELIGIBILITY_ELIGIBLE:
    case NOTIFICATION_TYPE.VERIFICATION_VERIFIED:
    case NOTIFICATION_TYPE.ORDER_ACTIVATED:
      return <CheckCircleIcon className="h-5 w-5 text-emerald-500 flex-shrink-0" />;
    case NOTIFICATION_TYPE.ELIGIBILITY_INELIGIBLE:
    case NOTIFICATION_TYPE.VERIFICATION_REJECTED:
    case NOTIFICATION_TYPE.ORDER_FAILED:
      return <ExclamationCircleIcon className="h-5 w-5 text-amber-500 flex-shrink-0" />;
    default:
      return <InformationCircleIcon className="h-5 w-5 text-blue-500 flex-shrink-0" />;
  }
};

export const NotificationItem = memo(function NotificationItem({
  notification,
  onMarkAsRead,
  onDismiss,
}: NotificationItemProps) {
  const handleClick = useCallback(() => {
    if (!notification.read && onMarkAsRead) {
      onMarkAsRead(notification.id);
    }
  }, [notification.id, notification.read, onMarkAsRead]);

  const handleDismiss = useCallback(
    (e: React.MouseEvent) => {
      e.preventDefault();
      e.stopPropagation();
      onDismiss?.(notification.id);
    },
    [notification.id, onDismiss]
  );

  const content = (
    <div
      className={cn(
        "group relative flex gap-3 p-3 rounded-lg transition-colors",
        !notification.read && "bg-primary/5",
        "hover:bg-muted/60"
      )}
      onClick={handleClick}
    >
      {/* Icon */}
      <div className="pt-0.5">{getNotificationIcon(notification.type)}</div>

      {/* Content */}
      <div className="flex-1 min-w-0 space-y-1">
        <p
          className={cn(
            "text-sm leading-snug",
            notification.read ? "text-muted-foreground" : "font-medium text-foreground"
          )}
        >
          {notification.title}
        </p>
        {notification.message && (
          <p className="text-xs text-muted-foreground line-clamp-2">{notification.message}</p>
        )}
        <p className="text-xs text-muted-foreground/70">
          {formatIsoRelative(notification.createdAt)}
        </p>
      </div>

      {/* Dismiss button */}
      <button
        type="button"
        className="absolute top-2 right-2 p-1 rounded opacity-0 group-hover:opacity-100 hover:bg-muted transition-opacity"
        onClick={handleDismiss}
        aria-label="Dismiss notification"
      >
        <XMarkIcon className="h-4 w-4 text-muted-foreground" />
      </button>

      {/* Unread indicator */}
      {!notification.read && (
        <div className="absolute top-3 right-3 h-2 w-2 rounded-full bg-primary group-hover:hidden" />
      )}
    </div>
  );

  if (notification.actionUrl) {
    return (
      <Link href={notification.actionUrl} className="block" prefetch={false}>
        {content}
      </Link>
    );
  }

  return content;
});
