(function() {
  var useState  = React.useState;
  var useEffect = React.useEffect;
  var useRef    = React.useRef;
  var Icon      = window.CBIcon;

  var POLL_MS = 5000;

  var AVA_GRAD = [
    'linear-gradient(145deg, #0a84ff, #64d2ff)',
    'linear-gradient(145deg, #30d158, #64d2ff)',
    'linear-gradient(145deg, #ff9f0a, #ffd60a)',
    'linear-gradient(145deg, #5ac8fa, #0a84ff)',
    'linear-gradient(145deg, #64d2ff, #30d158)',
  ];

  function initialsOf(name) {
    return (name || '?').split(' ').map(function(n){ return n[0] || ''; }).join('').slice(0, 2).toUpperCase();
  }

  function avaTone(key) {
    var s = String(key || '');
    var h = 0;
    for (var i = 0; i < s.length; i++) h = (h + s.charCodeAt(i) * (i + 1)) % AVA_GRAD.length;
    return AVA_GRAD[h];
  }

  function timeShort(iso) {
    var d = new Date(iso);
    var now = new Date();
    if (d.toDateString() === now.toDateString()) {
      return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    }
    var yest = new Date(now);
    yest.setDate(now.getDate() - 1);
    if (d.toDateString() === yest.toDateString()) return 'Yesterday';
    return d.toLocaleDateString([], { month: 'short', day: 'numeric' });
  }

  function dayLabel(iso) {
    var d = new Date(iso);
    var now = new Date();
    if (d.toDateString() === now.toDateString()) return 'Today';
    var yest = new Date(now);
    yest.setDate(now.getDate() - 1);
    if (d.toDateString() === yest.toDateString()) return 'Yesterday';
    return d.toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' });
  }

  function MessagesPage() {
    var params = window.UserRouter.getParams() || {};

    var _convos = useState(null);  var convos = _convos[0], setConvos = _convos[1];
    var _active = useState(null);  var active = _active[0], setActive = _active[1];
    var _msgs   = useState([]);    var msgs = _msgs[0], setMsgs = _msgs[1];
    var _input  = useState('');    var input = _input[0], setInput = _input[1];
    var _busy   = useState(false); var busy = _busy[0], setBusy = _busy[1];
    var _err    = useState(null);  var err = _err[0], setErr = _err[1];
    var listRef = useRef(null);
    var inputRef = useRef(null);

    var hover = function(){ document.body.classList.add('hov'); };
    var leave = function(){ document.body.classList.remove('hov'); };

    function loadConvos() {
      return window.ApiClient.get('/social/chat')
        .then(function(r){ setConvos(r.conversations || []); })
        .catch(function(e){ setErr(e.message || 'Could not load messages'); });
    }

    function loadThread(convo) {
      setActive(convo);
      setMsgs([]);
      window.ApiClient.get('/social/chat/' + convo._id + '/messages')
        .then(function(r){ setMsgs(r.messages || []); })
        .catch(function(){ window.showUserToast('Could not load conversation', 'rose'); });
    }

    useEffect(function() {
      if (!window.AuthState || !window.AuthState.isLoggedIn()) {
        setErr('Sign in to use messages');
        return;
      }
      loadConvos().then(function() {
        if (params.userId) {
          window.ApiClient.post('/social/chat/open', { userId: params.userId })
            .then(function(c){ loadThread(c); loadConvos(); })
            .catch(function(e){ window.showUserToast(e.message || 'Could not open chat', 'rose'); });
        }
      });
    }, []);

    useEffect(function() {
      if (!active) return;
      var t = setInterval(function() {
        window.ApiClient.get('/social/chat/' + active._id + '/messages')
          .then(function(r){
            var next = r.messages || [];
            setMsgs(function(prev) {
              // New incoming message (not ours, not initial load) → iOS ding
              if (prev.length > 0 && next.length > prev.length) {
                var last = next[next.length - 1];
                if (last && !last.mine && window.CBSfx) window.CBSfx.play('msg-receive');
              }
              return next;
            });
          })
          .catch(function(){});
      }, POLL_MS);
      return function(){ clearInterval(t); };
    }, [active && active._id]);

    useEffect(function() {
      if (listRef.current) listRef.current.scrollTop = listRef.current.scrollHeight;
    }, [msgs.length, active && active._id]);

    useEffect(function() {
      if (active && inputRef.current) {
        try { inputRef.current.focus(); } catch (e) {}
      }
    }, [active && active._id]);

    function send() {
      var text = input.trim();
      if (!text || busy || !active) return;
      setBusy(true);
      window.ApiClient.post('/social/chat/' + active._id + '/messages', { text: text })
        .then(function(m) {
          setInput('');
          setMsgs(function(list){ return list.concat([m]); });
          loadConvos();
          window.CBSfx && window.CBSfx.play('msg-send');
        })
        .catch(function(e){ window.showUserToast(e.message || 'Send failed', 'rose'); })
        .finally(function(){ setBusy(false); });
    }

    var unreadTotal = 0;
    if (convos) {
      for (var ui = 0; ui < convos.length; ui++) unreadTotal += (convos[ui].unread || 0);
    }

    if (err) {
      return (
        <div className="chat-studio">
          <div className="chat-studio__fx" aria-hidden="true"><div className="chat-studio__aurora" /></div>
          <div className="chat-studio__inner">
            <div className="chat-empty">
              <div className="chat-empty__ico"><Icon name="mail" size={28} /></div>
              <h2 className="chat-empty__title">Messages locked</h2>
              <p className="chat-empty__sub">{err}</p>
              <button type="button" className="chat-empty__btn"
                onMouseEnter={hover} onMouseLeave={leave}
                onClick={function(){ window.navigate('home'); }}>
                Back home
              </button>
            </div>
          </div>
        </div>
      );
    }

    /* ── Thread view ── */
    if (active) {
      var peerName = (active.with && active.with.name) || 'Builder';
      var peerKey = (active.with && (active.with._id || active.with.name)) || peerName;
      var lastDay = '';

      return (
        <div className="chat-studio chat-studio--thread">
          <div className="chat-studio__fx" aria-hidden="true"><div className="chat-studio__aurora" /></div>
          <div className="chat-studio__inner chat-thread-shell">
            <header className="chat-thread-head">
              <button type="button" className="chat-back" aria-label="Back to conversations"
                onClick={function(){ setActive(null); loadConvos(); }}
                onMouseEnter={hover} onMouseLeave={leave}>
                <Icon name="arrow-right" size={16} style={{ transform: 'rotate(180deg)' }} />
              </button>
              <div className="chat-ava" style={{ background: avaTone(peerKey) }}>{initialsOf(peerName)}</div>
              <div className="chat-thread-id">
                <div className="chat-thread-name">{peerName}</div>
                <div className="chat-thread-sub">
                  <span className="chat-thread-dot" aria-hidden="true" />
                  Direct message
                </div>
              </div>
            </header>

            <div className="chat-msgs" ref={listRef}>
              {msgs.length === 0 && (
                <div className="chat-empty-thread">
                  <div className="chat-empty-thread__ava" style={{ background: avaTone(peerKey) }}>
                    {initialsOf(peerName)}
                  </div>
                  <div className="chat-empty-thread__title">{peerName}</div>
                  <p className="chat-empty-thread__sub">
                    Start the conversation. Keep it civic, kind, and useful.
                  </p>
                </div>
              )}
              {msgs.map(function(m) {
                var day = dayLabel(m.createdAt);
                var showDay = day !== lastDay;
                lastDay = day;
                return (
                  <React.Fragment key={m._id}>
                    {showDay && <div className="chat-day"><span>{day}</span></div>}
                    <div className={'chat-bubble-row' + (m.mine ? ' mine' : '')}>
                      <div className={'chat-bubble' + (m.mine ? ' mine' : '')}>
                        <span className="chat-bubble__text">{m.text}</span>
                        <span className="chat-time">{timeShort(m.createdAt)}</span>
                      </div>
                    </div>
                  </React.Fragment>
                );
              })}
            </div>

            <div className="chat-compose">
              <input
                ref={inputRef}
                type="text"
                className="chat-input"
                placeholder={'Message ' + peerName.split(' ')[0] + '…'}
                value={input}
                maxLength={2000}
                onChange={function(e){ setInput(e.target.value); }}
                onKeyDown={function(e){ if (e.key === 'Enter') send(); }}
              />
              <button
                type="button"
                className="chat-send"
                disabled={!input.trim() || busy}
                aria-label="Send"
                onClick={send}
                onMouseEnter={hover}
                onMouseLeave={leave}
              >
                {window.CBSocialIcon
                  ? React.createElement(window.CBSocialIcon, { name: 'act-send', fallback: '↑', size: 18 })
                  : <Icon name="send" size={18} />}
              </button>
            </div>
          </div>
        </div>
      );
    }

    /* ── Conversation list ── */
    return (
      <div className="chat-studio">
        <div className="chat-studio__fx" aria-hidden="true"><div className="chat-studio__aurora" /></div>
        <div className="chat-studio__inner">
          <header className="chat-hero">
            <div className="chat-hero__top">
              <button type="button" className="chat-hero__back"
                onMouseEnter={hover} onMouseLeave={leave}
                onClick={function(){ window.navigate('home'); }}>
                ← Back
              </button>
              {unreadTotal > 0 && (
                <div className="chat-hero__badge">
                  <span className="chat-hero__badge-dot" />
                  {unreadTotal} unread
                </div>
              )}
            </div>
            <div className="chat-hero__copy">
              <h1 className="chat-hero__title">Messages</h1>
              <p className="chat-hero__sub">
                Quiet, direct conversations with builders across the city.
              </p>
            </div>
          </header>

          {convos === null && (
            <div className="chat-loading">
              <div className="chat-loading__orb" />
              <span>Loading conversations…</span>
            </div>
          )}

          {convos && convos.length === 0 && (
            <div className="chat-empty">
              <div className="chat-empty__ico"><Icon name="mail" size={28} /></div>
              <h2 className="chat-empty__title">No conversations yet</h2>
              <p className="chat-empty__sub">
                Open any post and tap the message icon to start a private thread with its builder.
              </p>
              <button type="button" className="chat-empty__btn"
                onMouseEnter={hover} onMouseLeave={leave}
                onClick={function(){ window.navigate('feed'); }}>
                Browse the feed
              </button>
            </div>
          )}

          {convos && convos.length > 0 && (
            <div className="chat-list-panel">
              {convos.map(function(c, i) {
                var name = (c.with && c.with.name) || 'Builder';
                var key = (c.with && (c.with._id || c.with.name)) || c._id;
                return (
                  <button
                    key={c._id}
                    type="button"
                    className={'chat-row' + (c.unread ? ' unread' : '')}
                    style={{ animationDelay: (Math.min(i, 8) * 0.045) + 's' }}
                    onClick={function(){ loadThread(c); window.CBSfx && window.CBSfx.play('whoosh'); }}
                    onMouseEnter={hover}
                    onMouseLeave={leave}
                  >
                    <div className="chat-ava" style={{ background: avaTone(key) }}>{initialsOf(name)}</div>
                    <div className="chat-row-meta">
                      <div className="chat-row-name">{name}</div>
                      <div className="chat-row-last">
                        {(c.mine ? 'You: ' : '') + (c.lastText || 'New conversation')}
                      </div>
                    </div>
                    <div className="chat-row-side">
                      <span className="chat-row-time">{c.lastAt ? timeShort(c.lastAt) : ''}</span>
                      {c.unread > 0 && <span className="chat-unread">{c.unread}</span>}
                    </div>
                  </button>
                );
              })}
            </div>
          )}
        </div>
      </div>
    );
  }

  window.UserMessagesPage = MessagesPage;
})();