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

import { ConfirmDialog } from '../shared/ui/ConfirmDialog.jsx';
import {
    buildSlotPayload,
    createScope,
    deleteScope,
    deleteTimeSlot,
    fetchScopes,
    fetchTimeSlots,
    isSystemScope,
    resolveActiveScopeId,
    saveTimeSlot,
    scopeBadgeClass,
    scopeBadgeLabel,
    scopeOptionLabel,
    scopeSummaryText,
    slotDurationMinutes,
    slotsForScope,
    validateSlotPayload
} from './settings-service.js';

const EMPTY_SLOT_FORM = { endTime: '', id: '', orderNumber: '', startTime: '' };

export function TimeSlotsTab() {
    const [loadState, setLoadState] = useState({ kind: 'loading', message: '' });
    const [scopes, setScopes] = useState([]);
    const [slots, setSlots] = useState([]);
    const [activeScopeId, setActiveScopeId] = useState(null);
    const [slotForm, setSlotForm] = useState(EMPTY_SLOT_FORM);
    const [alert, setAlert] = useState({ text: '', isError: false });
    const [scopeModalOpen, setScopeModalOpen] = useState(false);
    const [scopeName, setScopeName] = useState('');
    const [scopeModalAlert, setScopeModalAlert] = useState({ text: '', isError: false });
    const [scopeDeleting, setScopeDeleting] = useState(false);
    const [slotDeleting, setSlotDeleting] = useState(null);
    const formRef = useRef(null);
    const scopeNameRef = useRef(null);

    async function loadAll(preferredScopeId) {
        setLoadState({ kind: 'loading', message: '' });
        try {
            const [loadedScopes, loadedSlots] = await Promise.all([
                fetchScopes(),
                fetchTimeSlots()
            ]);
            setScopes(loadedScopes);
            setSlots(loadedSlots);
            setActiveScopeId(current => resolveActiveScopeId(
                loadedScopes,
                preferredScopeId !== undefined ? preferredScopeId : current
            ));
            setLoadState({ kind: 'ready', message: '' });
        } catch (error) {
            setLoadState({ kind: 'error', message: error.message || 'Ошибка загрузки' });
        }
    }

    useEffect(() => {
        void loadAll();
    }, []);

    useEffect(() => {
        if (scopeModalOpen) {
            setScopeName('');
            setScopeModalAlert({ text: '', isError: false });
            window.setTimeout(() => scopeNameRef.current?.focus(), 0);
        }
    }, [scopeModalOpen]);

    const activeScope = scopes.find(scope => scope.id === activeScopeId) || null;
    const activeSlots = activeScopeId === null ? [] : slotsForScope(slots, activeScopeId);
    const duration = slotDurationMinutes(slotForm.startTime, slotForm.endTime);
    const editing = Boolean(slotForm.id);

    function resetSlotForm() {
        setSlotForm(EMPTY_SLOT_FORM);
        setAlert({ text: '', isError: false });
    }

    function updateSlotField(field, value) {
        setSlotForm(current => ({ ...current, [field]: value }));
    }

    async function submitSlot(event) {
        event.preventDefault();
        const payload = buildSlotPayload({
            endTime: slotForm.endTime,
            id: slotForm.id,
            orderNumber: slotForm.orderNumber,
            scopeId: activeScopeId,
            startTime: slotForm.startTime
        });
        const validation = validateSlotPayload(payload);
        if (validation) {
            setAlert({ text: validation, isError: true });
            return;
        }
        try {
            await saveTimeSlot(payload);
            setAlert({ text: 'Временной слот сохранён', isError: false });
            resetSlotForm();
            await loadAll();
        } catch (error) {
            setAlert({ text: error.message || 'Ошибка сохранения временного слота', isError: true });
        }
    }

    function editSlot(slot) {
        setActiveScopeId(slot.scopeId);
        setSlotForm({
            endTime: String(slot.endTime || '').slice(0, 5),
            id: String(slot.id),
            orderNumber: slot.orderNumber || '',
            startTime: String(slot.startTime || '').slice(0, 5)
        });
        setAlert({ text: '', isError: false });
        window.setTimeout(() => formRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' }), 0);
    }

    async function confirmDeleteSlot() {
        const slot = slotDeleting;
        setSlotDeleting(null);
        try {
            await deleteTimeSlot(slot.id);
            setAlert({ text: 'Временной слот удалён', isError: false });
            resetSlotForm();
            await loadAll();
        } catch (error) {
            setAlert({ text: error.message || 'Ошибка удаления временного слота', isError: true });
        }
    }

    async function submitScope(event) {
        event.preventDefault();
        const name = scopeName.trim();
        if (!name) {
            setScopeModalAlert({ text: 'Введите название ручной сетки', isError: true });
            return;
        }
        try {
            const saved = await createScope(name);
            setScopeModalOpen(false);
            setAlert({ text: 'Сетка времени создана', isError: false });
            await loadAll(saved.id);
        } catch (error) {
            setScopeModalAlert({ text: error.message || 'Ошибка создания сетки времени', isError: true });
        }
    }

    async function confirmDeleteScope() {
        const scope = activeScope;
        setScopeDeleting(false);
        if (!scope || isSystemScope(scope)) return;
        try {
            await deleteScope(scope.id);
            resetSlotForm();
            setAlert({ text: 'Сетка времени удалена', isError: false });
            await loadAll();
        } catch (error) {
            setAlert({ text: error.message || 'Ошибка удаления сетки времени', isError: true });
        }
    }

    return (
        <section className="settings-section">
            <div className="settings-header-row">
                <div>
                    <h2>Временные слоты</h2>
                    <p>Настройка базовой, субботней и ручных сеток времени.</p>
                </div>
                <button
                    type="button"
                    className="btn btn-md btn-secondary"
                    onClick={() => void loadAll()}
                >
                    Обновить
                </button>
            </div>

            {loadState.kind === 'error' ? (
                <article className="settings-card">
                    <div className="loading-row">{loadState.message}</div>
                </article>
            ) : (
                <>
                    <div className="settings-grid">
                        <article className="settings-card">
                            <div className="card-header-row">
                                <h3>Сетка времени</h3>
                                <div className="scope-header-actions">
                                    <button
                                        type="button"
                                        className="btn btn-md btn-primary"
                                        onClick={() => setScopeModalOpen(true)}
                                    >
                                        Новая ручная сетка
                                    </button>
                                    <button
                                        type="button"
                                        className="btn btn-md btn-danger-subtle"
                                        disabled={!activeScope || isSystemScope(activeScope)}
                                        onClick={() => setScopeDeleting(true)}
                                    >
                                        Удалить сетку
                                    </button>
                                </div>
                            </div>

                            <div className="settings-form settings-form-single">
                                <label className="form-field" htmlFor="time-slot-scope-select">
                                    <span>Область действия</span>
                                    <select
                                        id="time-slot-scope-select"
                                        className="native-select-control"
                                        value={activeScopeId === null ? '' : String(activeScopeId)}
                                        onChange={event => {
                                            setActiveScopeId(Number(event.target.value));
                                            resetSlotForm();
                                        }}
                                    >
                                        {scopes.map(scope => (
                                            <option key={scope.id} value={scope.id}>
                                                {scopeOptionLabel(scope)}
                                            </option>
                                        ))}
                                    </select>
                                </label>
                            </div>

                            <div className="scope-summary">
                                {activeScope ? (
                                    <>
                                        <span className={scopeBadgeClass(activeScope)}>
                                            {scopeBadgeLabel(activeScope)}
                                        </span>
                                        <span>{scopeSummaryText(activeScope, slots)}</span>
                                    </>
                                ) : (
                                    <span className="muted">Сетки времени не настроены</span>
                                )}
                            </div>
                        </article>

                        <article className="settings-card settings-card-compact">
                            <h3>Как применяется</h3>
                            <div className="scope-summary">
                                <span className="scope-badge scope-badge-base">Базовая</span>
                                <span>Используется по умолчанию для всех дат.</span>
                            </div>
                            <div className="scope-summary">
                                <span className="scope-badge">Сб</span>
                                <span>Субботняя сетка применяется автоматически по субботам.</span>
                            </div>
                            <div className="scope-summary">
                                <span className="scope-badge">Ручная</span>
                                <span>Ручные сетки назначаются в ячейке редактора календарного графика.</span>
                            </div>
                        </article>
                    </div>

                    <article className="settings-card" ref={formRef}>
                        <div className="card-header-row">
                            <h3>{editing ? 'Редактирование слота' : 'Новый слот'}</h3>
                            <button type="button" className="btn btn-md btn-ghost" onClick={resetSlotForm}>
                                Очистить
                            </button>
                        </div>

                        <form className="settings-form" noValidate onSubmit={submitSlot}>
                            <label className="form-field" htmlFor="time-slot-order">
                                <span>Пара</span>
                                <input
                                    type="number"
                                    id="time-slot-order"
                                    min="1"
                                    step="1"
                                    required
                                    value={slotForm.orderNumber}
                                    onChange={event => updateSlotField('orderNumber', event.target.value)}
                                />
                            </label>

                            <label className="form-field" htmlFor="time-slot-start">
                                <span>Начало</span>
                                <input
                                    type="time"
                                    id="time-slot-start"
                                    required
                                    value={slotForm.startTime}
                                    onChange={event => updateSlotField('startTime', event.target.value)}
                                />
                            </label>

                            <label className="form-field" htmlFor="time-slot-end">
                                <span>Окончание</span>
                                <input
                                    type="time"
                                    id="time-slot-end"
                                    required
                                    value={slotForm.endTime}
                                    onChange={event => updateSlotField('endTime', event.target.value)}
                                />
                            </label>

                            <label className="form-field" htmlFor="time-slot-duration">
                                <span>Минут</span>
                                <input
                                    type="number"
                                    id="time-slot-duration"
                                    min="1"
                                    step="1"
                                    readOnly
                                    aria-describedby="time-slot-duration-hint"
                                    value={duration === null ? '' : String(duration)}
                                />
                                <small id="time-slot-duration-hint">Рассчитывается по времени начала и окончания</small>
                            </label>

                            <button type="submit" className="btn btn-md btn-primary">Сохранить слот</button>
                            <div
                                className={`form-alert${alert.text ? (alert.isError ? ' error' : ' success') : ''}`}
                                role="alert"
                            >
                                {alert.text}
                            </div>
                        </form>
                    </article>

                    <article className="settings-card">
                        <div className="table-wrap">
                            <table className="settings-table">
                                <thead>
                                    <tr>
                                        <th>Пара</th>
                                        <th>Начало</th>
                                        <th>Окончание</th>
                                        <th>Минут</th>
                                        <th>Действия</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {loadState.kind === 'loading' ? (
                                        <tr><td colSpan="5" className="loading-row">Загрузка...</td></tr>
                                    ) : activeSlots.length === 0 ? (
                                        <tr><td colSpan="5" className="loading-row">В выбранной сетке нет слотов</td></tr>
                                    ) : activeSlots.map(slot => (
                                        <tr key={slot.id}>
                                            <td>{slot.orderNumber ?? '-'}</td>
                                            <td>{String(slot.startTime || '').slice(0, 5)}</td>
                                            <td>{String(slot.endTime || '').slice(0, 5)}</td>
                                            <td>{slot.durationMinutes ?? '-'}</td>
                                            <td className="actions-cell">
                                                <button
                                                    type="button"
                                                    className="btn btn-sm btn-secondary"
                                                    onClick={() => editSlot(slot)}
                                                >
                                                    Изменить
                                                </button>
                                                <button
                                                    type="button"
                                                    className="btn btn-sm btn-danger"
                                                    onClick={() => setSlotDeleting(slot)}
                                                >
                                                    Удалить
                                                </button>
                                            </td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </div>
                    </article>
                </>
            )}

            {scopeModalOpen && (
                <div className="settings-modal-overlay open" aria-hidden="false">
                    <div
                        className="settings-modal-card"
                        role="dialog"
                        aria-modal="true"
                        aria-labelledby="time-slot-scope-modal-title"
                    >
                        <div className="card-header-row">
                            <div>
                                <h3 id="time-slot-scope-modal-title">Новая ручная сетка</h3>
                                <p className="settings-modal-subtitle">
                                    Создайте отдельную сетку времени, которую затем можно назначать датам в календарном графике.
                                </p>
                            </div>
                            <button
                                type="button"
                                className="btn btn-icon-md btn-ghost settings-modal-close"
                                aria-label="Закрыть окно"
                                onClick={() => setScopeModalOpen(false)}
                            >
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
                                    strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                                    <line x1="18" y1="6" x2="6" y2="18" />
                                    <line x1="6" y1="6" x2="18" y2="18" />
                                </svg>
                            </button>
                        </div>

                        <form className="settings-modal-form" noValidate onSubmit={submitScope}>
                            <label className="form-field" htmlFor="time-slot-scope-name">
                                <span>Название сетки</span>
                                <input
                                    ref={scopeNameRef}
                                    type="text"
                                    id="time-slot-scope-name"
                                    placeholder="Например: праздничная"
                                    required
                                    value={scopeName}
                                    onChange={event => setScopeName(event.target.value)}
                                />
                            </label>

                            <div className="settings-modal-actions">
                                <button type="submit" className="btn btn-md btn-primary">Создать сетку</button>
                                <button
                                    type="button"
                                    className="btn btn-md btn-ghost"
                                    onClick={() => setScopeModalOpen(false)}
                                >
                                    Отмена
                                </button>
                            </div>

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

            {scopeDeleting && activeScope && (
                <ConfirmDialog
                    title="Удаление сетки времени"
                    message={`Удалить сетку «${activeScope.name}» вместе с её слотами и ручными назначениями?`}
                    confirmLabel="Удалить сетку"
                    danger
                    onClose={() => setScopeDeleting(false)}
                    onConfirm={() => void confirmDeleteScope()}
                />
            )}

            {slotDeleting && (
                <ConfirmDialog
                    title="Удаление временного слота"
                    message="Удалить временной слот?"
                    confirmLabel="Удалить"
                    danger
                    onClose={() => setSlotDeleting(null)}
                    onConfirm={() => void confirmDeleteSlot()}
                />
            )}
        </section>
    );
}