{% extends 'django_forms_workflows/base.html' %}
{% load crispy_forms_tags %}
{% load static %}

{% block title %}{{ form_def.name }} - {{ site_name }}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'django_forms_workflows/css/forms.css' %}">
<style>
    /* Rating stars widget */
    .rating-stars-container { display: inline-flex; gap: 0.15rem; direction: rtl; }
    .rating-stars-container input { display: none; }
    .rating-stars-container label { cursor: pointer; font-size: 1.5rem; color: #dee2e6; transition: color 0.15s; }
    .rating-stars-container label:hover,
    .rating-stars-container label:hover ~ label,
    .rating-stars-container input:checked ~ label { color: #ffc107; }
    /* Slider value display */
    .slider-value-display { font-weight: 600; min-width: 3rem; text-align: center; }
</style>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8 mx-auto">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1>{{ form_def.name }}</h1>
            {% if is_draft %}
                <span class="badge bg-warning text-dark">Draft</span>
            {% endif %}
        </div>
        {% if form_def.instructions %}
            <div class="alert alert-info">
                <i class="bi bi-info-circle"></i> <strong>Helpful Info</strong>
                {{ form_def.instructions|safe }}
            </div>
        {% endif %}
        {% if form.errors %}
        <div class="alert alert-danger d-flex align-items-center gap-2" role="alert" id="form-error-summary">
            <i class="bi bi-exclamation-triangle-fill fs-5 flex-shrink-0"></i>
            <span>
                <strong>{{ form.errors|length }} field{{ form.errors|length|pluralize }} need{{ form.errors|length|pluralize:"s," }} attention.</strong>
                Each problem is highlighted in red below — please review and correct all errors before submitting.
            </span>
        </div>
        {% endif %}

        <div class="card">
            <div class="card-body">
                {% crispy form %}
            </div>
        </div>

        {% if form_def.allow_batch_import %}
        {# ── Batch Import Panel ─────────────────────────────────────────────── #}
        <div class="card mt-4 border-primary">
            <div class="card-header bg-primary text-white d-flex align-items-center gap-2">
                <i class="bi bi-table fs-5"></i>
                <strong>Batch Import via Excel</strong>
            </div>
            <div class="card-body">
                <p class="mb-2">
                    Need to submit multiple entries at once? Download the Excel template,
                    fill in your data row by row, then upload it here.
                    Each row will be validated with the same rules as the individual form.
                </p>

                {# Step 1 – Download template #}
                <div class="d-flex align-items-start gap-3 mb-3 p-3 bg-light rounded border">
                    <div class="fs-4 text-primary pt-1"><i class="bi bi-download"></i></div>
                    <div>
                        <strong>Step 1 — Download the template</strong>
                        <p class="mb-1 text-muted small">
                            The template is generated from the current form fields.
                            <span class="text-danger fw-semibold">Red columns are required</span>;
                            <span class="text-primary fw-semibold">blue columns are optional</span>.
                            See the <em>Instructions</em> and <em>Choices&nbsp;Reference</em>
                            sheets inside the workbook for guidance.
                        </p>
                        <a href="{% url 'forms_workflows:batch_template_download' form_def.slug %}"
                           class="btn btn-outline-primary btn-sm">
                            <i class="bi bi-file-earmark-excel"></i> Download Excel Template
                        </a>
                    </div>
                </div>

                {# Step 2 – Fill and upload #}
                <div class="d-flex align-items-start gap-3 p-3 bg-light rounded border">
                    <div class="fs-4 text-success pt-1"><i class="bi bi-upload"></i></div>
                    <div class="flex-grow-1">
                        <strong>Step 2 — Upload your completed file</strong>
                        <p class="mb-2 text-muted small">
                            Only <code>.xlsx</code> files are accepted.
                            Rows that pass validation will be submitted immediately.
                            Rows with errors will be listed so you can correct and re-upload.
                        </p>
                        <form method="post"
                              action="{% url 'forms_workflows:batch_import_upload' form_def.slug %}"
                              enctype="multipart/form-data"
                              class="d-flex align-items-center gap-2 flex-wrap">
                            {% csrf_token %}
                            <input type="file"
                                   name="batch_file"
                                   accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                                   class="form-control form-control-sm"
                                   style="max-width: 320px;"
                                   required>
                            <button type="submit" class="btn btn-success btn-sm">
                                <i class="bi bi-cloud-upload"></i> Upload &amp; Validate
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        <div class="mt-3 d-flex gap-2 align-items-center">
            <a href="{% url 'forms_workflows:form_list' %}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> Back to Forms
            </a>
            {% if not is_anonymous and is_draft and draft_id %}
            <a href="{% url 'forms_workflows:discard_draft' draft_id %}"
               class="btn btn-outline-danger ms-auto">
                <i class="bi bi-trash3"></i> Discard Draft
            </a>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'django_forms_workflows/js/form-enhancements.js' %}"></script>
<script src="{% static 'django_forms_workflows/js/signature-pad.js' %}"></script>
<script>
    // Scroll to the error summary banner (or first invalid field) after
    // server-side validation returns errors.
    (function () {
        const summary = document.getElementById('form-error-summary');
        const firstInvalid = document.querySelector('.is-invalid');
        const target = summary || firstInvalid;
        if (target) {
            target.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
    })();

    document.addEventListener('DOMContentLoaded', function() {
        const formElement = document.querySelector('[data-form-enhancements="true"]');
        if (formElement) {
            // Configuration from Django
            const config = {{ form_enhancements_config|safe }};

            // Initialize form enhancements
            const formEnhancements = new FormEnhancements(formElement, config);

            // Store instance for debugging
            window.formEnhancements = formEnhancements;
        }
    });

    // ── Calculated / Formula fields ──────────────────────────────────────────
    // Each [data-calculated] input carries a data-formula attribute like
    // "{dept_code} - {job_type}".  We watch every referenced source field
    // and update the calculated field live.
    (function () {
        function evaluateFormula(formula, form) {
            return formula.replace(/\{(\w+)\}/g, function (_, name) {
                const el = form.querySelector('[name="' + name + '"]');
                if (!el) return '';
                if (el.type === 'checkbox') return el.checked ? el.value || 'true' : '';
                return el.value || '';
            });
        }

        function wireCalculatedFields(form) {
            const calcFields = form.querySelectorAll('[data-calculated="true"]');
            if (!calcFields.length) return;

            // Collect all source field names across every formula
            const sourceNames = new Set();
            calcFields.forEach(function (el) {
                const formula = el.dataset.formula || '';
                (formula.match(/\{(\w+)\}/g) || []).forEach(function (tok) {
                    sourceNames.add(tok.slice(1, -1));
                });
            });

            function updateAll() {
                calcFields.forEach(function (el) {
                    el.value = evaluateFormula(el.dataset.formula || '', form);
                });
            }

            // Attach listeners to every source field
            sourceNames.forEach(function (name) {
                const src = form.querySelector('[name="' + name + '"]');
                if (src) src.addEventListener('input', updateAll);
                if (src) src.addEventListener('change', updateAll);
            });

            updateAll(); // run once on page load
        }

        document.querySelectorAll('form').forEach(wireCalculatedFields);
    })();

    // ── Answer piping: replace {field_name} tokens in labels & help text ─
    (function () {
        var form = document.querySelector('[data-form-enhancements="true"]');
        if (!form) return;

        // Find all labels and help-text spans that contain {tokens}
        var TOKEN_RE = /\{(\w+)\}/g;
        var pipeTargets = [];

        form.querySelectorAll('label, .form-text, .help-block, small').forEach(function (el) {
            var tpl = el.textContent;
            if (TOKEN_RE.test(tpl)) {
                pipeTargets.push({ el: el, template: tpl });
            }
            TOKEN_RE.lastIndex = 0; // reset regex state
        });

        if (!pipeTargets.length) return;

        // Collect all referenced field names
        var sourceNames = new Set();
        pipeTargets.forEach(function (t) {
            var m;
            TOKEN_RE.lastIndex = 0;
            while ((m = TOKEN_RE.exec(t.template)) !== null) {
                sourceNames.add(m[1]);
            }
        });

        function updatePipes() {
            pipeTargets.forEach(function (t) {
                t.el.textContent = t.template.replace(TOKEN_RE, function (_, name) {
                    var el = form.querySelector('[name="' + name + '"]');
                    if (!el) return '{' + name + '}';
                    if (el.type === 'checkbox') return el.checked ? (el.value || 'Yes') : '';
                    if (el.tagName === 'SELECT') {
                        var opt = el.options[el.selectedIndex];
                        return opt ? opt.text : '';
                    }
                    return el.value || '';
                });
            });
        }

        sourceNames.forEach(function (name) {
            var el = form.querySelector('[name="' + name + '"]');
            if (el) {
                el.addEventListener('input', updatePipes);
                el.addEventListener('change', updatePipes);
            }
        });
        updatePipes();
    })();

    // ── Rating stars widget ──────────────────────────────────────────────
    (function () {
        document.querySelectorAll('.rating-stars-input').forEach(function (select) {
            var max = parseInt(select.dataset.maxStars) || 5;
            var container = document.createElement('div');
            container.className = 'rating-stars-container';
            for (var i = max; i >= 1; i--) {
                var inp = document.createElement('input');
                inp.type = 'radio';
                inp.name = select.name + '_stars';
                inp.value = i;
                inp.id = select.name + '_star_' + i;
                if (select.value === String(i)) inp.checked = true;
                var lbl = document.createElement('label');
                lbl.htmlFor = inp.id;
                lbl.innerHTML = '<i class="bi bi-star-fill"></i>';
                lbl.title = i + ' star' + (i > 1 ? 's' : '');
                container.appendChild(inp);
                container.appendChild(lbl);
            }
            container.addEventListener('change', function (e) {
                select.value = e.target.value;
            });
            select.style.display = 'none';
            select.parentNode.insertBefore(container, select.nextSibling);
        });
    })();

    // ── Slider value display ─────────────────────────────────────────────
    (function () {
        document.querySelectorAll('[data-slider-field]').forEach(function (slider) {
            var display = document.createElement('span');
            display.className = 'slider-value-display badge bg-primary ms-2';
            display.textContent = slider.value;
            slider.parentNode.appendChild(display);
            slider.addEventListener('input', function () {
                display.textContent = slider.value;
            });
        });
    })();

    {% if form_def.enable_captcha %}
    // ── CAPTCHA widget ───────────────────────────────────────────────────
    (function () {
        var siteKey = '{{ captcha_site_key|default:"" }}';
        var widget = document.querySelector('[data-captcha-widget]');
        var token = document.querySelector('[data-captcha-field]');
        if (!widget || !siteKey) return;

        // Detect provider from verify URL (hCaptcha vs reCAPTCHA)
        var isHCaptcha = siteKey && document.querySelector('script[src*="hcaptcha"]');
        var scriptSrc = isHCaptcha
            ? 'https://js.hcaptcha.com/1/api.js'
            : 'https://www.google.com/recaptcha/api.js';

        var script = document.createElement('script');
        script.src = scriptSrc + '?render=explicit';
        script.async = true;
        script.defer = true;
        script.onload = function () {
            var api = isHCaptcha ? window.hcaptcha : window.grecaptcha;
            api.ready(function () {
                api.render(widget, {
                    sitekey: siteKey,
                    callback: function (t) { token.value = t; }
                });
            });
        };
        document.head.appendChild(script);
    })();
    {% endif %}
</script>
{% endblock %}