{#
  Shared macro for rendering form fields from AgentMethodField or Parameter definitions.

  Usage:
    {% from "components/field_renderer.html" import render_field, render_parameter_field %}

  render_field(field):
    Renders an AgentMethodField as an HTML form input.
    field dict keys: name, field_type, description, choices, default, required, widget

  render_parameter_field(param):
    Renders a Parameter as an HTML form input.
    param dict keys: name, description, is_required, is_secret, value
#}

{% macro render_field(field, prefix="field_") %}
<div class="flex flex-col h-full">
    <label for="{{ prefix }}{{ field.name }}" class="block text-sm font-medium text-gray-700">
        {{ field.name }}
        {% if field.required %}<span class="text-red-500">*</span>{% endif %}
    </label>
    {% if field.description %}
    <p class="text-xs text-gray-500 mt-0.5">{{ field.description }}</p>
    {% endif %}
    <div class="mt-auto pt-1.5">

    {% if field.field_type == "CharField" %}
        {% if field.widget == "Textarea" %}
        <textarea id="{{ prefix }}{{ field.name }}" name="{{ field.name }}"
            class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
            {% if field.required %}required{% endif %}
            rows="3">{{ field.default or '' }}</textarea>
        {% else %}
        <input type="text" id="{{ prefix }}{{ field.name }}" name="{{ field.name }}"
            value="{{ field.default or '' }}"
            class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
            {% if field.required %}required{% endif %}>
        {% endif %}

    {% elif field.field_type == "IntegerField" %}
        <input type="number" id="{{ prefix }}{{ field.name }}" name="{{ field.name }}"
            value="{{ field.default or '' }}"
            class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
            {% if field.required %}required{% endif %}>

    {% elif field.field_type == "FloatField" %}
        <input type="number" step="any" id="{{ prefix }}{{ field.name }}" name="{{ field.name }}"
            value="{{ field.default or '' }}"
            class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
            {% if field.required %}required{% endif %}>

    {% elif field.field_type == "BooleanField" %}
        <div class="flex items-center">
            <input type="checkbox" id="{{ prefix }}{{ field.name }}" name="{{ field.name }}"
                class="rounded border-gray-300 text-blue-600 shadow-sm focus:ring-blue-500"
                {% if field.default %}checked{% endif %}>
            <label for="{{ prefix }}{{ field.name }}" class="ml-2 text-sm text-gray-600">Enable</label>
        </div>

    {% elif field.field_type == "ChoiceField" %}
        {% if field.widget == "RadioSelect" %}
        <div class="space-y-2">
            {% for choice in (field.choices or []) %}
            {% set choice_value = choice[0] if choice is iterable and choice is not string else choice %}
            {% set choice_label = choice[1] if choice is iterable and choice is not string else choice %}
            <label class="flex items-center">
                <input type="radio" name="{{ field.name }}" value="{{ choice_value }}"
                    class="border-gray-300 text-blue-600 focus:ring-blue-500"
                    {% if field.default == choice_value %}checked{% endif %}
                    {% if field.required %}required{% endif %}>
                <span class="ml-2 text-sm text-gray-600">{{ choice_label }}</span>
            </label>
            {% endfor %}
        </div>
        {% else %}
        <select id="{{ prefix }}{{ field.name }}" name="{{ field.name }}"
            class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
            {% if field.required %}required{% endif %}>
            <option value="">-- Select --</option>
            {% for choice in (field.choices or []) %}
            {% set choice_value = choice[0] if choice is iterable and choice is not string else choice %}
            {% set choice_label = choice[1] if choice is iterable and choice is not string else choice %}
            <option value="{{ choice_value }}" {% if field.default == choice_value %}selected{% endif %}>
                {{ choice_label }}
            </option>
            {% endfor %}
        </select>
        {% endif %}

    {% elif field.field_type == "MultipleChoiceField" %}
        <select id="{{ prefix }}{{ field.name }}" name="{{ field.name }}" multiple
            class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
            {% if field.required %}required{% endif %}>
            {% for choice in (field.choices or []) %}
            {% set choice_value = choice[0] if choice is iterable and choice is not string else choice %}
            {% set choice_label = choice[1] if choice is iterable and choice is not string else choice %}
            <option value="{{ choice_value }}">{{ choice_label }}</option>
            {% endfor %}
        </select>

    {% elif field.field_type == "EmailField" %}
        <input type="email" id="{{ prefix }}{{ field.name }}" name="{{ field.name }}"
            value="{{ field.default or '' }}"
            class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
            {% if field.required %}required{% endif %}>

    {% elif field.field_type == "DateField" %}
        <input type="date" id="{{ prefix }}{{ field.name }}" name="{{ field.name }}"
            value="{{ field.default or '' }}"
            class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
            {% if field.required %}required{% endif %}>

    {% elif field.field_type == "DateTimeField" %}
        <input type="datetime-local" id="{{ prefix }}{{ field.name }}" name="{{ field.name }}"
            value="{{ field.default or '' }}"
            class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
            {% if field.required %}required{% endif %}>

    {% else %}
        {# Fallback to text input for unknown types #}
        <input type="text" id="{{ prefix }}{{ field.name }}" name="{{ field.name }}"
            value="{{ field.default or '' }}"
            class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
            {% if field.required %}required{% endif %}>
    {% endif %}
    </div>{# end mt-auto input wrapper #}
</div>
{% endmacro %}


{% macro render_parameter_field(param, prefix="param_") %}
<div class="mb-3">
    <div class="flex items-center gap-2 mb-1">
        <label for="{{ prefix }}{{ param.name }}" class="block text-sm font-medium text-gray-700">
            {{ param.name }}
            {% if param.is_required %}<span class="text-red-500">*</span>{% endif %}
        </label>
        {% if param.from_env %}
        <span class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-medium bg-emerald-50 text-emerald-700 border border-emerald-200" title="Value loaded from environment variable">
            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
            .env
        </span>
        {% endif %}
    </div>
    {% if param.description %}
    <p class="text-xs text-gray-500 mb-1">{{ param.description }}</p>
    {% endif %}
    {% if param.from_env and param.is_secret %}
    {# Secret from env: don't expose value in HTML, show masked placeholder #}
    <input type="password"
        id="{{ prefix }}{{ param.name }}" name="{{ param.name }}"
        placeholder="••••••••  (from .env)"
        data-env-set="true"
        class="w-full rounded-md border-emerald-300 bg-emerald-50/30 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
        {% if param.is_required %}required{% endif %}>
    {% elif param.from_env %}
    {# Non-secret from env: show the value, green border #}
    <input type="text"
        id="{{ prefix }}{{ param.name }}" name="{{ param.name }}"
        value="{{ param.value or '' }}"
        data-env-set="true"
        class="w-full rounded-md border-emerald-300 bg-emerald-50/30 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
        {% if param.is_required %}required{% endif %}>
    {% else %}
    <input type="{{ 'password' if param.is_secret else 'text' }}"
        id="{{ prefix }}{{ param.name }}" name="{{ param.name }}"
        value="{{ param.value or '' }}"
        class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
        {% if param.is_required %}required{% endif %}>
    {% endif %}
</div>
{% endmacro %}


{% macro render_hitl_field(field_name, field_def) %}
{#
  Renders a HITL form field from supervaizer_form payload.
  field_def is a dict like: {"type": "checkbox", "label": "Approved", "required": true}
#}
<div class="mb-3">
    <label for="hitl_{{ field_name }}" class="block text-sm font-medium text-gray-700 mb-1">
        {{ field_def.get("label", field_name) }}
        {% if field_def.get("required") %}<span class="text-red-500">*</span>{% endif %}
    </label>

    {% set ftype = field_def.get("type", "text") %}

    {% if ftype == "checkbox" %}
        <div class="flex items-center">
            <input type="checkbox" id="hitl_{{ field_name }}" name="{{ field_name }}"
                class="rounded border-gray-300 text-blue-600 shadow-sm focus:ring-blue-500">
            <label for="hitl_{{ field_name }}" class="ml-2 text-sm text-gray-600">Yes</label>
        </div>
    {% elif ftype == "select" %}
        <select id="hitl_{{ field_name }}" name="{{ field_name }}"
            class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
            {% if field_def.get("required") %}required{% endif %}>
            <option value="">-- Select --</option>
            {% for opt in field_def.get("options", []) %}
            {% if opt is iterable and opt is not string and opt | length >= 2 %}
            <option value="{{ opt[0] }}">{{ opt[1] }}</option>
            {% else %}
            <option value="{{ opt }}">{{ opt }}</option>
            {% endif %}
            {% endfor %}
        </select>
    {% elif ftype == "textarea" %}
        <textarea id="hitl_{{ field_name }}" name="{{ field_name }}"
            class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
            rows="3" {% if field_def.get("required") %}required{% endif %}></textarea>
    {% else %}
        <input type="{{ ftype }}" id="hitl_{{ field_name }}" name="{{ field_name }}"
            class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
            {% if field_def.get("required") %}required{% endif %}>
    {% endif %}
</div>
{% endmacro %}


{% macro status_badge(status_value) %}
{% if status_value == "completed" %}
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-700">COMPLETED</span>
{% elif status_value == "in_progress" %}
<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-700">
    <span class="w-1.5 h-1.5 rounded-full bg-blue-500 animate-pulse inline-block"></span>
    IN_PROGRESS
</span>
{% elif status_value == "awaiting" %}
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-700">AWAITING</span>
{% elif status_value == "failed" %}
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-700">FAILED</span>
{% elif status_value in ("stopped", "cancelled") %}
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-600">STOPPED</span>
{% else %}
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-600">{{ status_value }}</span>
{% endif %}
{% endmacro %}