{% comment %}
  Qixs Chat Widget - Theme App Extension
  This widget loads the Qixs chatbot and allows configuration from both:
  1. Theme Editor (manual settings)
  2. Dashboard (programmatic control via metafields)
{% endcomment %}

{% assign widget_config = shop.metafields.qixs_chat.config %}

{% comment %} Check if widget is enabled (dashboard takes priority) {% endcomment %}
{% if widget_config.enabled == false %}
  {% comment %} Widget disabled via dashboard {% endcomment %}
{% elsif block.settings.enable_widget == false %}
  {% comment %} Widget disabled via theme editor {% endcomment %}
{% else %}
  {% comment %} Widget is enabled - render it {% endcomment %}
  <div id="qixs-chatbot-root"
       data-deepgram-src="https://cdn.jsdelivr.net/npm/@deepgram/sdk"
       data-qixs-src="https://dev.embed.qixs.ai/qixs-embed.js"
       data-qixs-token-endpoint="/apps/qixs"
       data-placement-bottom="{{ block.settings.placement_bottom }}"
       data-placement-right="{{ block.settings.placement_right }}"
       data-enabled="true"
       data-widget-token="{{ widget_config.token }}"
       data-shop-domain="{{ shop.permanent_domain }}"
       style="position:fixed; bottom:{{ block.settings.placement_bottom }}; right:{{ block.settings.placement_right }}; z-index:{{ block.settings.z_index }};">
    <!-- Container for Qixs Chat UI. The injected scripts will mount into this element. -->
  </div>
  
  <script src="{{ 'main.js' | asset_url }}" defer></script>
  {{ 'chat-style.css' | asset_url | stylesheet_tag }}
{% endif %}

{% schema %}
{
  "name": "Qixs Chat Widget",
  "target": "body",
  "settings": [
    {
      "type": "checkbox",
      "id": "enable_widget",
      "label": "Enable Chat Widget",
      "default": true,
      "info": "Toggle to show/hide the chat widget. Can also be controlled from the Qixs dashboard."
    },
    {
      "type": "text",
      "id": "placement_bottom",
      "label": "Bottom offset",
      "default": "20px",
      "info": "Distance from bottom of screen (e.g., 20px, 2rem)"
    },
    {
      "type": "text",
      "id": "placement_right",
      "label": "Right offset",
      "default": "20px",
      "info": "Distance from right of screen (e.g., 20px, 2rem)"
    },
    {
      "type": "range",
      "id": "z_index",
      "label": "Z-Index",
      "min": 1000,
      "max": 9900,
      "step": 100,
      "default": 9900,
      "info": "Controls layering order. Higher values appear on top."
    }
  ]
}
{% endschema %}