
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { fetchNotificaciones, marcarNotificacionComoVista } from '../api/notificaciones';

export default function NotificationBell() {
  const navigate = useNavigate();
  const [notifications, setNotifications] = useState([]);
  const [showPanel, setShowPanel] = useState(false);
  const [unreadCount, setUnreadCount] = useState(0);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    setError(null);
    fetchNotificaciones({ page: 1, pageSize: 50 })
      .then(data => {
        setNotifications(data.results);
        setUnreadCount(data.results.filter(n => !n.visto).length);
      })
      .catch(err => {
        setError('Error al cargar notificaciones');
      })
      .finally(() => setLoading(false));
  }, []);

  // Opcional: aquí podrías hacer una petición PATCH/POST si es necesario
  const markAsRead = async (notificationId) => {
    try {
      await marcarNotificacionComoVista(notificationId);
      setNotifications(prev =>
        prev.map(notification =>
          notification.id === notificationId
            ? { ...notification, visto: true }
            : notification
        )
      );
      setUnreadCount(prev => Math.max(0, prev - 1));
    } catch (e) {
      // Opcional: mostrar error
    }
  };

  const markAllAsRead = async () => {
    const notVistas = notifications.filter(n => !n.visto);
    try {
      await Promise.all(notVistas.map(n => marcarNotificacionComoVista(n.id)));
      setNotifications(prev => prev.map(notification => ({ ...notification, visto: true })));
      setUnreadCount(0);
    } catch (e) {
      // Opcional: mostrar error
    }
  };

  const getNotificationIcon = (tipo) => {
    switch (tipo) {
      case 'success':
        return (
          <div className="flex-shrink-0 w-10 h-10 bg-gradient-to-br from-green-400 to-emerald-500 rounded-xl flex items-center justify-center shadow-lg">
            <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
        );
      case 'warning':
        return (
          <div className="flex-shrink-0 w-10 h-10 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-xl flex items-center justify-center shadow-lg">
            <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
        );
      case 'error':
        return (
          <div className="flex-shrink-0 w-10 h-10 bg-gradient-to-br from-red-400 to-red-600 rounded-xl flex items-center justify-center shadow-lg">
            <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </div>
        );
      default:
        return (
          <div className="flex-shrink-0 w-10 h-10 bg-gradient-to-br from-blue-400 to-blue-600 rounded-xl flex items-center justify-center shadow-lg">
            <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
        );
    }
  };

  const formatTimestamp = (isoString) => {
    const timestamp = new Date(isoString);
    const now = new Date();
    const diff = now.getTime() - timestamp.getTime();
    const minutes = Math.floor(diff / (1000 * 60));
    const hours = Math.floor(diff / (1000 * 60 * 60));
    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    if (minutes < 1) return 'Ahora';
    if (minutes < 60) return `${minutes}m`;
    if (hours < 24) return `${hours}h`;
    return `${days}d`;
  };

  return (
    <>
      {/* Campanita flotante con diseño mejorado */}
      <div className="fixed bottom-6 right-6 z-50">
        <div className="relative">
          {/* Efecto de pulso para notificaciones nuevas */}
          {unreadCount > 0 && (
            <div className="absolute inset-0 bg-blue-400 rounded-full animate-ping opacity-75"></div>
          )}
          
          <button
            onClick={() => setShowPanel(!showPanel)}
            className="relative bg-gradient-to-br from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 text-white p-4 rounded-full shadow-2xl transition-all duration-300 hover:scale-110 hover:shadow-blue-500/25 focus:outline-none focus:ring-4 focus:ring-blue-500/50 group"
          >
            {/* Icono de campanita mejorado */}
            <svg 
              className={`w-6 h-6 transition-transform duration-300 ${unreadCount > 0 ? 'animate-bounce' : ''} group-hover:scale-110`} 
              fill="none" 
              stroke="currentColor" 
              viewBox="0 0 24 24"
            >
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-5 5v-5zM4 4h5l-5 5v-5z" />
            </svg>
            
            {/* Contador de notificaciones mejorado */}
            {unreadCount > 0 && (
              <div className="absolute -top-2 -right-2">
                <span className="relative flex h-6 w-6">
                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                  <span className="relative inline-flex rounded-full h-6 w-6 bg-gradient-to-br from-red-500 to-red-600 text-white text-xs font-bold items-center justify-center shadow-lg">
                    {unreadCount > 9 ? '9+' : unreadCount}
                  </span>
                </span>
              </div>
            )}
            
            {/* Indicador de estado activo */}
            {showPanel && (
              <div className="absolute -top-1 -right-1 w-4 h-4 bg-green-400 rounded-full border-2 border-white animate-pulse"></div>
            )}
          </button>
        </div>
      </div>

      {/* Panel de notificaciones con diseño mejorado */}
      {showPanel && (
        <div className="fixed bottom-24 right-6 z-50 w-96 max-w-sm">
          {/* Animación de entrada */}
          <div className="transform transition-all duration-300 ease-out scale-100 opacity-100 translate-y-0">
            <div className="bg-white/95 backdrop-blur-xl rounded-2xl shadow-2xl border border-gray-200/50 overflow-hidden">
              {/* Header del panel mejorado */}
              <div className="bg-gradient-to-r from-blue-500 to-blue-700 p-5 text-white">
                <div className="flex items-center justify-between">
                  <div className="flex items-center space-x-3">
                    <div className="p-2 bg-white/20 rounded-xl">
                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-5 5v-5zM4 4h5l-5 5v-5z" />
                      </svg>
                    </div>
                    <div>
                      <h3 className="text-lg font-bold">Notificaciones</h3>
                      <p className="text-sm text-blue-100">
                        {unreadCount > 0 ? `${unreadCount} nuevas` : 'Todas leídas'}
                      </p>
                    </div>
                  </div>
                  
                  <div className="flex items-center space-x-2">
                    {unreadCount > 0 && (
                      <button
                        onClick={markAllAsRead}
                        className="px-3 py-1.5 bg-white/20 hover:bg-white/30 rounded-lg text-sm font-medium transition-colors duration-200 flex items-center space-x-1"
                      >
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                        </svg>
                        <span>Marcar todas</span>
                      </button>
                    )}
                    <button
                      onClick={() => setShowPanel(false)}
                      className="p-2 hover:bg-white/20 rounded-lg transition-colors duration-200"
                    >
                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>

              {/* Lista de notificaciones con diseño mejorado */}
              <div className="max-h-96 overflow-y-auto bg-gray-50/30">
                {loading ? (
                  <div className="p-8 text-center">
                    <div className="inline-flex items-center space-x-2 text-blue-600">
                      <svg className="animate-spin h-5 w-5" fill="none" viewBox="0 0 24 24">
                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                      </svg>
                      <span className="font-medium">Cargando notificaciones...</span>
                    </div>
                  </div>
                ) : error ? (
                  <div className="p-8 text-center">
                    <div className="inline-flex items-center space-x-2 text-red-500">
                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
                      </svg>
                      <span className="font-medium">{error}</span>
                    </div>
                  </div>
                ) : notifications.length === 0 ? (
                  <div className="p-8 text-center">
                    <div className="mx-auto w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
                      <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-5 5v-5zM13 3l-4 9h6l-4 9" />
                      </svg>
                    </div>
                    <h3 className="text-sm font-semibold text-gray-900 mb-1">No hay notificaciones</h3>
                    <p className="text-sm text-gray-500">Cuando tengas nuevas notificaciones aparecerán aquí.</p>
                  </div>
                ) : (
                  <div className="divide-y divide-gray-100">
                    {notifications.map((notification, index) => (
                      <div
                        key={notification.id}
                        className={`p-4 hover:bg-white/60 cursor-pointer transition-all duration-200 group ${
                          !notification.visto ? 'bg-blue-50/50 border-l-4 border-blue-500' : 'hover:bg-gray-50'
                        }`}
                        onClick={() => markAsRead(notification.id)}
                        style={{ animationDelay: `${index * 50}ms` }}
                      >
                        <div className="flex space-x-3">
                          {getNotificationIcon(notification.tipo?.tipo)}
                          <div className="flex-1 min-w-0">
                            <div className="flex items-start justify-between">
                              <p className={`text-sm font-semibold leading-5 ${
                                !notification.visto ? 'text-gray-900' : 'text-gray-700'
                              }`}>
                                {notification.tipo?.descripcion || notification.tipo?.tipo || 'Notificación'}
                              </p>
                              <div className="flex items-center space-x-2">
                                <span className="text-xs text-gray-500 font-medium">
                                  {formatTimestamp(notification.fecha_envio || notification.created_at)}
                                </span>
                                {!notification.visto && (
                                  <div className="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
                                )}
                              </div>
                            </div>
                            <p className="text-sm text-gray-600 mt-1 leading-5">{notification.mensaje}</p>
                            {!notification.visto && (
                              <div className="mt-2 flex items-center space-x-1 text-blue-600">
                                <div className="w-1.5 h-1.5 bg-blue-500 rounded-full"></div>
                                <span className="text-xs font-medium">Nueva</span>
                              </div>
                            )}
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>

              {/* Footer del panel mejorado */}
              {notifications.length > 0 && (
                <div className="bg-gradient-to-r from-gray-50 to-gray-100 border-t border-gray-200/50">
                  <button
                    className="w-full p-4 text-center text-sm font-semibold text-blue-600 hover:text-blue-800 hover:bg-white/50 transition-all duration-200 flex items-center justify-center space-x-2"
                    onClick={() => {
                      setShowPanel(false);
                      navigate('/notificaciones');
                    }}
                  >
                    <span>Ver todas las notificaciones</span>
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
                    </svg>
                  </button>
                </div>
              )}
            </div>
          </div>
        </div>
      )}

      {/* Overlay para cerrar el panel al hacer clic fuera con animación */}
      {showPanel && (
        <div
          className="fixed inset-0 z-40 bg-black/20 backdrop-blur-sm transition-all duration-300"
          onClick={() => setShowPanel(false)}
        />
      )}
    </>
  );
}
