<%
  const fieldsLabel =
    (typeof Craft !== 'undefined' && Craft.t)
      ? Craft.t('freeform', 'Fields:')
      : 'Fields:';

  const allFieldsLabel =
    (typeof Craft !== 'undefined' && Craft.t)
      ? Craft.t('freeform', 'All fields')
      : 'All fields';

  const moreLabel =
    (typeof Craft !== 'undefined' && Craft.t)
      ? Craft.t('freeform', '(+{count} more)')
      : '(+{count} more)';

  const statusText =
    (typeof Craft !== 'undefined' && Craft.t)
      ? Craft.t('freeform', 'AI processing field (hidden from frontend)')
      : 'AI processing field (hidden from frontend)';
%>

<div class="field-preview">
  <% if (fieldsToAnalyze) { %>
    <div class="field-preview__fields">
      <strong><%= fieldsLabel %></strong>
      <% if (fieldsToAnalyze.trim() === '@') { %>
        <%= allFieldsLabel %>
      <% } else { %>
        <%
          // Extract field handles from the raw format
          const fieldHandles = fieldsToAnalyze.match(/field:([a-zA-Z0-9_]+)/g);

          if (fieldHandles) {
            const cleanHandles = fieldHandles.map(f => f.replace('field:', ''));

            const displayText = cleanHandles.length > 3
              ? cleanHandles.slice(0, 3).join(', ')
                + ' '
                + moreLabel.replace('{count}', cleanHandles.length - 3)
              : cleanHandles.join(', ');
        %>
          <%= displayText %>
        <% } else { %>
          <%= fieldsToAnalyze.length > 30
            ? fieldsToAnalyze.substring(0, 30) + '...'
            : fieldsToAnalyze %>
        <% } %>
      <% } %>
    </div>
  <% } %>

  <div class="field-preview__status">
    <em><%= statusText %></em>
  </div>
</div>
