import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useInAppNotificationStore, type InAppNotification } from '../../stores/inAppNotificationStore';
import { useChatStore } from '../../stores/chatStore';
import { Avatar } from './Avatar';

/** Tempo na tela antes de sumir sozinha. */
const AUTO_DISMISS_MS = 6000;

function NotificationCard({ item }: { item: InAppNotification }) {
  const dismiss = useInAppNotificationStore((s) => s.dismiss);
  const setCurrentChannel = useChatStore((s) => s.setCurrentChannel);
  const navigate = useNavigate();

  useEffect(() => {
    const timer = setTimeout(() => dismiss(item.id), AUTO_DISMISS_MS);
    return () => clearTimeout(timer);
  }, [item.id, dismiss]);

  const open = () => {
    if (item.channelId) {
      setCurrentChannel(item.channelId);
      navigate(`/channels/${item.spaceId || '@me'}/${item.channelId}`);
    }
    dismiss(item.id);
  };

  return (
    <div className="glass rounded-xl shadow-xl w-[300px] overflow-hidden animate-slide-up">
      <button onClick={open} className="w-full text-left flex gap-2.5 p-3 hover:bg-interactive-hover transition-colors">
        <Avatar src={item.avatar} name={item.title} size={32} userId={item.userId} />
        <div className="min-w-0 flex-1">
          <div className="text-[13px] font-semibold text-txt-primary truncate">{item.title}</div>
          <div className="text-[12px] text-txt-secondary line-clamp-2 break-words">{item.body}</div>
        </div>
      </button>
    </div>
  );
}

/**
 * Avisos dentro da própria janela, no lugar do balão do sistema.
 *
 * O balão do Windows traz o som do sistema junto e não combina com o resto do
 * app. Aqui o efeito sonoro é o mesmo dos outros sons do Backspace, e clicar
 * leva direto ao canal.
 */
export function InAppNotifications() {
  const items = useInAppNotificationStore((s) => s.items);
  if (items.length === 0) return null;

  return (
    <div className="fixed top-4 right-4 z-[400] flex flex-col gap-2 pointer-events-none">
      {items.map((item) => (
        <div key={item.id} className="pointer-events-auto">
          <NotificationCard item={item} />
        </div>
      ))}
    </div>
  );
}