// WorkTwins floating Slack chat — same backend as subjectivetechnologies.com

const WT_CHAT_API_BASE = 'https://subjectivetechnologies.com';
const WT_CHAT_SESSION_KEY = 'worktwins_chat_session';

function FloatingChatWidget() {
  const [isOpen, setIsOpen] = React.useState(false);
  const hasAutoOpened = React.useRef(false);
  const chatFormRef = React.useRef(null);
  const messagesEndRef = React.useRef(null);
  const [chatName, setChatName] = React.useState('');
  const [chatEmail, setChatEmail] = React.useState('');
  const [chatMessage, setChatMessage] = React.useState('');
  const [chatStatus, setChatStatus] = React.useState('');
  const [sessionToken, setSessionToken] = React.useState('');
  const [sinceTs, setSinceTs] = React.useState('');
  const [chatMessages, setChatMessages] = React.useState([
    {
      id: 'welcome',
      role: 'assistant',
      text: 'Welcome to WorkTwins support. Send a message and our team will receive it in Slack.',
    },
  ]);

  const chatApiUrl = React.useCallback((path) => `${WT_CHAT_API_BASE}${path}`, []);

  React.useEffect(() => {
    if (typeof window === 'undefined') return;
    const saved = window.sessionStorage.getItem(WT_CHAT_SESSION_KEY) || '';
    if (saved) setSessionToken(saved);
  }, []);

  React.useEffect(() => {
    if (typeof window === 'undefined') return;
    if (!sessionToken) return;
    window.sessionStorage.setItem(WT_CHAT_SESSION_KEY, sessionToken);
  }, [sessionToken]);

  React.useEffect(() => {
    if (typeof window === 'undefined') return;
    const handleScroll = () => {
      if (hasAutoOpened.current) return;
      const maxScroll = document.documentElement.scrollHeight - window.innerHeight;
      if (maxScroll <= 0) return;
      const scrollPercent = window.scrollY / maxScroll;
      if (scrollPercent > 0.4) {
        hasAutoOpened.current = true;
        setIsOpen(true);
      }
    };
    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  React.useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [chatMessages]);

  const apiPost = React.useCallback(async (url, payload) => {
    const response = await fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      cache: 'no-store',
      body: JSON.stringify(payload),
    });
    const data = await response.json();
    if (!response.ok || !data.success) {
      throw new Error(data.error || 'Request failed');
    }
    return data;
  }, []);

  const fetchReplies = React.useCallback(async () => {
    if (!sessionToken) return;
    const params = new URLSearchParams({ sessionToken });
    if (sinceTs) params.set('since', sinceTs);
    const response = await fetch(`${chatApiUrl('/api/chat/messages')}?${params.toString()}`, { cache: 'no-store' });
    const data = await response.json();
    if (!response.ok || !data.success) {
      if (data?.error) setChatStatus(`Reply sync error: ${data.error}`);
      return;
    }
    const messages = Array.isArray(data.messages) ? data.messages : [];
    if (messages.length > 0) {
      setChatMessages((prev) => [
        ...prev,
        ...messages.map((m) => ({
          id: `s-${m.ts}`,
          role: 'assistant',
          text: m.text,
        })),
      ]);
    }
    if (data.newestTs) setSinceTs(String(data.newestTs));
  }, [sessionToken, sinceTs, chatApiUrl]);

  React.useEffect(() => {
    if (!sessionToken) return;
    let alive = true;
    const tick = async () => {
      if (!alive) return;
      await fetchReplies();
    };
    tick();
    const id = setInterval(tick, 3000);
    return () => {
      alive = false;
      clearInterval(id);
    };
  }, [sessionToken, fetchReplies]);

  const handleChatSubmit = React.useCallback(
    async (event) => {
      event.preventDefault();
      if (!chatMessage.trim()) return;
      const userMessage = chatMessage.trim();

      setChatMessages((prev) => [
        ...prev,
        { id: `u-${Date.now()}`, role: 'user', text: userMessage },
      ]);
      setChatMessage('');
      setChatStatus('Sending...');

      try {
        if (!sessionToken) {
          const started = await apiPost(chatApiUrl('/api/chat/start'), {
            name: chatName,
            email: chatEmail,
            message: userMessage,
            site: 'worktwins.com',
            page: `worktwins.com${window.location.pathname}`,
          });
          setSessionToken(String(started.sessionToken || ''));
        } else {
          await apiPost(chatApiUrl('/api/chat/send'), {
            sessionToken,
            message: userMessage,
          });
        }
        setChatStatus('Delivered. Replies will appear here.');
        fetchReplies();
      } catch (error) {
        setChatMessages((prev) => [
          ...prev,
          {
            id: `e-${Date.now()}`,
            role: 'assistant',
            text: 'Delivery failed. Please try again in a moment.',
          },
        ]);
        setChatStatus(error.message || 'Failed to send message.');
      }
    },
    [apiPost, chatEmail, chatMessage, chatName, chatApiUrl, fetchReplies, sessionToken]
  );

  return (
    <div className="chat-widget">
      <button
        className="chat-widget-toggle"
        type="button"
        onClick={() => setIsOpen(!isOpen)}
        aria-label={isOpen ? 'Close chat' : 'Open chat'}
        aria-expanded={isOpen}
        title="Chat with us on Slack"
      >
        <svg className="chat-widget-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12zM7 9h2v2H7V9zm4 0h2v2h-2V9zm4 0h2v2h-2V9z" />
        </svg>
      </button>

      {isOpen && (
        <div className="chat-widget-modal">
          <div className="chat-widget-header">
            <span className="chat-widget-presence" aria-hidden="true" />
            <span className="chat-widget-title">Slack Support</span>
            <button
              className="chat-widget-close"
              type="button"
              onClick={() => setIsOpen(false)}
              aria-label="Close chat"
            >
              &times;
            </button>
          </div>

          <div className="chat-widget-messages">
            {chatMessages.map((item) => (
              <div
                key={item.id}
                className={`chat-widget-bubble ${item.role === 'user' ? 'chat-widget-bubble-user' : 'chat-widget-bubble-assistant'}`}
              >
                {item.text}
              </div>
            ))}
            <div ref={messagesEndRef} />
          </div>

          <form ref={chatFormRef} className="chat-widget-form" onSubmit={handleChatSubmit}>
            {!sessionToken && (
              <div className="chat-widget-meta">
                <input
                  type="text"
                  className="chat-widget-input"
                  placeholder="Name"
                  value={chatName}
                  onChange={(e) => setChatName(e.target.value)}
                />
                <input
                  type="email"
                  className="chat-widget-input"
                  placeholder="Email"
                  value={chatEmail}
                  onChange={(e) => setChatEmail(e.target.value)}
                />
              </div>
            )}
            <div className="chat-widget-composer">
              <textarea
                className="chat-widget-textarea"
                placeholder="Type your message..."
                value={chatMessage}
                onChange={(e) => setChatMessage(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    chatFormRef.current?.requestSubmit?.();
                  }
                }}
                required
              />
              <button type="submit" className="chat-widget-send">Send</button>
            </div>
            {chatStatus ? <p className="chat-widget-status" aria-live="polite">{chatStatus}</p> : null}
          </form>
        </div>
      )}
    </div>
  );
}

window.FloatingChatWidget = FloatingChatWidget;