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

import { AlertDialog, ConfirmDialog } from '../../shared/ui/ConfirmDialog.jsx';
import {
    archiveClassroom,
    classroomStatusLabel,
    createClassroom,
    createEquipment,
    deleteEquipment,
    equipmentIdSelection,
    equipmentNamesText,
    equipmentSelectLabel,
    fetchClassrooms,
    fetchEquipments,
    parseCapacity,
    restoreClassroom,
    toggleClassroomAvailability,
    updateClassroom
} from '../classrooms-service.js';

export function ClassroomsTab() {
    const [equipments, setEquipments] = useState([]);
    const [classrooms, setClassrooms] = useState(null);
    const [loadError, setLoadError] = useState(false);

    const [createName, setCreateName] = useState('');
    const [createCapacity, setCreateCapacity] = useState('');
    const [createEquipmentIds, setCreateEquipmentIds] = useState(() => new Set());
    const [createAlert, setCreateAlert] = useState({ text: '', isError: false });

    const [editModal, setEditModal] = useState(null);
    const [equipmentModal, setEquipmentModal] = useState(null);
    const [confirmState, setConfirmState] = useState(null);
    const [alertState, setAlertState] = useState(null);

    useEffect(() => {
        let active = true;
        (async () => {
            try {
                const [loadedEquipments, loadedClassrooms] = await Promise.all([
                    fetchEquipments(),
                    fetchClassrooms()
                ]);
                if (!active) return;
                setEquipments(loadedEquipments || []);
                setClassrooms(loadedClassrooms || []);
                setLoadError(false);
            } catch {
                if (active) setLoadError(true);
            }
        })();
        return () => {
            active = false;
        };
    }, []);

    async function reloadClassrooms() {
        try {
            setClassrooms(await fetchClassrooms());
            setLoadError(false);
        } catch {
            setLoadError(true);
        }
    }

    async function reloadEquipments() {
        const loaded = await fetchEquipments();
        setEquipments(loaded || []);
        return loaded || [];
    }

    function toggleCreateEquipment(equipmentId) {
        setCreateEquipmentIds(current => {
            const next = new Set(current);
            if (next.has(equipmentId)) {
                next.delete(equipmentId);
            } else {
                next.add(equipmentId);
            }
            return next;
        });
    }

    async function submitCreate(event) {
        event.preventDefault();
        const name = createName.trim();
        const capacity = parseCapacity(createCapacity);
        if (!name || Number.isNaN(capacity)) {
            setCreateAlert({ text: 'Заполните обязательные поля', isError: true });
            return;
        }
        try {
            const created = await createClassroom({
                name,
                capacity,
                equipmentIds: [...createEquipmentIds].map(Number)
            });
            setCreateAlert({ text: `Аудитория «${created.name}» добавлена`, isError: false });
            setCreateName('');
            setCreateCapacity('');
            setCreateEquipmentIds(new Set());
            await reloadClassrooms();
        } catch (error) {
            setCreateAlert({ text: error.message || 'Ошибка создания', isError: true });
        }
    }

    function confirmArchive(classroom) {
        setConfirmState({
            title: 'Вывод аудитории из эксплуатации',
            message: 'Историческое расписание сохранится, но аудитория перестанет участвовать в планировании.',
            confirmLabel: 'Вывести из эксплуатации',
            danger: true,
            action: async () => {
                try {
                    await archiveClassroom(classroom.id);
                    await reloadClassrooms();
                } catch (error) {
                    setAlertState({
                        title: 'Ошибка архивирования',
                        message: error.message || 'Не удалось архивировать аудиторию'
                    });
                }
            }
        });
    }

    async function restore(classroom) {
        try {
            await restoreClassroom(classroom.id);
            await reloadClassrooms();
        } catch (error) {
            setAlertState({
                title: 'Ошибка восстановления',
                message: error.message || 'Не удалось восстановить аудиторию'
            });
        }
    }

    async function toggleAvailability(classroom) {
        try {
            await toggleClassroomAvailability(classroom.id, !classroom.isAvailable);
            await reloadClassrooms();
        } catch (error) {
            setAlertState({
                title: 'Ошибка изменения статуса',
                message: error.message || 'Не удалось изменить доступность аудитории'
            });
        }
    }

    async function openEditModal(classroomId) {
        try {
            const fresh = await fetchClassrooms();
            const classroom = (fresh || []).find(item => String(item.id) === String(classroomId));
            if (!classroom) return;
            setEditModal({
                classroom,
                name: classroom.name,
                capacity: String(classroom.capacity),
                equipmentIds: new Set((classroom.equipments || []).map(equipment => String(equipment.id))),
                alert: { text: '', isError: false }
            });
        } catch (error) {
            setAlertState({
                title: 'Ошибка загрузки',
                message: error.message || 'Не удалось загрузить данные аудитории'
            });
        }
    }

    function toggleEditEquipment(equipmentId) {
        setEditModal(current => {
            if (!current) return current;
            const next = new Set(current.equipmentIds);
            if (next.has(equipmentId)) {
                next.delete(equipmentId);
            } else {
                next.add(equipmentId);
            }
            return { ...current, equipmentIds: next };
        });
    }

    async function submitEdit(event) {
        event.preventDefault();
        const modal = editModal;
        const name = modal.name.trim();
        const capacity = parseCapacity(modal.capacity);
        if (!name || Number.isNaN(capacity)) {
            setEditModal({ ...modal, alert: { text: 'Заполните обязательные поля', isError: true } });
            return;
        }
        try {
            const updated = await updateClassroom(modal.classroom.id, {
                name,
                capacity,
                equipmentIds: [...modal.equipmentIds].map(Number),
                isAvailable: modal.classroom.isAvailable
            });
            setEditModal(null);
            setCreateAlert({ text: `Аудитория «${updated.name}» обновлена`, isError: false });
            await reloadClassrooms();
        } catch (error) {
            setEditModal({
                ...modal,
                alert: { text: error.message || 'Ошибка обновления', isError: true }
            });
        }
    }

    async function openEquipmentModal() {
        setEquipmentModal({
            name: '',
            list: null,
            alert: { text: '', isError: false }
        });
        await reloadEquipmentModalList();
    }

    async function reloadEquipmentModalList() {
        try {
            const loaded = await reloadEquipments();
            setEquipmentModal(current => (current ? { ...current, list: loaded } : current));
        } catch {
            setEquipmentModal(current => (current ? { ...current, list: [] } : current));
        }
    }

    async function submitEquipment(event) {
        event.preventDefault();
        const modal = equipmentModal;
        const name = modal.name.trim();
        if (!name) {
            setEquipmentModal({ ...modal, alert: { text: 'Введите название', isError: true } });
            return;
        }
        try {
            const created = await createEquipment(name);
            setEquipmentModal(current => (
                current ? { ...current, name: '', alert: { text: `Оборудование «${created.name}» добавлено`, isError: false } } : current
            ));
            await reloadEquipmentModalList();
        } catch (error) {
            setEquipmentModal({
                ...modal,
                alert: { text: error.message || 'Ошибка добавления', isError: true }
            });
        }
    }

    function confirmDeleteEquipment(equipment) {
        setConfirmState({
            title: 'Удаление оборудования',
            message: 'Удалить оборудование из каталога?',
            confirmLabel: 'Удалить',
            danger: true,
            action: async () => {
                try {
                    await deleteEquipment(equipment.id);
                    await reloadEquipmentModalList();
                } catch (error) {
                    setAlertState({
                        title: 'Ошибка удаления',
                        message: error.message || 'Не удалось удалить оборудование'
                    });
                }
            }
        });
    }

    async function runConfirm() {
        const confirm = confirmState;
        setConfirmState(null);
        await confirm.action();
    }

    return (
        <>
            <div className="card create-card">
                <div className="card-toolbar">
                    <h2>Новая аудитория</h2>
                    <button type="button" className="btn btn-md btn-secondary" onClick={openEquipmentModal}>
                        Справочник оборудования
                    </button>
                </div>
                <form onSubmit={submitCreate}>
                    <div className="form-row">
                        <div className="form-group">
                            <label htmlFor="new-classroom-name">Номер / Название</label>
                            <input
                                type="text"
                                id="new-classroom-name"
                                placeholder="101 Ленинская"
                                required
                                value={createName}
                                onChange={event => setCreateName(event.target.value)}
                            />
                        </div>
                        <div className="form-group">
                            <label htmlFor="new-classroom-capacity">Вместимость (чел.)</label>
                            <input
                                type="number"
                                id="new-classroom-capacity"
                                placeholder="30"
                                min="1"
                                required
                                value={createCapacity}
                                onChange={event => setCreateCapacity(event.target.value)}
                            />
                        </div>
                    </div>
                    <div className="form-row form-row--spacing">
                        <div className="form-group form-group--wide">
                            <label>Оборудование</label>
                            <EquipmentMultiSelect
                                equipments={equipments}
                                selectedIds={createEquipmentIds}
                                onToggle={toggleCreateEquipment}
                            />
                        </div>
                        <div className="form-group form-group--submit">
                            <button type="submit" className="btn btn-md btn-primary">Добавить</button>
                        </div>
                    </div>
                    <div
                        className={`form-alert${createAlert.text ? (createAlert.isError ? ' error' : ' success') : ''}`}
                        role="alert"
                    >
                        {createAlert.text}
                    </div>
                </form>
            </div>

            <div className="card">
                <h2>Список аудиторий</h2>
                <div className="table-wrap">
                    <table id="classrooms-table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Название</th>
                                <th>Вместимость</th>
                                <th>Оборудование</th>
                                <th>Статус</th>
                                <th className="th-actions">Действия</th>
                            </tr>
                        </thead>
                        <tbody>
                            {loadError ? (
                                <tr><td colSpan="6" className="loading-row">Ошибка загрузки данных</td></tr>
                            ) : classrooms === null ? (
                                <tr><td colSpan="6" className="loading-row"><span className="state-spinner" aria-hidden="true" />Загрузка...</td></tr>
                            ) : classrooms.length === 0 ? (
                                <tr><td colSpan="6" className="loading-row">Нет аудиторий</td></tr>
                            ) : classrooms.map(classroom => (
                                <tr key={classroom.id}>
                                    <td>{classroom.id}</td>
                                    <td><strong>{classroom.name}</strong></td>
                                    <td>{classroom.capacity} чел.</td>
                                    <td><small>{equipmentNamesText(classroom) || '—'}</small></td>
                                    <td>
                                        <div className="status-cell">
                                            <span className={`badge ${classroom.isAvailable ? 'badge-available' : 'badge-unavailable'}`}>
                                                {classroomStatusLabel(classroom)}
                                            </span>
                                            <button
                                                type="button"
                                                className="btn btn-icon-sm btn-secondary btn-icon-toggle"
                                                title="Сменить статус"
                                                aria-label="Сменить статус"
                                                onClick={() => void toggleAvailability(classroom)}
                                            >
                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path></svg>
                                            </button>
                                        </div>
                                    </td>
                                    <td className="table-cell-actions">
                                        <div className="table-actions">
                                            <button
                                                type="button"
                                                className="btn btn-sm btn-secondary classroom-edit-action"
                                                onClick={() => void openEditModal(classroom.id)}
                                            >
                                                Изменить
                                            </button>
                                            {classroom.status === 'ARCHIVED' ? (
                                                <button
                                                    type="button"
                                                    className="btn btn-sm btn-secondary btn-restore-classroom"
                                                    onClick={() => void restore(classroom)}
                                                >
                                                    Восстановить
                                                </button>
                                            ) : (
                                                <button
                                                    type="button"
                                                    className="btn btn-sm btn-danger-subtle btn-archive-classroom"
                                                    onClick={() => confirmArchive(classroom)}
                                                >
                                                    Архивировать
                                                </button>
                                            )}
                                        </div>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </div>

            {editModal && (
                <div
                    className="modal-overlay open"
                    onClick={event => {
                        if (event.target === event.currentTarget) setEditModal(null);
                    }}
                >
                    <div className="modal-content card">
                        <h2>Редактировать аудиторию</h2>
                        <button
                            type="button"
                            className="btn btn-icon-md btn-ghost modal-close"
                            aria-label="Закрыть окно"
                            onClick={() => setEditModal(null)}
                        >
                            ×
                        </button>
                        <form onSubmit={submitEdit}>
                            <input type="hidden" value={editModal.classroom.id} />
                            <div className="form-row form-row--spacing">
                                <div className="form-group">
                                    <label htmlFor="edit-classroom-name">Номер / Название</label>
                                    <input
                                        type="text"
                                        id="edit-classroom-name"
                                        required
                                        value={editModal.name}
                                        onChange={event => setEditModal({ ...editModal, name: event.target.value })}
                                    />
                                </div>
                                <div className="form-group">
                                    <label htmlFor="edit-classroom-capacity">Вместимость (чел.)</label>
                                    <input
                                        type="number"
                                        id="edit-classroom-capacity"
                                        min="1"
                                        required
                                        value={editModal.capacity}
                                        onChange={event => setEditModal({ ...editModal, capacity: event.target.value })}
                                    />
                                </div>
                            </div>
                            <div className="form-row form-row--spacing">
                                <div className="form-group form-group--wide">
                                    <label>Оборудование</label>
                                    <EquipmentMultiSelect
                                        equipments={equipments}
                                        selectedIds={editModal.equipmentIds}
                                        onToggle={toggleEditEquipment}
                                    />
                                </div>
                                <div className="form-group form-group--submit">
                                    <button type="submit" className="btn btn-md btn-primary btn-block">Сохранить</button>
                                </div>
                            </div>
                            <div
                                className={`form-alert${editModal.alert.text ? (editModal.alert.isError ? ' error' : ' success') : ''}`}
                                role="alert"
                            >
                                {editModal.alert.text}
                            </div>
                        </form>
                    </div>
                </div>
            )}

            {equipmentModal && (
                <div
                    className="modal-overlay open"
                    onClick={event => {
                        if (event.target === event.currentTarget) setEquipmentModal(null);
                    }}
                >
                    <div className="modal-content card modal-content--medium">
                        <div className="modal-header-row">
                            <h2>Справочник оборудования</h2>
                            <button
                                type="button"
                                className="btn btn-icon-md btn-ghost modal-close modal-close--static"
                                aria-label="Закрыть окно"
                                onClick={() => setEquipmentModal(null)}
                            >
                                ×
                            </button>
                        </div>
                        <div className="card create-card modal-subcard">
                            <h3>Добавить оборудование</h3>
                            <form onSubmit={submitEquipment}>
                                <div className="form-row form-row--bottom">
                                    <div className="form-group form-group--flush">
                                        <label htmlFor="manage-equipment-name">Название оборудования</label>
                                        <input
                                            type="text"
                                            id="manage-equipment-name"
                                            placeholder="Проектор"
                                            required
                                            value={equipmentModal.name}
                                            onChange={event => setEquipmentModal({ ...equipmentModal, name: event.target.value })}
                                        />
                                    </div>
                                    <button type="submit" className="btn btn-md btn-primary btn-inline">Добавить</button>
                                </div>
                                <div
                                    className={`form-alert${equipmentModal.alert.text ? (equipmentModal.alert.isError ? ' error' : ' success') : ''}`}
                                    role="alert"
                                >
                                    {equipmentModal.alert.text}
                                </div>
                            </form>
                        </div>
                        <div className="table-wrap">
                            <table id="manage-equipments-table">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Название</th>
                                        <th>Действия</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {equipmentModal.list === null ? (
                                        <tr><td colSpan="3" className="loading-row">Загрузка...</td></tr>
                                    ) : equipmentModal.list.length === 0 ? (
                                        <tr><td colSpan="3" className="loading-row">Нет оборудования</td></tr>
                                    ) : equipmentModal.list.map(equipment => (
                                        <tr key={equipment.id}>
                                            <td>{equipment.id}</td>
                                            <td>{equipment.name}</td>
                                            <td>
                                                <button
                                                    type="button"
                                                    className="btn btn-sm btn-danger btn-delete-equipment"
                                                    onClick={() => confirmDeleteEquipment(equipment)}
                                                >
                                                    Удалить
                                                </button>
                                            </td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            )}

            {confirmState && (
                <ConfirmDialog
                    title={confirmState.title}
                    message={confirmState.message}
                    confirmLabel={confirmState.confirmLabel}
                    danger={confirmState.danger}
                    onConfirm={() => void runConfirm()}
                    onClose={() => setConfirmState(null)}
                />
            )}

            {alertState && (
                <AlertDialog
                    title={alertState.title}
                    message={alertState.message}
                    onClose={() => setAlertState(null)}
                />
            )}
        </>
    );
}

function EquipmentMultiSelect({ equipments, selectedIds, onToggle }) {
    const rootRef = useRef(null);
    const [open, setOpen] = useState(false);

    useEffect(() => {
        if (!open) return undefined;
        function handlePointerDown(event) {
            if (rootRef.current && !rootRef.current.contains(event.target)) {
                setOpen(false);
            }
        }
        document.addEventListener('mousedown', handlePointerDown);
        return () => document.removeEventListener('mousedown', handlePointerDown);
    }, [open]);

    const selection = equipmentIdSelection(equipments, [...selectedIds]);
    const selectedNames = selection.filter(item => item.checked).map(item => item.name);

    return (
        <div className="custom-multi-select" ref={rootRef}>
            <button
                type="button"
                className={`select-box${open ? ' active' : ''}`}
                aria-expanded={open}
                onClick={() => setOpen(current => !current)}
            >
                <span className="select-text">{equipmentSelectLabel(selectedNames)}</span>
                <svg className="dropdown-icon" width="12" height="8" viewBox="0 0 12 8" fill="none" aria-hidden="true">
                    <path d="M1 1.5L6 6.5L11 1.5" stroke="#9ca3af" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
            </button>
            <div className={`dropdown-menu${open ? ' open' : ''}`}>
                <div className="checkbox-group-vertical">
                    {equipments.length === 0 ? (
                        <p className="text-muted"><small>Оборудование отсутствует</small></p>
                    ) : selection.map(item => (
                        <label className="checkbox-item" key={item.id}>
                            <input
                                type="checkbox"
                                value={item.id}
                                checked={item.checked}
                                onChange={() => onToggle(String(item.id))}
                            />
                            <span className="checkmark"></span>
                            <span>{item.name}</span>
                        </label>
                    ))}
                </div>
            </div>
        </div>
    );
}