import { useEffect, useState } from 'react';

import { ConfirmDialog } from '../shared/ui/ConfirmDialog.jsx';
import {
    createEducationForm,
    deleteEducationForm,
    fetchEducationForms
} from './settings-service.js';

export function EduFormsTab() {
    const [forms, setForms] = useState(null);
    const [loadError, setLoadError] = useState(false);
    const [name, setName] = useState('');
    const [alert, setAlert] = useState({ text: '', isError: false });
    const [deleting, setDeleting] = useState(null);

    useEffect(() => {
        let active = true;
        (async () => {
            try {
                const loaded = await fetchEducationForms();
                if (!active) return;
                setForms(loaded);
                setLoadError(false);
            } catch {
                if (active) setLoadError(true);
            }
        })();
        return () => {
            active = false;
        };
    }, []);

    async function reload() {
        try {
            setForms(await fetchEducationForms());
            setLoadError(false);
        } catch {
            setLoadError(true);
        }
    }

    async function submit(event) {
        event.preventDefault();
        const trimmed = name.trim();
        if (!trimmed) {
            setAlert({ text: 'Введите название', isError: true });
            return;
        }
        try {
            const created = await createEducationForm(trimmed);
            setAlert({ text: `Форма «${created.name}» создана`, isError: false });
            setName('');
            await reload();
        } catch (error) {
            setAlert({ text: error.message || 'Ошибка создания', isError: true });
        }
    }

    async function confirmDelete() {
        const form = deleting;
        setDeleting(null);
        try {
            await deleteEducationForm(form.id);
            await reload();
        } catch (error) {
            setAlert({ text: error.message || 'Не удалось удалить форму обучения', isError: true });
        }
    }

    return (
        <>
            <div className="card create-card">
                <h2>Новая форма обучения</h2>
                <form onSubmit={submit}>
                    <div className="form-row">
                        <div className="form-group">
                            <label htmlFor="new-ef-name">Название</label>
                            <input
                                type="text"
                                id="new-ef-name"
                                placeholder="Бакалавриат"
                                required
                                value={name}
                                onChange={event => setName(event.target.value)}
                            />
                        </div>
                        <button type="submit" className="btn btn-md btn-primary">Создать</button>
                    </div>
                    <div
                        className={`form-alert${alert.text ? (alert.isError ? ' error' : ' success') : ''}`}
                        role="alert"
                    >
                        {alert.text}
                    </div>
                </form>
            </div>

            <div className="card">
                <h2>Все формы обучения</h2>
                <div className="table-wrap">
                    <table>
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Название</th>
                                <th>Действия</th>
                            </tr>
                        </thead>
                        <tbody>
                            {loadError ? (
                                <tr><td colSpan="3" className="loading-row">Ошибка загрузки</td></tr>
                            ) : forms === null ? (
                                <tr><td colSpan="3" className="loading-row">Загрузка...</td></tr>
                            ) : forms.length === 0 ? (
                                <tr><td colSpan="3" className="loading-row">Нет форм обучения</td></tr>
                            ) : forms.map(form => (
                                <tr key={form.id}>
                                    <td>{form.id}</td>
                                    <td>{form.name}</td>
                                    <td>
                                        <button
                                            type="button"
                                            className="btn btn-sm btn-danger"
                                            onClick={() => setDeleting(form)}
                                        >
                                            Удалить
                                        </button>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </div>

            {deleting && (
                <ConfirmDialog
                    title="Удаление формы обучения"
                    message="Удалить форму обучения?"
                    confirmLabel="Удалить"
                    danger
                    onClose={() => setDeleting(null)}
                    onConfirm={() => void confirmDelete()}
                />
            )}
        </>
    );
}