import { useEffect, useRef, useState } from 'react';

import { getSession } from '../../../admin/js/api.js';
import { AsyncCombobox } from '../../shared/ui/AsyncCombobox.jsx';
import { FormAlert } from '../../shared/ui/FormAlert.jsx';
import {
    absenceSemesterLabel,
    absenceStats,
    changeReviewTarget,
    changeTypeLabel,
    createTeacherAbsence,
    decisionCountLabel,
    decisionOptions,
    decisionStatusLabel,
    deleteTeacherAbsence,
    fetchAbsenceTeacherOptions,
    fetchTeacherAbsenceWizard,
    fetchTeacherAbsences,
    fetchTeacherChangeRequests,
    fetchTeacherPreferenceMeta,
    fetchTeacherPreferences,
    formatAbsenceDate,
    formatLocalDate,
    dayOfMonth,
    genericStatusLabel,
    monthShort,
    parseDecisionOption,
    preferenceDescription,
    resolutionLabel,
    resolveTeacherAbsence,
    reviewTeacherAbsence,
    reviewTeacherChangeRequest,
    reviewTeacherPreference,
    statusClass,
    statusLabel,
    trimTime
} from '../teacher-absences-service.js';

function teacherOptionLabel(teacher) {
    return teacher.fullName || teacher.username || `ID ${teacher.id}`;
}

export function TeacherAbsencesTab() {
    const session = getSession();
    const role = session?.role;

    const [teacherSelection, setTeacherSelection] = useState({ id: '', label: '' });
    const [startDate, setStartDate] = useState(() => formatLocalDate(new Date()));
    const [endDate, setEndDate] = useState(() => formatLocalDate(new Date()));
    const [reason, setReason] = useState('');
    const [formAlert, setFormAlert] = useState(null);

    const [absences, setAbsences] = useState([]);
    const [absencesPhase, setAbsencesPhase] = useState('loading');
    const [absencesError, setAbsencesError] = useState('');
    const [statusFilter, setStatusFilter] = useState('');
    const [registryBusy, setRegistryBusy] = useState(null);

    const [wizardOpen, setWizardOpen] = useState(false);
    const [wizardData, setWizardData] = useState(null);
    const [wizardLoading, setWizardLoading] = useState(false);
    const [wizardAlert, setWizardAlert] = useState(null);
    const [wizardApplying, setWizardApplying] = useState(false);
    const [decisions, setDecisions] = useState({});

    const [preferenceSemesters, setPreferenceSemesters] = useState([]);
    const [preferenceSemesterId, setPreferenceSemesterId] = useState('');
    const [preferenceStatusFilter, setPreferenceStatusFilter] = useState('PENDING');
    const [preferenceItems, setPreferenceItems] = useState([]);
    const [preferencePhase, setPreferencePhase] = useState('idle');
    const [preferenceError, setPreferenceError] = useState('');
    const [preferenceComments, setPreferenceComments] = useState({});
    const [preferenceBusy, setPreferenceBusy] = useState(null);

    const [changeStatusFilter, setChangeStatusFilter] = useState('PENDING');
    const [changeItems, setChangeItems] = useState([]);
    const [changePhase, setChangePhase] = useState('idle');
    const [changeError, setChangeError] = useState('');
    const [changeComments, setChangeComments] = useState({});
    const [changeBusy, setChangeBusy] = useState(null);

    const [alert, setAlert] = useState(null);

    const latestRef = useRef(null);
    latestRef.current = { statusFilter, preferenceSemesterId, preferenceStatusFilter, changeStatusFilter };

    const stats = absenceStats(absences);
    const canApplyChanges = role === 'ADMIN' || role === 'EDUCATION_OFFICE';

    useEffect(() => {
        void loadAbsences();
        void loadPreferenceMeta();
        void loadChangeReviews();
    }, []);

    // Мастер замены блокирует прокрутку страницы (в legacy — класс на body)
    useEffect(() => {
        if (!wizardOpen) return;
        document.body.classList.add('absence-wizard-open');
        return () => document.body.classList.remove('absence-wizard-open');
    }, [wizardOpen]);

    // Escape закрывает системное окно сообщения (в legacy — диалог из dialog.js)
    useEffect(() => {
        if (!alert) return;
        function handleKeydown(event) {
            if (event.key === 'Escape') setAlert(null);
        }
        document.addEventListener('keydown', handleKeydown);
        return () => document.removeEventListener('keydown', handleKeydown);
    }, [alert]);

    async function loadAbsences(overrideStatus) {
        const nextStatus = overrideStatus ?? latestRef.current.statusFilter;
        setAbsencesPhase('loading');
        try {
            const items = await fetchTeacherAbsences(nextStatus);
            setAbsences(items);
            setAbsencesPhase('ready');
        } catch (error) {
            setAbsencesError(error.message || 'Не удалось загрузить отсутствия');
            setAbsencesPhase('error');
        }
    }

    async function handleSubmit(event) {
        event.preventDefault();
        setFormAlert(null);
        if (!teacherSelection.id || !startDate || !endDate || !reason.trim()) {
            setFormAlert({ type: 'error', message: 'Заполните преподавателя, период и причину' });
            return;
        }
        if (endDate < startDate) {
            setFormAlert({ type: 'error', message: 'Дата окончания не может быть раньше даты начала' });
            return;
        }
        try {
            await createTeacherAbsence({
                teacherId: Number(teacherSelection.id),
                startDate,
                endDate,
                reason: reason.trim()
            });
            setFormAlert({ type: 'success', message: 'Отсутствие зарегистрировано' });
            setReason('');
            await loadAbsences();
        } catch (error) {
            setFormAlert({ type: 'error', message: error.message || 'Не удалось зарегистрировать отсутствие' });
        }
    }

    async function handleRegistryAction(item, action) {
        setRegistryBusy({ id: item.id, action });
        try {
            if (action === 'approve' || action === 'reject') {
                await reviewTeacherAbsence(item.id, {
                    approved: action === 'approve',
                    comment: action === 'approve'
                        ? 'Подтверждено кафедрой или ответственным сотрудником'
                        : 'Заявка отклонена ответственным сотрудником'
                });
                await loadAbsences();
            } else if (action === 'cancel') {
                await deleteTeacherAbsence(item.id);
                await loadAbsences();
            } else if (action === 'wizard') {
                await openWizard(item.id);
            }
        } catch (error) {
            setAlert({ title: 'Действие не выполнено', message: error.message || 'Не удалось выполнить действие' });
        } finally {
            setRegistryBusy(null);
        }
    }

    async function openWizard(id) {
        setWizardOpen(true);
        setWizardLoading(true);
        setWizardData(null);
        setWizardAlert(null);
        setDecisions({});
        try {
            const data = await fetchTeacherAbsenceWizard(id);
            setWizardData(data);
            setWizardLoading(false);
        } catch (error) {
            setWizardAlert({ type: 'error', message: error.message || 'Не удалось открыть мастер замены' });
        }
    }

    function closeWizard() {
        setWizardOpen(false);
        setWizardData(null);
        setWizardLoading(false);
        setWizardAlert(null);
        setWizardApplying(false);
        setDecisions({});
    }

    async function applyWizard() {
        if (!wizardData) return;
        const nextDecisions = (wizardData.lessons || []).map((lesson, index) => {
            const value = decisions[index] || '';
            if (!value) return null;
            return {
                baseRuleSlotId: Number(lesson.baseRuleSlotId),
                lessonDate: lesson.lessonDate,
                ...parseDecisionOption(value)
            };
        }).filter(Boolean);
        if (!nextDecisions.length && (wizardData.lessons || []).length) {
            setWizardAlert({ type: 'error', message: 'Выберите хотя бы одно решение' });
            return;
        }
        setWizardApplying(true);
        setWizardAlert(null);
        try {
            const data = await resolveTeacherAbsence(wizardData.absence.id, nextDecisions);
            setWizardData(data);
            setDecisions({});
            setWizardAlert({ type: 'success', message: 'Выбранные решения применены к расписанию' });
            await loadAbsences();
        } catch (error) {
            setWizardAlert({ type: 'error', message: error.message || 'Не удалось применить решения' });
        } finally {
            setWizardApplying(false);
        }
    }

    async function loadPreferenceMeta() {
        setPreferencePhase('meta-loading');
        try {
            const meta = await fetchTeacherPreferenceMeta();
            setPreferenceSemesters(meta.semesters || []);
            const today = formatLocalDate(new Date());
            const current = (meta.semesters || []).find(item => item.startDate <= today && item.endDate >= today);
            const nextSemesterId = current ? String(current.id) : '';
            setPreferenceSemesterId(nextSemesterId);
            await loadPreferenceReviews({ semesterId: nextSemesterId });
        } catch (error) {
            setPreferenceError(error.message || 'Не удалось загрузить семестры');
            setPreferencePhase('error');
        }
    }

    async function loadPreferenceReviews(overrides = {}) {
        const semesterId = overrides.semesterId ?? latestRef.current.preferenceSemesterId;
        const status = overrides.status ?? latestRef.current.preferenceStatusFilter;
        setPreferencePhase('loading');
        try {
            const items = await fetchTeacherPreferences({ semesterId, status });
            setPreferenceItems(items);
            setPreferencePhase('ready');
        } catch (error) {
            setPreferenceError(error.message || 'Не удалось загрузить пожелания');
            setPreferencePhase('error');
        }
    }

    async function handlePreferenceReview(item, approved) {
        const comment = (preferenceComments[item.id] || '').trim();
        if (!approved && !comment) {
            setAlert({ title: 'Нужен комментарий', message: 'При отклонении укажите комментарий.' });
            return;
        }
        setPreferenceBusy({ id: item.id, action: approved ? 'approve' : 'reject' });
        try {
            await reviewTeacherPreference(item.id, {
                approved,
                comment: comment || 'Согласовано ответственным сотрудником'
            });
            await loadPreferenceReviews();
        } catch (error) {
            setAlert({ title: 'Ошибка рассмотрения', message: error.message || 'Не удалось рассмотреть пожелание' });
        } finally {
            setPreferenceBusy(null);
        }
    }

    async function loadChangeReviews(overrideStatus) {
        const nextStatus = overrideStatus ?? latestRef.current.changeStatusFilter;
        setChangePhase('loading');
        try {
            const items = await fetchTeacherChangeRequests(nextStatus);
            setChangeItems(items);
            setChangePhase('ready');
        } catch (error) {
            setChangeError(error.message || 'Не удалось загрузить заявки');
            setChangePhase('error');
        }
    }

    async function handleChangeReview(item, approved) {
        const comment = (changeComments[item.id] || '').trim();
        if (!approved && !comment) {
            setAlert({ title: 'Нужен комментарий', message: 'При отклонении укажите комментарий.' });
            return;
        }
        setChangeBusy({ id: item.id, action: approved ? 'approve' : 'reject' });
        try {
            await reviewTeacherChangeRequest(item.id, { approved, comment });
            await Promise.all([loadChangeReviews(), loadAbsences()]);
        } catch (error) {
            setAlert({ title: 'Решение не применено', message: error.message || 'Не удалось применить решение' });
        } finally {
            setChangeBusy(null);
        }
    }

    const registryContent = absencesPhase === 'loading'
        ? <div className="loading-row">Загрузка...</div>
        : absencesPhase === 'error'
            ? <div className="loading-row">{absencesError}</div>
            : (absences.length ? absences.map(item => (
                <article className="absence-registry-item" key={String(item.id)} data-status={item.status}>
                    <div className="absence-date-rail">
                        <strong>{dayOfMonth(item.startDate)}</strong>
                        <span>{monthShort(item.startDate)}</span>
                        <i></i>
                        <strong>{dayOfMonth(item.endDate)}</strong>
                        <span>{monthShort(item.endDate)}</span>
                    </div>
                    <div className="absence-registry-main">
                        <div className="absence-registry-title">
                            <div>
                                <h3>{item.teacherName || 'Преподаватель не указан'}</h3>
                                <p>{item.reason || 'Причина не указана'}</p>
                            </div>
                            <span className={`absence-status ${statusClass(item.status)}`}>{statusLabel(item.status)}</span>
                        </div>
                        <div className="absence-meta-row">
                            <span>{formatAbsenceDate(item.startDate)} — {formatAbsenceDate(item.endDate)}</span>
                            <span>{decisionCountLabel(item.decisionCount || 0)}</span>
                            {item.reviewComment ? <span>{item.reviewComment}</span> : null}
                        </div>
                    </div>
                    <div className="absence-registry-buttons">
                        {item.status === 'PENDING' ? (
                            <>
                                <button
                                    type="button"
                                    className="btn btn-sm btn-primary"
                                    disabled={registryBusy?.id === item.id && registryBusy?.action === 'approve'}
                                    onClick={() => void handleRegistryAction(item, 'approve')}
                                >
                                    Подтвердить
                                </button>
                                <button
                                    type="button"
                                    className="btn btn-sm btn-danger-subtle"
                                    disabled={registryBusy?.id === item.id && registryBusy?.action === 'reject'}
                                    onClick={() => void handleRegistryAction(item, 'reject')}
                                >
                                    Отклонить
                                </button>
                            </>
                        ) : null}
                        {['APPROVED', 'RESOLVED'].includes(item.status) ? (
                            <button
                                type="button"
                                className="btn btn-sm btn-secondary"
                                disabled={registryBusy?.id === item.id && registryBusy?.action === 'wizard'}
                                onClick={() => void handleRegistryAction(item, 'wizard')}
                            >
                                {item.status === 'APPROVED' ? 'Открыть мастер' : 'Открыть журнал'}
                            </button>
                        ) : null}
                        {['PENDING', 'APPROVED'].includes(item.status) ? (
                            <button
                                type="button"
                                className="btn btn-sm btn-ghost"
                                disabled={registryBusy?.id === item.id && registryBusy?.action === 'cancel'}
                                onClick={() => void handleRegistryAction(item, 'cancel')}
                            >
                                Отменить
                            </button>
                        ) : null}
                    </div>
                </article>
            )) : (
                <div className="absence-empty">
                    <strong>Инцидентов не найдено</strong>
                    <span>Измените фильтр или зарегистрируйте отсутствие.</span>
                </div>
            ));

    const preferenceContent = preferencePhase === 'idle'
        ? null
        : preferencePhase === 'meta-loading'
            ? <div className="loading-row">Загрузка семестров...</div>
            : preferencePhase === 'loading'
                ? <div className="loading-row">Загрузка пожеланий...</div>
                : preferencePhase === 'error'
                    ? <div className="loading-row">{preferenceError}</div>
                    : (preferenceItems.length ? preferenceItems.map(item => (
                        <article className="teacher-dialogue-item" key={String(item.id)}>
                            <span className={`teacher-dialogue-mark preference-${item.preferenceType.toLowerCase()}`}></span>
                            <div className="teacher-dialogue-copy">
                                <small>
                                    {item.academicYearTitle} · {item.semesterType === 'AUTUMN' ? 'осенний семестр' : 'весенний семестр'}
                                </small>
                                <h3>{item.teacherName}</h3>
                                <p>{preferenceDescription(item)}</p>
                                {item.comment ? <blockquote>{item.comment}</blockquote> : null}
                                {item.reviewComment
                                    ? <span className="teacher-dialogue-review">Решение: {item.reviewComment}</span>
                                    : null}
                            </div>
                            <div className="teacher-dialogue-action">
                                <span className={`absence-status ${statusClass(item.status)}`}>{genericStatusLabel(item.status)}</span>
                                {item.status === 'PENDING' ? (
                                    <>
                                        <input
                                            type="text"
                                            className="teacher-dialogue-comment"
                                            maxLength="2000"
                                            placeholder="Комментарий к решению"
                                            value={preferenceComments[item.id] || ''}
                                            onChange={event => setPreferenceComments(previous => ({
                                                ...previous,
                                                [item.id]: event.target.value
                                            }))}
                                        />
                                        <div>
                                            <button
                                                className="btn btn-sm btn-primary"
                                                type="button"
                                                disabled={preferenceBusy?.id === item.id}
                                                onClick={() => void handlePreferenceReview(item, true)}
                                            >
                                                Согласовать
                                            </button>
                                            <button
                                                className="btn btn-sm btn-danger-subtle"
                                                type="button"
                                                disabled={preferenceBusy?.id === item.id}
                                                onClick={() => void handlePreferenceReview(item, false)}
                                            >
                                                Отклонить
                                            </button>
                                        </div>
                                    </>
                                ) : null}
                            </div>
                        </article>
                    )) : (
                        <div className="absence-empty">
                            <strong>Пожеланий не найдено</strong>
                            <span>Измените фильтры или дождитесь новых отметок преподавателей.</span>
                        </div>
                    ));

    const changeContent = changePhase === 'idle'
        ? null
        : changePhase === 'loading'
            ? <div className="loading-row">Загрузка заявок...</div>
            : changePhase === 'error'
                ? <div className="loading-row">{changeError}</div>
                : (changeItems.length ? changeItems.map(item => (
                    <article className="teacher-dialogue-item change-item" key={String(item.id)}>
                        <span className={`teacher-dialogue-mark change-${item.requestType.toLowerCase()}`}></span>
                        <div className="teacher-dialogue-copy">
                            <small>
                                {formatAbsenceDate(item.lessonDate)} · {trimTime(item.sourceStartTime)}–{trimTime(item.sourceEndTime)} · {item.sourceClassroomName}
                            </small>
                            <h3>{item.teacherName} · {item.subjectName}</h3>
                            <p>{changeTypeLabel(item.requestType)} → <strong>{changeReviewTarget(item)}</strong></p>
                            <blockquote>{item.reason}</blockquote>
                            {item.reviewComment
                                ? <span className="teacher-dialogue-review">Решение: {item.reviewComment}</span>
                                : null}
                            <details>
                                <summary>История · {(item.history || []).length}</summary>
                                <ol>
                                    {(item.history || []).map((entry, index) => (
                                        <li key={index}>
                                            <b>{genericStatusLabel(entry.status)}</b> · {entry.comment || 'Без комментария'}
                                        </li>
                                    ))}
                                </ol>
                            </details>
                        </div>
                        <div className="teacher-dialogue-action">
                            <span className={`absence-status ${statusClass(item.status)}`}>{genericStatusLabel(item.status)}</span>
                            {item.status === 'PENDING' && canApplyChanges ? (
                                <>
                                    <input
                                        type="text"
                                        className="teacher-dialogue-comment"
                                        maxLength="2000"
                                        placeholder="Комментарий к решению"
                                        value={changeComments[item.id] || ''}
                                        onChange={event => setChangeComments(previous => ({
                                            ...previous,
                                            [item.id]: event.target.value
                                        }))}
                                    />
                                    <div>
                                        <button
                                            className="btn btn-sm btn-primary"
                                            type="button"
                                            disabled={changeBusy?.id === item.id}
                                            onClick={() => void handleChangeReview(item, true)}
                                        >
                                            Применить
                                        </button>
                                        <button
                                            className="btn btn-sm btn-danger-subtle"
                                            type="button"
                                            disabled={changeBusy?.id === item.id}
                                            onClick={() => void handleChangeReview(item, false)}
                                        >
                                            Отклонить
                                        </button>
                                    </div>
                                </>
                            ) : item.status === 'PENDING'
                                ? <small>Применение доступно учебному отделу</small>
                                : null}
                        </div>
                    </article>
                )) : (
                    <div className="absence-empty">
                        <strong>Заявок не найдено</strong>
                        <span>Очередь изменений сейчас пуста.</span>
                    </div>
                ));

    return (
        <>
            <section className="absence-command-card">
                <div className="absence-command-copy">
                    <span className="absence-kicker">Оперативный контур расписания</span>
                    <h2>От регистрации инцидента до готовой замены</h2>
                    <p>Зафиксируйте период отсутствия, проверьте затронутые пары и примените только выбранные решения.</p>
                </div>
                <div className="absence-command-stats" aria-label="Сводка отсутствий">
                    <article><strong id="absence-stat-active">{stats.active}</strong><span>требуют внимания</span></article>
                    <article><strong id="absence-stat-pending">{stats.pending}</strong><span>ждут подтверждения</span></article>
                    <article><strong id="absence-stat-resolved">{stats.resolved}</strong><span>разрешены</span></article>
                </div>
            </section>

            <section className="card absence-create-card">
                <div className="card-header-row">
                    <div>
                        <span className="absence-section-number">01</span>
                        <h2>Зарегистрировать отсутствие</h2>
                    </div>
                    <span className="muted">Ответственный сотрудник создаёт согласованную запись сразу</span>
                </div>
                <form id="teacher-absence-form" noValidate onSubmit={handleSubmit}>
                    <div className="absence-form-grid">
                        <div className="form-group absence-teacher-field">
                            <label htmlFor="teacher-absence-teacher">Преподаватель</label>
                            <AsyncCombobox
                                ariaLabel="Преподаватель"
                                placeholder="Найдите преподавателя по ФИО"
                                selectedValue={teacherSelection.id}
                                selectedLabel={teacherSelection.label}
                                optionLabel={teacherOptionLabel}
                                optionDescription={teacher => [
                                    teacher.jobTitle,
                                    teacher.departmentName
                                ].filter(Boolean).join(' · ')}
                                load={(query, selectedId) => fetchAbsenceTeacherOptions({
                                    query,
                                    selectedId,
                                    role,
                                    departmentId: session?.departmentId
                                })}
                                onSelect={item => setTeacherSelection(item
                                    ? { id: String(item.id), label: teacherOptionLabel(item) }
                                    : { id: '', label: '' })}
                            />
                        </div>
                        <div className="form-group">
                            <label htmlFor="teacher-absence-start">Начало</label>
                            <input
                                type="date"
                                id="teacher-absence-start"
                                required
                                value={startDate}
                                onChange={event => setStartDate(event.target.value)}
                            />
                        </div>
                        <div className="form-group">
                            <label htmlFor="teacher-absence-end">Окончание</label>
                            <input
                                type="date"
                                id="teacher-absence-end"
                                required
                                value={endDate}
                                onChange={event => setEndDate(event.target.value)}
                            />
                        </div>
                        <div className="form-group absence-reason-field">
                            <label htmlFor="teacher-absence-reason">Причина</label>
                            <input
                                type="text"
                                id="teacher-absence-reason"
                                maxLength="2000"
                                placeholder="Болезнь, командировка или другая причина"
                                required
                                value={reason}
                                onChange={event => setReason(event.target.value)}
                            />
                        </div>
                        <button type="submit" className="btn btn-md btn-primary absence-create-submit">
                            Зарегистрировать
                        </button>
                    </div>
                    <FormAlert id="teacher-absence-form-alert" alert={formAlert} />
                </form>
            </section>

            <section className="card absence-registry-card">
                <div className="card-header-row absence-registry-head">
                    <div>
                        <span className="absence-section-number">02</span>
                        <h2>Реестр инцидентов</h2>
                    </div>
                    <div className="absence-registry-actions">
                        <select
                            id="teacher-absence-status-filter"
                            aria-label="Фильтр по статусу"
                            value={statusFilter}
                            onChange={event => {
                                setStatusFilter(event.target.value || '');
                                void loadAbsences(event.target.value || '');
                            }}
                        >
                            <option value="">Все статусы</option>
                            <option value="PENDING">На подтверждении</option>
                            <option value="APPROVED">Согласованы</option>
                            <option value="RESOLVED">Разрешены</option>
                            <option value="REJECTED">Отклонены</option>
                            <option value="CANCELLED">Отменены</option>
                        </select>
                        <button
                            type="button"
                            className="btn btn-md btn-secondary"
                            id="teacher-absence-refresh"
                            onClick={() => void loadAbsences()}
                        >
                            Обновить
                        </button>
                    </div>
                </div>
                <div className="absence-registry" id="teacher-absence-registry" aria-live="polite">
                    {registryContent}
                </div>
            </section>

            <section className="teacher-dialogue-grid">
                <article className="card teacher-dialogue-card">
                    <header className="teacher-dialogue-head">
                        <div>
                            <span className="absence-section-number">03</span>
                            <h2>Пожелания на семестр</h2>
                            <p>Строгие ограничения после согласования участвуют в проверке правил. Мягкие отметки остаются видимой подсказкой.</p>
                        </div>
                        <div className="teacher-dialogue-counter">
                            <strong id="teacher-preference-pending-count">
                                {preferenceItems.filter(item => item.status === 'PENDING').length}
                            </strong>
                            <span>ожидают</span>
                        </div>
                    </header>
                    <div className="teacher-dialogue-toolbar">
                        <select
                            id="teacher-preference-semester-filter"
                            aria-label="Семестр пожеланий"
                            value={preferenceSemesterId}
                            onChange={event => {
                                setPreferenceSemesterId(event.target.value || '');
                                void loadPreferenceReviews({ semesterId: event.target.value || '' });
                            }}
                        >
                            <option value="">Все семестры</option>
                            {preferenceSemesters.map(semester => (
                                <option key={String(semester.id)} value={String(semester.id)}>
                                    {absenceSemesterLabel(semester)}
                                </option>
                            ))}
                        </select>
                        <select
                            id="teacher-preference-status-filter"
                            aria-label="Статус пожеланий"
                            value={preferenceStatusFilter}
                            onChange={event => {
                                setPreferenceStatusFilter(event.target.value || '');
                                void loadPreferenceReviews({ status: event.target.value || '' });
                            }}
                        >
                            <option value="PENDING">На рассмотрении</option>
                            <option value="APPROVED">Согласованные</option>
                            <option value="">Все статусы</option>
                        </select>
                        <button
                            className="btn btn-md btn-secondary"
                            id="teacher-preference-refresh"
                            type="button"
                            onClick={() => void loadPreferenceReviews()}
                        >
                            Обновить
                        </button>
                    </div>
                    <div className="teacher-dialogue-list" id="teacher-preference-review-list" aria-live="polite">
                        {preferenceContent}
                    </div>
                </article>

                <article className="card teacher-dialogue-card change-review-card">
                    <header className="teacher-dialogue-head">
                        <div>
                            <span className="absence-section-number">04</span>
                            <h2>Заявки на изменение</h2>
                            <p>Каждое одобрение проходит повторную проверку конфликтов и применяется через точечное изменение расписания.</p>
                        </div>
                        <div className="teacher-dialogue-counter">
                            <strong id="teacher-change-pending-count">
                                {changeItems.filter(item => item.status === 'PENDING').length}
                            </strong>
                            <span>в очереди</span>
                        </div>
                    </header>
                    <div className="teacher-dialogue-toolbar">
                        <select
                            id="teacher-change-status-filter"
                            aria-label="Статус заявок"
                            value={changeStatusFilter}
                            onChange={event => {
                                setChangeStatusFilter(event.target.value || '');
                                void loadChangeReviews(event.target.value || '');
                            }}
                        >
                            <option value="PENDING">Ожидают решения</option>
                            <option value="APPROVED">Одобренные</option>
                            <option value="REJECTED">Отклонённые</option>
                            <option value="">Все статусы</option>
                        </select>
                        <button
                            className="btn btn-md btn-secondary"
                            id="teacher-change-refresh"
                            type="button"
                            onClick={() => void loadChangeReviews()}
                        >
                            Обновить
                        </button>
                    </div>
                    <div className="teacher-dialogue-list" id="teacher-change-review-list" aria-live="polite">
                        {changeContent}
                    </div>
                </article>
            </section>

            {wizardOpen ? (
                <div
                    className="absence-wizard-overlay"
                    id="absence-wizard-overlay"
                    onClick={event => {
                        if (event.target === event.currentTarget) closeWizard();
                    }}
                >
                    <section className="absence-wizard" role="dialog" aria-modal="true" aria-labelledby="absence-wizard-title">
                        <header className="absence-wizard-header">
                            <div>
                                <span className="absence-kicker">Мастер замены</span>
                                <h2 id="absence-wizard-title">
                                    {wizardData ? (wizardData.absence.teacherName || 'Мастер замены') : 'Затронутые занятия'}
                                </h2>
                                <p id="absence-wizard-summary">
                                    {wizardData
                                        ? `${formatAbsenceDate(wizardData.absence.startDate)} — ${formatAbsenceDate(wizardData.absence.endDate)} · ${wizardData.absence.reason}`
                                        : 'Загрузка...'}
                                </p>
                            </div>
                            <button
                                type="button"
                                className="btn btn-icon-md btn-ghost"
                                id="absence-wizard-close"
                                aria-label="Закрыть"
                                onClick={closeWizard}
                            >
                                &times;
                            </button>
                        </header>
                        <div className="absence-wizard-progress" aria-hidden="true">
                            <span className="done">Инцидент</span><i></i><span className="done">Занятия</span><i></i><span>Решения</span>
                        </div>
                        <FormAlert id="absence-wizard-alert" alert={wizardAlert} />
                        <div className="absence-wizard-lessons" id="absence-wizard-lessons">
                            {wizardLoading
                                ? <div className="loading-row">Подбираем свободные ресурсы...</div>
                                : (wizardData
                                    ? (wizardData.lessons.length
                                        ? wizardData.lessons.map((lesson, index) => (
                                            <LessonDecision
                                                key={index}
                                                lesson={lesson}
                                                index={index}
                                                locked={wizardData.absence.status !== 'APPROVED' || Boolean(lesson.decisionStatus)}
                                                value={decisions[index] || ''}
                                                onChange={value => setDecisions(previous => ({ ...previous, [index]: value }))}
                                            />
                                        ))
                                        : (
                                            <div className="absence-empty">
                                                <strong>Затронутых занятий нет</strong>
                                                <span>Инцидент можно завершить без точечных изменений.</span>
                                            </div>
                                        ))
                                    : null)}
                        </div>
                        <section className="absence-journal">
                            <div className="card-header-row">
                                <h3>Журнал решений</h3>
                                <span className="muted" id="absence-journal-count">
                                    {wizardData ? decisionCountLabel((wizardData.journal || []).length) : '0 записей'}
                                </span>
                            </div>
                            <div id="absence-journal-list" className="absence-journal-list">
                                {wizardData ? (
                                    (wizardData.journal || []).length ? (wizardData.journal || []).map((item, index) => (
                                        <article key={index}>
                                            <span className={`absence-journal-mark ${item.status === 'APPLIED' ? 'applied' : 'rejected'}`}></span>
                                            <div>
                                                <strong>{resolutionLabel(item.resolution)}</strong>
                                                <small>{formatAbsenceDate(item.lessonDate)}</small>
                                            </div>
                                            <span>
                                                {decisionStatusLabel(item.status)}{item.scheduleOverrideId ? ` · override №${item.scheduleOverrideId}` : ''}
                                            </span>
                                        </article>
                                    )) : <div className="loading-row">Решений пока нет</div>
                                ) : null}
                            </div>
                        </section>
                        <footer className="absence-wizard-footer">
                            <span className="muted">Пустые строки останутся без изменений</span>
                            <div>
                                <button type="button" className="btn btn-md btn-ghost" id="absence-wizard-cancel" onClick={closeWizard}>
                                    Закрыть
                                </button>
                                <button
                                    type="button"
                                    className="btn btn-md btn-primary"
                                    id="absence-wizard-apply"
                                    hidden={wizardData?.absence.status !== 'APPROVED'}
                                    disabled={wizardApplying}
                                    onClick={() => void applyWizard()}
                                >
                                    Применить выбранные
                                </button>
                            </div>
                        </footer>
                    </section>
                </div>
            ) : null}

            {alert ? (
                <div
                    className="project-dialog-backdrop"
                    onClick={event => {
                        if (event.target === event.currentTarget) setAlert(null);
                    }}
                >
                    <section
                        className="project-dialog"
                        role="dialog"
                        aria-modal="true"
                        aria-labelledby="project-dialog-title"
                        aria-describedby="project-dialog-message"
                    >
                        <header>
                            <h2 id="project-dialog-title">{alert.title}</h2>
                            <button
                                type="button"
                                className="btn btn-icon-md btn-ghost"
                                aria-label="Закрыть"
                                onClick={() => setAlert(null)}
                            >
                                &times;
                            </button>
                        </header>
                        <p id="project-dialog-message">{alert.message}</p>
                        <footer>
                            <button type="button" className="btn btn-md btn-primary" onClick={() => setAlert(null)}>
                                Понятно
                            </button>
                        </footer>
                    </section>
                </div>
            ) : null}
        </>
    );
}

function LessonDecision({ lesson, index, locked, value, onChange }) {
    const options = decisionOptions(lesson);

    return (
        <article className="absence-lesson">
            <div className="absence-lesson-time">
                <strong>{trimTime(lesson.startTime)}</strong>
                <span>{trimTime(lesson.endTime)}</span>
                <small>{formatAbsenceDate(lesson.lessonDate)}</small>
            </div>
            <div className="absence-lesson-copy">
                <span className="absence-lesson-type">{lesson.lessonTypeName || 'Занятие'}</span>
                <h3>{lesson.subjectName || 'Дисциплина не указана'}</h3>
                <p>
                    {(lesson.groupNames || []).join(', ') || 'Группы не указаны'} · {lesson.classroomName || 'Без аудитории'}
                </p>
                {lesson.existingOverrideId
                    ? <small className="absence-warning">У пары уже есть точечное изменение — доступна только запись отклонения.</small>
                    : null}
            </div>
            <div className="absence-lesson-decision">
                <label htmlFor={`absence-decision-${index}`}>Решение</label>
                <select
                    id={`absence-decision-${index}`}
                    className="absence-decision-select"
                    disabled={locked}
                    value={value}
                    onChange={event => onChange(event.target.value)}
                >
                    <option value="">Оставить без изменений</option>
                    {options.map(option => (
                        <option key={option.value} value={option.value}>{option.label}</option>
                    ))}
                </select>
                {lesson.decisionStatus
                    ? <span className="absence-decision-fixed">{decisionStatusLabel(lesson.decisionStatus)}</span>
                    : null}
            </div>
        </article>
    );
}