import React, { useState } from 'react';

import {
    LuEye,
    LuEyeOff,
    LuLock,
} from 'react-icons/lu';

import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
    MobileBlock,
    MobileButton,
} from '@/components/ui/mobile';
import { Lang } from '@/lang/Lang';
import useAppConfigStore from '@/stores/appConfig';

const LoginPasswordInput = ({ login, password, setPassword, onPasswordAuth, loading, onForgotPassword }: { login?: string; password: string, setPassword: (password: string) => void, onPasswordAuth: () => void, loading: boolean, onForgotPassword: () => void }) => {

    const { isMobile } = useAppConfigStore();
    const [showPassword, setShowPassword] = useState(false);

    const passwordField = (
        <div className="relative my-2 w-full">
            <Input
                className="pr-9"
                type={showPassword ? 'text' : 'password'}
                icon={<LuLock />}
                id="password"
                name="password"
                autoComplete="current-password"
                placeholder={'Пароль'}
                value={password}
                security=""
                onChange={(e) => setPassword(e.target.value)}
                onKeyPress={(event: any) => {
                    if (event.key === 'Enter') {
                        onPasswordAuth();
                    }
                }}
            />
            <button
                type="button"
                className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-muted-foreground hover:text-foreground"
                aria-label={showPassword ? 'Hide password' : 'Show password'}
                onClick={() => setShowPassword((v) => !v)}
            >
                {showPassword ? <LuEyeOff /> : <LuEye />}
            </button>
        </div>
    );

    if (isMobile) {
        return <>
            <MobileBlock>
                {/* Hidden username field for password manager autofill on multi-step login */}
                {login && <input type="text" name="username" autoComplete="username" value={login} readOnly tabIndex={-1} className="absolute opacity-0 pointer-events-none h-0 w-0" aria-hidden />}
                {passwordField}

                <MobileButton
                    className='mt-2'
                    disabled={!password || loading}
                    onClick={onPasswordAuth}
                >{Lang.key('continue')}</MobileButton>
                <MobileButton
                    outline
                    className='mt-2'
                    disabled={loading}
                    onClick={onForgotPassword}
                >{Lang.key('forgotPassword')}</MobileButton>
            </MobileBlock>
        </>
    }

    return <>
        {/* Hidden username field for password manager autofill on multi-step login */}
        {login && <input type="text" name="username" autoComplete="username" value={login} readOnly tabIndex={-1} className="absolute opacity-0 pointer-events-none h-0 w-0" aria-hidden />}
        {passwordField}

        <Button
            disabled={!password || loading}

            onClick={onPasswordAuth}
            className='mt-2 w-full'

            variant="default"

        >{Lang.key('continue')}</Button>


        <Button
            disabled={loading}
            className='mt-2 w-full'
            onClick={onForgotPassword}

            variant="link"

        >{Lang.key('forgotPassword')}</Button>




    </>

}

export default LoginPasswordInput;
