{% extends "base.html" %}

{% block title %}Print {{ template.name }} - Thermal Printer App{% endblock %}

{% block extra_css %}
<style>
    .template-actions .btn {
        transition: transform 0.2s ease;
    }

    .template-actions .btn:hover {
        transform: translateY(-1px);
    }

    .template-meta-icon {
        width: 2.5rem;
        height: 2.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.75rem;
        background: rgba(33, 150, 243, 0.12);
        color: var(--primary);
        margin-right: 0.75rem;
        font-size: 1.25rem;
    }

    .form-control.is-invalid,
    textarea.is-invalid {
        border-color: var(--error);
        box-shadow: none;
    }

    .form-control.is-valid,
    textarea.is-valid {
        border-color: var(--success);
    }

    .loading .btn-text {
        opacity: 0.55;
    }

    .validation-result-icon {
        font-size: 1.25rem;
        margin-right: 0.5rem;
    }

    .nav-back-link {
        opacity: 0.8;
        transition: opacity 0.2s ease;
    }

    .nav-back-link:hover {
        opacity: 1;
    }
</style>
{% endblock %}

{% block content %}
<div class="row g-4 align-items-start">
    <!-- Main Column: Template Form -->
    <div class="col-lg-7 col-xl-8">
        <div class="card shadow-sm">
            <div class="card-header d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-2">
                <div>
                    <h3 class="card-title mb-0 d-flex align-items-center gap-2">
                        <span class="template-meta-icon"><i class="bi bi-file-earmark-text"></i></span>
                        <span>{{ template.name }}</span>
                    </h3>
                    {% if template.description %}
                    <p class="text-secondary mb-0 mt-1">{{ template.description }}</p>
                    {% endif %}
                </div>
                <div class="d-flex align-items-center gap-2 template-actions">
                    <a href="{{ url_for('index') }}" class="btn btn-outline-secondary btn-sm nav-back-link">
                        <i class="bi bi-arrow-left"></i> Back
                    </a>
                    {% if has_script %}
                    <span class="badge bg-info text-dark variable-badge"><i class="bi bi-code-slash"></i> Scripted</span>
                    {% endif %}
                    {% if template.variables %}
                    <span class="badge bg-secondary variable-badge"><i class="bi bi-input-cursor-text"></i> {{ template.variables | length }} field{{ '' if template.variables | length == 1 else 's' }}</span>
                    {% else %}
                    <span class="badge bg-success variable-badge"><i class="bi bi-check2-all"></i> No inputs required</span>
                    {% endif %}
                </div>
            </div>

            <div class="card-body">
                {% if has_script %}
                <div class="alert alert-info d-flex align-items-center gap-2" role="status">
                    <i class="bi bi-magic"></i>
                    <div>
                        <strong>Auto-generated content</strong>
                        <div class="small mb-0">This template pulls its own data. Click print whenever you're ready.</div>
                    </div>
                </div>
                <form method="post" id="templateForm" data-template="{{ template_name }}">
                    <button type="submit" class="btn btn-success btn-lg w-100">
                        <i class="bi bi-printer"></i>
                        <span class="btn-text">Print {{ template.name }}</span>
                        <div class="spinner-border spinner-border-sm loading-spinner ms-2" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </button>
                </form>
                {% elif template.variables %}
                <form method="post" id="templateForm" class="needs-validation" novalidate data-template="{{ template_name }}">
                    <div class="row g-3">
                        {% for var in template.variables %}
                        <div class="col-12">
                            <label for="{{ var.name }}" class="form-label fw-semibold">
                                {{ var.description or var.name }}
                                {% if var.get('required', True) %}
                                <span class="text-danger" title="Required">*</span>
                                {% else %}
                                <span class="text-muted small" title="Optional">(optional)</span>
                                {% endif %}
                            </label>

                            {% if var.get('markdown', False) %}
                            <textarea name="{{ var.name }}"
                                      id="{{ var.name }}"
                                      class="form-control template-input"
                                      rows="4"
                                      data-markdown="true"
                                      placeholder="Enter {{ var.description or var.name }}"
                                      {% if var.get('required', True) %}required{% endif %}></textarea>
                            <small class="input-hint"><i class="bi bi-markdown"></i> Markdown supported. Use blank lines to separate paragraphs.</small>
                            {% else %}
                            <input type="text"
                                   name="{{ var.name }}"
                                   id="{{ var.name }}"
                                   class="form-control template-input"
                                   placeholder="Enter {{ var.description or var.name }}"
                                   {% if var.get('required', True) %}required{% endif %}>
                            {% endif %}
                        </div>
                        {% endfor %}
                    </div>

                    <div class="d-grid gap-2 gap-md-3 mt-4">
                        <button type="button" class="btn btn-outline-primary" id="validateBtn">
                            <i class="bi bi-check-circle"></i>
                            <span class="btn-text">Validate Template</span>
                            <div class="spinner-border spinner-border-sm loading-spinner ms-2" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                        </button>

                        <button type="submit" class="btn btn-success btn-lg" id="printBtn">
                            <i class="bi bi-printer"></i>
                            <span class="btn-text">Print {{ template.name }}</span>
                            <div class="spinner-border spinner-border-sm loading-spinner ms-2" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                        </button>
                    </div>
                </form>
                {% else %}
                <div class="text-center py-4">
                    <i class="bi bi-check-circle-fill text-success fs-1 mb-3"></i>
                    <h5>Ready to print</h5>
                    <p class="text-secondary">This template doesn't require any variables.</p>

                    <form method="post" class="mt-4">
                        <div class="d-grid gap-2 d-md-flex justify-content-md-center">
                            <button name="confirm" value="no" class="btn btn-secondary">
                                <i class="bi bi-x-circle"></i> Cancel
                            </button>
                            <button name="confirm" value="yes" class="btn btn-success btn-lg">
                                <i class="bi bi-printer"></i> Print now
                            </button>
                        </div>
                    </form>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Secondary Column: Metadata & Preview -->
    <div class="col-lg-5 col-xl-4">
        <div class="card shadow-sm mb-3">
            <div class="card-header">
                <h5 class="mb-0 d-flex align-items-center gap-2">
                    <i class="bi bi-info-circle"></i>
                    Template details
                </h5>
            </div>
            <div class="card-body">
                <ul class="list-unstyled template-metadata mb-0">
                    <li class="d-flex align-items-start">
                        <i class="bi bi-folder2-open text-primary mt-1 me-2"></i>
                        <div>
                            <div class="fw-semibold">Template key</div>
                            <div class="text-secondary small">{{ template_name }}</div>
                        </div>
                    </li>
                    <li class="d-flex align-items-start">
                        <i class="bi bi-chevron-double-right text-primary mt-1 me-2"></i>
                        <div>
                            <div class="fw-semibold">Workflow</div>
                            <div class="text-secondary small">{% if has_script %}Script driven — no manual inputs{% elif template.variables %}Review & fill the fields below{% else %}Just confirm and print{% endif %}</div>
                        </div>
                    </li>
                    <li class="d-flex align-items-start">
                        <i class="bi bi-ui-checks-grid text-primary mt-1 me-2"></i>
                        <div>
                            <div class="fw-semibold">Variables</div>
                            {% if template.variables %}
                            <div class="text-secondary small">Fill out the required fields. Optional fields add extra flavor but aren't mandatory.</div>
                            {% else %}
                            <div class="text-secondary small">This template prints without any additional data.</div>
                            {% endif %}
                        </div>
                    </li>
                </ul>

                {% if template.variables %}
                <hr class="my-3">
                <h6 class="fw-semibold mb-3 text-uppercase small">Field overview</h6>
                <div class="vstack gap-2">
                    {% for var in template.variables %}
                    <div class="d-flex align-items-start gap-2 p-2 rounded" style="background: rgba(0,0,0,0.03);">
                        <div class="flex-grow-1">
                            <div class="fw-semibold">{{ var.description or var.name }}</div>
                            <div class="text-secondary small">Key: <code>{{ var.name }}</code></div>
                            {% if var.get('markdown', False) %}
                            <span class="badge bg-dark-subtle text-dark variable-badge mt-1"><i class="bi bi-markdown"></i> Markdown</span>
                            {% endif %}
                        </div>
                        <span class="badge {{ 'bg-danger-subtle text-danger' if var.get('required', True) else 'bg-success-subtle text-success' }} variable-badge">
                            {{ 'Required' if var.get('required', True) else 'Optional' }}
                        </span>
                    </div>
                    {% endfor %}
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Validation Results Modal -->
<div class="modal fade" id="validationModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title d-flex align-items-center" id="validationTitle">
                    <i class="validation-result-icon bi"></i>
                    <span>Validation results</span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="validationResults">
                <!-- Validation results will be populated here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const form = document.getElementById('templateForm');
        const validateBtn = document.getElementById('validateBtn');
        const inputs = form ? Array.from(form.querySelectorAll('.template-input')) : [];
        const validationModalEl = document.getElementById('validationModal');
        const validationTitle = document.getElementById('validationTitle');
        const validationResults = document.getElementById('validationResults');
        const modal = validationModalEl ? new bootstrap.Modal(validationModalEl) : null;
        const validateUrl = '{{ url_for("validate_template", template_name=template_name) }}';

        const getPayload = () => {
            if (!form) return {};
            const payload = {};
            inputs.forEach(input => {
                if (input.tagName === 'TEXTAREA') {
                    payload[input.name] = input.value;
                } else {
                    payload[input.name] = input.value.trim();
                }
            });
            return payload;
        };

        const setLoadingState = (button, loading) => {
            if (!button) return;
            button.classList.toggle('loading', loading);
            button.disabled = loading;
        };

        const resetValidationState = () => {
            inputs.forEach(input => {
                input.classList.remove('is-valid', 'is-invalid');
            });
        };

        const applyValidationFeedback = (invalidFields = []) => {
            const invalidSet = new Set(invalidFields.map(field => field.field));
            inputs.forEach(input => {
                if (!input.name) return;
                if (invalidSet.has(input.name)) {
                    input.classList.add('is-invalid');
                    input.classList.remove('is-valid');
                } else if (input.value.trim()) {
                    input.classList.add('is-valid');
                    input.classList.remove('is-invalid');
                } else {
                    input.classList.remove('is-valid', 'is-invalid');
                }
            });
        };

        inputs.forEach(input => {
            input.addEventListener('focus', () => {
                input.classList.remove('is-invalid');
            });
        });

        if (validateBtn && form) {
            validateBtn.addEventListener('click', async () => {
                resetValidationState();
                setLoadingState(validateBtn, true);

                try {
                    const response = await fetch(validateUrl, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(getPayload())
                    });

                    const data = await response.json();
                    applyValidationFeedback(data.invalid_fields || []);

                    if (modal) {
                        const icon = validationTitle.querySelector('.validation-result-icon');
                        if (data.valid) {
                            icon.className = 'validation-result-icon bi bi-check-circle-fill text-success';
                            validationResults.innerHTML = `<div class="alert alert-success mb-0">${data.message}</div>`;
                        } else {
                            icon.className = 'validation-result-icon bi bi-exclamation-triangle-fill text-danger';
                            const errorList = (data.errors || []).map(error => `<li>${error}</li>`).join('');
                            validationResults.innerHTML = `<div class="alert alert-danger"><ul class="mb-0">${errorList}</ul></div>`;
                        }
                        modal.show();
                    }
                } catch (error) {
                    console.error('Validation failed', error);
                    if (modal) {
                        const icon = validationTitle.querySelector('.validation-result-icon');
                        icon.className = 'validation-result-icon bi bi-bug-fill text-warning';
                        validationResults.innerHTML = '<div class="alert alert-warning mb-0">Validation failed. Please try again.</div>';
                        modal.show();
                    }
                } finally {
                    setLoadingState(validateBtn, false);
                }
            });
        }

        if (form) {
            form.addEventListener('submit', () => {
                const submitButton = form.querySelector('button[type="submit"]');
                setLoadingState(submitButton, true);
            });
        }
    });
</script>
{% endblock %}