'use client';

import { useState, useEffect } from 'react';
import AdminNotificationsBadge from './AdminNotificationsBadge';

interface NotificationData {
  total: number;
  pendingOrders: number;
  designApprovals: number;
  photoRequests: number;
  unreadMessages: number;
}

export default function AdminNotificationsWrapper() {
  const [notifications, setNotifications] = useState<NotificationData>({
    total: 0,
    pendingOrders: 0,
    designApprovals: 0,
    photoRequests: 0,
    unreadMessages: 0,
  });

  const fetchNotifications = async () => {
    try {
      const res = await fetch('/api/admin/notifications');
      if (res.ok) {
        const data = await res.json();
        setNotifications(data);
      }
    } catch (err) {
      console.error('Error fetching notifications:', err);
    }
  };

  useEffect(() => {
    // Fetch immediately
    fetchNotifications();

    // Refresh every 30 seconds
    const interval = setInterval(fetchNotifications, 30000);
    return () => clearInterval(interval);
  }, []);

  return (
    <AdminNotificationsBadge
      total={notifications.total}
      pendingOrders={notifications.pendingOrders}
      designApprovals={notifications.designApprovals}
      photoRequests={notifications.photoRequests}
      unreadMessages={notifications.unreadMessages}
    />
  );
}
