'use client';
import { FunctionComponent, KeyboardEvent } from 'react';
import Box from '@mui/material/Box';
import ButtonBase from '@mui/material/ButtonBase';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { AppIcon } from '@/components/common';
import type { AppNotification } from '@/services/notifications/types';
import { notificationIcon, notificationTint } from './notificationIcon';

export interface NotificationRowProps {
  notification: AppNotification;
  /** Pre-formatted relative time (decaying to Shamsi) — the caller owns locale. */
  timeLabel: string;
  /** Whether `notificationDeepLink` resolved a route — drives interactive chrome vs a plain, static surface. */
  navigable: boolean;
  /** Marks the notification read (optimistic) and, when navigable, navigates. */
  onOpen: () => void;
}

/**
 * One row in the notification center. **Unread** rows are emphasised (a leading dot + bolded title + a soft
 * tint); a **per-kind tinted icon container** (booking teal / payout success / ticket terracotta / refund
 * info / nurse-trust) replaces the uniform primary icon. **Navigable** rows (their `data` deep-links
 * somewhere) render as a real `ButtonBase` with a trailing chevron and a visible `:focus-visible` ring;
 * **non-navigable** rows (`data.kind === 'none'` or a target that doesn't apply to this role) render as a
 * plain, static surface — no ripple, no pointer cursor, no chevron — so a tap that does nothing never
 * *looks* like it should do something, while still marking the row read. Purely presentational — the caller
 * supplies the formatted time, whether it's navigable, and the `onOpen` behaviour (mark-read +
 * `notificationDeepLink`). `title`/`body` are server-rendered copy (not client i18n keys).
 * @component NotificationRow
 */
const NotificationRow: FunctionComponent<NotificationRowProps> = ({ notification, timeLabel, navigable, onOpen }) => {
  const unread = !notification.isRead;
  const tint = notificationTint(notification.data.kind);

  const content = (
    <Stack direction="row" sx={{ gap: 1.25, alignItems: 'flex-start', width: '100%' }}>
      <Box
        sx={{
          width: 36,
          height: 36,
          borderRadius: '50%',
          bgcolor: tint.bg,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          flexShrink: 0,
        }}
      >
        <AppIcon icon={notificationIcon(notification.data.kind)} size={18} color={tint.fg} />
      </Box>
      <Stack sx={{ gap: 0.25, flexGrow: 1, minWidth: 0 }}>
        <Stack direction="row" sx={{ gap: 0.75, alignItems: 'center' }}>
          {unread ? (
            <Box
              data-testid="notification-unread-dot"
              sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: 'var(--bal-primary)', flexShrink: 0 }}
            />
          ) : null}
          <Typography variant="subtitle2" sx={{ fontWeight: unread ? 800 : 600 }}>
            {notification.title}
          </Typography>
        </Stack>
        {notification.body ? (
          <Typography variant="body2" sx={{ color: 'var(--bal-text-secondary)' }}>
            {notification.body}
          </Typography>
        ) : null}
        <Typography variant="caption" sx={{ color: 'var(--bal-text-secondary)' }}>
          {timeLabel}
        </Typography>
      </Stack>
      {navigable ? <AppIcon icon="forward" size={18} color="var(--bal-text-secondary)" /> : null}
    </Stack>
  );

  if (navigable) {
    return (
      <ButtonBase
        onClick={onOpen}
        data-testid="notification-row"
        data-unread={unread ? 'true' : 'false'}
        data-navigable="true"
        sx={{
          display: 'block',
          width: '100%',
          textAlign: 'start',
          p: 1.5,
          borderRadius: 2,
          border: '1px solid',
          borderColor: 'divider',
          bgcolor: unread ? 'var(--bal-primary-soft)' : 'var(--bal-bg-paper)',
          '&:focus-visible': { outline: '2px solid var(--bal-focus-ring)', outlineOffset: 2 },
        }}
      >
        {content}
      </ButtonBase>
    );
  }

  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      onOpen();
    }
  };

  return (
    <Box
      onClick={onOpen}
      onKeyDown={onKeyDown}
      role="button"
      tabIndex={0}
      data-testid="notification-row"
      data-unread={unread ? 'true' : 'false'}
      data-navigable="false"
      sx={{
        width: '100%',
        textAlign: 'start',
        p: 1.5,
        borderRadius: 2,
        border: '1px solid',
        borderColor: 'divider',
        bgcolor: unread ? 'var(--bal-primary-soft)' : 'var(--bal-bg-paper)',
        cursor: 'default',
        '&:focus-visible': { outline: '2px solid var(--bal-focus-ring)', outlineOffset: 2 },
      }}
    >
      {content}
    </Box>
  );
};

export default NotificationRow;
