import 'dayjs/locale/ru';

import { useState } from 'react';

import dayjs from 'dayjs';
import {
    Block,
    Button,
    List,
    ListInput,
    Navbar,
    Page,
} from 'konsta/react';
import { observer } from 'mobx-react';
import { CgSpinner } from 'react-icons/cg';
import { HiOutlineChatBubbleLeftRight } from 'react-icons/hi2';

import { rpc } from '../../api/request';
import pattern from '../../pattern.jpg';
import { ROUTER } from '../../router/router';
import store from '../../stores/store';

dayjs.locale('ru');

const LoginPage = () => {
    const [login, setLogin] = useState<string>('');
    const [password, setPassword] = useState<string>('');
    const [isLoading, setIsLoading] = useState<boolean>(false);

    const onAuth = () => {
        setIsLoading(true);
        rpc
            .auth({ login, password })
            .then(({ result }) => {
                if (result) {
                    localStorage.setItem('token', result);
                    ROUTER().MainPage.move({});
                }
            })
            .catch(() => {
                setIsLoading(false);
            });
    };

    const formContent = (
        <>
            <div className="flex flex-col items-center pt-8 md:pt-12 pb-6 px-6">
                <div className="w-16 h-16 md:w-20 md:h-20 rounded-2xl bg-primary flex items-center justify-center shadow-lg shadow-primary/25 dark:shadow-primary/10 mb-4">
                    <HiOutlineChatBubbleLeftRight className="w-8 h-8 md:w-10 md:h-10 text-white" />
                </div>
                <h1 className="text-xl md:text-2xl font-semibold text-black dark:text-white">
                    Доступ к диалогам
                </h1>
                <p className="text-sm text-gray-500 dark:text-gray-400 mt-1 text-center">
                    Введите данные для входа в аккаунт
                </p>
            </div>

            <List dividers outline className="ios:mx-4 rounded-xl overflow-hidden">
                <ListInput
                    label="Логин"
                    placeholder="Введите логин"
                    value={login}
                    onChange={(e) => setLogin(e.target.value)}
                />
                <ListInput
                    label="Пароль"
                    type="password"
                    placeholder="Введите пароль"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                />
            </List>

            <Block className="px-4 md:px-6 py-6">
                <Button
                    disabled={!login || !password || isLoading}
                    large
                    rounded
                    className="!rounded-xl font-medium"
                    onClick={onAuth}
                >
                    {isLoading ? (
                        <CgSpinner className="animate-spin w-6 h-6" />
                    ) : (
                        'Войти'
                    )}
                </Button>
            </Block>
        </>
    );

    const isTabletOrDesktop = !store.isMobile();

    if (isTabletOrDesktop) {
        return (
            <Page className="ios:bg-transparent dark:bg-transparent overflow-hidden min-h-screen flex items-center justify-center p-4">
                <div
                    className="absolute inset-0 bg-cover bg-center opacity-[0.06] dark:opacity-[0.04] pointer-events-none"
                    style={{ backgroundImage: `url(${pattern})` }}
                />
                <div className="absolute inset-0 bg-gradient-to-b from-gray-50 to-white dark:from-gray-900 dark:to-black pointer-events-none" />
                <div className="relative w-full max-w-[420px] bg-white dark:bg-[#1c1c1e] rounded-2xl shadow-xl shadow-gray-200/50 dark:shadow-black/40 overflow-hidden">
                    {formContent}
                </div>
            </Page>
        );
    }

    return (
        <Page className="ios:bg-white ios:dark:bg-stone-900 overflow-hidden">
            <Navbar title="Вход" large centerTitle outline />
            {formContent}
        </Page>
    );
};

export default observer(LoginPage);
