import { AlertTriangle, Archive, Bell, CheckCircle2, Clock3, MessageCircle, Trash2, UserRoundCheck } from 'lucide-react';
import { getPwaNotificationMessage, getPwaNotificationTitle, pwaNotificationTypeLabels } from './pwaNotificationUtils';
import { formatPwaNotificationTime } from './PwaNotificationTime';
import useBidirectionalNotificationSwipe from './useBidirectionalNotificationSwipe';

const typeIcons = {
  task_assigned: CheckCircle2,
  task_new: CheckCircle2,
  task_created: CheckCircle2,
  task_status_changed: CheckCircle2,
  comment_created: MessageCircle,
  comment_new: MessageCircle,
  mention: UserRoundCheck,
  deadline_soon: Clock3,
  task_overdue: AlertTriangle,
  system: Bell,
};

export default function PwaNotificationCard({ notification, onOpen, onToggleUnread, onArchive, onDelete }) {
  const Icon = typeIcons[notification.type] || Bell;
  const read = notification.is_read || notification.read_at;
  const { translateX, phase, dragging, exiting, direction, progress, swipeHandlers } = useBidirectionalNotificationSwipe({
    rightAction: 'archive',
    leftAction: 'delete',
    onExitComplete: (action) => {
      if (action === 'archive') onArchive(notification);
      if (action === 'delete') onDelete(notification);
    },
  });

  return (
    <article className={`pwa-notification-swipe ${phase} ${direction || ''} ${dragging ? 'dragging' : ''} ${exiting ? 'exiting' : ''}`} style={{ '--notification-swipe-progress': progress }}>
      <div className="pwa-notification-swipe-action archive"><Archive size={18} /><span>آرشیو</span></div>
      <div className="pwa-notification-swipe-action delete"><Trash2 size={18} /><span>حذف</span></div>
      <div
        className={`pwa-notification-card ${read ? 'read' : 'unread'}`}
        style={{ '--notification-card-translate-x': `${translateX}px` }}
        {...swipeHandlers}
      >
        <button type="button" className="pwa-notification-card-main" onClick={() => onOpen(notification)}>
          <span className="pwa-notification-card-icon"><Icon size={18} /></span>
          <span className="pwa-notification-card-copy">
            <small>مدیریت پروژه · {pwaNotificationTypeLabels[notification.type] || 'اعلان'}</small>
            <strong>{getPwaNotificationTitle(notification)}</strong>
            <span>{getPwaNotificationMessage(notification)}</span>
            <em>{formatPwaNotificationTime(notification.created_at)}</em>
          </span>
          {!read && <i aria-label="خوانده‌نشده" />}
        </button>
        {read && (
          <button type="button" className="pwa-notification-unread-btn" onClick={() => onToggleUnread(notification)}>
            خوانده‌نشده
          </button>
        )}
      </div>
    </article>
  );
}
