{% extends "layouts/base.twig" %}

{% block title %}{{ translations.checklists }}{% endblock %}

{% block head %}
    <style>
        .checklist-name {
            font-weight: 600;
            color: #212529;
        }
        .checklist-meta {
            font-size: 0.8rem;
            color: #6c757d;
            margin-top: 2px;
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .task-badge {
            display: inline-block;
            font-size: 0.7rem;
            padding: 2px 8px;
            border-radius: 10px;
            background: #e2e8f0;
            color: #374151;
            white-space: nowrap;
        }
        .task-badge.mandatory {
            background: #fee2e2;
            color: #991b1b;
        }
    </style>
{% endblock %}

{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.checklists }}</h3>
        <p class="text-subtitle text-muted">{{ translations.checklists_subtitle }}</p>
    </div>
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-12">
            <div class="card">

                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title">{{ translations.checklist_list }}</h4>
                    <button class="btn btn-success" id="add_checklist_btn">
                        <i class="bi bi-plus"></i> {{ translations.add_checklist }}
                    </button>
                </div>

                <div class="card-content">
                    <div class="card-body px-3 py-4-5">

                        {# Filtr tagów #}
                        <div class="row mt-1" id="tag_filter_wrapper">
                            <div class="col-12">
                                <span class="text-muted me-2" style="font-size:0.8rem;vertical-align:middle">
                                    <i class="bi bi-tag"></i> {{ translations.tags }}:
                                </span>
                                <span id="tag_filter_badges"></span>
                                <button class="btn btn-sm btn-outline-secondary ms-2 py-0" id="clear_tag_filter" style="font-size:0.78rem;display:none">
                                    <i class="bi bi-x"></i> {{ translations.clear }}
                                </button>
                            </div>
                        </div>

                        <table class="table text-sm" id="checklists_table">
                            <thead>
                            <tr>
                                <th style="width:35%">{{ translations.name }}</th>
                                <th style="width:20%">{{ translations.production_area }}</th>
                                <th style="width:10%">{{ translations.execution_time }}</th>
                                <th style="width:20%">{{ translations.tags }}</th>
                                <th style="width:15%">{{ translations.actions }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% if checklists|length == 0 %}
                                <tr>
                                    <td colspan="5" class="text-center text-muted py-4">
                                        {{ translations.no_checklists_found }}
                                    </td>
                                </tr>
                            {% else %}
                                {% for checklist in checklists %}
                                    <tr class="checklist-row"
                                        data-id="{{ checklist.getId() }}"
                                        data-name="{{ checklist.getName() }}"
                                        data-description="{{ checklist.getDescription() }}"
                                        data-workstation-id="{{ checklist.getWorkstationId() }}"
                                        data-execution-time="{{ checklist.getExecutionTime() }}">

                                        <td>
                                            <div class="checklist-name">{{ checklist.getName() }}</div>
                                            {% if checklist.getDescription() %}
                                                <div class="checklist-meta">{{ checklist.getDescription() }}</div>
                                            {% endif %}
                                        </td>

                                        <td>
                                            {% if checklist.getWorkstationName() %}
                                                <span class="badge bg-light text-dark border">
                                                    <i class="bi bi-diagram-3 me-1"></i>{{ checklist.getWorkstationName() }}
                                                </span>
                                            {% else %}
                                                <span class="text-muted">—</span>
                                            {% endif %}
                                        </td>

                                        <td>
                                            {% if checklist.getExecutionTime() %}
                                                <i class="bi bi-clock me-1 text-muted"></i>{{ checklist.getExecutionTime() }}
                                            {% else %}
                                                <span class="text-muted">—</span>
                                            {% endif %}
                                        </td>

                                        <td style="position:relative;">
                                            {% set entity_tags = tags_by_entity[checklist.getId()] ?? [] %}
                                            {% include 'operational_framework/components/tag_manager.twig' with {
                                                entity_type: 'checklist',
                                                entity_id:   checklist.getId(),
                                                entity_tags: entity_tags
                                            } %}
                                        </td>

                                        <td>
                                            <div class="btn-group">
                                                <button class="btn btn-info btn-sm tasks_btn"
                                                        data-id="{{ checklist.getId() }}"
                                                        data-name="{{ checklist.getName() }}"
                                                        title="{{ translations.manage_tasks }}">
                                                    <i class="bi bi-list-check"></i>
                                                </button>
                                                <button class="btn btn-secondary btn-sm"
                                                        onclick="downloadChecklistPdf({{ checklist.getId() }})"
                                                        title="{{ translations.download_pdf ?? 'Pobierz PDF' }}">
                                                    <i class="bi bi-download"></i>
                                                </button>
                                                <button class="btn btn-warning btn-sm edit_checklist_btn"
                                                        data-id="{{ checklist.getId() }}"
                                                        data-name="{{ checklist.getName() }}"
                                                        data-description="{{ checklist.getDescription() }}"
                                                        data-workstation-id="{{ checklist.getWorkstationId() }}"
                                                        data-execution-time="{{ checklist.getExecutionTime() }}">
                                                    <i class="bi bi-pencil"></i>
                                                </button>
                                                <button class="btn btn-danger btn-sm delete_checklist_btn"
                                                        data-id="{{ checklist.getId() }}"
                                                        data-name="{{ checklist.getName() }}">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                {% endfor %}
                            {% endif %}
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>

    {% include 'operational_framework/checklist/modals/checklist.twig' %}
    {% include 'operational_framework/checklist/modals/tasks.twig' %}

{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
<script type="module">
    import { initOfTagManagers, createTagFilterBadges } from '{{ root }}/assets/js/modules/of-tags.js';
    const ALL_OF_TAGS = {{ all_tags | json_encode | raw }};
    document.addEventListener('DOMContentLoaded', () => {
        const OF_TAG_LABELS = {
            tagNoTags:         '{{ translations.tag_no_tags | e('js') }}',
            tagDeleteTitle:    '{{ translations.tag_delete_title | e('js') }}',
            tagDeleteHtml:     '{{ translations.tag_delete_html | e('js') }}',
            tagDeleteConfirm:  '{{ translations.tag_delete_confirm | e('js') }}',
            tagDeleteCancel:   '{{ translations.tag_delete_cancel | e('js') }}',
            tagDeletedOk:      '{{ translations.tag_deleted_ok | e('js') }}',
            tagDeleteError:    '{{ translations.tag_delete_error | e('js') }}',
            tagDeleteBtnTitle: '{{ translations.tag_delete_btn_title | e('js') }}',
            tagAssignError:    '{{ translations.tag_assign_error | e('js') }}',
            tagCreateError:    '{{ translations.tag_create_error | e('js') }}',
            tagUnassignError:  '{{ translations.tag_unassign_error | e('js') }}',
        };
        initOfTagManagers(ALL_OF_TAGS, OF_TAG_LABELS);
        const tagFilter = createTagFilterBadges(ALL_OF_TAGS, () =>
            document.dispatchEvent(new CustomEvent('of:tag-filter-changed'))
        );
        window._getActiveTagIds = tagFilter.getActiveIds;
    });
</script>
<script>
    const ALL_TASKS   = {{ tasks | json_encode | raw }};
    const WORKSTATIONS = {{ workstations | json_encode | raw }};

    // ==================== Helpers ====================

    function showToast(msg, type = 'success') {
        const el = document.createElement('div');
        el.className = `alert alert-${type} position-fixed bottom-0 end-0 m-3`;
        el.style.zIndex = 9999;
        el.textContent = msg;
        document.body.appendChild(el);
        setTimeout(() => el.remove(), 3000);
    }

    function escapeHtml(str) {
        return String(str)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;');
    }

    function resetChecklistForm() {
        document.getElementById('checklist_id').value = '';
        document.getElementById('checklist_name').value = '';
        document.getElementById('checklist_description').value = '';
        document.getElementById('checklist_workstation').value = '';
        document.getElementById('checklist_execution_time').value = '';
    }

    function setSaveBtn(loading) {
        const btn = document.getElementById('checklist_save_btn');
        if (loading) {
            btn.disabled = true;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span> {{ translations.saving }}';
        } else {
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-check-lg me-1"></i> {{ translations.save }}';
        }
    }

    const checklistModal = new bootstrap.Modal(document.getElementById('checklistModal'));
    const tasksModal     = new bootstrap.Modal(document.getElementById('tasksModal'));

    // ==================== Add checklist ====================

    document.getElementById('add_checklist_btn').addEventListener('click', () => {
        resetChecklistForm();
        setSaveBtn(false);
        document.querySelector('#checklistModal .modal-title').textContent = '{{ translations.new_checklist }}';
        checklistModal.show();
    });

    // ==================== Edit checklist ====================

    document.querySelectorAll('.edit_checklist_btn').forEach(btn => {
        btn.addEventListener('click', () => {
            document.getElementById('checklist_id').value              = btn.dataset.id;
            document.getElementById('checklist_name').value            = btn.dataset.name;
            document.getElementById('checklist_description').value     = btn.dataset.description || '';
            document.getElementById('checklist_workstation').value     = btn.dataset.workstationId || '';
            document.getElementById('checklist_execution_time').value  = btn.dataset.executionTime || '';
            setSaveBtn(false);
            document.querySelector('#checklistModal .modal-title').textContent = '{{ translations.edit_checklist }}';
            checklistModal.show();
        });
    });

    // ==================== Save checklist ====================

    document.getElementById('checklist_form').addEventListener('submit', async (e) => {
        e.preventDefault();
        setSaveBtn(true);

        const id = document.getElementById('checklist_id').value;
        const payload = {
            name:           document.getElementById('checklist_name').value.trim(),
            description:    document.getElementById('checklist_description').value.trim() || null,
            workstation_id: document.getElementById('checklist_workstation').value || null,
            execution_time: document.getElementById('checklist_execution_time').value || null,
        };

        const url    = id ? `/ajax/checklists/${id}` : '/ajax/checklists';
        const method = id ? 'PATCH' : 'POST';

        try {
            const resp = await api(url, { method, data: payload });
            if (resp.ok || resp.success) {
                showToast('{{ translations.saved_successfully }}');
                setTimeout(() => location.reload(), 800);
            } else {
                showToast('{{ translations.error_occurred }}', 'danger');
                setSaveBtn(false);
            }
        } catch (err) {
            showToast('{{ translations.connection_error }}', 'danger');
            setSaveBtn(false);
        }
    });

    // ==================== Delete checklist ====================

    document.querySelectorAll('.delete_checklist_btn').forEach(btn => {
        btn.addEventListener('click', async () => {
            if (!confirm(`{{ translations.confirm_delete_checklist }} „${btn.dataset.name}"?`)) return;
            const resp = await api(`/ajax/checklists/${btn.dataset.id}`, { method: 'DELETE' });
            if (resp.ok || resp.success) {
                showToast('{{ translations.deleted_successfully }}');
                setTimeout(() => location.reload(), 600);
            } else {
                showToast('{{ translations.delete_error }}', 'danger');
            }
        });
    });

    // ==================== Tasks modal ====================

    let activeChecklistId = null;
    let sortableInstance  = null;

    document.querySelectorAll('.tasks_btn').forEach(btn => {
        btn.addEventListener('click', () => {
            activeChecklistId = btn.dataset.id;
            document.getElementById('tasks_modal_checklist_name').textContent = btn.dataset.name;
            document.getElementById('new_task_select').value = '';
            loadTasksModal(activeChecklistId);
            tasksModal.show();
        });
    });

    async function loadTasksModal(checklistId) {
        const list = document.getElementById('assigned_tasks_list');
        list.innerHTML = '<li class="list-group-item text-muted">{{ translations.loading }}</li>';

        // zniszczymy poprzedni sortable przed wyrenderowaniem
        if (sortableInstance) { sortableInstance.destroy(); sortableInstance = null; }

        const resp  = await api(`/ajax/checklists/${checklistId}/tasks`);
        const items = resp.data ?? resp ?? [];

        renderAssignedTasks(items);
    }

    function renderAssignedTasks(items) {
        const list = document.getElementById('assigned_tasks_list');

        if (!items.length) {
            list.innerHTML = '<li class="list-group-item text-muted text-sm">{{ translations.no_tasks_assigned }}</li>';
            return;
        }

        list.innerHTML = items.map(t => `
            <li class="list-group-item py-2"
                data-task-id="${t.task_id}">
                <div class="d-flex justify-content-between align-items-start">
                    <div class="d-flex align-items-start gap-2 flex-grow-1 min-w-0">
                        <i class="bi bi-grip-vertical text-muted drag-handle mt-1" style="cursor:grab;font-size:1.1rem;flex-shrink:0"></i>
                        <div class="flex-grow-1 min-w-0">
                            <strong class="d-block">${t.name}</strong>
                            ${t.is_mandatory ? '<span class="text-danger" style="font-size:0.78rem">{{ translations.mandatory }}</span>' : ''}
                            ${t.note
                                ? `<div class="mt-1 p-2 rounded" style="background:#f8f9fa;font-size:0.78rem;color:#495057;white-space:pre-wrap">${escapeHtml(t.note)}</div>`
                                : ''}
                            <div class="mt-1 note-edit-area" style="display:none">
                                <textarea class="form-control form-control-sm note-textarea w-100" rows="2"
                                          placeholder="{{ translations.task_note_placeholder }}">${t.note ? escapeHtml(t.note) : ''}</textarea>
                                <div class="d-flex gap-1 mt-1">
                                    <button class="btn btn-success btn-sm save-note-btn" data-task-id="${t.task_id}">{{ translations.save }}</button>
                                    <button class="btn btn-secondary btn-sm cancel-note-btn">{{ translations.cancel }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex gap-1 ms-2 flex-shrink-0">
                        <button class="btn btn-outline-secondary btn-sm edit-note-btn"
                                title="${t.note ? '{{ translations.edit_note }}' : '{{ translations.add_note }}'}">
                            <i class="bi bi-${t.note ? 'pencil-square' : 'chat-left-text'}"></i>
                        </button>
                        <button class="btn btn-danger btn-sm unassign_task_btn"
                                data-task-id="${t.task_id}"
                                data-name="${t.name}">
                            <i class="bi bi-x"></i>
                        </button>
                    </div>
                </div>
            </li>
        `).join('');

        list.querySelectorAll('.unassign_task_btn').forEach(btn => {
            btn.addEventListener('click', async () => {
                await api(`/ajax/checklists/${activeChecklistId}/tasks/${btn.dataset.taskId}`, { method: 'DELETE' });
                loadTasksModal(activeChecklistId);
            });
        });

        // ---- Notatki ----
        list.querySelectorAll('.edit-note-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                const li       = btn.closest('li');
                const editArea = li.querySelector('.note-edit-area');
                editArea.style.display = editArea.style.display === 'none' ? 'block' : 'none';
            });
        });

        list.querySelectorAll('.cancel-note-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                btn.closest('.note-edit-area').style.display = 'none';
            });
        });

        list.querySelectorAll('.save-note-btn').forEach(btn => {
            btn.addEventListener('click', async () => {
                const taskId   = btn.dataset.taskId;
                const textarea = btn.closest('.note-edit-area').querySelector('.note-textarea');
                const note     = textarea.value.trim() || null;

                const resp = await api(`/ajax/checklists/${activeChecklistId}/tasks/${taskId}/note`, {
                    method: 'PATCH',
                    data:   { note },
                });

                if (resp.ok || resp.success) {
                    loadTasksModal(activeChecklistId);
                } else {
                    showToast('{{ translations.note_save_error }}', 'danger');
                }
            });
        });

        // Inicjalizacja Sortable
        if (sortableInstance) sortableInstance.destroy();
        sortableInstance = Sortable.create(list, {
            handle: '.drag-handle',
            animation: 150,
            onEnd: async () => {
                const taskIds = [...list.querySelectorAll('[data-task-id]')]
                    .map(li => parseInt(li.dataset.taskId));
                await api(`/ajax/checklists/${activeChecklistId}/tasks/reorder`, {
                    method: 'POST',
                    data:   { task_ids: taskIds },
                });
            },
        });
    }

    // ==================== Assign task ====================

    document.getElementById('assign_task_btn').addEventListener('click', async () => {
        const taskId = document.getElementById('new_task_select').value;
        const note   = document.getElementById('new_task_note').value.trim() || null;
        if (!taskId) return;

        const resp = await api(`/ajax/checklists/${activeChecklistId}/tasks`, {
            method: 'POST',
            data:   { task_id: parseInt(taskId), note },
        });

        if (resp.ok || resp.success) {
            document.getElementById('new_task_select').value = '';
            document.getElementById('new_task_note').value   = '';
            loadTasksModal(activeChecklistId);
        } else {
            showToast(resp.description ?? '{{ translations.assign_error }}', 'danger');
        }
    });

        function downloadChecklistPdf(idChecklist) {
            try {
                downloadPdf(`/ajax/checklists/${idChecklist}/pdf`, {}, `checklist_${idChecklist}.pdf`);
            } catch (error) {
                console.error('Error calling downloadPdf:', error);
                alert('Error: ' + error.message);
            }
        }

    // ==================== Filtr tagów ====================

    function getRowTagIds(row) {
        const ids = new Set();
        row.querySelectorAll('.of-tag-badge').forEach(b => ids.add(String(b.dataset.tagId)));
        return ids;
    }

    function applyTagFilter() {
        const activeTagIds = window._getActiveTagIds?.() ?? new Set();
        document.querySelectorAll('.checklist-row').forEach(row => {
            if (activeTagIds.size === 0) { row.style.display = ''; return; }
            const rowTagIds = getRowTagIds(row);
            row.style.display = [...activeTagIds].every(id => rowTagIds.has(id)) ? '' : 'none';
        });
    }

    document.addEventListener('of:tag-filter-changed', applyTagFilter);
    document.addEventListener('of:tag-changed', applyTagFilter);
</script>
{% endblock %}