import { api } from '../api.js';
import { escapeHtml, showAlert, hideAlert } from '../utils.js';

export async function initDepartmentsData() {
    const deptTbody = document.getElementById('departments-tbody');
    const specTbody = document.getElementById('specialties-tbody');

    const createDeptForm = document.getElementById('create-department-form');
    const createSpecForm = document.getElementById('create-specialty-form');
    const editDeptForm = document.getElementById('edit-department-form');
    const editSpecForm = document.getElementById('edit-specialty-form');
    const editDeptModal = document.getElementById('modal-edit-department');
    const editSpecModal = document.getElementById('modal-edit-specialty');
    const editDeptClose = document.getElementById('modal-edit-department-close');
    const editSpecClose = document.getElementById('modal-edit-specialty-close');

    let departments = [];
    let specialties = [];

    async function loadData() {
        // Load Departments
        try {
            departments = await api.get('/api/departments');
            renderDepartments();
        } catch (e) {
            deptTbody.innerHTML = '<tr><td colspan="4" class="loading-row">-</td></tr>';
        }

        // Load Specialties
        try {
            specialties = await api.get('/api/specialties');
            renderSpecialties();
        } catch (e) {
            specTbody.innerHTML = '<tr><td colspan="4" class="loading-row">-</td></tr>';
        }
    }

    function renderDepartments() {
        if (!departments || !departments.length) {
            deptTbody.innerHTML = '<tr><td colspan="4" class="loading-row">-</td></tr>';
            return;
        }
        deptTbody.innerHTML = departments.map(d => `
            <tr>
                <td>${d.id}</td>
                <td>${escapeHtml(d.departmentName || d.name)}</td>
                <td>${escapeHtml(String(d.departmentCode || d.code))}</td>
                <td>
                    <button class="btn-edit-classroom btn-edit-department" data-id="${d.id}">Изменить</button>
                    <button class="btn-delete btn-delete-department" data-id="${d.id}">Удалить</button>
                </td>
            </tr>
        `).join('');
    }

    function renderSpecialties() {
        if (!specialties || !specialties.length) {
            specTbody.innerHTML = '<tr><td colspan="4" class="loading-row">-</td></tr>';
            return;
        }
        specTbody.innerHTML = specialties.map(s => `
            <tr>
                <td>${s.id}</td>
                <td>${escapeHtml(s.specialityName || s.name)}</td>
                <td>${escapeHtml(s.specialityCode || s.specialtyCode || s.specialty_code)}</td>
                <td>
                    <button class="btn-edit-classroom btn-edit-specialty" data-id="${s.id}">Изменить</button>
                    <button class="btn-delete btn-delete-specialty" data-id="${s.id}">Удалить</button>
                </td>
            </tr>
        `).join('');
    }

    createDeptForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        hideAlert('create-dept-alert');
        const name = document.getElementById('dept-name').value.trim();
        const code = document.getElementById('dept-code').value.trim();

        if (!name || !code) {
            showAlert('create-dept-alert', 'Заполните все поля', 'error');
            return;
        }

        try {
            await api.post('/api/departments', { departmentName: name, departmentCode: Number(code) });
            showAlert('create-dept-alert', `Кафедра "${name}" создана`, 'success');
            createDeptForm.reset();
            loadData();
        } catch (error) {
            showAlert('create-dept-alert', error.message || 'Ошибка создания кафедры', 'error');
        }
    });

    deptTbody.addEventListener('click', async (e) => {
        const editBtn = e.target.closest('.btn-edit-department');
        const deleteBtn = e.target.closest('.btn-delete-department');

        if (editBtn) {
            const department = departments.find(item => item.id == editBtn.dataset.id);
            if (!department) return;

            document.getElementById('edit-dept-id').value = department.id;
            document.getElementById('edit-dept-name').value = department.departmentName || department.name || '';
            document.getElementById('edit-dept-code').value = department.departmentCode || department.code || '';
            hideAlert('edit-dept-alert');
            editDeptModal.classList.add('open');
            return;
        }

        if (deleteBtn) {
            if (!confirm('Удалить кафедру?')) return;
            try {
                await api.delete('/api/departments/' + deleteBtn.dataset.id);
                showAlert('create-dept-alert', 'Кафедра удалена', 'success');
                await loadData();
            } catch (error) {
                showAlert('create-dept-alert', error.message || 'Ошибка удаления кафедры', 'error');
            }
        }
    });

    createSpecForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        hideAlert('create-spec-alert');
        const name = document.getElementById('spec-name').value.trim();
        const code = document.getElementById('spec-code').value.trim();

        if (!name || !code) {
            showAlert('create-spec-alert', 'Заполните все поля', 'error');
            return;
        }

        try {
            await api.post('/api/specialties', { specialityName: name, specialityCode: code });
            showAlert('create-spec-alert', `Специальность "${name}" создана`, 'success');
            createSpecForm.reset();
            loadData();
        } catch (error) {
            showAlert('create-spec-alert', error.message || 'Ошибка создания специальности', 'error');
        }
    });

    specTbody.addEventListener('click', async (e) => {
        const editBtn = e.target.closest('.btn-edit-specialty');
        const deleteBtn = e.target.closest('.btn-delete-specialty');

        if (editBtn) {
            const speciality = specialties.find(item => item.id == editBtn.dataset.id);
            if (!speciality) return;

            document.getElementById('edit-spec-id').value = speciality.id;
            document.getElementById('edit-spec-name').value = speciality.specialityName || speciality.name || '';
            document.getElementById('edit-spec-code').value = speciality.specialityCode || speciality.specialtyCode || speciality.specialty_code || '';
            hideAlert('edit-spec-alert');
            editSpecModal.classList.add('open');
            return;
        }

        if (deleteBtn) {
            if (!confirm('Удалить специальность?')) return;
            try {
                await api.delete('/api/specialties/' + deleteBtn.dataset.id);
                showAlert('create-spec-alert', 'Специальность удалена', 'success');
                await loadData();
            } catch (error) {
                showAlert('create-spec-alert', error.message || 'Ошибка удаления специальности', 'error');
            }
        }
    });

    editDeptForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        hideAlert('edit-dept-alert');
        const id = document.getElementById('edit-dept-id').value;
        const name = document.getElementById('edit-dept-name').value.trim();
        const code = document.getElementById('edit-dept-code').value.trim();

        if (!name || !code) {
            showAlert('edit-dept-alert', 'Заполните все поля', 'error');
            return;
        }

        try {
            await api.put('/api/departments/' + id, { departmentName: name, departmentCode: Number(code) });
            editDeptModal.classList.remove('open');
            showAlert('create-dept-alert', `Кафедра "${name}" обновлена`, 'success');
            await loadData();
        } catch (error) {
            showAlert('edit-dept-alert', error.message || 'Ошибка обновления кафедры', 'error');
        }
    });

    editSpecForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        hideAlert('edit-spec-alert');
        const id = document.getElementById('edit-spec-id').value;
        const name = document.getElementById('edit-spec-name').value.trim();
        const code = document.getElementById('edit-spec-code').value.trim();

        if (!name || !code) {
            showAlert('edit-spec-alert', 'Заполните все поля', 'error');
            return;
        }

        try {
            await api.put('/api/specialties/' + id, { specialityName: name, specialityCode: code });
            editSpecModal.classList.remove('open');
            showAlert('create-spec-alert', `Специальность "${name}" обновлена`, 'success');
            await loadData();
        } catch (error) {
            showAlert('edit-spec-alert', error.message || 'Ошибка обновления специальности', 'error');
        }
    });

    editDeptClose.addEventListener('click', () => editDeptModal.classList.remove('open'));
    editSpecClose.addEventListener('click', () => editSpecModal.classList.remove('open'));
    editDeptModal.addEventListener('click', (e) => {
        if (e.target === editDeptModal) editDeptModal.classList.remove('open');
    });
    editSpecModal.addEventListener('click', (e) => {
        if (e.target === editSpecModal) editSpecModal.classList.remove('open');
    });

    await loadData();
}