"use client";

import Image from "next/image";
import Link from "next/link";
import BoldIcon from "@/components/ui/BoldIcon";
import { buildStorageUrl } from "@/components/main/BaseUrl";
import {
  getNotificationActionMeta,
  getNotificationVisualKind,
} from "@/constants/notificationFilters";
import { cn } from "@/lib/utils";
import { useTranslation } from "react-i18next";
import type { INotification } from "@/app/settings/notifications/page";

const TINT_CLASS: Record<string, string> = {
  red: "text-red-500",
  green: "text-green-500",
  blue: "text-[#0095f6]",
  pink: "text-[#FF107D]",
};

type Props = {
  item: INotification;
  href: string;
  title: string;
  description: string;
};

export default function NotificationRow({
  item,
  href,
  title,
  description,
}: Props) {
  const { t } = useTranslation("common");
  const action = getNotificationActionMeta(item.type);
  const visual = getNotificationVisualKind(item.type);
  const actor = item.actor;

  const avatarSrc = actor?.profile_image
    ? buildStorageUrl(actor.profile_image)
    : "/images/fake-avatar.png";

  return (
    <Link
      href={href}
      className="mb-3 flex w-full items-start gap-3 border-b border-border-primary-light pb-3 last:border-0"
    >
      <div className="relative h-12 w-12 shrink-0">
        <div
          className={cn(
            "relative h-12 w-12 overflow-hidden bg-neutral-200 dark:bg-neutral-800",
            "rounded-full"
          )}
        >
          {visual === "user" ? (
            <Image
              src={avatarSrc}
              alt={actor?.user_name || t("common.user")}
              fill
              className="object-cover"
              unoptimized
            />
          ) : (
            <div className="flex h-full w-full items-center justify-center">
              <BoldIcon
                name={visual === "post" ? "gallery" : visual === "project" ? "briefcase" : visual === "billboard" ? "flash-circle" : "teacher"}
                size={22}
                className="dark:invert"
              />
            </div>
          )}
        </div>
        <span
          className={cn(
            "absolute -bottom-0.5 -right-0.5 flex h-5 w-5 items-center justify-center rounded-full border-2 border-background bg-white dark:bg-neutral-900",
            action.tint ? TINT_CLASS[action.tint] : "text-neutral-500"
          )}
          title={t(action.labelKey)}
        >
          <BoldIcon name={action.icon} size={11} className="dark:invert" />
        </span>
        {!item.read ? (
          <span className="absolute -left-0.5 -top-0.5 h-2.5 w-2.5 rounded-full bg-[#05FF00] ring-2 ring-background" />
        ) : null}
      </div>

      <div className="min-w-0 flex-1 pt-0.5">
        <div className="flex items-start justify-between gap-2">
          <p className="text-sm font-semibold leading-5">{title}</p>
          <span className="shrink-0 text-[10px] text-neutral-400">
            {item.createdAt}
          </span>
        </div>
        <p className="mt-1 text-xs leading-5 text-neutral-600 dark:text-neutral-300">
          {description}
        </p>
      </div>
    </Link>
  );
}
