components/shopify-chat.js

class ShopifyChat extends HTMLElement {
  constructor() {
    super();
    this.visible = false;
    this.messages = [];
  }

  connectedCallback() {
    this.render();
    this.setupEventListeners();
    this.loadMessages();
  }

  render() {
    this.innerHTML = `
      <div class="shopify-chat-toggle">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
        </svg>
      </div>
      <div class="shopify-chat-widget" style="display: none;">
        <div class="shopify-chat-header">
          <h3>Need help?</h3>
        </div>
        <div class="shopify-chat-messages"></div>
        <div class="shopify-chat-input">
          <input type="text" placeholder="Type your message..." />
          <button>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <line x1="22" y1="2" x2="11" y2="13"></line>
              <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
            </svg>
          </button>
        </div>
      </div>
    `;
  }

  setupEventListeners() {
    const toggle = this.querySelector('.shopify-chat-toggle');
    const widget = this.querySelector('.shopify-chat-widget');
    const input = this.querySelector('.shopify-chat-input input');
    const button = this.querySelector('.shopify-chat-input button');

    toggle.addEventListener('click', () => {
      this.visible = !this.visible;
      widget.style.display = this.visible ? 'flex' : 'none';
    });

    const sendMessage = () => {
      const message = input.value.trim();
      if (message) {
        this.addMessage(message, 'customer');
        input.value = '';
        this.simulateReply();
      }
    };

    button.addEventListener('click', sendMessage);
    input.addEventListener('keypress', (e) => {
      if (e.key === 'Enter') sendMessage();
    });
  }

  addMessage(text, sender) {
    const messagesContainer = this.querySelector('.shopify-chat-messages');
    const messageDiv = document.createElement('div');
    messageDiv.className = `shopify-chat-message ${sender}`;
    messageDiv.textContent = text;
    messagesContainer.appendChild(messageDiv);
    messagesContainer.scrollTop = messagesContainer.scrollHeight;

    // Save to localStorage
    this.messages.push({ text, sender, timestamp: new Date().toISOString() });
    localStorage.setItem('shopifyChatMessages', JSON.stringify(this.messages));
  }

  loadMessages() {
    const savedMessages = localStorage.getItem('shopifyChatMessages');
    if (savedMessages) {
      this.messages = JSON.parse(savedMessages);
      this.messages.forEach(msg => {
        this.addMessage(msg.text, msg.sender);
      });
    }
  }

  simulateReply() {
    const replies = [
      "Thanks for your message!",
      "How can I help you today?",
      "Our team will get back to you soon.",
      "Is there anything specific you need help with?",
      "We're here to help!",
      "Thanks for reaching out!",
      "Let me check that for you...",
      "Great question! Let me find the answer."
    ];
    
    setTimeout(() => {
      const randomReply = replies[Math.floor(Math.random() * replies.length)];
      this.addMessage(randomReply, 'admin');
    }, 1000 + Math.random() * 2000);
  }
}

customElements.define('shopify-chat', ShopifyChat);