import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ScrollView } from 'react-native';

import { useSessionCtx } from '../lib/session';
import { Button, ErrorBox, Field, H1, Muted, Screen, useErrorText } from '../ui/kit';

export default function LoginScreen() {
  const { t } = useTranslation(['auth', 'common']);
  const { server, session, disconnect } = useSessionCtx();
  const errorText = useErrorText();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<unknown>(null);

  const submit = async () => {
    if (!session) return;
    setBusy(true);
    setError(null);
    try {
      await session.login(username.trim(), password); // переход сделает Gate
    } catch (e) {
      setError(e);
      setPassword('');
    } finally {
      setBusy(false);
    }
  };

  return (
    <Screen>
      <ScrollView contentContainerStyle={{ padding: 20, gap: 14, flexGrow: 1, justifyContent: 'center' }} keyboardShouldPersistTaps="handled">
        <H1>{t('login.title')}</H1>
        <Muted>{server?.replace(/^https?:\/\//, '')}</Muted>
        <Field label={t('login.username')} value={username} onChangeText={setUsername} autoComplete="username" />
        <Field
          label={t('login.password')}
          value={password}
          onChangeText={setPassword}
          secure
          autoComplete="password"
          onSubmitEditing={() => void submit()}
        />
        <ErrorBox>{error ? errorText(error) : null}</ErrorBox>
        <Button title={t('login.submit')} onPress={() => void submit()} busy={busy} disabled={!username.trim() || !password} />
        <Button title={t('common:mobile.change_server')} variant="ghost" onPress={() => void disconnect()} />
      </ScrollView>
    </Screen>
  );
}