import { api } from '../api.js';
import { escapeHtml, showAlert, hideAlert, initMultiSelect, updateSelectText } from '../utils.js';
import { fetchEquipments, renderEquipmentCheckboxes } from './equipments.js';

export async function initClassrooms() {
    const classroomsTbody = document.getElementById('classrooms-tbody');
    const createClassroomForm = document.getElementById('create-classroom-form');

    const equipmentCheckboxes = document.getElementById('equipment-checkboxes');
    const editEquipmentCheckboxes = document.getElementById('edit-equipment-checkboxes');

    const modalEditClassroom = document.getElementById('modal-edit-classroom');
    const modalEditClassroomClose = document.getElementById('modal-edit-classroom-close');
    const editClassroomForm = document.getElementById('edit-classroom-form');

    let allEquipments = [];
    let editingClassroomData = null;

    initMultiSelect('equipment-select-box', 'equipment-dropdown-menu', 'equipment-select-text', 'equipment-checkboxes');
    initMultiSelect('edit-equipment-select-box', 'edit-equipment-dropdown-menu', 'edit-equipment-select-text', 'edit-equipment-checkboxes');

    async function loadInitialData() {
        try {
            allEquipments = await fetchEquipments();
            renderEquipmentCheckboxes(allEquipments, 'equipment-checkboxes', 'equipment-select-text');
            await loadClassrooms();
        } catch (e) {
            classroomsTbody.innerHTML = '<tr><td colspan="6" class="loading-row">Ошибка загрузки данных</td></tr>';
        }
    }

    async function loadClassrooms() {
        try {
            const classrooms = await api.get('/api/classrooms');
            renderClassrooms(classrooms);
        } catch (e) {
            classroomsTbody.innerHTML = '<tr><td colspan="6" class="loading-row">Ошибка загрузки</td></tr>';
        }
    }

    function renderClassrooms(classrooms) {
        if (!classrooms || !classrooms.length) {
            classroomsTbody.innerHTML = '<tr><td colspan="6" class="loading-row">Нет аудиторий</td></tr>';
            return;
        }
        classroomsTbody.innerHTML = classrooms.map(c => {
            const equipHtml = c.equipments && c.equipments.length
                ? c.equipments.map(eq => escapeHtml(eq.name)).join(', ')
                : '—';

            return `
      <tr>
        <td>${c.id}</td>
        <td><strong>${escapeHtml(c.name)}</strong></td>
        <td>${c.capacity} чел.</td>
        <td><small>${equipHtml}</small></td>
        <td>
            <div class="status-cell">
                <span class="badge ${c.isAvailable ? 'badge-available' : 'badge-unavailable'}">
                    ${c.isAvailable ? 'Доступна' : 'Не доступна'}
                </span>
                <button class="btn-icon-toggle" data-id="${c.id}" data-current-status="${c.isAvailable}" title="Сменить статус">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path></svg>
                </button>
            </div>
        </td>
          <td style="text-align: right;">
              <button class="btn-edit-classroom" data-id="${c.id}">Изменить</button>
              <button class="btn-delete" data-id="${c.id}" style="margin-left: 0.5rem;">Удалить</button>
          </td>
        </tr>`;
        }).join('');
    }

    createClassroomForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        hideAlert('create-classroom-alert');
        const name = document.getElementById('new-classroom-name').value.trim();
        const capacity = parseInt(document.getElementById('new-classroom-capacity').value, 10);

        const checkedBoxes = Array.from(equipmentCheckboxes.querySelectorAll('input:checked'));
        const equipmentIds = checkedBoxes.map(chk => parseInt(chk.value, 10));

        if (!name || isNaN(capacity)) { showAlert('create-classroom-alert', 'Заполните обязательные поля', 'error'); return; }

        try {
            const data = await api.post('/api/classrooms', { name, capacity, equipmentIds, isAvailable: true });
            showAlert('create-classroom-alert', `Аудитория "${escapeHtml(data.name)}" добавлена`, 'success');
            createClassroomForm.reset();
            updateSelectText('equipment-checkboxes', 'equipment-select-text');
            loadClassrooms();
        } catch (e) {
            showAlert('create-classroom-alert', e.message || 'Ошибка создания', 'error');
        }
    });

    classroomsTbody.addEventListener('click', async (e) => {
        const btnDelete = e.target.closest('.btn-delete');
        const btnToggleStatus = e.target.closest('.btn-icon-toggle');
        const btnEdit = e.target.closest('.btn-edit-classroom');

        if (btnDelete) {
            if (!confirm('Удалить аудиторию?')) return;
            try {
                await api.delete('/api/classrooms/' + btnDelete.dataset.id);
                loadClassrooms();
            } catch (err) { alert('Ошибка удаления'); }
        }

        if (btnToggleStatus) {
            const id = btnToggleStatus.dataset.id;
            const currentStatus = btnToggleStatus.dataset.currentStatus === 'true';
            try {
                await api.put('/api/classrooms/' + id, { isAvailable: !currentStatus });
                loadClassrooms();
            } catch (err) { alert('Ошибка изменения статуса'); }
        }

        if (btnEdit) {
            openEditClassroomModal(btnEdit.dataset.id);
        }
    });

    async function openEditClassroomModal(id) {
        try {
            // Can optimize by using already loaded classrooms, but fetch is safer to get fresh data
            const classrooms = await api.get('/api/classrooms');
            editingClassroomData = classrooms.find(c => c.id == id);

            if (!editingClassroomData) return;

            document.getElementById('edit-classroom-id').value = editingClassroomData.id;
            document.getElementById('edit-classroom-name').value = editingClassroomData.name;
            document.getElementById('edit-classroom-capacity').value = editingClassroomData.capacity;

            const existingEquipIds = editingClassroomData.equipments.map(e => e.id);
            renderEquipmentCheckboxes(allEquipments, 'edit-equipment-checkboxes', 'edit-equipment-select-text', existingEquipIds);

            hideAlert('edit-classroom-alert');
            modalEditClassroom.classList.add('open');
        } catch (e) {
            alert('Ошибка загрузки данных аудитории');
        }
    }

    modalEditClassroomClose.addEventListener('click', () => {
        modalEditClassroom.classList.remove('open');
    });

    modalEditClassroom.addEventListener('click', (e) => {
        if (e.target === modalEditClassroom) {
            modalEditClassroom.classList.remove('open');
        }
    });

    editClassroomForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        hideAlert('edit-classroom-alert');
        const id = document.getElementById('edit-classroom-id').value;
        const name = document.getElementById('edit-classroom-name').value.trim();
        const capacity = parseInt(document.getElementById('edit-classroom-capacity').value, 10);

        const checkedBoxes = Array.from(editEquipmentCheckboxes.querySelectorAll('input:checked'));
        const equipmentIds = checkedBoxes.map(chk => parseInt(chk.value, 10));

        if (!name || isNaN(capacity)) { showAlert('edit-classroom-alert', 'Заполните обязательные поля', 'error'); return; }

        try {
            const data = await api.put('/api/classrooms/' + id, {
                name,
                capacity,
                equipmentIds,
                isAvailable: editingClassroomData.isAvailable
            });
            modalEditClassroom.classList.remove('open');
            // We show alert on the main create form area or we could use toast
            showAlert('create-classroom-alert', `Аудитория "${escapeHtml(data.name)}" обновлена`, 'success');
            loadClassrooms();
        } catch (e) {
            showAlert('edit-classroom-alert', e.message || 'Ошибка обновления', 'error');
        }
    });

    loadInitialData();
}