import { Bell, Check, Heart, Star, MessageSquare, Tag } from 'lucide-react';
import { Button } from '../components/ui/Button';
import { mockNotifications } from '../utils/mockData';
import { formatDate } from '../utils/format';
import type { NotificationType } from '../types';

const iconMap: Record<NotificationType, typeof Bell> = {
  NEW_OFFER: Tag,
  OFFER_ACCEPTED: Check,
  OFFER_DECLINED: Bell,
  ITEM_SOLD: Star,
  NEW_MESSAGE: MessageSquare,
  ITEM_FAVORITED: Heart,
};

const iconColorMap: Record<NotificationType, string> = {
  NEW_OFFER: 'text-primary-500 bg-primary-50',
  OFFER_ACCEPTED: 'text-green-500 bg-green-50',
  OFFER_DECLINED: 'text-red-500 bg-red-50',
  ITEM_SOLD: 'text-yellow-500 bg-yellow-50',
  NEW_MESSAGE: 'text-blue-500 bg-blue-50',
  ITEM_FAVORITED: 'text-pink-500 bg-pink-50',
};

export function NotificationsPage() {
  return (
    <div>
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Notifications</h1>
        </div>
        <Button variant="ghost" size="sm">Mark All As Read</Button>
      </div>

      <div className="space-y-2">
        {mockNotifications.map(notif => {
          const Icon = iconMap[notif.type] || Bell;
          const colorClass = iconColorMap[notif.type] || 'text-gray-500 bg-gray-50';

          return (
            <div key={notif.id} className={`flex items-center gap-4 p-4 rounded-2xl border transition-colors ${notif.isRead ? 'bg-white border-gray-100' : 'bg-primary-50/50 border-primary-100'}`}>
              <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${colorClass}`}>
                <Icon className="w-5 h-5" />
              </div>
              <div className="flex-1 min-w-0">
                <p className={`text-sm ${notif.isRead ? 'text-gray-600' : 'text-gray-900 font-medium'}`}>{notif.body}</p>
                <p className="text-xs text-gray-400 mt-1">{formatDate(notif.createdAt)}</p>
              </div>
              {(notif.type === 'NEW_OFFER' || notif.type === 'OFFER_ACCEPTED') && (
                <button className="text-xs font-medium text-primary-600 hover:text-primary-700 flex-shrink-0 cursor-pointer">
                  View Offer
                </button>
              )}
              {!notif.isRead && <div className="w-2 h-2 bg-primary-500 rounded-full flex-shrink-0" />}
            </div>
          );
        })}
      </div>
    </div>
  );
}
