// app/notifications/page.jsx
'use client';

import { useNotificationStore } from '@/stores/useNotificationStore';
import { useNotifications } from '@/hooks/useNotifications';
import { useAuthStore } from '@/stores/authStore';
import { useState } from 'react';

export default function Notification() {
  const userData = useAuthStore((state) => state.user);

  const { notifications, markAsRead } = useNotifications(userData.id);
  // const { markAsRead } = useNotifications('user'); // Replace with actual userId

  const [filter, setFilter] = useState('all');

  const filtered = notifications.filter(n => {
    if (filter === 'unread') return !n.read;
    if (filter === 'read') return n.read;
    return true;
  });

  const handleMarkAsRead = () => {
    const unreadIds = filtered.filter(n => !n.read).map(n => n.id);
    if (unreadIds.length > 0) {
      markAsRead(unreadIds);
    }
  };

  return (
    <div className="max-w-3xl mx-auto p-6">
      <h1 className="text-2xl font-bold mb-4">Notifications</h1>

      <div className="flex gap-4 mb-4">
        <button
          onClick={() => setFilter('all')}
          className={`px-3 py-1 rounded ${filter === 'all' ? 'bg-blue-500 text-white' : 'bg-gray-200'
            }`}
        >
          All
        </button>
        <button
          onClick={() => setFilter('unread')}
          className={`px-3 py-1 rounded ${filter === 'unread' ? 'bg-blue-500 text-white' : 'bg-gray-200'
            }`}
        >
          Unread
        </button>
        <button
          onClick={() => setFilter('read')}
          className={`px-3 py-1 rounded ${filter === 'read' ? 'bg-blue-500 text-white' : 'bg-gray-200'
            }`}
        >
          Read
        </button>
        <button
          onClick={handleMarkAsRead}
          className="ml-auto px-3 py-1 rounded bg-green-500 text-white"
        >
          Mark All As Read
        </button>
      </div>

      {filtered.length === 0 ? (
        <div className="text-gray-500">No notifications</div>
      ) : (
        <ul className="space-y-2">
          {filtered
            .slice()
            .reverse()
            .map((n) => (
              <li
                key={n.id}
                className={`p-4 rounded border ${!n.read ? 'bg-blue-50' : 'bg-white'
                  }`}
              >
                <div className="font-semibold">{n.title}</div>
                <div className="text-sm text-gray-600">{n.message}</div>
                <div className="text-xs text-gray-400">
                  {new Date(n.createdAt).toLocaleString()}
                </div>
              </li>
            ))}
        </ul>
      )}
    </div>
  );
}
