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

import { getSession } from '../../../admin/js/api.js';
import { addDays, toIsoDate } from '../../shared/dates.js';
import { requestCountLabel } from '../admin-service.js';
import {
    DEPARTMENT_REQUEST_TABLE_COLUMNS,
    SUBJECT_TABLE_COLUMNS,
    assignTeacher,
    assignTeacherError,
    availableTeachers,
    defaultWorkloadPeriod,
    departmentOptionLabel,
    fetchAllTeachers,
    fetchDepartmentSubjects,
    fetchDepartmentTeacherRequests,
    fetchDepartmentTeachers,
    fetchDepartments,
    fetchSemesters,
    fetchSubjectComments,
    fetchTeacherWorkload,
    formatDateTime,
    importSubjects,
    importSubjectsPayload,
    requestStatusClass,
    requestStatusLabel,
    saveSubjectComment,
    subjectCountLabel,
    submitTeacherRequest,
    teacherMetrics,
    teacherOptionLabel,
    teacherRequestPayload,
    workloadLabel
} from '../department-workspace-service.js';

const ROLE_DEPARTMENT = 'DEPARTMENT';

export function DepartmentWorkspaceTab() {
    const [session] = useState(() => getSession());
    const role = session?.role;
    const userDepartmentId = session?.departmentId;
    const isDepartmentRole = role === ROLE_DEPARTMENT;

    const departmentIdRef = useRef('');
    const startDateRef = useRef(toIsoDate(new Date()));
    const endDateRef = useRef(toIsoDate(addDays(new Date(), 7)));

    const [departments, setDepartments] = useState([]);
    const [departmentId, setDepartmentId] = useState('');
    const [startDate, setStartDate] = useState(startDateRef.current);
    const [endDate, setEndDate] = useState(endDateRef.current);
    const [workspaceAlert, setWorkspaceAlert] = useState({ text: '', isError: false });

    const [subjects, setSubjects] = useState({ loading: true, items: [], error: '' });
    const [teachers, setTeachers] = useState({ items: null, error: '' });
    const [workload, setWorkload] = useState({ items: null, error: '' });
    const [requests, setRequests] = useState({ items: null, error: '' });
    const [allTeachers, setAllTeachers] = useState([]);
    const [allTeachersError, setAllTeachersError] = useState('');

    const [importRows, setImportRows] = useState([{ code: '', name: '' }]);
    const [importAlert, setImportAlert] = useState({ text: '', isError: false });

    const [assignTeacherId, setAssignTeacherId] = useState('');
    const [assignComment, setAssignComment] = useState('');
    const [assignAlert, setAssignAlert] = useState({ text: '', isError: false });

    const [requestForm, setRequestForm] = useState({ username: '', fullName: '', jobTitle: '', comment: '' });
    const [requestAlert, setRequestAlert] = useState({ text: '', isError: false });

    const [comments, setComments] = useState(null);
    const [commentText, setCommentText] = useState('');
    const [commentAlert, setCommentAlert] = useState({ text: '', isError: false });

    function currentDepartmentId() {
        return isDepartmentRole ? userDepartmentId : departmentIdRef.current;
    }

    useEffect(() => {
        let active = true;
        (async () => {
            try {
                const loaded = await fetchDepartments();
                if (!active) return;
                const list = loaded || [];
                setDepartments(list);
                if (isDepartmentRole) {
                    departmentIdRef.current = userDepartmentId || '';
                    setDepartmentId(departmentIdRef.current);
                } else if (list.length) {
                    departmentIdRef.current = String(list[0].id);
                    setDepartmentId(departmentIdRef.current);
                }
                try {
                    const semesters = await fetchSemesters();
                    const period = defaultWorkloadPeriod(semesters, new Date());
                    startDateRef.current = period.startDate;
                    endDateRef.current = period.endDate;
                    if (active) {
                        setStartDate(period.startDate);
                        setEndDate(period.endDate);
                    }
                } catch {
                    // Текущий диапазон остаётся безопасным fallback, если справочник
                    // семестров недоступен.
                }
                try {
                    const loadedTeachers = await fetchAllTeachers();
                    if (active) setAllTeachers(Array.isArray(loadedTeachers) ? loadedTeachers : []);
                } catch (error) {
                    if (active) setAllTeachersError(error.message || 'Ошибка загрузки преподавателей');
                }
                if (!active) return;
                await loadWorkspace();
            } catch (error) {
                if (!active) return;
                setWorkspaceAlert({ text: error.message || 'Ошибка загрузки кабинета кафедры', isError: true });
            }
        })();
        return () => {
            active = false;
        };
    }, []);

    async function loadWorkspace() {
        setWorkspaceAlert({ text: '', isError: false });
        setTeachers({ items: null, error: '' });
        setWorkload({ items: null, error: '' });
        setRequests({ items: null, error: '' });
        await Promise.all([loadSubjects(), loadTeachers(), loadWorkload(), loadTeacherRequests()]);
    }

    async function loadSubjects() {
        setSubjects({ loading: true, items: [], error: '' });
        try {
            const items = await fetchDepartmentSubjects(currentDepartmentId());
            setSubjects({ loading: false, items: Array.isArray(items) ? items : [], error: '' });
        } catch (error) {
            setSubjects({ loading: false, items: [], error: error.message || 'Ошибка загрузки дисциплин' });
        }
    }

    async function loadTeachers() {
        setTeachers({ items: null, error: '' });
        try {
            const items = await fetchDepartmentTeachers(currentDepartmentId());
            setTeachers({ items: Array.isArray(items) ? items : [], error: '' });
        } catch (error) {
            setTeachers({ items: [], error: error.message || 'Ошибка загрузки преподавателей' });
        }
    }

    async function loadWorkload() {
        if (!startDateRef.current || !endDateRef.current) {
            setWorkload({ items: [], error: 'Выберите начало и окончание периода' });
            return;
        }
        setWorkload({ items: null, error: '' });
        try {
            const items = await fetchTeacherWorkload({
                startDate: startDateRef.current,
                endDate: endDateRef.current,
                departmentId: currentDepartmentId()
            });
            setWorkload({ items: Array.isArray(items) ? items : [], error: '' });
        } catch (error) {
            setWorkload({ items: [], error: error.message || 'Ошибка расчёта нагрузки' });
        }
    }

    async function loadTeacherRequests() {
        setRequests({ items: null, error: '' });
        try {
            const items = await fetchDepartmentTeacherRequests(currentDepartmentId());
            setRequests({ items: Array.isArray(items) ? items : [], error: '' });
        } catch (error) {
            setRequests({ items: [], error: error.message || 'Ошибка загрузки заявок' });
        }
    }

    function handleDepartmentChange(value) {
        departmentIdRef.current = value;
        setDepartmentId(value);
        void loadWorkspace();
    }

    function handleStartDateChange(value) {
        startDateRef.current = value;
        setStartDate(value);
        if (value && endDateRef.current && value > endDateRef.current) {
            endDateRef.current = '';
            setEndDate('');
        }
        void loadWorkload();
    }

    function handleEndDateChange(value) {
        endDateRef.current = value;
        setEndDate(value);
        void loadWorkload();
    }

    // --- Загрузка дисциплин ---

    function addImportRow() {
        setImportRows(current => [...current, { code: '', name: '' }]);
    }

    function updateImportRow(index, patch) {
        setImportRows(current => current.map((row, rowIndex) => (
            rowIndex === index ? { ...row, ...patch } : row
        )));
    }

    function removeImportRow(index) {
        setImportRows(current => {
            const rows = current.filter((_, rowIndex) => rowIndex !== index);
            return rows.length ? rows : [{ code: '', name: '' }];
        });
    }

    async function submitImport(event) {
        event.preventDefault();
        setImportAlert({ text: '', isError: false });
        const rows = importRows.map(row => ({
            code: (row.code || '').trim(),
            name: (row.name || '').trim()
        }));
        const { payload, error } = importSubjectsPayload(rows, currentDepartmentId());
        if (error) {
            setImportAlert({ text: error, isError: true });
            return;
        }
        try {
            const result = await importSubjects(payload);
            setImportAlert({ text: result?.message || 'Дисциплины загружены', isError: false });
            setImportRows([{ code: '', name: '' }]);
            await loadSubjects();
        } catch (err) {
            setImportAlert({ text: err.message || 'Ошибка загрузки дисциплин', isError: true });
        }
    }

    // --- Привязка преподавателя ---

    async function submitAssign(event) {
        event.preventDefault();
        setAssignAlert({ text: '', isError: false });
        const error = assignTeacherError(currentDepartmentId(), assignTeacherId);
        if (error) {
            setAssignAlert({ text: error, isError: true });
            return;
        }
        try {
            await assignTeacher(assignTeacherId, currentDepartmentId(), assignComment.trim());
            setAssignAlert({ text: 'Преподаватель привязан к кафедре', isError: false });
            setAssignComment('');
            await Promise.all([loadTeachers(), loadWorkload()]);
        } catch (err) {
            setAssignAlert({ text: err.message || 'Ошибка привязки преподавателя', isError: true });
        }
    }

    // --- Заявка на преподавателя ---

    async function submitRequest(event) {
        event.preventDefault();
        setRequestAlert({ text: '', isError: false });
        const { payload, error } = teacherRequestPayload(requestForm, currentDepartmentId());
        if (error) {
            setRequestAlert({ text: error, isError: true });
            return;
        }
        try {
            await submitTeacherRequest(payload);
            setRequestAlert({ text: 'Заявка отправлена администратору', isError: false });
            setRequestForm({ username: '', fullName: '', jobTitle: '', comment: '' });
            await loadTeacherRequests();
        } catch (err) {
            setRequestAlert({ text: err.message || 'Ошибка отправки заявки', isError: true });
        }
    }

    // --- Комментарии к дисциплинам ---

    async function openComments(subjectId, subjectName) {
        setComments({ subjectId, subjectName, items: null, error: '' });
        setCommentText('');
        setCommentAlert({ text: '', isError: false });
        try {
            const items = await fetchSubjectComments(subjectId);
            setComments(current => (
                current && current.subjectId === subjectId
                    ? { ...current, items: Array.isArray(items) ? items : [], error: '' }
                    : current
            ));
        } catch (error) {
            setComments(current => (
                current && current.subjectId === subjectId
                    ? { ...current, items: [], error: error.message || 'Ошибка загрузки комментариев' }
                    : current
            ));
        }
    }

    async function submitComment(event) {
        event.preventDefault();
        const subjectId = comments?.subjectId;
        const comment = commentText.trim();
        if (!subjectId) {
            setCommentAlert({ text: 'Выберите дисциплину', isError: true });
            return;
        }
        if (!comment) {
            setCommentAlert({ text: 'Комментарий не должен быть пустым', isError: true });
            return;
        }
        try {
            await saveSubjectComment(subjectId, comment);
            setCommentAlert({ text: 'Комментарий сохранён', isError: false });
            await openComments(subjectId, comments.subjectName);
        } catch (error) {
            setCommentAlert({ text: error.message || 'Ошибка сохранения комментария', isError: true });
        }
    }

    const metricRows = teachers.items === null || workload.items === null
        ? null
        : teacherMetrics(teachers.items, workload.items);
    const freeTeachers = teachers.items === null
        ? null
        : availableTeachers(allTeachers, teachers.items);
    const requestsCountLabel = requests.error
        ? '0 заявок'
        : (requests.items === null ? 'Загрузка...' : requestCountLabel(requests.items.length));
    const subjectsCountLabel = subjects.error
        ? '0 дисциплин'
        : (subjects.loading ? 'Загрузка...' : subjectCountLabel(subjects.items.length));

    return (
        <>
            <div className="card department-workspace-control-card">
                <div className="card-header-row">
                    <h2>Рабочая область кафедры</h2>
                    <button
                        type="button"
                        className="btn btn-md btn-secondary"
                        id="department-workspace-refresh"
                        onClick={() => void loadWorkspace()}
                    >
                        Обновить
                    </button>
                </div>

                <div className="department-workspace-filter-grid">
                    {!isDepartmentRole && (
                        <div className="form-group" id="department-workspace-department-field">
                            <label htmlFor="department-workspace-department">Кафедра</label>
                            <select
                                id="department-workspace-department"
                                value={departmentId}
                                onChange={event => handleDepartmentChange(event.target.value)}
                            >
                                <option value="">Выберите кафедру</option>
                                {departments.map(department => (
                                    <option key={department.id} value={department.id}>
                                        {departmentOptionLabel(department)}
                                    </option>
                                ))}
                            </select>
                        </div>
                    )}
                    <div className="form-group">
                        <label htmlFor="department-workspace-start">Начало периода</label>
                        <input
                            type="date"
                            id="department-workspace-start"
                            value={startDate}
                            onChange={event => handleStartDateChange(event.target.value)}
                        />
                    </div>
                    <div className="form-group">
                        <label htmlFor="department-workspace-end">Окончание периода</label>
                        <input
                            type="date"
                            id="department-workspace-end"
                            value={endDate}
                            onChange={event => handleEndDateChange(event.target.value)}
                        />
                    </div>
                </div>

                <div
                    className={`form-alert${workspaceAlert.text ? (workspaceAlert.isError ? ' error' : ' success') : ''}`}
                    id="department-workspace-alert"
                    role="alert"
                >
                    {workspaceAlert.text}
                </div>
            </div>

            <div className="department-workspace-grid department-workspace-grid-wide department-workspace-actions-grid">
                <div className="card create-card department-subject-import-card">
                    <div className="card-header-row">
                        <h2>Загрузка дисциплин</h2>
                    </div>
                    <form id="department-subject-import-form" className="stack-form" onSubmit={submitImport}>
                        <div className="subject-import-slots-panel">
                            <div className="card-header-row">
                                <label className="schedule-section-label schedule-section-label--flush">
                                    Дисциплины для загрузки
                                </label>
                                <button
                                    type="button"
                                    className="btn btn-sm btn-secondary"
                                    id="subject-import-add"
                                    onClick={addImportRow}
                                >
                                    Добавить строку
                                </button>
                            </div>
                            <div id="subject-import-rows" className="subject-import-rows-list">
                                {importRows.map((row, index) => (
                                    <div className="subject-import-row" key={index}>
                                        <div className="form-group">
                                            <label>Код</label>
                                            <input
                                                type="text"
                                                className="subject-import-code"
                                                placeholder="DB201"
                                                value={row.code}
                                                onChange={event => updateImportRow(index, { code: event.target.value })}
                                            />
                                        </div>
                                        <div className="form-group">
                                            <label>Название</label>
                                            <input
                                                type="text"
                                                className="subject-import-name"
                                                placeholder="Базы данных"
                                                value={row.name}
                                                onChange={event => updateImportRow(index, { name: event.target.value })}
                                            />
                                        </div>
                                        <button
                                            type="button"
                                            className="btn btn-sm btn-danger subject-import-remove"
                                            onClick={() => removeImportRow(index)}
                                        >
                                            Удалить
                                        </button>
                                    </div>
                                ))}
                            </div>
                        </div>
                        <button type="submit" className="btn btn-md btn-secondary">Загрузить</button>
                        <div
                            className={`form-alert${importAlert.text ? (importAlert.isError ? ' error' : ' success') : ''}`}
                            id="department-subject-import-alert"
                            role="alert"
                        >
                            {importAlert.text}
                        </div>
                    </form>
                </div>

                <div className="card create-card department-teacher-assign-card">
                    <div className="card-header-row">
                        <h2>Добавить преподавателя</h2>
                    </div>
                    <form id="department-teacher-assign-form" className="stack-form" onSubmit={submitAssign}>
                        <div className="form-group">
                            <label htmlFor="department-teacher-select">Преподаватель</label>
                            <select
                                id="department-teacher-select"
                                value={assignTeacherId}
                                onChange={event => setAssignTeacherId(event.target.value)}
                            >
                                {freeTeachers === null ? (
                                    <option value="">Загрузка...</option>
                                ) : allTeachersError ? (
                                    <option value="">{allTeachersError}</option>
                                ) : freeTeachers.length === 0 ? (
                                    <option value="">Нет доступных преподавателей</option>
                                ) : (
                                    <>
                                        <option value="">Выберите преподавателя</option>
                                        {freeTeachers.map(teacher => (
                                            <option key={teacher.id} value={teacher.id}>
                                                {teacherOptionLabel(teacher)}
                                            </option>
                                        ))}
                                    </>
                                )}
                            </select>
                        </div>
                        <div className="form-group">
                            <label htmlFor="department-teacher-assign-comment">Комментарий</label>
                            <input
                                type="text"
                                id="department-teacher-assign-comment"
                                placeholder="Например, ведет лабораторные работы"
                                value={assignComment}
                                onChange={event => setAssignComment(event.target.value)}
                            />
                        </div>
                        <button type="submit" className="btn btn-md btn-secondary">Привязать к кафедре</button>
                        <div
                            className={`form-alert${assignAlert.text ? (assignAlert.isError ? ' error' : ' success') : ''}`}
                            id="department-teacher-assign-alert"
                            role="alert"
                        >
                            {assignAlert.text}
                        </div>
                    </form>
                </div>

                <div className="card create-card department-teacher-request-card">
                    <div className="card-header-row">
                        <h2>Заявка на преподавателя</h2>
                    </div>
                    <form id="department-teacher-request-form" className="stack-form" onSubmit={submitRequest}>
                        <div className="form-group">
                            <label htmlFor="teacher-request-username">Логин</label>
                            <input
                                type="text"
                                id="teacher-request-username"
                                placeholder="ivanov_teacher"
                                maxLength={50}
                                required
                                value={requestForm.username}
                                onChange={event => setRequestForm(current => (
                                    { ...current, username: event.target.value }
                                ))}
                            />
                        </div>
                        <div className="form-group">
                            <label htmlFor="teacher-request-fullname">ФИО</label>
                            <input
                                type="text"
                                id="teacher-request-fullname"
                                placeholder="Иванов Иван Иванович"
                                maxLength={255}
                                required
                                value={requestForm.fullName}
                                onChange={event => setRequestForm(current => (
                                    { ...current, fullName: event.target.value }
                                ))}
                            />
                        </div>
                        <div className="form-group">
                            <label htmlFor="teacher-request-jobtitle">Должность</label>
                            <input
                                type="text"
                                id="teacher-request-jobtitle"
                                placeholder="Доцент"
                                maxLength={255}
                                value={requestForm.jobTitle}
                                onChange={event => setRequestForm(current => (
                                    { ...current, jobTitle: event.target.value }
                                ))}
                            />
                        </div>
                        <div className="form-group">
                            <label htmlFor="teacher-request-comment">Комментарий</label>
                            <input
                                type="text"
                                id="teacher-request-comment"
                                placeholder="Что важно проверить администратору"
                                value={requestForm.comment}
                                onChange={event => setRequestForm(current => (
                                    { ...current, comment: event.target.value }
                                ))}
                            />
                        </div>
                        <button type="submit" className="btn btn-md btn-primary">Отправить заявку</button>
                        <div
                            className={`form-alert${requestAlert.text ? (requestAlert.isError ? ' error' : ' success') : ''}`}
                            id="department-teacher-request-alert"
                            role="alert"
                        >
                            {requestAlert.text}
                        </div>
                    </form>
                </div>

                <div className="card department-teachers-card">
                    <div className="card-header-row">
                        <h2>Преподаватели и нагрузка</h2>
                    </div>
                    <div className="metric-grid" id="department-teachers-list">
                        {metricRows === null ? (
                            'Загрузка...'
                        ) : metricRows.length === 0 ? (
                            <div className="loading-row">
                                {teachers.error || 'Преподаватели не найдены'}
                            </div>
                        ) : metricRows.map((row, index) => (
                            <article className="metric-card" key={index}>
                                <strong>{row.name || '-'}</strong>
                                <span>{row.meta || 'Должность не указана'}</span>
                                <small>{workloadLabel(row.workload, workload.error)}</small>
                            </article>
                        ))}
                    </div>
                </div>
            </div>

            <div className="card department-workspace-table-card">
                <div className="card-header-row">
                    <h2>Заявки кафедры</h2>
                    <span className="muted" id="department-teacher-request-count">{requestsCountLabel}</span>
                </div>
                <div className="table-wrap">
                    <table>
                        <thead>
                            <tr>
                                <th>Статус</th>
                                <th>Логин</th>
                                <th>ФИО</th>
                                <th>Должность</th>
                                <th>Комментарий</th>
                                <th>Рассмотрение</th>
                            </tr>
                        </thead>
                        <tbody id="department-teacher-requests-tbody">
                            {requests.items === null && !requests.error ? (
                                <tr>
                                    <td colSpan={DEPARTMENT_REQUEST_TABLE_COLUMNS} className="loading-row">
                                        Загрузка...
                                    </td>
                                </tr>
                            ) : requests.error ? (
                                <tr>
                                    <td colSpan={DEPARTMENT_REQUEST_TABLE_COLUMNS} className="loading-row">
                                        {requests.error}
                                    </td>
                                </tr>
                            ) : requests.items.length === 0 ? (
                                <tr>
                                    <td colSpan={DEPARTMENT_REQUEST_TABLE_COLUMNS} className="loading-row">
                                        Заявок пока нет
                                    </td>
                                </tr>
                            ) : requests.items.map(request => (
                                <tr key={request.id}>
                                    <td>
                                        <span className={`badge ${requestStatusClass(request.status)}`}>
                                            {requestStatusLabel(request.status)}
                                        </span>
                                    </td>
                                    <td>{request.username || '-'}</td>
                                    <td>{request.fullName || '-'}</td>
                                    <td>{request.jobTitle || '-'}</td>
                                    <td>{request.comment || '-'}</td>
                                    <td>{request.reviewComment || formatDateTime(request.reviewedAt) || '-'}</td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </div>

            <div className="card department-workspace-table-card">
                <div className="card-header-row">
                    <h2>Дисциплины кафедры</h2>
                    <span className="muted" id="department-subject-count">{subjectsCountLabel}</span>
                </div>
                <div className="table-wrap">
                    <table>
                        <thead>
                            <tr>
                                <th>Код</th>
                                <th>Название</th>
                                <th>Описание</th>
                                <th>Комментарии</th>
                            </tr>
                        </thead>
                        <tbody id="department-subjects-tbody">
                            {subjects.loading ? (
                                <tr>
                                    <td colSpan={SUBJECT_TABLE_COLUMNS} className="loading-row">
                                        Загрузка...
                                    </td>
                                </tr>
                            ) : subjects.error ? (
                                <tr>
                                    <td colSpan={SUBJECT_TABLE_COLUMNS} className="loading-row">
                                        {subjects.error}
                                    </td>
                                </tr>
                            ) : subjects.items.length === 0 ? (
                                <tr>
                                    <td colSpan={SUBJECT_TABLE_COLUMNS} className="loading-row">
                                        Дисциплины не найдены
                                    </td>
                                </tr>
                            ) : subjects.items.map(subject => (
                                <tr key={subject.id}>
                                    <td>{subject.code || '-'}</td>
                                    <td>{subject.name || '-'}</td>
                                    <td>{subject.description || '-'}</td>
                                    <td>
                                        <button
                                            type="button"
                                            className="btn btn-sm btn-secondary department-comments-open"
                                            onClick={() => void openComments(subject.id, subject.name || '')}
                                        >
                                            Открыть
                                        </button>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </div>

            {comments && (
                <div className="card department-workspace-table-card" id="department-comments-card">
                    <div className="card-header-row">
                        <h2 id="department-comments-title">
                            Комментарии: {comments.subjectName || 'дисциплина'}
                        </h2>
                        <button
                            type="button"
                            className="btn btn-sm btn-ghost"
                            id="department-comments-close"
                            onClick={() => setComments(null)}
                        >
                            Скрыть
                        </button>
                    </div>

                    <form id="department-comment-form" className="form-row" onSubmit={submitComment}>
                        <div className="form-group">
                            <label htmlFor="department-comment-text">Новый комментарий</label>
                            <input
                                type="text"
                                id="department-comment-text"
                                placeholder="Добавьте примечание по дисциплине"
                                value={commentText}
                                onChange={event => setCommentText(event.target.value)}
                            />
                        </div>
                        <button type="submit" className="btn btn-md btn-primary">Сохранить</button>
                    </form>
                    <div
                        className={`form-alert${commentAlert.text ? (commentAlert.isError ? ' error' : ' success') : ''}`}
                        id="department-comment-alert"
                        role="alert"
                    >
                        {commentAlert.text}
                    </div>
                    <div className="department-comment-list" id="department-comment-list">
                        {comments.items === null ? (
                            'Загрузка...'
                        ) : comments.error ? (
                            <div className="loading-row">{comments.error}</div>
                        ) : comments.items.length === 0 ? (
                            <div className="loading-row">Комментариев пока нет</div>
                        ) : comments.items.map((comment, index) => (
                            <article className="department-comment-item" key={index}>
                                <strong>{comment.authorName || 'Автор не указан'}</strong>
                                <span>{formatDateTime(comment.createdAt)}</span>
                                <p>{comment.comment}</p>
                            </article>
                        ))}
                    </div>
                </div>
            )}
        </>
    );
}