import React from 'react';
import styled from 'styled-components';
import { useLocale } from '@/app/providers/LocaleProvider';
import { Badge, Button } from '@/shared/components/ui';
import type { NotificationItem } from '@/features/notifications/types/notification.types';
import { formatDateTime } from '@/features/tickets/utils/ticketDisplay';

const Item = styled.div<{ $unread: boolean }>`
  padding: ${({ theme }) => theme.spacing[3]} ${({ theme }) => theme.spacing[4]};
  border-bottom: 1px solid ${({ theme }) => theme.colors.border};
  background-color: ${({ $unread, theme }) =>
    $unread ? theme.colors.surface : theme.colors.background};
  text-align: start;

  &:last-child {
    border-bottom: none;
  }
`;

const Header = styled.div`
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: ${({ theme }) => theme.spacing[2]};
  margin-bottom: ${({ theme }) => theme.spacing[1]};
`;

const Title = styled.div`
  font-weight: ${({ theme }) => theme.typography.fontWeight.medium};
  color: ${({ theme }) => theme.colors.text.primary};
  font-size: ${({ theme }) => theme.typography.fontSize.sm};
`;

const Message = styled.p`
  margin: 0 0 ${({ theme }) => theme.spacing[2]};
  font-size: ${({ theme }) => theme.typography.fontSize.sm};
  color: ${({ theme }) => theme.colors.text.secondary};
  line-height: 1.4;
`;

const Meta = styled.div`
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: ${({ theme }) => theme.spacing[2]};
  font-size: ${({ theme }) => theme.typography.fontSize.xs};
  color: ${({ theme }) => theme.colors.text.secondary};
`;

const Actions = styled.div`
  display: flex;
  flex-wrap: wrap;
  gap: ${({ theme }) => theme.spacing[2]};
  margin-top: ${({ theme }) => theme.spacing[2]};
`;

const TypeDot = styled.span<{ $color: string }>`
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: ${({ $color }) => $color};
  flex-shrink: 0;
  margin-top: 6px;
`;

interface NotificationListItemProps {
  notification: NotificationItem;
  compact?: boolean;
  showTicketLink?: boolean;
  onOpenTicket?: () => void;
  onMarkRead?: (id: string) => void;
  onDelete?: (id: string) => void;
  isMarkingRead?: boolean;
  isDeleting?: boolean;
}

export const NotificationListItem: React.FC<NotificationListItemProps> = ({
  notification,
  compact = false,
  showTicketLink = false,
  onOpenTicket,
  onMarkRead,
  onDelete,
  isMarkingRead = false,
  isDeleting = false,
}) => {
  const { t, locale } = useLocale();

  return (
    <Item $unread={!notification.is_read}>
      <Header>
        <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start', flex: 1 }}>
          <TypeDot $color={notification.color} aria-hidden />
          <div style={{ flex: 1, minWidth: 0 }}>
            <Title>{notification.title}</Title>
            {!compact && (
              <Badge variant="gray" size="sm" style={{ marginTop: 4 }}>
                {notification.type_label}
              </Badge>
            )}
          </div>
        </div>
        {!notification.is_read && (
          <Badge variant="primary" size="sm">
            {t('notifications:labels.unread')}
          </Badge>
        )}
      </Header>
      <Message>{notification.message}</Message>
      <Meta>
        <span>{notification.created_at_human || formatDateTime(notification.created_at, locale)}</span>
      </Meta>
      {(onMarkRead || onDelete || (showTicketLink && onOpenTicket)) && (
        <Actions>
          {showTicketLink && onOpenTicket && (
            <Button type="button" variant="outline" size="sm" onClick={onOpenTicket}>
              {t('notifications:actions.viewTicket')}
            </Button>
          )}
          {!notification.is_read && onMarkRead && (
            <Button
              type="button"
              variant="ghost"
              size="sm"
              loading={isMarkingRead}
              onClick={() => onMarkRead(notification.id)}
            >
              {t('notifications:actions.markRead')}
            </Button>
          )}
          {onDelete && (
            <Button
              type="button"
              variant="ghost"
              size="sm"
              loading={isDeleting}
              onClick={() => onDelete(notification.id)}
            >
              {t('notifications:actions.delete')}
            </Button>
          )}
        </Actions>
      )}
    </Item>
  );
};