/* ============================================================
   BAN YARO — Chat-Seite
   ============================================================ */

window.Page_chat = (() => {

  let _container   = null;
  let _view        = 'list';     // 'list' | 'thread'
  let _convId      = null;
  let _partnerName = '';
  let _myId        = null;
  let _pollTimer   = null;
  let _lastMsgId   = 0;

  // ----------------------------------------------------------
  async function init(container, appState, params = {}) {
    _container = container;
    _myId      = appState?.user?.id || null;

    if (params.conversation_id) {
      await _openThread(params.conversation_id);
    } else {
      await _showList();
    }
  }

  // ----------------------------------------------------------
  // Conversation list
  // ----------------------------------------------------------
  async function _showList() {
    _view = 'list';
    _stopPolling();
    _convId = null;

    _container.innerHTML = `
      <div style="background:var(--c-surface)">
        <div style="padding:var(--space-4) var(--space-4) var(--space-2)">
          <h2 style="font-size:var(--text-xl);font-weight:var(--weight-bold)">Nachrichten</h2>
        </div>
        <div id="chat-list-body"></div>
      </div>
    `;

    await _loadList();
    await _updateChatBadge();
  }

  async function _loadList() {
    const el = document.getElementById('chat-list-body');
    if (!el) return;
    try {
      const convs = await API.chat.conversations();
      if (!convs.length) {
        el.innerHTML = `
          <div class="empty-state" style="padding:var(--space-12) var(--space-4)">
            <svg class="ph-icon" style="font-size:3rem;opacity:0.3">
              <use href="/icons/phosphor.svg#chat-circle-dots"></use>
            </svg>
            <p style="margin-top:var(--space-3);color:var(--c-text-muted)">
              Noch keine Nachrichten.<br>
              Schreibe einem Freund über die Freunde-Seite!
            </p>
          </div>
        `;
        return;
      }

      el.innerHTML = convs.map(c => {
        const initials = (c.partner_name || '?')[0].toUpperCase();
        const preview  = c.last_text
          ? _esc(c.last_text.substring(0, 60)) + (c.last_text.length > 60 ? '…' : '')
          : '<em style="opacity:0.6">Noch keine Nachrichten</em>';
        const timeStr  = c.last_msg_at ? _fmtTime(c.last_msg_at) : '';
        const badge    = c.unread_count > 0
          ? `<span class="chat-unread-badge">${c.unread_count}</span>`
          : '';
        return `
          <div class="chat-conv-item" onclick="Page_chat._openThread(${c.id})">
            <div class="chat-conv-avatar">${initials}</div>
            <div class="chat-conv-info">
              <div class="chat-conv-name">${_esc(c.partner_name)}</div>
              <div class="chat-conv-preview">${preview}</div>
            </div>
            <div class="chat-conv-meta">
              <span class="chat-conv-time">${timeStr}</span>
              ${badge}
            </div>
          </div>
        `;
      }).join('');
    } catch (e) {
      if (e.status === 401) {
        document.getElementById('chat-list-body').innerHTML =
          `<div class="empty-state"><p>Bitte melde dich an.</p></div>`;
      }
    }
  }

  // ----------------------------------------------------------
  // Thread (message view)
  // ----------------------------------------------------------
  async function _openThread(convId) {
    _convId = convId;
    _view   = 'thread';
    _stopPolling();

    _container.innerHTML = `
      <div class="chat-thread" id="chat-thread">
        <div class="chat-thread-header">
          <button class="btn btn-ghost btn-sm" onclick="Page_chat._showList()" style="padding:var(--space-1)">
            <svg class="ph-icon"><use href="/icons/phosphor.svg#arrow-left"></use></svg>
          </button>
          <div class="chat-conv-avatar" id="chat-partner-av" style="width:32px;height:32px;font-size:var(--text-sm)">?</div>
          <span class="chat-thread-partner" id="chat-partner-name">…</span>
        </div>
        <div class="chat-messages" id="chat-messages">
          <div style="text-align:center;padding:var(--space-6);color:var(--c-text-muted);font-size:var(--text-sm)">
            Laden…
          </div>
        </div>
        <div class="chat-input-bar">
          <textarea id="chat-input" class="chat-input" rows="1"
                    placeholder="Nachricht…" maxlength="2000"></textarea>
          <button class="chat-send-btn" id="chat-send-btn" onclick="Page_chat._send()">
            <svg class="ph-icon"><use href="/icons/phosphor.svg#paper-plane-tilt"></use></svg>
          </button>
        </div>
      </div>
    `;

    // Auto-resize textarea
    const input = document.getElementById('chat-input');
    input.addEventListener('input', () => {
      input.style.height = 'auto';
      input.style.height = Math.min(input.scrollHeight, 100) + 'px';
    });
    input.addEventListener('keydown', e => {
      if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        Page_chat._send();
      }
    });

    await _loadMessages(true);
    await API.chat.markRead(_convId).catch(() => {});
    await _updateChatBadge();

    // Poll every 4s while thread is open
    _pollTimer = setInterval(async () => {
      if (_view === 'thread' && _convId === convId) {
        await _pollNew();
      }
    }, 4000);
  }

  async function _loadMessages(scroll = false) {
    const el = document.getElementById('chat-messages');
    if (!el) return;
    try {
      const data = await API.chat.messages(_convId);
      _partnerName = data.partner_name;

      const nameEl = document.getElementById('chat-partner-name');
      const avEl   = document.getElementById('chat-partner-av');
      if (nameEl) nameEl.textContent = data.partner_name;
      if (avEl)   avEl.textContent   = (data.partner_name || '?')[0].toUpperCase();

      if (!data.messages.length) {
        el.innerHTML = `
          <div style="text-align:center;padding:var(--space-8);color:var(--c-text-muted);font-size:var(--text-sm)">
            Schreibe die erste Nachricht!
          </div>
        `;
        _lastMsgId = 0;
        return;
      }

      _lastMsgId = data.messages[data.messages.length - 1].id;
      el.innerHTML = _renderMessages(data.messages);

      if (scroll) _scrollToBottom(el);
    } catch (e) {
      if (el) el.innerHTML = `<div class="empty-state"><p>Fehler beim Laden.</p></div>`;
    }
  }

  async function _pollNew() {
    const el = document.getElementById('chat-messages');
    if (!el) return;
    try {
      const data = await API.chat.messages(_convId);
      if (!data.messages.length) return;

      const newest = data.messages[data.messages.length - 1];
      if (newest.id <= _lastMsgId) return;

      // New messages arrived
      _lastMsgId = newest.id;
      const wasAtBottom = _isScrolledToBottom(el);
      el.innerHTML = _renderMessages(data.messages);
      if (wasAtBottom) _scrollToBottom(el);

      await API.chat.markRead(_convId).catch(() => {});
      await _updateChatBadge();
    } catch (e) {
      // silent
    }
  }

  function _renderMessages(msgs) {
    let html = '';
    let lastDate = null;

    for (const m of msgs) {
      const dateStr = m.created_at.substring(0, 10);
      if (dateStr !== lastDate) {
        html += `<div class="chat-date-divider">${_fmtDate(m.created_at)}</div>`;
        lastDate = dateStr;
      }

      const isMine    = m.sender_id === _myId;
      const rowClass  = isMine ? 'chat-bubble-row--mine' : 'chat-bubble-row--theirs';
      const bubClass  = isMine ? 'chat-bubble--mine'     : 'chat-bubble--theirs';
      const delClass  = m.is_deleted ? ' chat-bubble--deleted' : '';
      const timeStr   = _fmtTime(m.created_at);
      const deleteBtn = isMine && !m.is_deleted
        ? `<button class="btn btn-ghost" style="padding:2px;opacity:0.4;font-size:var(--text-xs)"
                   onclick="Page_chat._deleteMsg(${m.id})" title="Löschen">
             <svg class="ph-icon" style="width:12px;height:12px"><use href="/icons/phosphor.svg#trash"></use></svg>
           </button>`
        : '';

      html += `
        <div class="chat-bubble-row ${rowClass}">
          <div>
            <div class="chat-bubble ${bubClass}${delClass}">${_esc(m.text)}</div>
            <div class="chat-bubble-time" style="display:flex;align-items:center;gap:2px;justify-content:${isMine ? 'flex-end' : 'flex-start'}">
              ${timeStr} ${deleteBtn}
            </div>
          </div>
        </div>
      `;
    }
    return html;
  }

  // ----------------------------------------------------------
  async function _send() {
    const input = document.getElementById('chat-input');
    const btn   = document.getElementById('chat-send-btn');
    if (!input) return;
    const text = input.value.trim();
    if (!text || !_convId) return;

    btn.disabled = true;
    try {
      await API.chat.send(_convId, text);
      input.value       = '';
      input.style.height = 'auto';
      await _loadMessages(true);
    } catch (e) {
      UI.toast(e.message, 'danger');
    } finally {
      btn.disabled = false;
      input.focus();
    }
  }

  // ----------------------------------------------------------
  async function _deleteMsg(msgId) {
    try {
      await API.chat.deleteMessage(msgId);
      await _loadMessages(false);
    } catch (e) {
      UI.toast(e.message, 'danger');
    }
  }

  // ----------------------------------------------------------
  async function _updateChatBadge() {
    try {
      const convs  = await API.chat.conversations();
      const total  = convs.reduce((s, c) => s + (c.unread_count || 0), 0);
      const badge  = document.getElementById('chat-badge');
      if (badge) {
        badge.textContent  = total;
        badge.style.display = total > 0 ? '' : 'none';
      }
    } catch (e) {
      // silent
    }
  }

  // ----------------------------------------------------------
  // Helpers
  // ----------------------------------------------------------
  function _stopPolling() {
    if (_pollTimer) { clearInterval(_pollTimer); _pollTimer = null; }
  }

  function _scrollToBottom(el) {
    el.scrollTop = el.scrollHeight;
  }

  function _isScrolledToBottom(el) {
    return el.scrollHeight - el.scrollTop - el.clientHeight < 80;
  }

  function _fmtTime(iso) {
    if (!iso) return '';
    const d = new Date(iso.replace(' ', 'T') + 'Z');
    const now = new Date();
    const isToday = d.toDateString() === now.toDateString();
    if (isToday) return d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
    return d.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' });
  }

  function _fmtDate(iso) {
    if (!iso) return '';
    const d   = new Date(iso.replace(' ', 'T') + 'Z');
    const now = new Date();
    const diff = Math.floor((now - d) / 86400000);
    if (diff === 0) return 'Heute';
    if (diff === 1) return 'Gestern';
    return d.toLocaleDateString('de-DE', { day: '2-digit', month: 'long', year: 'numeric' });
  }

  function _esc(s) {
    if (!s) return '';
    return String(s)
      .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;')
      .replace(/\n/g, '<br>');
  }

  // ----------------------------------------------------------
  return {
    init,
    _showList,
    _openThread,
    _send,
    _deleteMsg,
  };

})();