// List AI Helper — small contextual triggers that hand off to the AI
// sidebar. Both surfaces just compose a focused prompt and call
// window.MR.aiAssistant.ask() — the sidebar handles all the rendering
// (markdown, inline product links, follow-up chips, add-to-list, etc.).
//
//   • WhatsMissingButton: pill in the list header. Opens the sidebar and
//     asks the AI what's missing from this specific list.
//   • EmptyStateAI: card in an empty list. "Suggest items for this list?"
//     button opens the sidebar with a starter-set prompt.

(function () {
  const e = React.createElement;

  function ask(prompt) {
    if (window.MR && window.MR.aiAssistant && typeof window.MR.aiAssistant.ask === 'function') {
      // The sidebar itself shows the Pro gate when opened by a non-Pro
      // user, so we don't need to gate here — just hand off the prompt.
      window.MR.aiAssistant.ask(prompt);
    } else {
      console.warn('[ListAIHelper] AI sidebar not ready');
    }
  }

  function WhatsMissingButton({ root }) {
    const onClick = () => {
      const prompt = `Look at my list "${root.name}"` +
        (root.description ? ` ("${root.description}")` : '') +
        `. What's typically missing from a list like this that I haven't added yet? ` +
        `Suggest specific products from the catalog plus a few placeholders for things I might still need to find. ` +
        `For each suggestion, briefly explain why.`;
      ask(prompt);
    };
    return e('button', {
      type: 'button',
      className: 'lah-trigger',
      onClick,
      title: "Ask the AI what's missing from this list",
    },
      e('svg', { width: 13, height: 13, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round' },
        e('path', { d: 'M12 2 L13.8 8.2 L20 10 L13.8 11.8 L12 18 L10.2 11.8 L4 10 L10.2 8.2 Z' })
      ),
      e('span', null, "What's missing?")
    );
  }

  function EmptyStateAI({ root, parentNode }) {
    const isWholeList = !parentNode || parentNode === root || parentNode.id === root.id;
    const containerName = isWholeList ? root.name : (parentNode && parentNode.name);
    const onClick = () => {
      const prompt = isWholeList
        ? `My list "${root.name}"` +
          (root.description ? ` ("${root.description}")` : '') +
          ` is empty. Suggest a sensible starter set of 6-10 items I should add — specific catalog products where possible, placeholders otherwise. For each, briefly say why it belongs on this list.`
        : `The "${containerName}" section of my "${root.name}" list is empty. ` +
          `Suggest 4-6 items that should live in this section. Be specific.`;
      ask(prompt);
    };
    return e('div', { className: 'lah-empty' },
      e('div', { className: 'lah-empty-spark' },
        e('svg', { width: 22, height: 22, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' },
          e('path', { d: 'M12 2 L13.8 8.2 L20 10 L13.8 11.8 L12 18 L10.2 11.8 L4 10 L10.2 8.2 Z' })
        )
      ),
      e('h4', null, isWholeList ? 'Nothing here yet' : `"${containerName}" is empty`),
      e('p', null, `Want me to suggest items${isWholeList ? '' : ' for this section'}? I'll tailor them to your kids and what's in your other lists.`),
      e('button', { type: 'button', className: 'ai-btn ai-btn--primary', onClick }, '✦ Suggest items')
    );
  }

  window.ListAIHelper = { WhatsMissingButton, EmptyStateAI };
})();