import React from 'react';
import { useQuery } from '@tanstack/react-query';
import axiosInstance from '../api/axiosInstance';
import { API_ENDPOINTS } from '../api/apiEndpoints';
import { Notifications as NotificationsIcon } from '@mui/icons-material';
import { useNavigate } from 'react-router-dom';

const NotificationPage = () => {
  const navigate = useNavigate();

  const { data: notificationData, isLoading, isError } = useQuery({
    queryKey: ['notifications'],
    queryFn: async () => {
      const res = await axiosInstance.get(API_ENDPOINTS.NOTIFICATION_LIST);
      return res.data;
    },
  });

  const notifications = notificationData?.data || [];

  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>

        {/* Notification List */}
        <div className="max-w-3xl mx-auto">
          {isLoading ? (
            <div className="px-4 py-12 text-center text-gray-500">Loading notifications...</div>
          ) : isError ? (
            <div className="px-4 py-12 text-center text-red-500">Failed to load notifications.</div>
          ) : notifications.length === 0 ? (
            <div className="px-4 py-12 text-center text-gray-500">
              No notifications found
            </div>
          ) : (
            <div className="space-y-2">
              {notifications.map((notification) => (
                <div 
                  key={notification.id} 
                  className="px-4 py-4 hover:bg-gray-50 transition-colors bg-white border-b border-gray-200 cursor-pointer"
                  onClick={() => notification.page && navigate(`/${notification.page}`)}
                >
                  <div className="flex items-start gap-3 ">
                    {/* Icon */}
                    <div className="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
                      <NotificationsIcon className="text-green-700" />
                    </div>
                    
                    {/* Content */}
                    <div className="flex-1 min-w-0">
                      <p className="text-sm text-gray-900">
                        <span className="font-semibold">{notification.tittle}</span>
                      </p>
                      <p className="text-sm text-gray-600 mt-1">
                        {notification.description}
                      </p>
                    </div>

                    {/* Time */}
                    <div className="flex items-start gap-2 flex-shrink-0">
                      <span className="text-xs text-gray-500 mt-1 whitespace-nowrap">{notification.created_at}</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default NotificationPage;