// MagazynZysku.pl — Chatbot Widget
// Floating chat widget connected to n8n -> Claude AI (Sales Agent)
// Self-contained IIFE with all CSS inline
(function() {
  'use strict';

  var WEBHOOK = 'https://n8n.magazynzysku.pl/webhook/chatbot';
  var sessionId = sessionStorage.getItem('mz_chat_session');
  if (!sessionId) {
    sessionId = 'mz_' + Date.now().toString(36) + Math.random().toString(36).substr(2, 6);
    sessionStorage.setItem('mz_chat_session', sessionId);
  }

  var history = [];
  try {
    var saved = sessionStorage.getItem('mz_chat_history');
    if (saved) history = JSON.parse(saved);
  } catch(e) {}

  function saveHistory() {
    try {
      sessionStorage.setItem('mz_chat_history', JSON.stringify(history));
    } catch(e) {}
  }

  // --- Inject Styles ---
  var style = document.createElement('style');
  style.textContent = [
    '#mz-chat-btn{position:fixed;bottom:24px;right:24px;width:60px;height:60px;border-radius:50%;background:#2ECC71;border:none;cursor:pointer;box-shadow:0 4px 16px rgba(46,204,113,0.4);z-index:9999;display:flex;align-items:center;justify-content:center;transition:transform 0.3s,box-shadow 0.3s}',
    '#mz-chat-btn:hover{transform:scale(1.08);box-shadow:0 6px 24px rgba(46,204,113,0.5)}',
    '#mz-chat-btn svg{width:28px;height:28px;fill:#fff}',
    '#mz-chat-btn .badge{position:absolute;top:-2px;right:-2px;background:#E74C3C;color:#fff;font-size:11px;font-weight:700;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;display:none}',
    '#mz-chat-win{position:fixed;bottom:96px;right:24px;width:350px;height:450px;background:#fff;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.15);z-index:9998;display:none;flex-direction:column;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}',
    '#mz-chat-win.open{display:flex}',
    '#mz-chat-hdr{background:linear-gradient(135deg,#1A3A5C,#132B45);color:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}',
    '#mz-chat-hdr h4{margin:0;font-size:15px;font-weight:700}',
    '#mz-chat-hdr span{font-size:11px;opacity:0.7;display:block;margin-top:2px}',
    '#mz-chat-close{background:none;border:none;color:#fff;font-size:20px;cursor:pointer;padding:4px 8px;opacity:0.7;transition:opacity 0.2s}',
    '#mz-chat-close:hover{opacity:1}',
    '#mz-chat-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:#F8F9FA}',
    '.mz-msg{max-width:80%;padding:10px 14px;border-radius:12px;font-size:14px;line-height:1.5;word-wrap:break-word}',
    '.mz-msg-bot{align-self:flex-start;background:#fff;color:#333;border:1px solid #E9ECEF;border-radius:12px 12px 12px 2px}',
    '.mz-msg-user{align-self:flex-end;background:#2ECC71;color:#fff;border-radius:12px 12px 2px 12px}',
    '.mz-msg-typing{align-self:flex-start;background:#fff;border:1px solid #E9ECEF;border-radius:12px 12px 12px 2px;padding:10px 14px}',
    '.mz-typing-dots{display:flex;gap:4px}',
    '.mz-typing-dots span{width:8px;height:8px;border-radius:50%;background:#999;animation:mzBounce 1.4s infinite}',
    '.mz-typing-dots span:nth-child(2){animation-delay:0.2s}',
    '.mz-typing-dots span:nth-child(3){animation-delay:0.4s}',
    '@keyframes mzBounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}',
    '#mz-chat-input{display:flex;border-top:1px solid #E9ECEF;flex-shrink:0;background:#fff}',
    '#mz-chat-input input{flex:1;border:none;padding:12px 14px;font-size:14px;font-family:inherit;outline:none}',
    '#mz-chat-input button{background:#2ECC71;border:none;color:#fff;padding:0 16px;cursor:pointer;font-size:16px;transition:background 0.2s}',
    '#mz-chat-input button:hover{background:#27AE60}',
    '#mz-chat-input button:disabled{background:#ccc;cursor:default}',
    '@media(max-width:480px){#mz-chat-win{bottom:0;right:0;left:0;width:100%;height:100%;border-radius:0}#mz-chat-btn{bottom:16px;right:16px}}'
  ].join('\n');
  document.head.appendChild(style);

  // --- Create Button ---
  var btn = document.createElement('button');
  btn.id = 'mz-chat-btn';
  btn.setAttribute('aria-label', 'Otworz czat');
  btn.innerHTML = '<svg viewBox="0 0 24 24"><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.2L4 17.2V4h16v12z"/></svg><div class="badge" id="mz-chat-badge">1</div>';
  document.body.appendChild(btn);

  // --- Create Chat Window ---
  var win = document.createElement('div');
  win.id = 'mz-chat-win';
  win.innerHTML = [
    '<div id="mz-chat-hdr">',
    '  <div><h4>MagazynZysku.pl</h4><span>Czat z doradca energetycznym</span></div>',
    '  <button id="mz-chat-close" aria-label="Zamknij czat">&times;</button>',
    '</div>',
    '<div id="mz-chat-msgs"></div>',
    '<div id="mz-chat-input">',
    '  <input type="text" placeholder="Napisz wiadomosc..." id="mz-chat-field" autocomplete="off">',
    '  <button id="mz-chat-send" aria-label="Wyslij">&#10148;</button>',
    '</div>'
  ].join('\n');
  document.body.appendChild(win);

  var msgsEl = document.getElementById('mz-chat-msgs');
  var fieldEl = document.getElementById('mz-chat-field');
  var sendBtn = document.getElementById('mz-chat-send');
  var isOpen = false;

  function addMessage(text, sender) {
    var div = document.createElement('div');
    div.className = 'mz-msg mz-msg-' + sender;
    div.textContent = text;
    msgsEl.appendChild(div);
    msgsEl.scrollTop = msgsEl.scrollHeight;
    history.push({ text: text, sender: sender });
    saveHistory();
  }

  function showTyping() {
    var div = document.createElement('div');
    div.className = 'mz-msg mz-msg-typing';
    div.id = 'mz-typing';
    div.innerHTML = '<div class="mz-typing-dots"><span></span><span></span><span></span></div>';
    msgsEl.appendChild(div);
    msgsEl.scrollTop = msgsEl.scrollHeight;
  }

  function hideTyping() {
    var el = document.getElementById('mz-typing');
    if (el) el.remove();
  }

  function renderHistory() {
    msgsEl.innerHTML = '';
    for (var i = 0; i < history.length; i++) {
      var div = document.createElement('div');
      div.className = 'mz-msg mz-msg-' + history[i].sender;
      div.textContent = history[i].text;
      msgsEl.appendChild(div);
    }
    if (history.length === 0) {
      addMessage('Czesc! Jestem doradca MagazynZysku.pl. Jak moge Ci pomoc w kwestii magazynow energii, dotacji lub oszczednosci na pradzie?', 'bot');
    }
    msgsEl.scrollTop = msgsEl.scrollHeight;
  }

  function sendMessage(text) {
    if (!text.trim()) return;
    addMessage(text, 'user');
    fieldEl.value = '';
    sendBtn.disabled = true;
    showTyping();

    fetch(WEBHOOK, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        message: text,
        session_id: sessionId
      })
    })
    .then(function(response) { return response.json(); })
    .then(function(data) {
      hideTyping();
      sendBtn.disabled = false;
      var reply = data.response || data.output || data.text || 'Przepraszam, sprobuj ponownie za chwile.';
      addMessage(reply, 'bot');
    })
    .catch(function() {
      hideTyping();
      sendBtn.disabled = false;
      addMessage('Przepraszam, wystapil blad polaczenia. Sprobuj ponownie lub zadzwon do nas.', 'bot');
    });
  }

  // --- Event Handlers ---
  btn.addEventListener('click', function() {
    isOpen = !isOpen;
    if (isOpen) {
      win.classList.add('open');
      renderHistory();
      fieldEl.focus();
    } else {
      win.classList.remove('open');
    }
  });

  document.getElementById('mz-chat-close').addEventListener('click', function() {
    isOpen = false;
    win.classList.remove('open');
  });

  sendBtn.addEventListener('click', function() {
    sendMessage(fieldEl.value);
  });

  fieldEl.addEventListener('keydown', function(e) {
    if (e.key === 'Enter') {
      sendMessage(fieldEl.value);
    }
  });

  // --- Export ---
  window.MagazynZyskuChat = {
    send: sendMessage,
    sessionId: sessionId
  };
})();