{% extends 'base.html.twig' %}

{% block title %}FactFinder export App Configuration{% endblock %}

{% block body %}
    <div class="Polaris-Page Polaris-Page--narrowWidth">
        <div class="Polaris-Page__Content">
            <div class="Polaris-Layout">
                <div class="Polaris-Layout__Section">
                    <h1 class="Polaris-DisplayText Polaris-DisplayText--sizeLarge">FactFinder export App
                        Configuration</h1>

                    {# Flash messages #}
                    {% for message in app.flashes('success') %}
                        <div class="Polaris-Banner Polaris-Banner--statusSuccess" role="alert"
                             style="margin-top:10px; background: darkgreen; color: white; padding: 5px 10px; display: inline-block">
                            <div class="Polaris-Banner__Content">{{ message }}</div>
                        </div>
                    {% endfor %}
                    {% for message in app.flashes('error') %}
                        <div class="Polaris-Banner Polaris-Banner--statusCritical" role="alert"
                             style="margin-top:10px; background: red; color: white; padding: 5px 10px; display: inline-block">
                            <div class="Polaris-Banner__Content">{{ message }}</div>
                        </div>
                    {% endfor %}

                    <form method="post" class="Polaris-Card" style="margin-top:10px;">
                        <div class="Polaris-Card__Section">
                            <div class="Polaris-FormLayout">
                                <div class="Polaris-Card__Header">
                                    <h3 class="Polaris-Heading">Main Settings</h3>
                                </div>

                                {# FactFinder Channel Name #}
                                <div class="Polaris-FormLayout__Item">
                                    <div class="Polaris-Labelled__LabelWrapper">
                                        <div class="Polaris-Label">
                                            <label for="ff_channel_name" class="Polaris-Label__Text">
                                                FactFinder Channel Name <span style="color:red">*</span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="Polaris-TextField">
                                        <input id="ff_channel_name" name="ff_channel_name" type="text"
                                               class="Polaris-TextField__Input"
                                               value="{{ config.ffChannelName ?? '' }}"
                                               placeholder="MyChannel" required>
                                        <div class="Polaris-TextField__Backdrop"></div>
                                    </div>
                                </div>

                                {# Notification email #}
                                <div class="Polaris-FormLayout__Item">
                                    <div class="Polaris-Labelled__LabelWrapper">
                                        <div class="Polaris-Label">
                                            <label for="notification_email" class="Polaris-Label__Text">
                                                Notification Email (set if you want to receive success or error export notifications)
                                            </label>
                                        </div>
                                    </div>
                                    <div class="Polaris-TextField">
                                        <input id="notification_email" name="notification_email" type="email"
                                               class="Polaris-TextField__Input"
                                               value="{{ config.notificationEmail ?? '' }}"
                                               placeholder="example@example.com">
                                        <div class="Polaris-TextField__Backdrop"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="Polaris-Card__Section">
                            <div class="Polaris-FormLayout">
                                <div class="Polaris-Card__Header">
                                    <h2 class="Polaris-Heading">Upload Settings</h2>
                                    <p class="Polaris-TextContainer">Configure the connection details</p>
                                </div>

                                {# Protocol #}
                                <div class="Polaris-FormLayout__Item">
                                    <div class="Polaris-Labelled">
                                        <label class="Polaris-Labelled__Label" for="protocol">Protocol</label>
                                        <select id="protocol" name="protocol" class="Polaris-Select" required style="display: block;margin-top: 6px;padding: 5px;width: 100%;">
                                            <option value="FTP" {% if config.protocol.value == 'FTP' %}selected{% endif %}>FTP</option>
                                            <option value="SFTP" {% if config.protocol.value == 'SFTP' %}selected{% endif %}>SFTP</option>
                                        </select>
                                    </div>
                                </div>

                                {# Server URL #}
                                <div class="Polaris-FormLayout__Item">
                                    <div class="Polaris-Labelled__LabelWrapper">
                                        <div class="Polaris-Label">
                                            <label for="server_url" class="Polaris-Label__Text">
                                                Server URL <span style="color:red">*</span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="Polaris-TextField">
                                        <input id="server_url" name="server_url" type="text"
                                               class="Polaris-TextField__Input"
                                               value="{{ config.serverUrl ?? '' }}"
                                               placeholder="ftp.example.com" required>
                                        <div class="Polaris-TextField__Backdrop"></div>
                                    </div>
                                </div>

                                {# Port #}
                                <div class="Polaris-FormLayout__Item">
                                    <div class="Polaris-Labelled__LabelWrapper">
                                        <div class="Polaris-Label">
                                            <label for="port" class="Polaris-Label__Text">
                                                Port <span style="color:red">*</span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="Polaris-TextField">
                                        <input id="port" name="port" type="number"
                                               class="Polaris-TextField__Input"
                                               value="{{ config.port ?? 22 }}" required>
                                        <div class="Polaris-TextField__Backdrop"></div>
                                    </div>
                                </div>

                                {# Username #}
                                <div class="Polaris-FormLayout__Item">
                                    <div class="Polaris-Labelled__LabelWrapper">
                                        <div class="Polaris-Label">
                                            <label for="username" class="Polaris-Label__Text">
                                                Username <span style="color:red">*</span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="Polaris-TextField">
                                        <input id="username" name="username" type="text"
                                               class="Polaris-TextField__Input"
                                               value="{{ config.username ?? '' }}" required>
                                        <div class="Polaris-TextField__Backdrop"></div>
                                    </div>
                                </div>

                                {# Root Directory #}
                                <div class="Polaris-FormLayout__Item">
                                    <div class="Polaris-Labelled__LabelWrapper">
                                        <div class="Polaris-Label">
                                            <label for="root_directory" class="Polaris-Label__Text">
                                                Root Directory <span style="color:red">*</span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="Polaris-TextField">
                                        <input id="root_directory" name="root_directory" type="text"
                                               class="Polaris-TextField__Input"
                                               value="{{ config.rootDirectory ?? '' }}" required>
                                        <div class="Polaris-TextField__Backdrop"></div>
                                    </div>
                                </div>

                                {# Private Key Content #}
                                <div class="Polaris-FormLayout__Item">
                                    <div class="Polaris-Labelled__LabelWrapper">
                                        <div class="Polaris-Label">
                                            <label for="private_key_content" class="Polaris-Label__Text">Private Key
                                                Content</label>
                                        </div>
                                    </div>
                                    <div class="Polaris-TextField Polaris-TextField--multiline">
                                      <textarea id="private_key_content" name="private_key_content"
                                                class="Polaris-TextField__Input"
                                                rows="5"
                                                placeholder="-----BEGIN PRIVATE KEY-----">
                                                {{ config.privateKeyContent ?? '' }}
                                      </textarea>
                                      <div class="Polaris-TextField__Backdrop"></div>
                                    </div>
                                </div>

                                {# Key Passphrase #}
                                <div class="Polaris-FormLayout__Item">
                                    <div class="Polaris-Labelled__LabelWrapper">
                                        <div class="Polaris-Label">
                                            <label for="key_passphrase" class="Polaris-Label__Text">
                                                FTP Password / SFTP Key Passphrase <span style="color:red">*</span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="Polaris-TextField">
                                        <input id="key_passphrase" name="key_passphrase" type="password"
                                               class="Polaris-TextField__Input"
                                               value="{{ config.keyPassphrase ?? '' }}" required>
                                        <div class="Polaris-TextField__Backdrop"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="Polaris-Card__Section">
                            <div class="Polaris-FormLayout">
                                <div class="Polaris-Card__Header">
                                    <h3 class="Polaris-Heading">Import Settings</h3>
                                    <p class="Polaris-TextContainer">Fill in only if you want to use automatic import
                                        start after generating a new CSV file</p>
                                </div>

                                {# FactFinder Server URL #}
                                <div class="Polaris-FormLayout__Item">
                                    <div class="Polaris-Labelled__LabelWrapper">
                                        <div class="Polaris-Label">
                                            <label for="ff_api_server_url" class="Polaris-Label__Text">FactFinder Server
                                                URL</label>
                                        </div>
                                    </div>
                                    <div class="Polaris-TextField">
                                        <input id="ff_api_server_url" name="ff_api_server_url" type="text"
                                               class="Polaris-TextField__Input"
                                               value="{{ config.ffApiServerUrl ?? '' }}"
                                               placeholder="https://domain.fact-finder.de/fact-finder">
                                        <div class="Polaris-TextField__Backdrop"></div>
                                    </div>
                                </div>

                                {# FactFinder Username #}
                                <div class="Polaris-FormLayout__Item">
                                    <div class="Polaris-Labelled__LabelWrapper">
                                        <div class="Polaris-Label">
                                            <label for="ff_api_username" class="Polaris-Label__Text">FactFinder
                                                Username</label>
                                        </div>
                                    </div>
                                    <div class="Polaris-TextField">
                                        <input id="ff_api_username" name="ff_api_username" type="text"
                                               class="Polaris-TextField__Input"
                                               value="{{ config.ffApiUsername ?? '' }}"
                                               placeholder="myusername">
                                        <div class="Polaris-TextField__Backdrop"></div>
                                    </div>
                                </div>

                                {# FactFinder Password #}
                                <div class="Polaris-FormLayout__Item">
                                    <div class="Polaris-Labelled__LabelWrapper">
                                        <div class="Polaris-Label">
                                            <label for="ff_api_password" class="Polaris-Label__Text">Password</label>
                                        </div>
                                    </div>
                                    <div class="Polaris-TextField">
                                        <input id="ff_api_password" name="ff_api_password" type="password"
                                               class="Polaris-TextField__Input"
                                               value="{{ config.ffApiPassword ?? '' }}">
                                        <div class="Polaris-TextField__Backdrop"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="Polaris-Card__Section">
                            <div class="Polaris-FormLayout">
                                <div class="Polaris-Card__Header">
                                    <h3 class="Polaris-Heading">Experimental features</h3>
                                    <p class="Polaris-TextContainer">Below you'll find beta features. Do not use this in production</p>
                                </div>

                                <div class="Polaris-Card__Header">
                                    <h4 class="Polaris-Heading">Additional product metafields to export</h4>
                                    <p class="Polaris-TextContainer">Select product metafields (namespace.key). These fields will be appended as columns to exported CSV.</p>
                                </div>

                                <div class="Polaris-FormLayout__Item">
                                    <select id="export_metafields" name="export_metafields[]" multiple style="min-height: 120px; width:100%;">
                                        {% for mf in selectedMetafields %}
                                            <option value="{{ mf }}" selected>{{ mf }}</option>
                                        {% endfor %}
                                    </select>
                                    <p class="Polaris-Text">Select product metafields (namespace.key). These fields will be appended as columns to exported CSV.</p>
                                </div>

                                {# --- Real-Time Synchronization --- #}
                                <div class="Polaris-Card__Header">
                                    <h4 class="Polaris-Heading">Real-Time Synchronization</h4>
                                    <p class="Polaris-TextContainer">Enable automatic synchronization between Shopify and FactFinder.</p>
                                </div>

                                <div class="Polaris-FormLayout__Item">
                                    <label class="Polaris-Label" style="display:flex; align-items:center; gap:8px;">
                                        <input type="checkbox" id="real_time_sync_enabled" name="real_time_sync_enabled"
                                               {% if config.realTimeSyncEnabled %}checked{% endif %}>
                                        Enable real-time synchronization
                                    </label>
                                </div>

                                <div id="realtime-config-section"
                                     style="display: {% if config.realTimeSyncEnabled %}block{% else %}none{% endif %}; margin-top: 15px; margin-left: 15px; border:1px solid #ddd; padding:15px; border-radius:8px; background:#fafafa;">

                                    <h4 class="Polaris-Heading" style="margin-bottom:8px;">Channel Mappings</h4>
                                    <p class="Polaris-TextContainer" style="margin-bottom:15px;">Map FactFinder Channels to Shopify Sales Channels and Languages.</p>

                                    <div id="mappings-container">
                                        {% set mappings = config.realTimeSyncMappings ?? [] %}
                                        {% for mapping in mappings %}
                                            <div class="mapping-row" style="display:flex; gap:10px; align-items:center; margin-bottom:10px;">
                                                <input type="text"
                                                       name="real_time_sync_mappings[{{ loop.index0 }}][ff_channel]"
                                                       placeholder="FactFinder Channel Name"
                                                       value="{{ mapping.ff_channel ?? '' }}"
                                                       class="Polaris-TextField__Input" style="flex:2;">

                                                <select name="real_time_sync_mappings[{{ loop.index0 }}][sales_channel]"
                                                        class="Polaris-Select" style="flex:2;">
                                                    {% for key, channel in salesChannels %}
                                                        <option value="{{ key }}"
                                                                {% if mapping.sales_channel == key %}selected{% endif %}>
                                                            {{ channel }}
                                                        </option>
                                                    {% endfor %}
                                                </select>

                                                <select name="real_time_sync_mappings[{{ loop.index0 }}][language]"
                                                        class="Polaris-Select" style="flex:2;">
                                                    {% for key, lang in languages %}
                                                        <option value="{{ key }}"
                                                                {% if mapping.language == key %}selected{% endif %}>
                                                            {{ lang }}
                                                        </option>
                                                    {% endfor %}
                                                </select>

                                                <button type="button" class="remove-mapping Polaris-Button Polaris-Button--plain" style="color:#bf0711;">
                                                    Remove
                                                </button>
                                            </div>
                                        {% endfor %}
                                    </div>

                                    <button type="button" id="add-mapping" class="Polaris-Button Polaris-Button--plain" style="margin-top:10px;">
                                        + Add mapping
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="Polaris-Card__Section">
                            <button type="submit"
                                    class="Polaris-Button Polaris-Button--primary Polaris-Button--sizeLarge">
                                Save Configuration
                            </button>
                        </div>
                    </form>

                    {# Action Buttons #}
                    <div class="Polaris-Card">
                        <div class="Polaris-Card__Section">
                            <form action="{{ path('shopify_test_ftp_connection', app.request.query.all) }}" method="post" style="display: inline-block;">
                                <button id="test-ftp-connection-btn" class="Polaris-Button Polaris-Button--primary Polaris-Button--sizeLarge" type="submit" style="width: 175px;">
                                    <span class="Polaris-Button__Text">Test FTP connection</span>
                                </button>
                            </form>

                            <form action="{{ path('shopify_test_api_connection', app.request.query.all) }}" method="post" style="display: inline-block;">
                                <button id="test-api-connection-btn" class="Polaris-Button Polaris-Button--primary Polaris-Button--sizeLarge" type="submit" style="width: 192px;">
                                    <span class="Polaris-Button__Text">Test Import connection</span>
                                </button>
                            </form>
                        </div>
                    </div>

                    {# Export form #}
                    <div class="Polaris-Card" style="margin-top:20px;">
                        <div class="Polaris-Card__Section">
                            <h2 class="Polaris-Heading">Products export</h2>
                            <form action="{{ path('shopify_export_products', app.request.query.all) }}" method="post">
                                <div class="Polaris-FormLayout">
                                    <div class="Polaris-FormLayout__Item">
                                        <label class="Polaris-Label__Text" for="sales_channel">Sales Channel</label>
                                        <select id="sales_channel" name="sales_channel" class="Polaris-Select" style="display:block;margin-top:6px;padding:5px;width:100%;">
                                            {% for key, channel in salesChannels %}
                                                <option value="{{ key }}">{{ channel }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>

                                    <div class="Polaris-FormLayout__Item">
                                        <label class="Polaris-Label__Text" for="locale">Language</label>
                                        <select id="locale" name="locale" class="Polaris-Select" style="display:block;margin-top:6px;padding:5px;width:100%;">
                                            {% for key, locale in languages %}
                                                <option value="{{ key }}">{{ locale }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>

                                    <div class="Polaris-FormLayout__Item">
                                        <button type="submit" class="Polaris-Button Polaris-Button--primary Polaris-Button--sizeLarge">
                                            Export Data Feed
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('test-ftp-connection-btn').addEventListener('click', function() {
            this.querySelector('.Polaris-Button__Text').textContent = 'Testing FTP ...';
            const button = this;
            setTimeout(() => {
                button.disabled = true;
            }, 1000); //
        });

        document.getElementById('test-api-connection-btn').addEventListener('click', function() {
            this.querySelector('.Polaris-Button__Text').textContent = 'Testing Import ...';
            const button = this;
            setTimeout(() => {
                button.disabled = true;
            }, 1000);
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', async () => {
            const shop = '{{ shop|e('js') }}';
            const select = document.getElementById('export_metafields');

            try {
                const token = await window['app-bridge-utils'].getSessionToken(app);
                const response = await fetch(`/shopify/metafields?shop=${encodeURIComponent(shop)}`, {
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Accept': 'application/json'
                    },
                    credentials: 'same-origin'
                });

                const data = await response.json();

                if (!data.metafields) {
                    console.warn('No metafields found');
                    return;
                }

                const existing = Array.from(select.options).map(o => o.value);
                data.metafields.forEach(mf => {
                    const key = `${mf.namespace}.${mf.key}`;
                    if (existing.includes(key)) return;

                    const opt = document.createElement('option');
                    opt.value = key;
                    opt.text = `${mf.name || key} (${key})`;
                    select.appendChild(opt);
                });
            } catch (err) {
                console.error('Failed to load metafields:', err);
            }
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const checkbox = document.getElementById('real_time_sync_enabled');
            const section = document.getElementById('realtime-config-section');
            const container = document.getElementById('mappings-container');
            const addButton = document.getElementById('add-mapping');

            const salesChannels = {{ salesChannels|json_encode|raw }};
            const languages = {{ languages|json_encode|raw }};

            // Toggle visibility
            checkbox.addEventListener('change', () => {
                section.style.display = checkbox.checked ? 'block' : 'none';
            });

            // Add mapping
            addButton.addEventListener('click', () => {
                const index = container.children.length;

                const div = document.createElement('div');
                div.classList.add('mapping-row');
                div.style = 'display:flex; gap:10px; align-items:center; margin-bottom:10px;';

                div.innerHTML = `
            <input type="text" name="real_time_sync_mappings[${index}][ff_channel]"
                   placeholder="FactFinder Channel Name"
                   class="Polaris-TextField__Input" style="flex:2;">

            <select name="real_time_sync_mappings[${index}][sales_channel]" class="Polaris-Select" style="flex:2;">
                ${Object.entries(salesChannels).map(([key, name]) =>
                    `<option value="${key}">${name}</option>`
                ).join('')}
            </select>

            <select name="real_time_sync_mappings[${index}][language]" class="Polaris-Select" style="flex:2;">
                ${Object.entries(languages).map(([key, name]) =>
                    `<option value="${key}">${name}</option>`
                ).join('')}
            </select>

            <button type="button" class="remove-mapping Polaris-Button Polaris-Button--plain" style="color:#bf0711;">
                Remove
            </button>
        `;

                container.appendChild(div);
                attachRemoveHandlers(div);
            });

            // Remove handler
            function attachRemoveHandlers(scope = document) {
                scope.querySelectorAll('.remove-mapping').forEach(btn => {
                    btn.addEventListener('click', (e) => {
                        e.target.closest('.mapping-row').remove();
                    });
                });
            }

            attachRemoveHandlers(); // initialize existing ones
        });
    </script>
{% endblock %}