Alerts & Actions Laboratory

import { useState } from "react";
import {
  Paper,
  Group,
  Stack,
  Text,
  Badge,
  ScrollArea,
  ActionIcon,
  Tabs,
  Tooltip,
  Title,
  Button,
  Box,
  UnstyledButton,
} from "@mantine/core";
import {
  HiBell,
  HiExclamationTriangle,
  HiInformationCircle,
  HiCheck,
  HiXMark,
} from "react-icons/hi2";
import type { AlertItem, AlertSeverity } from "./types";
import { sampleAlerts, SEVERITY_COLORS, ACTION_LABELS } from "./sampleData";

// ── CSS keyframe injection (once, via a style tag approach) ────────────────
const PULSE_STYLE = `
@keyframes alertPulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.35; }
  100% { opacity: 1; }
}
.alert-pulse-border {
  animation: alertPulse 1.6s ease-in-out infinite;
}
`;

function injectPulseStyles() {
  if (typeof document !== "undefined" && !document.getElementById("alert-pulse-css")) {
    const el = document.createElement("style");
    el.id = "alert-pulse-css";
    el.textContent = PULSE_STYLE;
    document.head.appendChild(el);
  }
}
injectPulseStyles();

// ── Helpers ────────────────────────────────────────────────────────────────
function relativeTime(iso: string): string {
  const diffMs = new Date("2026-03-27T14:00:00").getTime() - new Date(iso).getTime();
  const mins = Math.round(diffMs / 60000);
  if (mins < 1) return "just now";
  if (mins < 60) return `${mins} min ago`;
  const hrs = Math.floor(mins / 60);
  const rem = mins % 60;
  if (rem === 0) return `${hrs} hr ago`;
  return `${hrs} hr ${rem} min ago`;
}

function SeverityIcon({ severity, size = 18 }: { severity: AlertSeverity; size?: number }) {
  const color = SEVERITY_COLORS[severity];
  if (severity === "critical") return <HiBell size={size} color={color} />;
  if (severity === "warning") return <HiExclamationTriangle size={size} color={color} />;
  return <HiInformationCircle size={size} color={color} />;
}

// ── Feed item ──────────────────────────────────────────────────────────────
function FeedItem({
  alert,
  onMarkRead,
  onDismiss,
}: {
  alert: AlertItem;
  onMarkRead: (id: string) => void;
  onDismiss: (id: string) => void;
}) {
  const borderColor = SEVERITY_COLORS[alert.severity];
  const isCritical = alert.severity === "critical";

  return (
    <UnstyledButton
      style={{ width: "100%", cursor: "default" }}
      onClick={() => !alert.isRead && onMarkRead(alert.id)}
    >
      <Box
        style={{
          display: "flex",
          gap: 10,
          padding: "10px 12px",
          borderRadius: 8,
          background: alert.isRead ? "transparent" : "rgba(34,139,230,0.04)",
          borderLeft: `3px solid ${borderColor}`,
          position: "relative",
          transition: "background 0.15s",
        }}
      >
        {/* Pulsing overlay for critical items */}
        {isCritical && (
          <span
            className="alert-pulse-border"
            style={{
              position: "absolute",
              inset: 0,
              borderRadius: 8,
              borderLeft: `3px solid ${borderColor}`,
              pointerEvents: "none",
            }}
          />
        )}

        {/* Severity icon */}
        <Box style={{ flexShrink: 0, paddingTop: 2 }}>
          <SeverityIcon severity={alert.severity} />
        </Box>

        {/* Content */}
        <Stack gap={2} style={{ flex: 1, minWidth: 0 }}>
          <Group justify="space-between" align="flex-start" gap={6} wrap="nowrap">
            <Text size="sm" fw={alert.isRead ? 400 : 600} lineClamp={1} style={{ flex: 1 }}>
              {alert.title}
            </Text>
            <Text size="xs" c="dimmed" style={{ flexShrink: 0, whiteSpace: "nowrap" }}>
              {relativeTime(alert.timestamp)}
            </Text>
          </Group>

          <Text size="xs" c="dimmed" lineClamp={2}>
            {alert.description}
          </Text>

          <Group justify="space-between" align="center" mt={4}>
            <Text size="xs" c="blue.6" fw={500}>
              {alert.relatedEntity}
            </Text>
            <Group gap={4}>
              <Tooltip label={ACTION_LABELS[alert.actionRequired]} withArrow position="top">
                <Badge
                  size="xs"
                  variant="light"
                  color={
                    alert.severity === "critical"
                      ? "red"
                      : alert.severity === "warning"
                        ? "yellow"
                        : "blue"
                  }
                  radius="sm"
                  style={{ cursor: "pointer" }}
                >
                  {ACTION_LABELS[alert.actionRequired]}
                </Badge>
              </Tooltip>
              <Tooltip label="Dismiss" withArrow position="top">
                <ActionIcon
                  size="xs"
                  variant="subtle"
                  color="gray"
                  onClick={(e) => {
                    e.stopPropagation();
                    onDismiss(alert.id);
                  }}
                >
                  <HiXMark size={12} />
                </ActionIcon>
              </Tooltip>
            </Group>
          </Group>
        </Stack>
      </Box>
    </UnstyledButton>
  );
}

// ── Main component ─────────────────────────────────────────────────────────
export function Variant1_NotificationFeed() {
  const [alerts, setAlerts] = useState<AlertItem[]>(sampleAlerts);
  const [activeTab, setActiveTab] = useState<string | null>("all");

  const unreadCount = alerts.filter((a) => !a.isRead && !a.isSnoozed).length;
  const criticalCount = alerts.filter((a) => a.severity === "critical" && !a.isSnoozed).length;

  const markRead = (id: string) => {
    setAlerts((prev) => prev.map((a) => (a.id === id ? { ...a, isRead: true } : a)));
  };

  const dismiss = (id: string) => {
    setAlerts((prev) => prev.map((a) => (a.id === id ? { ...a, isSnoozed: true } : a)));
  };

  const markAllRead = () => {
    setAlerts((prev) => prev.map((a) => ({ ...a, isRead: true })));
  };

  const visible = alerts
    .filter((a) => !a.isSnoozed)
    .filter((a) => {
      if (activeTab === "critical") return a.severity === "critical";
      if (activeTab === "unread") return !a.isRead;
      return true;
    })
    // newest first
    .sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());

  return (
    <Paper withBorder shadow="sm" radius="md" p="md" style={{ width: "100%" }}>
      {/* Header */}
      <Group justify="space-between" align="center" mb="xs">
        <Group gap="xs" align="center">
          <Title order={5} style={{ letterSpacing: -0.3 }}>
            Alerts
          </Title>
          {unreadCount > 0 && (
            <Badge color="red" size="sm" variant="filled" radius="xl">
              {unreadCount}
            </Badge>
          )}
        </Group>
        <Button
          size="xs"
          variant="subtle"
          color="gray"
          leftSection={<HiCheck size={13} />}
          onClick={markAllRead}
          disabled={unreadCount === 0}
        >
          Mark all read
        </Button>
      </Group>

      {/* Filter tabs */}
      <Tabs value={activeTab} onChange={setActiveTab} mb="sm">
        <Tabs.List>
          <Tabs.Tab value="all">All ({alerts.filter((a) => !a.isSnoozed).length})</Tabs.Tab>
          <Tabs.Tab
            value="critical"
            color="red"
            leftSection={<HiBell size={13} color={criticalCount > 0 ? "#fa5252" : undefined} />}
          >
            Critical ({criticalCount})
          </Tabs.Tab>
          <Tabs.Tab value="unread">Unread ({unreadCount})</Tabs.Tab>
        </Tabs.List>
      </Tabs>

      {/* Feed */}
      <ScrollArea style={{ maxHeight: 460 }} scrollbarSize={6} offsetScrollbars>
        <Stack gap={4}>
          {visible.length === 0 ? (
            <Text size="sm" c="dimmed" ta="center" py="xl">
              No alerts to show.
            </Text>
          ) : (
            visible.map((alert) => (
              <FeedItem key={alert.id} alert={alert} onMarkRead={markRead} onDismiss={dismiss} />
            ))
          )}
        </Stack>
      </ScrollArea>
    </Paper>
  );
}