'use client';

import { useState, useRef, useEffect } from 'react';

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

export default function AdminNotificationsBadge({
  total,
  pendingOrders,
  designApprovals,
  photoRequests,
  unreadMessages,
}: AdminNotificationsBadgeProps) {
  const [showTooltip, setShowTooltip] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const onClickOutside = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) {
        setShowTooltip(false);
      }
    };
    document.addEventListener('mousedown', onClickOutside);
    return () => document.removeEventListener('mousedown', onClickOutside);
  }, []);

  if (total === 0) return null;

  return (
    <div ref={ref} className="relative">
      <button
        onClick={() => setShowTooltip(!showTooltip)}
        className="relative inline-flex items-center justify-center w-8 h-8 rounded-full bg-splash-pink text-white text-xs font-bold hover:bg-splash-pink-dark transition-colors"
        title="Admin notifications"
      >
        {total}
      </button>

      {showTooltip && (
        <div className="absolute right-0 top-full mt-2 w-64 bg-paper border border-line rounded shadow-lg p-4 z-50 text-sm space-y-2">
          <p className="font-bold text-ink">Notifications</p>
          {pendingOrders > 0 && (
            <div className="flex items-center justify-between py-2 px-3 bg-surface rounded">
              <span className="text-muted">Waiting payment</span>
              <span className="font-bold text-splash-orange">{pendingOrders}</span>
            </div>
          )}
          {designApprovals > 0 && (
            <div className="flex items-center justify-between py-2 px-3 bg-surface rounded">
              <span className="text-muted">Design approvals</span>
              <span className="font-bold text-splash-blue">{designApprovals}</span>
            </div>
          )}
          {photoRequests > 0 && (
            <div className="flex items-center justify-between py-2 px-3 bg-surface rounded">
              <span className="text-muted">Photo requests</span>
              <span className="font-bold text-clay">{photoRequests}</span>
            </div>
          )}
          {unreadMessages > 0 && (
            <div className="flex items-center justify-between py-2 px-3 bg-surface rounded">
              <span className="text-muted">Unread messages</span>
              <span className="font-bold text-splash-pink">{unreadMessages}</span>
            </div>
          )}
        </div>
      )}
    </div>
  );
}