'use client';
import { FunctionComponent } 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 } from './notificationIcon';

export interface NotificationRowProps {
  notification: AppNotification;
  /** Pre-formatted Shamsi time — the caller owns locale. */
  timeLabel: string;
  /** Marks the notification read (optimistic) and, when it deep-links, navigates. */
  onOpen: () => void;
}

/**
 * One row in the notification center. **Unread** rows are emphasised (a leading dot + bolded title + a soft
 * tint); opening a row marks it read (optimistic) and, when its `data` deep-links, navigates there. The
 * icon is chosen from the parsed deep-link class. Purely presentational — the caller supplies the formatted
 * time 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, onOpen }) => {
  const unread = !notification.isRead;
  return (
    <ButtonBase
      onClick={onOpen}
      data-testid="notification-row"
      data-unread={unread ? 'true' : 'false'}
      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)',
      }}
    >
      <Stack direction="row" sx={{ gap: 1.25, alignItems: 'flex-start', width: '100%' }}>
        <AppIcon icon={notificationIcon(notification.data.kind)} size={20} color="var(--bal-primary)" />
        <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>
      </Stack>
    </ButtonBase>
  );
};

export default NotificationRow;
