import { useEffect, useState } from 'react';

import { ConfirmDialog } from '../shared/ui/ConfirmDialog.jsx';
import {
    createTenant,
    deleteTenant,
    fetchDatabaseStatus,
    fetchTenants,
    normalizeDomain,
    testTenantConnection,
    validateTenantFields
} from './settings-service.js';

export function DatabaseTab() {
    const [status, setStatus] = useState(null);
    const [statusError, setStatusError] = useState(false);
    const [tenants, setTenants] = useState(null);
    const [tenantsError, setTenantsError] = useState(false);
    const [form, setForm] = useState({ domain: '', name: '', password: '', url: '', username: '' });
    const [alert, setAlert] = useState({ text: '', isError: false });
    const [testing, setTesting] = useState(false);
    const [deleting, setDeleting] = useState(null);

    useEffect(() => {
        let active = true;
        (async () => {
            const [statusResult, tenantsResult] = await Promise.allSettled([
                fetchDatabaseStatus(),
                fetchTenants()
            ]);
            if (!active) return;
            if (statusResult.status === 'fulfilled') {
                setStatus(statusResult.value);
            } else {
                setStatusError(true);
            }
            if (tenantsResult.status === 'fulfilled') {
                setTenants(tenantsResult.value);
            } else {
                setTenantsError(true);
            }
        })();
        return () => {
            active = false;
        };
    }, []);

    async function reload() {
        const [statusResult, tenantsResult] = await Promise.allSettled([
            fetchDatabaseStatus(),
            fetchTenants()
        ]);
        if (statusResult.status === 'fulfilled') {
            setStatus(statusResult.value);
            setStatusError(false);
        } else {
            setStatusError(true);
        }
        if (tenantsResult.status === 'fulfilled') {
            setTenants(tenantsResult.value);
            setTenantsError(false);
        } else {
            setTenantsError(true);
        }
    }

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

    async function testConnection() {
        setAlert({ text: '', isError: false });
        if (!form.url.trim()) {
            setAlert({ text: 'Введите JDBC URL', isError: true });
            return;
        }
        setTesting(true);
        try {
            const result = await testTenantConnection({
                password: form.password,
                url: form.url.trim(),
                username: form.username.trim()
            });
            if (result && result.success) {
                setAlert({ text: '✓ Подключение успешно!', isError: false });
            } else {
                setAlert({ text: `✗ ${(result && result.message) || 'Подключение не выполнено'}`, isError: true });
            }
        } catch {
            setAlert({ text: 'Не удалось проверить подключение', isError: true });
        } finally {
            setTesting(false);
        }
    }

    async function submit(event) {
        event.preventDefault();
        setAlert({ text: '', isError: false });

        const payload = {
            domain: normalizeDomain(form.domain),
            name: form.name.trim(),
            url: form.url.trim(),
            username: form.username.trim(),
            password: form.password
        };
        const validation = validateTenantFields(payload);
        if (validation) {
            setAlert({ text: validation, isError: true });
            return;
        }

        try {
            const result = await createTenant(payload);
            if (result && result.success) {
                setAlert({ text: `Тенант «${payload.domain}» добавлен`, isError: false });
                setForm({ domain: '', name: '', password: '', url: '', username: '' });
                await reload();
            } else {
                setAlert({ text: (result && result.message) || 'Не удалось добавить тенант', isError: true });
            }
        } catch {
            setAlert({ text: 'Не удалось добавить тенант', isError: true });
        }
    }

    async function confirmDelete() {
        const tenant = deleting;
        setDeleting(null);
        try {
            await deleteTenant(tenant.domain);
            await reload();
        } catch (error) {
            setAlert({ text: error.message || 'Не удалось удалить тенант', isError: true });
        }
    }

    return (
        <>
            <div className="card">
                <h2>Текущее подключение</h2>
                <div className="db-status-card">
                    {statusError ? (
                        <div className="loading-row">Не удалось загрузить статус подключения</div>
                    ) : status === null ? (
                        <div className="loading-row">Загрузка...</div>
                    ) : (
                        <div className="db-status-grid">
                            <div>
                                <span>Тенант:</span>
                                <strong>{status.tenant || '—'}</strong>
                            </div>
                            <div>
                                <span>Название:</span>
                                <strong>{status.name || '—'}</strong>
                            </div>
                            <div>
                                <span>Статус:</span>
                                <span className={`badge ${status.connected ? 'badge-available' : 'badge-unavailable'}`}>
                                    {status.connected ? 'Доступно' : 'Недоступно'}
                                </span>
                            </div>
                            {status.url && (
                                <div>
                                    <span>URL:</span>
                                    <code>{status.url}</code>
                                </div>
                            )}
                        </div>
                    )}
                </div>
            </div>

            <div className="card">
                <h2>Подключённые университеты</h2>
                <div className="table-wrap">
                    <table>
                        <thead>
                            <tr>
                                <th>Название</th>
                                <th>Домен</th>
                                <th>JDBC URL</th>
                                <th>Пользователь</th>
                                <th>Статус</th>
                                <th>Действия</th>
                            </tr>
                        </thead>
                        <tbody>
                            {tenantsError ? (
                                <tr><td colSpan="6" className="loading-row">Не удалось загрузить список тенантов</td></tr>
                            ) : tenants === null ? (
                                <tr><td colSpan="6" className="loading-row">Загрузка...</td></tr>
                            ) : tenants.length === 0 ? (
                                <tr><td colSpan="6" className="loading-row">Нет подключённых тенантов</td></tr>
                            ) : tenants.map(tenant => (
                                <tr key={tenant.domain}>
                                    <td>{tenant.name || '—'}</td>
                                    <td><code>{tenant.domain}</code></td>
                                    <td><code>{tenant.url}</code></td>
                                    <td>{tenant.username || '—'}</td>
                                    <td>
                                        <span className={`badge ${tenant.connected ? 'badge-available' : 'badge-unavailable'}`}>
                                            {tenant.connected ? 'Доступно' : 'Недоступно'}
                                        </span>
                                    </td>
                                    <td>
                                        <button
                                            type="button"
                                            className="btn btn-sm btn-danger"
                                            onClick={() => setDeleting(tenant)}
                                        >
                                            Удалить
                                        </button>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </div>

            <div className="card create-card">
                <h2>Добавить подключение</h2>
                <form onSubmit={submit}>
                    <div className="form-row">
                        <div className="form-group">
                            <label htmlFor="tenant-name">Название университета</label>
                            <input
                                type="text"
                                id="tenant-name"
                                placeholder="ЮЗГУ"
                                required
                                value={form.name}
                                onChange={event => updateField('name', event.target.value)}
                            />
                        </div>
                        <div className="form-group">
                            <label htmlFor="tenant-domain">Поддомен</label>
                            <input
                                type="text"
                                id="tenant-domain"
                                placeholder="swsu"
                                required
                                value={form.domain}
                                onChange={event => updateField('domain', event.target.value)}
                            />
                        </div>
                    </div>
                    <div className="form-row">
                        <div className="form-group form-group-wide">
                            <label htmlFor="tenant-url">JDBC URL</label>
                            <input
                                type="text"
                                id="tenant-url"
                                placeholder="jdbc:postgresql://192.168.1.50:5432/magistr_db"
                                required
                                value={form.url}
                                onChange={event => updateField('url', event.target.value)}
                            />
                        </div>
                    </div>
                    <div className="form-row">
                        <div className="form-group">
                            <label htmlFor="tenant-username">Пользователь</label>
                            <input
                                type="text"
                                id="tenant-username"
                                placeholder="postgres"
                                autoComplete="username"
                                required
                                value={form.username}
                                onChange={event => updateField('username', event.target.value)}
                            />
                        </div>
                        <div className="form-group">
                            <label htmlFor="tenant-password">Пароль</label>
                            <input
                                type="password"
                                id="tenant-password"
                                placeholder="••••••••"
                                autoComplete="new-password"
                                required
                                value={form.password}
                                onChange={event => updateField('password', event.target.value)}
                            />
                        </div>
                        <button
                            type="button"
                            className="btn btn-md btn-secondary form-row-actions"
                            disabled={testing}
                            onClick={() => void testConnection()}
                        >
                            {testing ? '...' : 'Тест'}
                        </button>
                        <button type="submit" className="btn btn-md btn-primary form-row-actions">Добавить</button>
                    </div>
                    <div
                        className={`form-alert${alert.text ? (alert.isError ? ' error' : ' success') : ''}`}
                        role="alert"
                    >
                        {alert.text}
                    </div>
                </form>
            </div>

            {deleting && (
                <ConfirmDialog
                    title="Удаление тенанта"
                    message={`Удалить тенант «${deleting.domain}»? Пул соединений будет закрыт.`}
                    confirmLabel="Удалить тенант"
                    danger
                    onClose={() => setDeleting(null)}
                    onConfirm={() => void confirmDelete()}
                />
            )}
        </>
    );
}