import { Box, Group, Stack, Text, ThemeIcon } from "@mantine/core";
import { Bell } from "lucide-react";
import { useState } from "react";

import { edr, isHighPriority, PriorityTag } from "./PriorityTag";
import { timeAgo } from "./timeAgo";
import type { NotificationItemData, NotificationVisual } from "./types";

export interface NotificationItemProps {
  item: NotificationItemData;
  /** Resolved by the hosting app's registry from `item.type`/`item.data`. */
  visual?: NotificationVisual;
  onClick?: (item: NotificationItemData) => void;
}

/**
 * One notification row, styled to the EDR design system. Unread rows get a
 * colored left accent (per-type, or amber for HIGH priority) and a soft tint;
 * HIGH-priority rows also show a "High" pill. Icon/color come from the app.
 */
export function NotificationItem({ item, visual, onClick }: NotificationItemProps) {
  const [hovered, setHovered] = useState(false);
  const color = visual?.color ?? "blue";
  const icon = visual?.icon ?? <Bell size={17} strokeWidth={2} />;
  const unread = !item.isRead;
  const high = isHighPriority(item.priority);
  const clickable = Boolean(onClick);

  // Accent + tint follow the type color, except HIGH priority which goes amber.
  const accent = high ? edr.amber : `var(--mantine-color-${color}-6)`;
  const tintBase = high
    ? edr.amberSoft
    : `var(--mantine-color-${color}-0)`;
  const hoverBase = high
    ? edr.amberSoft
    : `var(--mantine-color-${color}-1)`;

  const background = unread
    ? hovered
      ? hoverBase
      : tintBase
    : hovered
      ? "var(--mantine-color-edr-slate-soft-6, var(--mantine-color-gray-0))"
      : "transparent";

  return (
    <Box
      role={clickable ? "button" : undefined}
      tabIndex={clickable ? 0 : undefined}
      onClick={() => onClick?.(item)}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      onKeyDown={(e) => {
        if (clickable && (e.key === "Enter" || e.key === " ")) {
          e.preventDefault();
          onClick?.(item);
        }
      }}
      px="md"
      py="sm"
      style={{
        position: "relative",
        cursor: clickable ? "pointer" : "default",
        borderLeft: "3px solid transparent",
        borderLeftColor: unread ? accent : "transparent",
        background,
        transition: "background 120ms ease",
      }}
    >
      <Group align="flex-start" wrap="nowrap" gap="sm">
        <ThemeIcon
          variant="light"
          color={high ? "edr-accent" : color}
          radius="md"
          size={40}
          style={{ flexShrink: 0 }}
        >
          {icon}
        </ThemeIcon>

        <Stack gap={3} style={{ flex: 1, minWidth: 0 }}>
          <Group justify="space-between" wrap="nowrap" gap={8} align="flex-start">
            <Group gap={6} wrap="nowrap" style={{ minWidth: 0 }}>
              <Text
                fw={unread ? 600 : 500}
                size="sm"
                lineClamp={1}
                style={{ color: unread ? edr.text : edr.muted }}
              >
                {item.title}
              </Text>
              {high && <PriorityTag />}
            </Group>
            <Text
              size="xs"
              style={{
                color: edr.muted,
                whiteSpace: "nowrap",
                flexShrink: 0,
                marginTop: 1,
              }}
            >
              {timeAgo(item.createdAt)}
            </Text>
          </Group>
          <Text
            size="xs"
            lineClamp={2}
            style={{ color: edr.muted, lineHeight: 1.45 }}
          >
            {item.body}
          </Text>
        </Stack>

        {unread && (
          <Box
            aria-hidden
            style={{
              flexShrink: 0,
              width: 8,
              height: 8,
              borderRadius: "50%",
              marginTop: 6,
              background: accent,
            }}
          />
        )}
      </Group>
    </Box>
  );
}

export default NotificationItem;
