/** Foodlinkk War Room — tab + popup (stream, emoji, files) */
window.WarRoomHub = (function () {
  var EMOJIS = ['😀','😂','🙂','😉','😍','🤝','👍','👎','🙏','🔥','✅','❌','⚠️','💡','📎','📦','🚀','💬','🧠','☕','💪','🎯','📊','🧾','🇳🇱','🌍'];

  function openPopup(roomQuery) {
    var url = '/agents/warroom/popup' + (roomQuery || '');
    var w = window.open(url, 'flk-warroom', 'width=980,height=780,menubar=no,toolbar=no,location=no,status=no');
    if (w) try { w.focus(); } catch (e) {}
    return w;
  }

  function warRoomController(opts) {
    opts = opts || {};
    return {
      popupMode: !!opts.popupMode,
      souls: [],
      rooms: [],
      room: null,
      messages: [],
      draft: '',
      busy: false,
      me: { username: '', avatar_url: '', role: '' },
      lastId: 0,
      _poll: null,
      _polling: false,
      status: '',
      emojiOpen: false,
      emojis: EMOJIS,
      pendingFiles: [],
      typing: null, // { agent_key, display_name, text }

      async init() {
        await Promise.all([this.loadMe(), this.loadSouls(), this.loadRooms()]);
        var params = new URLSearchParams(window.location.search || '');
        var want = params.get('room');
        if (want) await this.openRoom(parseInt(want, 10));
        else {
          var wr = (this.rooms || []).find(function (r) { return r.kind === 'warroom'; });
          if (wr) await this.openRoom(wr.id);
          else if (this.rooms.length) await this.openRoom(this.rooms[0].id);
        }
        this.startPoll();
      },

      destroy() {
        if (this._poll) clearInterval(this._poll);
      },

      async loadMe() {
        try {
          var r = await fetch('/api/auth/me').then(function (x) { return x.json(); });
          var u = r.user || r || {};
          this.me = {
            username: u.username || '',
            avatar_url: u.avatar_url || '',
            role: u.role || '',
          };
        } catch (e) {
          this.me = { username: '', avatar_url: '', role: '' };
        }
      },

      async loadSouls() {
        try {
          var r = await fetch('/api/agents/souls').then(function (x) { return x.json(); });
          this.souls = (r.items || r.souls || r || []).filter(function (s) { return s.is_active !== false; });
        } catch (e) {
          this.souls = [];
        }
        this.$nextTick(function () { this.paintAvatars(); }.bind(this));
      },

      async loadRooms() {
        try {
          var r = await fetch('/api/agents/warroom/rooms').then(function (x) { return x.json(); });
          this.rooms = r.items || [];
        } catch (e) {
          this.rooms = [];
        }
      },

      warroomRoom() {
        return (this.rooms || []).find(function (r) { return r.kind === 'warroom'; }) || null;
      },

      async openWarroom() {
        var wr = this.warroomRoom();
        if (wr) return this.openRoom(wr.id);
        await this.loadRooms();
        wr = this.warroomRoom();
        if (wr) return this.openRoom(wr.id);
      },

      async openDm(agentKey) {
        if (this.busy) return;
        this.busy = true;
        try {
          var r = await Cockpit.api('/api/agents/warroom/rooms/dm/' + encodeURIComponent(agentKey), {
            method: 'POST',
            body: '{}',
          });
          await this.loadRooms();
          if (r.room) await this.openRoom(r.room.id);
        } catch (e) {
          if (window.Cockpit) Cockpit.toast(e.message || 'DM openen mislukt', 'error');
        }
        this.busy = false;
      },

      async openRoom(id) {
        if (!id) return;
        this.busy = true;
        this.status = '';
        this.typing = null;
        try {
          var r = await fetch('/api/agents/warroom/rooms/' + id + '/messages?limit=120').then(function (x) {
            return x.json();
          });
          this.room = r.room;
          this.messages = this.normalizeList(r.items || []);
          this.lastId = this.maxId(this.messages);
          this.$nextTick(function () {
            this.paintAvatars();
            this.scrollLog();
          }.bind(this));
        } catch (e) {
          this.status = e.message || 'Laden mislukt';
        }
        this.busy = false;
      },

      normalizeList(items) {
        return (items || []).map(function (m) {
          if (m && typeof m.metadata === 'string') {
            try { m.metadata = JSON.parse(m.metadata); } catch (e) { m.metadata = {}; }
          }
          return m;
        });
      },

      maxId(items) {
        var n = 0;
        (items || []).forEach(function (m) {
          var id = Number(m && m.id);
          if (!isNaN(id) && id > n) n = id;
        });
        return n;
      },

      paintAvatars() {
        if (!window.AgentAvatars) return;
        var root = this.$root || document;
        root.querySelectorAll('.wr-roster [data-agent-avatar], .wr-log [data-agent-avatar]').forEach(function (el) {
          AgentAvatars.paint(el, el.getAttribute('data-agent-avatar'), el.getAttribute('data-agent-color'));
        });
      },

      upsertMessage(msg) {
        if (!msg || msg.id == null) return false;
        var list = this.messages || [];
        var idx = list.findIndex(function (m) { return String(m.id) === String(msg.id); });
        if (idx >= 0) {
          list[idx] = msg;
          this.messages = list.slice();
        } else {
          this.messages = list.concat([msg]);
        }
        var idn = Number(msg.id);
        if (!isNaN(idn) && idn > (this.lastId || 0)) this.lastId = idn;
        return true;
      },

      mergeMessages(items) {
        var changed = false;
        var self = this;
        this.normalizeList(items || []).forEach(function (m) {
          if (self.upsertMessage(m)) changed = true;
        });
        return changed;
      },

      scrollLog() {
        var el = this.$refs && this.$refs.wrLog;
        if (el) el.scrollTop = el.scrollHeight;
      },

      startPoll() {
        var self = this;
        if (this._poll) clearInterval(this._poll);
        this._poll = setInterval(function () { self.pollNew(); }, 4000);
      },

      async pollNew() {
        // Cruciaal: niet pollen tijdens send/stream → voorkomt dubbele user-bubbles
        if (!this.room || this._polling || this.busy) return;
        this._polling = true;
        try {
          var url =
            '/api/agents/warroom/rooms/' +
            this.room.id +
            '/messages?limit=50&after_id=' +
            (this.lastId || 0);
          var r = await fetch(url).then(function (x) { return x.json(); });
          if (this.mergeMessages(r.items || [])) {
            this.$nextTick(function () {
              this.paintAvatars();
              this.scrollLog();
            }.bind(this));
          }
        } catch (e) { /* quiet */ }
        this._polling = false;
      },

      attachmentsOf(m) {
        var meta = (m && m.metadata) || {};
        return meta.attachments || [];
      },

      isImage(att) {
        var mime = (att && att.mime) || '';
        var name = ((att && att.name) || '').toLowerCase();
        return mime.indexOf('image/') === 0 || /\.(png|jpe?g|gif|webp)$/.test(name);
      },

      insertEmoji(em) {
        this.draft = (this.draft || '') + em;
        this.emojiOpen = false;
      },

      insertMention(key) {
        this.draft = (this.draft || '') + '@' + key + ' ';
      },

      async onPickFiles(ev) {
        var files = Array.prototype.slice.call((ev.target && ev.target.files) || []);
        if (ev.target) ev.target.value = '';
        for (var i = 0; i < files.length; i++) {
          await this.uploadFile(files[i]);
        }
      },

      async uploadFile(file) {
        if (!file) return;
        this.status = 'Uploaden…';
        try {
          var fd = new FormData();
          fd.append('file', file);
          var resp = await fetch('/api/agents/warroom/upload', { method: 'POST', body: fd, credentials: 'same-origin' });
          var data = await resp.json().catch(function () { return {}; });
          if (!resp.ok) throw new Error(data.detail || data.message || 'Upload mislukt');
          this.pendingFiles = (this.pendingFiles || []).concat([{
            url: data.url,
            name: data.name || file.name,
            mime: data.mime || file.type,
            size: data.size || file.size || 0,
          }]);
          this.status = '';
        } catch (e) {
          this.status = e.message || 'Upload mislukt';
          if (window.Cockpit) Cockpit.toast(this.status, 'error');
        }
      },

      removePending(idx) {
        this.pendingFiles = (this.pendingFiles || []).filter(function (_, i) { return i !== idx; });
      },

      canSend() {
        return !this.busy && this.room && (((this.draft || '').trim()) || (this.pendingFiles || []).length);
      },

      async send() {
        var text = (this.draft || '').trim();
        var files = (this.pendingFiles || []).slice();
        if (!this.room || this.busy) return;
        if (!text && !files.length) return;

        this.busy = true;
        this.emojiOpen = false;
        this.draft = '';
        this.pendingFiles = [];
        this.typing = null;
        this.status = 'Verzenden…';

        try {
          var resp = await fetch('/api/agents/warroom/rooms/' + this.room.id + '/messages/stream', {
            method: 'POST',
            credentials: 'same-origin',
            headers: { 'Content-Type': 'application/json', Accept: 'text/event-stream' },
            body: JSON.stringify({ content: text, attachments: files }),
          });
          if (!resp.ok) {
            var err = await resp.json().catch(function () { return {}; });
            throw new Error(err.detail || ('HTTP ' + resp.status));
          }
          await this.consumeStream(resp);
          this.status = '';
        } catch (e) {
          this.draft = text;
          this.pendingFiles = files;
          this.status = e.message || 'Verzenden mislukt';
          if (window.Cockpit) Cockpit.toast(this.status, 'error');
        }
        this.typing = null;
        this.busy = false;
        this.$nextTick(function () {
          this.paintAvatars();
          this.scrollLog();
        }.bind(this));
      },

      async consumeStream(resp) {
        var reader = resp.body.getReader();
        var decoder = new TextDecoder();
        var buf = '';
        while (true) {
          var chunk = await reader.read();
          if (chunk.done) break;
          buf += decoder.decode(chunk.value, { stream: true });
          var parts = buf.split('\n\n');
          buf = parts.pop() || '';
          for (var i = 0; i < parts.length; i++) {
            this.handleSseBlock(parts[i]);
          }
        }
        if (buf.trim()) this.handleSseBlock(buf);
      },

      handleSseBlock(block) {
        var lines = (block || '').split('\n');
        var dataLines = [];
        for (var i = 0; i < lines.length; i++) {
          if (lines[i].indexOf('data:') === 0) dataLines.push(lines[i].slice(5).trim());
        }
        if (!dataLines.length) return;
        var raw = dataLines.join('\n');
        var ev;
        try {
          ev = JSON.parse(raw);
        } catch (e) {
          return;
        }
        var type = ev.event || '';
        if (type === 'user' && ev.message) {
          this.upsertMessage(ev.message);
          this.status = 'Agent typt…';
          this.$nextTick(function () { this.scrollLog(); }.bind(this));
        } else if (type === 'typing_start') {
          this.typing = {
            agent_key: ev.agent_key,
            display_name: ev.display_name || ev.agent_key,
            text: '',
          };
          this.status = (this.typing.display_name || 'Agent') + ' typt…';
          this.$nextTick(function () { this.scrollLog(); }.bind(this));
        } else if (type === 'typing') {
          if (!this.typing || this.typing.agent_key !== ev.agent_key) {
            this.typing = {
              agent_key: ev.agent_key,
              display_name: (this.soulFor(ev.agent_key) || {}).display_name || ev.agent_key,
              text: '',
            };
          }
          this.typing.text = (this.typing.text || '') + (ev.delta || '');
          // force alpine refresh
          this.typing = Object.assign({}, this.typing);
          this.$nextTick(function () { this.scrollLog(); }.bind(this));
        } else if (type === 'agent' && ev.message) {
          this.typing = null;
          this.upsertMessage(ev.message);
          this.$nextTick(function () {
            this.paintAvatars();
            this.scrollLog();
          }.bind(this));
        } else if (type === 'system' && ev.message) {
          this.typing = null;
          this.upsertMessage(ev.message);
        } else if (type === 'error') {
          this.typing = null;
          this.status = ev.detail || 'Streamfout';
          if (window.Cockpit) Cockpit.toast(this.status, 'error');
        } else if (type === 'done') {
          this.typing = null;
        }
      },

      onKey(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
          e.preventDefault();
          this.send();
        }
      },

      popOut() {
        var q = this.room ? '?room=' + this.room.id : '';
        openPopup(q);
      },

      soulFor(key) {
        return (this.souls || []).find(function (s) { return s.agent_key === key; }) || null;
      },

      labelForMessage(m) {
        if (m.sender_type === 'user') return m.username || this.me.username || 'Jij';
        if (m.sender_type === 'agent') {
          var s = this.soulFor(m.agent_key);
          return (s && s.display_name) || m.agent_key || 'Agent';
        }
        return 'Systeem';
      },
    };
  }

  return { openPopup: openPopup, controller: warRoomController };
})();

document.addEventListener('alpine:init', function () {
  if (window.Alpine && Alpine.data) {
    Alpine.data('warRoomHub', function () {
      return WarRoomHub.controller({ popupMode: false });
    });
    Alpine.data('warRoomPopup', function () {
      return WarRoomHub.controller({ popupMode: true });
    });
  }
});