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

export let allEquipments = [];

export async function fetchEquipments() {
    try {
        allEquipments = await api.get('/api/equipments');
        return allEquipments;
    } catch (e) {
        console.error("Failed to fetch equipments", e);
        return [];
    }
}

export function renderEquipmentCheckboxes(equipments, containerId, textId, checkedIds = []) {
    const container = document.getElementById(containerId);
    if (!container) return;
    if (!equipments.length) {
        container.innerHTML = '<p class="text-muted"><small>Нет доступного оборудования</small></p>';
        return;
    }
    container.innerHTML = equipments.map(eq => {
        const isChecked = checkedIds.includes(eq.id) ? 'checked' : '';
        return `
        <label class="checkbox-item">
            <input type="checkbox" value="${eq.id}" ${isChecked}> ${escapeHtml(eq.name)}
        </label>
    `}).join('');
    updateSelectText(containerId, textId);
}

export async function initEquipments() {
    const equipmentsTbody = document.getElementById('equipments-tbody');
    const createEquipmentForm = document.getElementById('create-equipment-form');

    async function loadEquipments() {
        try {
            const equipments = await fetchEquipments();
            renderEquipments(equipments);
        } catch (e) {
            if (equipmentsTbody) equipmentsTbody.innerHTML = '<tr><td colspan="3" class="loading-row">Ошибка загрузки</td></tr>';
        }
    }

    function renderEquipments(equipments) {
        if (!equipments || !equipments.length) {
            equipmentsTbody.innerHTML = '<tr><td colspan="3" class="loading-row">Нет оборудования</td></tr>';
            return;
        }
        equipmentsTbody.innerHTML = equipments.map(eq => `
      <tr>
        <td>${eq.id}</td>
        <td>${escapeHtml(eq.name)}</td>
        <td><button class="btn-delete" data-id="${eq.id}">Удалить</button></td>
      </tr>`).join('');
    }

    createEquipmentForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        hideAlert('create-equipment-alert');
        const name = document.getElementById('new-equipment-name').value.trim();
        if (!name) { showAlert('create-equipment-alert', 'Введите название', 'error'); return; }

        try {
            const data = await api.post('/api/equipments', { name });
            showAlert('create-equipment-alert', `Оборудование "${escapeHtml(data.name)}" добавлено`, 'success');
            createEquipmentForm.reset();
            loadEquipments();
        } catch (e) {
            showAlert('create-equipment-alert', e.message || 'Ошибка создания', 'error');
        }
    });

    equipmentsTbody.addEventListener('click', async (e) => {
        const btn = e.target.closest('.btn-delete');
        if (!btn) return;
        if (!confirm('Удалить оборудование?')) return;
        try {
            await api.delete('/api/equipments/' + btn.dataset.id);
            loadEquipments();
        } catch (e) {
            alert(e.message || 'Ошибка удаления');
        }
    });

    loadEquipments();
}