thirukalyanamweb/src/pages/NotificationPage.jsx

import React, { useState } from 'react';
import { Tabs, Tab, IconButton, Menu, MenuItem } from '@mui/material';
import { MoreVert, Delete } from '@mui/icons-material';

const NotificationPage = () => {
  const [activeTab, setActiveTab] = useState(0);
  const [anchorEl, setAnchorEl] = useState(null);
  const [selectedNotification, setSelectedNotification] = useState(null);
  
  const [notifications, setNotifications] = useState([
    {
      id: 1,
      type: 'message',
      user: 'Thangavel',
      avatar: 'https://i.pravatar.cc/150?img=1',
      message: 'has sent you a message',
      time: '1d',
      action: 'View message',
      category: 'all'
    },
    {
      id: 2,
      type: 'profile',
      user: 'Thangavel',
      avatar: 'https://i.pravatar.cc/150?img=2',
      message: 'and 3 others have viewed your profile',
      time: '1d',
      action: 'See who viewed',
      category: 'interactions'
    },
    {
      id: 3,
      type: 'interest',
      user: 'Parthiban',
      avatar: 'https://i.pravatar.cc/150?img=3',
      message: 'has sent you an interest',
      time: '1d',
      action: 'View interest',
      category: 'urgent'
    },
    {
      id: 4,
      type: 'message',
      user: 'Rajesh',
      avatar: 'https://i.pravatar.cc/150?img=4',
      message: 'replied to your message',
      time: '2d',
      action: 'View message',
      category: 'all'
    },
    {
      id: 5,
      type: 'profile',
      user: 'Priya',
      avatar: 'https://i.pravatar.cc/150?img=5',
      message: 'viewed your profile',
      time: '2d',
      action: 'See profile',
      category: 'interactions'
    },
    {
      id: 6,
      type: 'interest',
      user: 'Kumar',
      avatar: 'https://i.pravatar.cc/150?img=6',
      message: 'accepted your interest',
      time: '3d',
      action: 'View profile',
      category: 'urgent'
    }
  ]);

  const handleTabChange = (event, newValue) => {
    setActiveTab(newValue);
  };

  const handleMenuOpen = (event, notificationId) => {
    setAnchorEl(event.currentTarget);
    setSelectedNotification(notificationId);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
    setSelectedNotification(null);
  };

  const handleDelete = () => {
    setNotifications(notifications.filter(n => n.id !== selectedNotification));
    handleMenuClose();
  };

  const getFilteredNotifications = () => {
    if (activeTab === 0) return notifications;
    if (activeTab === 1) return notifications.filter(n => n.category === 'interactions');
    if (activeTab === 2) return notifications.filter(n => n.category === 'urgent');
    return notifications;
  };

  const filteredNotifications = getFilteredNotifications();

  return (
    <div className="min-h-screen my-10">
      <div className="max-w-[1200px] mx-auto ">
        {/* Header */}
        <div className="px-2 py-6 ">
          <h1 className="text-2xl text-center font-semibold text-gray-900">Notifications</h1>
        </div>

        {/* Tabs */}
        <div className="max-w-[350px] w-full mx-auto " >
          <Tabs 
            value={activeTab} 
            onChange={handleTabChange}
            sx={{
              '& .MuiTab-root': {
                textTransform: 'none',
                fontSize: '15px',
                fontWeight: 500,
                minWidth: 'auto',
                px: 3,
                border:"1px solid #074201ff ",
                display:"flex",
                gap:"10px",
                flexWrap:"wrap",
              },
              '& .Mui-selected': {
                color: '#fcfcfcff !important',
                backgroundColor: '#074201ff',
              },
              '& .MuiTabs-indicator': {
                backgroundColor: '#074201ff',
              }
            }}
          >
            <Tab label="All"  />
            <Tab label="Interactions" sx={{marginLeft:"10px"}} />
            <Tab label="Urgent" sx={{marginLeft:"10px"}}/>
          </Tabs>
        </div>

        {/* Notification List */}
        <div className="">
          {filteredNotifications.length === 0 ? (
            <div className="px-4 py-12 text-center text-gray-500">
              No notifications found
            </div>
          ) : (
            <>
              <div className="px-4 py-3 bg-[#edfffa] my-10">
                <h2 className="text-[18px] font-semibold text-gray-700">Yesterday</h2>
              </div>
              {filteredNotifications.map((notification) => (
                <div 
                  key={notification.id} 
                    className="px-4 py-4 hover:bg-gray-50 transition-colors bg-[#fff5ed] border-b border-[#A70710]"
                >
                  <div className="flex items-start gap-3 ">
                    {/* Avatar */}
                    <img 
                      src={notification.avatar} 
                      alt={notification.user}
                      className="w-12 h-12 rounded-full object-cover flex-shrink-0"
                    />
                    
                    {/* Content */}
                    <div className="flex-1 min-w-0">
                      <p className="text-sm text-gray-900">
                        <span className="font-semibold">{notification.user}</span>{' '}
                        <span className="text-gray-700">{notification.message}</span>
                      </p>
                      <button className="mt-2 px-4 py-1.5 text-sm font-medium text-[#A70710] border-1 border-[#A70710] rounded-full hover:bg-[#A70710] hover:text-[#fff] transition-colors">
                        {notification.action}
                      </button>
                    </div>

                    {/* Time and Menu */}
                    <div className="flex items-start gap-2 flex-shrink-0">
                      <span className="text-xs text-gray-500 mt-1">{notification.time}</span>
                      <IconButton
                        size="small"
                        onClick={(e) => handleMenuOpen(e, notification.id)}
                        sx={{ 
                          color: '#6b7280',
                          '&:hover': { backgroundColor: '#f3f4f6' }
                        }}
                      >
                        <MoreVert fontSize="small" />
                      </IconButton>
                    </div>
                  </div>
                </div>
              ))}
            </>
          )}
        </div>

        {/* Delete Menu */}
        <Menu
          anchorEl={anchorEl}
          open={Boolean(anchorEl)}
          onClose={handleMenuClose}
          anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'right',
          }}
          transformOrigin={{
            vertical: 'top',
            horizontal: 'right',
          }}
        >
          <MenuItem 
            onClick={handleDelete}
            sx={{ 
              color: '#ef4444',
              '&:hover': { backgroundColor: '#fee2e2' }
            }}
          >
            <Delete fontSize="small" sx={{ mr: 1 }} />
            Delete
          </MenuItem>
        </Menu>
      </div>
    </div>
  );
};

export default NotificationPage;