import React, { useState } from 'react';

const allNotifications = [
  { 
    id: 1, 
    type: 'mention', 
    server: 'AeThex Foundation', 
    serverIcon: 'F', 
    serverGradient: 'linear-gradient(135deg, #ff0000, #990000)',
    channel: 'general',
    author: 'Trevor',
    authorAvatar: 'T',
    message: '@Anderson check out the new auth flow!',
    time: '2 minutes ago',
    unread: true,
  },
  {
    id: 2,
    type: 'reply',
    server: 'AeThex Labs',
    serverIcon: 'L',
    serverGradient: 'linear-gradient(135deg, #ffa500, #ff8c00)',
    channel: 'testing',
    author: 'Sarah',
    authorAvatar: 'S',
    message: 'Great point! I\'ll add that to the test suite.',
    time: '15 minutes ago',
    unread: true,
  },
  {
    id: 3,
    type: 'dm',
    author: 'Marcus',
    authorAvatar: 'M',
    authorGradient: 'linear-gradient(135deg, #0066ff, #003380)',
    message: 'The API integration is ready for review!',
    time: '1 hour ago',
    unread: true,
  },
  {
    id: 4,
    type: 'friend-request',
    author: 'NewDev123',
    authorAvatar: 'N',
    message: 'sent you a friend request.',
    time: '2 hours ago',
    unread: false,
  },
  {
    id: 5,
    type: 'server-invite',
    server: 'Dev Community',
    serverIcon: 'DC',
    author: 'JohnDev',
    message: 'invited you to join the server.',
    time: '3 hours ago',
    unread: false,
  },
];

export default function NotificationsPanel({ onClose, onNotificationClick }) {
  const [filter, setFilter] = useState('all');
  const [notifications, setNotifications] = useState(allNotifications);

  const filters = [
    { id: 'all', label: 'All' },
    { id: 'mentions', label: 'Mentions' },
    { id: 'unreads', label: 'Unreads' },
  ];

  const filteredNotifications = notifications.filter((n) => {
    if (filter === 'mentions') return n.type === 'mention';
    if (filter === 'unreads') return n.unread;
    return true;
  });

  const markAllRead = () => {
    setNotifications((prev) => prev.map((n) => ({ ...n, unread: false })));
  };

  const clearAll = () => {
    setNotifications([]);
  };

  const getNotificationIcon = (type) => {
    switch (type) {
      case 'mention': return '@';
      case 'reply': return '↩️';
      case 'dm': return '💬';
      case 'friend-request': return '👋';
      case 'server-invite': return '✉️';
      default: return '🔔';
    }
  };

  return (
    <div className="notifications-panel">
      <div className="notifications-header">
        <h3>Inbox</h3>
        <div className="notifications-actions">
          <button className="mark-read-btn" onClick={markAllRead}>Mark All Read</button>
          <button className="clear-btn" onClick={clearAll}>Clear All</button>
        </div>
        <button className="notifications-close" onClick={onClose}>✕</button>
      </div>

      <div className="notifications-filters">
        {filters.map((f) => (
          <button
            key={f.id}
            className={`filter-btn ${filter === f.id ? 'active' : ''}`}
            onClick={() => setFilter(f.id)}
          >
            {f.label}
          </button>
        ))}
      </div>

      <div className="notifications-list">
        {filteredNotifications.length === 0 ? (
          <div className="notifications-empty">
            <span className="empty-icon">📭</span>
            <p>You're all caught up!</p>
          </div>
        ) : (
          filteredNotifications.map((notification) => (
            <div 
              key={notification.id}
              className={`notification-item ${notification.unread ? 'unread' : ''}`}
              onClick={() => onNotificationClick?.(notification)}
            >
              <div className="notification-icon-container">
                {notification.type === 'dm' || notification.type === 'friend-request' ? (
                  <div 
                    className="notification-avatar"
                    style={{ background: notification.authorGradient || '#36393f' }}
                  >
                    {notification.authorAvatar}
                  </div>
                ) : notification.serverIcon ? (
                  <div 
                    className="notification-server-icon"
                    style={{ background: notification.serverGradient || '#36393f' }}
                  >
                    {notification.serverIcon}
                  </div>
                ) : (
                  <div className="notification-type-icon">
                    {getNotificationIcon(notification.type)}
                  </div>
                )}
                <div className="notification-type-badge">
                  {getNotificationIcon(notification.type)}
                </div>
              </div>

              <div className="notification-content">
                <div className="notification-header-row">
                  {notification.server && (
                    <>
                      <span className="notification-server">{notification.server}</span>
                      <span className="notification-separator">•</span>
                      <span className="notification-channel">#{notification.channel}</span>
                    </>
                  )}
                  {notification.type === 'dm' && (
                    <span className="notification-author">{notification.author}</span>
                  )}
                  {notification.type === 'friend-request' && (
                    <span className="notification-author">{notification.author}</span>
                  )}
                </div>
                <div className="notification-message">
                  {notification.author && notification.type !== 'dm' && notification.type !== 'friend-request' && (
                    <strong>{notification.author}: </strong>
                  )}
                  {notification.message}
                </div>
                <div className="notification-time">{notification.time}</div>
              </div>

              {notification.unread && <div className="unread-dot" />}
            </div>
          ))
        )}
      </div>
    </div>
  );
}
