import { useEffect, useMemo, useRef, useState } from 'react';

const QUICK_REPLIES = [
  { icon: '🔍', text: 'Find me a product' },
  { icon: '❤️', text: 'Track my order' },
  { icon: '🛒', text: 'View my cart' },
  { icon: '🚚', text: "What's your shipping policy?" },
  { icon: '✅', text: 'How do I return an item?' },
];

function ChatIconSvg({ className }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
      <path
        d="M6.8 3.5A3.3 3.3 0 0 0 3.5 6.8v8.4a3.3 3.3 0 0 0 3.3 3.3h0.7v2.8c0 0.6 0.7 1 1.2 0.6l4.4-3.4h4.1a3.3 3.3 0 0 0 3.3-3.3V6.8a3.3 3.3 0 0 0-3.3-3.3H6.8Zm2.1 4.6c0-0.4 0.3-0.7 0.7-0.7h5.6c0.4 0 0.7 0.3 0.7 0.7s-0.3 0.7-0.7 0.7H9.6c-0.4 0-0.7-0.3-0.7-0.7Zm0 3.2c0-0.4 0.3-0.7 0.7-0.7h3.8c0.4 0 0.7 0.3 0.7 0.7s-0.3 0.7-0.7 0.7H9.6c-0.4 0-0.7-0.3-0.7-0.7Z"
        fill="currentColor"
      />
    </svg>
  );
}

function ThemeIcon({ mode, className }) {
  if (mode === 'light') {
    return (
      <svg className={className} viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
        <path d="M12 3v2.2M12 18.8V21M5.64 5.64l1.56 1.56M16.8 16.8l1.56 1.56M3 12h2.2M18.8 12H21M5.64 18.36l1.56-1.56M16.8 7.2l1.56-1.56" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
        <circle cx="12" cy="12" r="4.2" stroke="currentColor" strokeWidth="1.8" />
      </svg>
    );
  }

  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
      <path d="M14.5 3.5a8.5 8.5 0 1 0 6 14.5 9 9 0 1 1-6-14.5Z" fill="currentColor" />
    </svg>
  );
}

function ClearIcon({ className }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
      <path d="M9 3h6l1 2h4v2H4V5h4l1-2Zm-2 6h10l-.8 10.2a2 2 0 0 1-2 1.8H9.8a2 2 0 0 1-2-1.8L7 9Zm3 2v7m4-7v7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function CloseIcon({ className }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
      <path d="M6 6l12 12M18 6 6 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
    </svg>
  );
}

function chatStorageKey(isLoggedIn) {
  return isLoggedIn ? 'acosmaiaHistoryUser' : 'acosmaiaHistorySession';
}

function decodeHtmlEntities(value) {
  if (typeof value !== 'string') return value ?? '';
  const textarea = document.createElement('textarea');
  textarea.innerHTML = value;
  return textarea.value;
}

function renderInlineBold(text) {
  const parts = String(text).split(/(\*\*[^*]+\*\*)/g);
  return parts.map((part, index) => {
    if (part.startsWith('**') && part.endsWith('**') && part.length > 4) {
      return <strong key={`b-${index}`}>{part.slice(2, -2)}</strong>;
    }
    return <span key={`t-${index}`}>{part}</span>;
  });
}

function renderMessageContent(value) {
  const decoded = decodeHtmlEntities(value || '');
  const lines = String(decoded).split('\n');

  return lines.map((line, index) => (
    <div key={`line-${index}`}>{renderInlineBold(line)}</div>
  ));
}

function TypingIndicator() {
  return (
    <div className="woo-message assistant woo-typing" aria-live="polite">
      <span />
      <span />
      <span />
    </div>
  );
}

function ProductCard({ product }) {
  const hasSale = Boolean(product.sale_price);
  const name = decodeHtmlEntities(product.name || '');
  const description = decodeHtmlEntities(product.description || 'View product details.');
  const price = decodeHtmlEntities(product.price || '');
  const salePrice = decodeHtmlEntities(product.sale_price || '');
  const [isAdding, setIsAdding] = useState(false);
  const [added, setAdded] = useState(false);
  const averageRating = Number(product.average_rating || 0);
  const reviewCount = Number(product.review_count || 0);
  const showRating = averageRating > 0 || reviewCount > 0;

  const getAjaxAddToCartUrl = () => {
    const wcAjaxTemplate = window.wc_add_to_cart_params?.wc_ajax_url;
    if (typeof wcAjaxTemplate === 'string' && wcAjaxTemplate.includes('%%endpoint%%')) {
      return wcAjaxTemplate.replace('%%endpoint%%', 'add_to_cart');
    }

    const fallback = new URL(window.location.href);
    fallback.search = '';
    fallback.searchParams.set('wc-ajax', 'add_to_cart');
    return fallback.toString();
  };

  const getCartUrl = () => {
    const localized = typeof window.acosmaiaChat?.cart_url === 'string' ? window.acosmaiaChat.cart_url : '';
    if (localized) return localized;

    const wcCart = window.wc_add_to_cart_params?.cart_url;
    if (typeof wcCart === 'string' && wcCart) return wcCart;

    const fallback = new URL(window.location.href);
    fallback.search = '';
    fallback.hash = '';
    fallback.pathname = '/cart/';
    return fallback.toString();
  };

  const handleAddToCart = async (e) => {
    e.preventDefault();
    e.stopPropagation();

    if (added) {
      window.location.href = getCartUrl();
      return;
    }

    if (isAdding) return;

    const productId = Number(product.id || 0);
    if (!productId) return;

    setIsAdding(true);

    try {
      const body = new URLSearchParams();
      body.set('product_id', String(productId));
      body.set('quantity', '1');

      const response = await fetch(getAjaxAddToCartUrl(), {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
        },
        credentials: 'same-origin',
        body: body.toString(),
      });

      const data = await response.json().catch(() => null);
      if (!response.ok || !data || data.error) {
        throw new Error('Add to cart failed');
      }

      // Let WooCommerce themes refresh cart fragments/minicart if they listen.
      if (window.jQuery && typeof window.jQuery === 'function') {
        window.jQuery(document.body).trigger('added_to_cart', [data.fragments, data.cart_hash]);
      }

      setAdded(true);
    } catch {
      // Fallback to classic add-to-cart URL if AJAX fails.
      const fallbackUrl = typeof product.add_to_cart_url === 'string' ? product.add_to_cart_url.trim() : '';
      if (fallbackUrl) {
        window.location.href = fallbackUrl;
      }
    } finally {
      setIsAdding(false);
    }
  };

  return (
    <a className="woo-product-card" href={product.url} target="_blank" rel="noreferrer">
      {product.image ? <img src={product.image} alt={name} /> : <div className="woo-product-image-placeholder">No image</div>}
      <div className="woo-product-content">
        <h4>{name}</h4>
        <p>{description}</p>
        {showRating ? (
          <div className="woo-product-rating">
            <span>Rating: {averageRating > 0 ? averageRating.toFixed(1) : 'N/A'}</span>
            <span>({reviewCount} reviews)</span>
          </div>
        ) : null}
        <div className="woo-product-meta">
          <span className="woo-product-stock">{product.stock_status === 'instock' ? 'In stock' : 'Out of stock'}</span>
          <span className="woo-product-price">
            {hasSale ? (
              <>
                <strong>{salePrice}</strong>
                <em>{price}</em>
              </>
            ) : (
              <strong>{price}</strong>
            )}
          </span>
        </div>
        {product.add_to_cart_url ? (
          <button
            type="button"
            className="woo-add-to-cart"
            onClick={handleAddToCart}
            disabled={isAdding}
          >
            {isAdding ? 'Adding...' : added ? 'View Cart' : 'Add to Cart'}
          </button>
        ) : null}
      </div>
    </a>
  );
}

export default function App() {
  const {
    assistant_name,
    welcome_message,
    api_url,
    nonce,
    position = 'bottom-right',
    primary_color = '#0073aa',
    default_theme = 'light',
    is_logged_in: isLoggedIn = false,
    api_configured = false,
  } = window.acosmaiaChat || {};

  const [isOpen, setIsOpen] = useState(false);
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const [isTyping, setIsTyping] = useState(false);
  const [theme, setTheme] = useState(default_theme);
  const [showSuggestions, setShowSuggestions] = useState(true);

  const messagesEnd = useRef(null);
  const storageKey = useMemo(() => chatStorageKey(isLoggedIn), [isLoggedIn]);

  useEffect(() => {
    document.documentElement.style.setProperty('--woo-chat-primary', primary_color);
  }, [primary_color]);

  useEffect(() => {
    const raw = localStorage.getItem(storageKey);
    if (!raw) return;

    try {
      const parsed = JSON.parse(raw);
      if (Array.isArray(parsed.messages)) {
        setMessages(parsed.messages);
      }
      const parsedDefaultTheme = parsed?.default_theme === 'dark' ? 'dark' : 'light';
      if ((parsed.theme === 'light' || parsed.theme === 'dark') && parsedDefaultTheme === default_theme) {
        setTheme(parsed.theme);
      }
    } catch {
      localStorage.removeItem(storageKey);
    }
  }, [storageKey]);

  useEffect(() => {
    localStorage.setItem(storageKey, JSON.stringify({ messages, theme, default_theme }));
    messagesEnd.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages, theme, default_theme, storageKey]);

  useEffect(() => {
    if (!isOpen) return;

    // Wait for chat window mount and then jump to latest message.
    requestAnimationFrame(() => {
      messagesEnd.current?.scrollIntoView({ behavior: 'auto', block: 'end' });
    });
  }, [isOpen]);

  useEffect(() => {
    if (isOpen && messages.length === 0) {
      const initialMessage = api_configured 
        ? (welcome_message || 'Hi! How can I help you today?')
        : 'Please configure the AI API key in the admin settings to use this chat feature.';
      setMessages([{ role: 'assistant', content: initialMessage, products: [] }]);
    }
  }, [isOpen, messages.length, welcome_message, api_configured]);

  const send = async (forcedMessage) => {
    const text = (forcedMessage ?? input).trim();
    if (!text || isTyping) return;

    const userMsg = { role: 'user', content: text, products: [] };
    setMessages((prev) => [...prev, userMsg]);
    setInput('');
    setIsTyping(true);

    try {
      const res = await fetch(api_url, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-WP-AI-Nonce': nonce,
        },
        body: JSON.stringify({ message: text }),
      });

      const data = await res.json();
      setMessages((prev) => [
        ...prev,
        {
          role: 'assistant',
          content: data.message || data.error || 'No response.',
          show_more_url: typeof data.show_more_url === 'string' ? data.show_more_url : '',
          show_more_label: typeof data.show_more_label === 'string' && data.show_more_label ? data.show_more_label : 'Show more products',
          products: Array.isArray(data.products) ? data.products : [],
        },
      ]);
    } catch {
      setMessages((prev) => [...prev, {
        role: 'assistant',
        content: 'Connection error. Please try again.',
        show_more_url: '',
        show_more_label: '',
        products: [],
      }]);
    } finally {
      setIsTyping(false);
    }
  };

  const clear = () => {
    setMessages([]);
    localStorage.removeItem(storageKey);
  };

  const toggleOpen = () => {
    setIsOpen((prev) => !prev);
  };

  const bubbleClass = `woo-chat-bubble ${position}`;
  const windowClass = `woo-chat-window ${position} ${theme}`;

  return (
    <>
      <button onClick={toggleOpen} className={bubbleClass} type="button" aria-label="Open chat assistant">
        <ChatIconSvg className="woo-chat-bubble-icon" />
      </button>

      {isOpen ? (
        <div className={windowClass}>
          <div className="woo-chat-header">
            <strong>{assistant_name || 'AI Assistant'}</strong>
            <div className="woo-header-actions">
              <button
                type="button"
                className="woo-btn-icon"
                onClick={() => setTheme((prev) => (prev === 'light' ? 'dark' : 'light'))}
                aria-label={theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'}
                title={theme === 'light' ? 'Dark mode' : 'Light mode'}
              >
                <ThemeIcon mode={theme === 'light' ? 'dark' : 'light'} className="woo-btn-icon-svg" />
              </button>
              <button type="button" className="woo-btn-icon" onClick={clear} aria-label="Clear chat" title="Clear chat">
                <ClearIcon className="woo-btn-icon-svg" />
              </button>
              <button type="button" className="woo-btn-icon" onClick={toggleOpen} aria-label="Close chat" title="Close chat">
                <CloseIcon className="woo-btn-icon-svg" />
              </button>
            </div>
          </div>

          <div className="woo-chat-messages">
            {messages.map((m, i) => (
              <div key={`${m.role}-${i}`} className={`woo-message ${m.role}`}>
                {typeof m.content === 'string' && m.content.trim() ? (
                  <div>{renderMessageContent(m.content)}</div>
                ) : null}
                {m.role === 'assistant' && Array.isArray(m.products) && m.products.length > 0 ? (
                  <div className="woo-inline-products">
                    {m.products.slice(0, 6).map((product) => (
                      <ProductCard key={product.id} product={product} />
                    ))}
                  </div>
                ) : null}
                {m.role === 'assistant' && m.show_more_url ? (
                  <div className="woo-inline-more">
                    <a className="woo-show-more-link" href={m.show_more_url} target="_blank" rel="noreferrer">
                      {m.show_more_label || 'Show more products'}
                    </a>
                  </div>
                ) : null}
              </div>
            ))}
            {isTyping ? <TypingIndicator /> : null}
            <div ref={messagesEnd} />
          </div>

          <div className={`woo-quick-replies ${showSuggestions ? 'woo-suggestions-visible' : 'woo-suggestions-hidden'}`}>
            <div className="woo-suggestions-header">
              <button 
                type="button" 
                className="woo-toggle-suggestions" 
                onClick={() => setShowSuggestions(!showSuggestions)}
                title={showSuggestions ? 'Hide suggestions' : 'Show suggestions'}
                aria-label={showSuggestions ? 'Hide suggestions' : 'Show suggestions'}
              >
                <svg className="woo-toggle-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true" focusable="false">
                  <polyline points={showSuggestions ? "6 9 12 15 18 9" : "6 15 12 9 18 15"} />
                </svg>
              </button>
            </div>
            {showSuggestions && (
              <div className="woo-suggestions-content">
                {api_configured && QUICK_REPLIES.map((reply) => (
                  <button key={reply.text} type="button" className="woo-quick-reply-btn" onClick={() => send(reply.text)}>
                    <span className="woo-reply-icon">{reply.icon}</span>
                    <span className="woo-reply-text">{reply.text}</span>
                  </button>
                ))}
              </div>
            )}
          </div>

          <div className="woo-chat-input">
            <input
              value={input}
              onChange={(e) => setInput(e.target.value)}
              onKeyDown={(e) => e.key === 'Enter' && send()}
              placeholder={api_configured ? "Ask about products, price, stock, or policies..." : "API key not configured"}
              disabled={!api_configured}
            />
            <button type="button" onClick={() => send()} disabled={!api_configured}>Send</button>
          </div>
        </div>
      ) : null}
    </>
  );
}