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

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

export interface NotificationToastProps {
  item: NotificationItemData;
  /** Resolved by the hosting app's registry from `item.type`/`item.data`. */
  visual?: NotificationVisual;
  /** react-hot-toast enter/exit flag; drives the slide/fade animation. */
  visible?: boolean;
  /** Whole-card click (usually: mark read + navigate). Shows a chevron affordance. */
  onClick?: () => void;
  onDismiss?: () => void;
  width?: number;
}

/**
 * Rich, ERP-grade notification toast styled to the EDR design system: a
 * colored-accent card (per-type, amber for HIGH) with an icon tile, a bold
 * title, a two-line body, a relative timestamp, and a dismiss button.
 */
export function NotificationToast({
  item,
  visual,
  visible = true,
  onClick,
  onDismiss,
  width = 392,
}: NotificationToastProps) {
  const color = visual?.color ?? "blue";
  const icon = visual?.icon ?? <Bell size={18} strokeWidth={2} />;
  const high = isHighPriority(item.priority);
  const clickable = Boolean(onClick);
  const accent = high ? edr.amber : `var(--mantine-color-${color}-6)`;
  const linkColor = high ? edr.amberText : `var(--mantine-color-${color}-7)`;

  return (
    <Box
      style={{
        position: "relative",
        width,
        maxWidth: "calc(100vw - 32px)",
        display: "flex",
        overflow: "hidden",
        borderRadius: "var(--mantine-radius-lg)",
        background: edr.card,
        border: `1px solid ${edr.border}`,
        boxShadow: "0 10px 30px rgba(16, 24, 40, 0.12)",
        pointerEvents: "auto",
        transform: visible ? "translateX(0)" : "translateX(16px)",
        opacity: visible ? 1 : 0,
        transition: "transform 200ms ease, opacity 200ms ease",
      }}
    >
      {/* colored accent rail */}
      <Box aria-hidden style={{ width: 4, flexShrink: 0, background: accent }} />

      <Box
        role={clickable ? "button" : undefined}
        tabIndex={clickable ? 0 : undefined}
        onClick={onClick}
        onKeyDown={(e) => {
          if (clickable && (e.key === "Enter" || e.key === " ")) {
            e.preventDefault();
            onClick?.();
          }
        }}
        p="sm"
        style={{ flex: 1, minWidth: 0, cursor: clickable ? "pointer" : "default" }}
      >
        <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 gap={6} wrap="nowrap" style={{ minWidth: 0 }} pr={20}>
              <Text fw={700} size="sm" lineClamp={1} style={{ color: edr.text }}>
                {item.title}
              </Text>
              {high && <PriorityTag />}
            </Group>
            <Text
              size="xs"
              lineClamp={2}
              style={{ color: edr.muted, lineHeight: 1.45 }}
            >
              {item.body}
            </Text>
            <Group justify="space-between" wrap="nowrap" gap={6} mt={4}>
              <Text size="xs" style={{ color: edr.muted, whiteSpace: "nowrap" }}>
                {timeAgo(item.createdAt)}
              </Text>
              {clickable && (
                <Group gap={2} wrap="nowrap">
                  <Text size="xs" fw={600} style={{ color: linkColor }}>
                    View details
                  </Text>
                  <ChevronRight size={13} color={linkColor} />
                </Group>
              )}
            </Group>
          </Stack>
        </Group>
      </Box>

      {onDismiss && (
        <ActionIcon
          variant="subtle"
          color="gray"
          size="sm"
          radius="xl"
          aria-label="Dismiss"
          onClick={(e) => {
            e.stopPropagation();
            onDismiss();
          }}
          style={{ position: "absolute", top: 6, right: 6 }}
        >
          <X size={14} />
        </ActionIcon>
      )}
    </Box>
  );
}

export default NotificationToast;
