{% extends "utilities/_base.html" %}
{% from "components/chat_dialog.html" import chat_dialog %}
{% from "components/distance_input.html" import distance_input %}
{% from "components/page_header.html" import page_header %}
{% from "components/modal.html" import render_modal %}

{% macro render_edit_automation_form() %}
    <div class="form-group">
        <label for="edit-automation-name">{{ _("Name") }}</label>
        <input type="text" id="edit-automation-name" name="name" required value="{{ selected.name }}">
    </div>
    <div class="form-group">
        <label for="edit-automation-description">{{ _("Description") }}</label>
        <textarea id="edit-automation-description" name="description" rows="3"
                  placeholder="{{ _('What does this automation do?') }}">{{ selected.description or '' }}</textarea>
    </div>
{% endmacro %}

{% macro render_configure_form() %}
    {% for field in config_fields %}
        <div class="form-group">
            {% if field.type in ('float', 'int') %}
                <label for="config-{{ field.key }}">{{ field.label }}</label>
                <input type="number" id="config-{{ field.key }}" name="{{ field.key }}" {{ "required" if field.required }}
                       {% if field.min is not none %}min="{{ field.min }}"{% endif %}
                       {% if field.max is not none %}max="{{ field.max }}"{% endif %}
                       step="{{ field.step if field.step is not none else (1 if field.type == 'int' else 'any') }}"
                       value="{{ field.value }}">
            {% endif %}
            {% if field.type == 'string' %}
                <label for="config-{{ field.key }}">{{ field.label }}</label>
                <input type="text" id="config-{{ field.key }}" name="{{ field.key }}" {{ "required" if field.required }} value="{{ field.value }}">
            {% endif %}
            {% if field.type == 'distance' %}
                <label for="config-{{ field.key }}">{{ field.label }}</label>
                {{ distance_input(
                    'config-' ~ field.key,
                    field.key,
                    field.value,
                    field.unit_key,
                    field.unit,
                    field.units,
                    min=field.min,
                    max=field.max,
                    step=field.step,
                    required=field.required
                ) }}
            {% endif %}
            {% if field.type == 'bool' %}
                <label class="checkbox-label" for="config-{{ field.key }}">
                    <input type="checkbox" id="config-{{ field.key }}" name="{{ field.key }}" {{ "checked" if field.value else "" }}>
                    {{ field.label }}
                </label>
            {% endif %}
            {% if field.help %}<p class="hint-text">{{ field.help }}</p>{% endif %}
        </div>
    {% endfor %}
{% endmacro %}

{% block title %}{{ _("Automations - Yaffo") }}{% endblock %}

{% block utility_styles %}
    <link rel="stylesheet" href="{{ url_for('static', filename='components/cron_builder.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='utilities/automations.css') }}">
{% endblock %}

{% block utility_content %}
{% if not selected %}
<div class="empty-state">
    <h2>{{ _("No automation selected") }}</h2>
    <p>{{ _("Pick one from the sidebar, or create one with “New automation”.") }}</p>
</div>
{% else %}
{% set header_actions %}
<div class="automation-actions">
    <button type="button" class="{{ 'btn-secondary' if selected.enabled else 'btn-primary' }}"
            hx-post="{{ url_for('automations_toggle_enabled', slug=selected.slug) }}"
            hx-swap="none">{{ _("Disable") if selected.enabled else _("Enable") }}
    </button>
    {% if scoped_run %}
        <button type="button" class="btn-secondary js-run-files" data-mode="any">{{ _("Run…") }}</button>
    {% else %}
        <button type="button" id="run-automation-button" class="btn-secondary">{{ _("Run now") }}</button>
    {% endif %}
    <a href="{{ url_for('automations_edit_triggers', slug=selected.slug) }}"
       class="btn-secondary" data-icon="edit">{{ _("Edit triggers") }}</a>
    {% if config_fields %}
        <button type="button" id="configure-automation-button" class="btn-secondary">{{ _("Configure") }}
        </button>
    {% endif %}
    {% if not selected.is_system %}
        <button type="button" id="edit-automation-button" class="btn-secondary">{{ _("Edit details") }}
        </button>
        <button type="button" id="delete-automation-button" class="btn-danger"
                data-icon="delete">{{ _("Delete") }}
        </button>
    {% endif %}
</div>
{% endset %}
{% call page_header(selected.display_name, actions=header_actions) %}
    {% if selected.is_system %}
        {{ selected.display_description or _("A built-in automation that ships with Yaffo. System automations cannot be edited or deleted.") }}
    {% else %}
        {{ selected.display_description or _("No description yet — use “Edit details” to add one.") }}
    {% endif %}
{% endcall %}

<div class="automation-detail">
    {# System automations are code-backed (no AI builder, no editable code), so the
       conversation panel and code section are hidden — only the header actions,
       config, and run history apply to them. #}
    {% if not selected.is_system %}
    <div class="automation-lower">
        <section class="chat-card automation-conversation">
            {{ chat_dialog(
                        'automation-chat',
                        _('Conversation'),
                        _('Describe what this automation should do and the assistant will write it.'),
                        _('Describe what this automation should do…'),
                        messages=selected.messages,
                        empty_text=(_('System automations are built-in and have no conversation.')
                                    if selected.is_system
                                    else _('No conversation yet — describe what you want and the assistant will build it.')),
                        disabled=selected.is_system
                    ) }}
        </section>

        <section class="automation-code-section">
            <div class="automation-code-head">
                <h3 class="automation-section-title">{{ _("Code") }}</h3>
                {% if selected_has_draft %}
                    {# Unpublished draft: one panel toggles between the working draft and
                       the live (active) code. The visible view is the version tested. #}
                    <div class="automation-code-toggle" role="group" aria-label="{{ _('Code version') }}">
                        <button type="button" class="js-code-toggle active" data-version="working">{{ _("Working code") }}</button>
                        <button type="button" class="js-code-toggle" data-version="published">{{ _("Active code") }}</button>
                    </div>
                {% endif %}
            </div>

            {% if selected_has_draft %}
                <pre class="automation-code thin-scrollbar js-code-view" data-version="working"><code>{{ selected.working_code }}</code></pre>
                {% if selected.published_code %}
                    <pre class="automation-code thin-scrollbar js-code-view" data-version="published" hidden><code>{{ selected.published_code }}</code></pre>
                {% else %}
                    <p class="no-data js-code-view" data-version="published" hidden>{{ _("No active code yet — this draft hasn’t been published.") }}</p>
                {% endif %}
            {% elif selected.published_code %}
                <pre class="automation-code thin-scrollbar"><code>{{ selected.published_code }}</code></pre>
            {% else %}
                <p class="no-data">{{ _("No published code yet.") }}</p>
            {% endif %}

            {% if selected.published_code or selected.working_code %}
                <div class="automation-test">
                    <div class="automation-test-controls">
                        <button type="button" class="btn-secondary" id="automation-test-button" data-mode="any">{{ _("Test…") }}</button>
                        {% if selected_has_draft %}
                        <button type="button" class="btn-primary"
                                hx-post="{{ url_for('automations_publish', slug=selected.slug) }}"
                                hx-swap="none">{{ _("Publish draft") }}
                        </button>
                        <button type="button" class="btn-secondary"
                                hx-post="{{ url_for('automations_discard', slug=selected.slug) }}"
                                hx-swap="none">{{ _("Discard") }}
                        </button>
                        {% endif %}
                    </div>
                    <div id="automation-test-result" class="automation-test-result" hidden></div>
                </div>
            {% endif %}
        </section>
    </div>
    {% endif %}

    {% include "utilities/automations_runs.html" %}
</div>

{% if not selected.is_system %}
    <form id="delete-automation-form" method="POST"
          action="{{ url_for('automations_delete', slug=selected.slug) }}" hidden></form>
    {{ render_modal('editAutomationModal', _('Edit automation'),
                        url_for('automations_update_details', slug=selected.slug),
                        render_edit_automation_form, _('Save')) }}
{% endif %}
{% if config_fields %}
    {{ render_modal('configureAutomationModal', _('Configure automation'),
                        url_for('automations_update_config', slug=selected.slug),
                        render_configure_form, _('Save')) }}
{% endif %}
{% endif %}
{% endblock %}

{% block scripts %}
    {% if selected %}
        <script src="{{ url_for('static', filename='utilities/automations.js') }}"></script>
        <script>
            window.PHOTO_ORGANIZER.i18nReady.then((i18n) => {
                window.PHOTO_ORGANIZER.initAutomationDelete({{ selected.display_name | tojson }}, i18n);
                window.PHOTO_ORGANIZER.initAutomationRunNow(
                    {{ url_for('automations_run_now', slug=selected.slug) | tojson }},
                    window.APP_CONFIG,
                    {{ (selected.triggers | length > 0) | tojson }},
                    {{ default_media_dir | tojson }},
                    i18n
                );
                {% if config_fields %}window.PHOTO_ORGANIZER.initAutomationConfigure();{% endif %}
                {% if not selected.is_system %}
                window.PHOTO_ORGANIZER.initAutomationDetails();
                window.PHOTO_ORGANIZER.initAutomationTest({{ selected_slug | tojson }}, window.APP_CONFIG, {{ default_media_dir | tojson }}, i18n);
                window.PHOTO_ORGANIZER.automationChat = window.PHOTO_ORGANIZER.initAutomationChat(
                    {{ selected_slug | tojson }},
                    {{ selected_status | tojson }},
                    window.APP_CONFIG,
                    i18n
                );
                {% endif %}
            });
        </script>
    {% endif %}
{% endblock %}