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

export async function initDepartment() {
    const form = document.getElementById('department-schedule-form');
    const departmentSelect = document.getElementById('filter-department');
    const container = document.getElementById('schedule-blocks-container');

    let departments = [];

    // Загрузка кафедр
    try {
        departments = await api.get('/api/departments');
        departmentSelect.innerHTML = '<option value="">Выберите кафедру...</option>' + 
            departments.map(d => `<option value="${d.id}">${escapeHtml(d.departmentName || d.name)}</option>`).join('');
    } catch (e) {
        departmentSelect.innerHTML = '<option value="">Ошибка загрузки</option>';
    }

    form.addEventListener('submit', async (e) => {
        e.preventDefault();
        hideAlert('schedule-form-alert');

        const departmentId = departmentSelect.value;
        const period = document.getElementById('filter-period').value;
        const semesterType = document.querySelector('input[name="semesterType"]:checked')?.value;

        if (!departmentId || !period || !semesterType) {
            showAlert('schedule-form-alert', 'Заполните все поля', 'error');
            return;
        }

        const deptName = departmentSelect.options[departmentSelect.selectedIndex].text;

        try {
            const params = new URLSearchParams({
                departmentId,
                semesterType,
                period
            });
            
            // Запрос на бэк
            const data = await api.get(`/api/department/schedule?${params.toString()}`);
            
            const semesterName = semesterType === 'spring' ? 'весенний' : (semesterType === 'autumn' ? 'осенний' : semesterType);
            const periodName = period.replace('-', '/'); // Display 2024-2025 as 2024/2025
            
            renderScheduleBlock(deptName, semesterName, periodName, data);
            
            form.reset();

        } catch (err) {
            showAlert('schedule-form-alert', err.message || 'Ошибка загрузки данных', 'error');
        }
    });

    function renderScheduleBlock(deptName, semester, period, schedule) {
        const details = document.createElement('details');
        details.className = 'table-item';
        details.open = true; // Сразу открываем новый блок

        details.innerHTML = `
            <summary>
              <div class="chev" aria-hidden="true">
                <svg viewBox="0 0 20 20" class="chev-icon" focusable="false" aria-hidden="true">
                  <path d="M5.5 7.5L10 12l4.5-4.5" fill="none" stroke="currentColor" stroke-width="2"
                        stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <div class="title title-multiline">
                <span class="title-main">Данные к составлению расписания</span>
                <span class="title-sub">Кафедра: <b>${escapeHtml(deptName)}</b></span>
                <span class="title-sub">Семестр: <b>${escapeHtml(semester)}</b></span>
                <span class="title-sub">Уч. год: <b>${escapeHtml(period)}</b></span>
              </div>
              <div class="meta">${schedule ? schedule.length : 0} записей</div>
            </summary>
            
            <div class="content">
              <table>
                <thead>
                <tr>
                  <th>Специальность</th>
                  <th>Курс/семестр</th>
                  <th>Группа</th>
                  <th>Дисциплина</th>
                  <th>Вид занятий</th>
                  <th>Часов в неделю</th>
                  <th>Деление на подгруппы</th>
                  <th>Преподаватель</th>
                </tr>
                </thead>
                <tbody>
                  ${renderRows(schedule)}
                </tbody>
              </table>
            </div>
        `;

        container.prepend(details);
    }

    function renderRows(schedule) {
        if (!schedule || schedule.length === 0) {
            return '<tr><td colspan="8" class="loading-row">Нет данных</td></tr>';
        }
        
        return schedule.map(r => `
            <tr>
              <td>${escapeHtml(r.specialityCode || '-')}</td>
              <td>
                ${(() => {
                    const course = r.groupCourse || '-';
                    const semester = r.semester || '-';
                    if (course === '-' && semester === '-') return '-';
                    return `${course} | ${semester}`;
                  })()}
              </td>
              <td>${escapeHtml(r.groupName || '-')}</td>
              <td>${escapeHtml(r.subjectName || '-')}</td>
              <td>${escapeHtml(r.lessonType || '-')}</td>
              <td>${escapeHtml(r.numberOfHours || '-')}</td>
              <td>
                ${r.division === true ? '✓' : (r.division === false ? '' : escapeHtml(''))}
              </td>
              <td>
                ${(() => {
                    const jobTitle = r.teacherJobTitle || '-';
                    const teacherName = r.teacherName || '-';
                    if (jobTitle === '-' && teacherName === '-') return '-';
                    return `${jobTitle}, ${teacherName}`;
                })()}
              </td>
            </tr>
        `).join('');
    }
}