// ChatNotifier.jsx — Global poller للشاتات
// بيراقب الشاتات بتاعتى كل 8 ثوانى، ولما رسالة جديدة تيجى من طرف تانى:
//   - يطلع toast لطيف فى الأسفل-اليمين (Messenger-style)
//   - الضغط عليه → يفتح ChatModal (يطلق custom event للـ LawyersView)
// بيعمل polling حتى لو الـ chat modal مفتوحة (مايضرش) لأنه يقارن بـ last_seen.

function ChatNotifier() {
  const [toasts, setToasts] = React.useState([]);   // [{ id, chat, msg }]
  const seenRef = React.useRef({});                 // { chatId: lastMessageId }
  const initializedRef = React.useRef(false);
  const audioCtxRef = React.useRef(null);

  // ─── Helper: نغمة صغيرة لما رسالة تيجى ───
  const ding = React.useCallback(() => {
    try {
      const AC = window.AudioContext || window.webkitAudioContext;
      if (!AC) return;
      if (!audioCtxRef.current) audioCtxRef.current = new AC();
      const ctx = audioCtxRef.current;
      const now = ctx.currentTime;
      const o = ctx.createOscillator();
      const g = ctx.createGain();
      o.type = 'sine';
      o.frequency.setValueAtTime(880, now);
      o.frequency.exponentialRampToValueAtTime(1320, now + 0.10);
      g.gain.setValueAtTime(0, now);
      g.gain.linearRampToValueAtTime(0.16, now + 0.02);
      g.gain.linearRampToValueAtTime(0, now + 0.22);
      o.connect(g).connect(ctx.destination);
      o.start(now); o.stop(now + 0.24);
    } catch {}
  }, []);

  React.useEffect(() => {
    let cancel = false;

    const pollOnce = async () => {
      if (!window.api?.isAuthenticated || !window.api.isAuthenticated()) return;
      try {
        // نجيب شاتاتى كـ عميل (لو محامى يفضّل نضيف role lawyer لاحقاً)
        const chats = await window.api.chats.list('client');
        if (cancel) return;
        const me = window.__sanadCurrentUser?.id;
        if (!me) return;

        for (const c of (chats || [])) {
          // نتجاهل لو الشات مفتوحة دلوقتى فى ChatModal — تعرف عن طريق window flag
          if (window.__openChatId === c.id) continue;

          // ما عندناش msg id جايب من الـ summary — بنعتمد على last_message_at
          const sig = c.last_message_at || '';
          const prev = seenRef.current[c.id];

          // أول poll — نسجّل بدون toast (ما نزعجش بكل الرسائل القديمة)
          if (!initializedRef.current) {
            seenRef.current[c.id] = sig;
            continue;
          }

          if (sig && sig !== prev && c.unread_count > 0) {
            // جلب آخر رسالة لمعرفة من اللي بعت
            try {
              const detail = await window.api.chats.get(c.id);
              if (cancel) return;
              const lastFromOther = [...(detail.messages || [])]
                .reverse()
                .find(m => m.sender_id !== me);
              if (lastFromOther) {
                setToasts(prev => {
                  // ما نظهرش toast لنفس الـ msg id لو موجود
                  if (prev.some(t => t.msgId === lastFromOther.id)) return prev;
                  return [...prev, {
                    id: Date.now() + Math.random(),
                    msgId: lastFromOther.id,
                    chat: c,
                    msg: lastFromOther,
                  }];
                });
                ding();
              }
            } catch {}
          }
          seenRef.current[c.id] = sig;
        }

        if (!initializedRef.current) initializedRef.current = true;
      } catch {
        // ignore silently
      }
    };

    pollOnce();   // immediate
    const t = setInterval(pollOnce, 8000);
    return () => { cancel = true; clearInterval(t); };
  }, [ding]);

  // ─── Toast dismissal — auto after 10s ───
  React.useEffect(() => {
    if (toasts.length === 0) return;
    const timers = toasts.map(t =>
      setTimeout(() => setToasts(prev => prev.filter(x => x.id !== t.id)), 10000)
    );
    return () => timers.forEach(clearTimeout);
  }, [toasts]);

  const dismissToast = (id) => setToasts(prev => prev.filter(t => t.id !== id));

  const openChat = (toast) => {
    // نبعت custom event لـ LawyersView يفتح ChatModal مع المحامى ده
    window.dispatchEvent(new CustomEvent('sanad-open-chat', {
      detail: {
        lawyerId: toast.chat.lawyer_id,
        lawyerName: toast.chat.lawyer_display_name,
        lawyerAvatar: toast.chat.lawyer_avatar_url,
      },
    }));
    dismissToast(toast.id);
  };

  if (toasts.length === 0) return null;

  return (
    <div style={{
      position: 'fixed', bottom: 20, left: 20, zIndex: 8900,
      display: 'flex', flexDirection: 'column', gap: 10,
      fontFamily: sanadFonts.arabic, direction: 'rtl',
    }}>
      {toasts.map(t => {
        const avatar = t.chat.lawyer_avatar_url;
        const initials = (t.chat.lawyer_display_name || '؟').split(' ').map(w => w[0]).filter(Boolean).slice(0, 2).join('');
        return (
          <div key={t.id}
            onClick={() => openChat(t)}
            style={{
              background: sanadColors.bgElevated,
              borderRadius: 14,
              boxShadow: '0 12px 32px rgba(20,20,19,0.18), 0 0 0 1px rgba(20,20,19,0.08)',
              padding: '12px 14px',
              minWidth: 280, maxWidth: 360,
              display: 'flex', alignItems: 'flex-start', gap: 10,
              cursor: 'pointer',
              animation: 'chatToastIn 240ms cubic-bezier(0.2, 0.8, 0.2, 1)',
              borderRight: `3px solid ${sanadColors.brand}`,
            }}
            onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-2px)'}
            onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}
          >
            {/* Avatar */}
            <div style={{
              width: 40, height: 40, borderRadius: '50%', overflow: 'hidden', flexShrink: 0,
              background: `linear-gradient(135deg, ${sanadColors.brand} 0%, ${sanadColors.brandDark} 100%)`,
              color: '#fff', fontWeight: 700, fontSize: 14,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              border: `2px solid ${sanadColors.bgElevated}`,
              boxShadow: '0 0 0 1px rgba(20,20,19,0.10)',
            }}>
              {avatar ? <img src={avatar} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/> : initials}
            </div>

            {/* Body */}
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
                <span style={{
                  fontSize: 12.5, fontWeight: 700, color: sanadColors.textPrimary,
                  overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                  minWidth: 0, flex: 1,
                }}>
                  {t.chat.lawyer_display_name}
                </span>
                <span style={{
                  fontSize: 9, fontWeight: 600,
                  color: sanadColors.brand, padding: '1.5px 6px', borderRadius: 9999,
                  background: sanadColors.brandSubtle, flexShrink: 0,
                }}>رسالة جديدة</span>
              </div>
              <div style={{
                fontSize: 12, color: sanadColors.textSecondary, lineHeight: 1.5,
                overflow: 'hidden', textOverflow: 'ellipsis',
                display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
              }}>
                {t.msg.attachment_url ? `📎 ${t.msg.attachment_name || 'مرفق'}` : t.msg.content}
              </div>
              <div style={{ display: 'flex', gap: 8, marginTop: 7 }}>
                <span style={{
                  fontSize: 10.5, fontWeight: 600, color: sanadColors.brand,
                }}>افتح المحادثة ←</span>
              </div>
            </div>

            {/* Close button */}
            <button onClick={(e) => { e.stopPropagation(); dismissToast(t.id); }} style={{
              width: 22, height: 22, border: 'none', borderRadius: 6,
              background: 'transparent', cursor: 'pointer',
              color: sanadColors.textMuted, fontSize: 16, lineHeight: 1,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0,
            }}>×</button>
          </div>
        );
      })}

      <style>{`
        @keyframes chatToastIn {
          from { opacity: 0; transform: translateY(20px); }
          to   { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </div>
  );
}

window.ChatNotifier = ChatNotifier;