import { ApiError, unwrap } from '@pipu/core';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ScrollView } from 'react-native';

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

/** Обязательный шаг: новые логин и пароль админа после первого запуска или замена временного пароля. */
export default function SetupScreen() {
  const { t } = useTranslation(['auth', 'common']);
  const session = useSession();
  const user = useUser();
  const errorText = useErrorText();
  const admin = user.must_change_credentials;
  const min = user.role === 'user' ? 8 : 12;
  const [username, setUsername] = useState(user.username);
  const [password, setPassword] = useState('');
  const [repeat, setRepeat] = useState('');
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<unknown>(null);
  const mismatch = repeat !== '' && repeat !== password;
  const fieldErr = (f: string) => (error instanceof ApiError && error.fieldCode(f) ? errorText(error) : undefined);

  const submit = async () => {
    setBusy(true);
    setError(null);
    try {
      const res = admin
        ? await session.client.POST('/api/v1/me/bootstrap-credentials', { body: { new_username: username.trim(), new_password: password } })
        : await session.client.POST('/api/v1/me/password', { body: { new_password: password } });
      await session.apply(unwrap(res));
    } catch (e) {
      setError(e);
    } finally {
      setBusy(false);
    }
  };

  return (
    <Screen>
      <ScrollView contentContainerStyle={{ padding: 20, gap: 14, flexGrow: 1, justifyContent: 'center' }} keyboardShouldPersistTaps="handled">
        <H1>{t(admin ? 'setup.admin_title' : 'setup.password_title')}</H1>
        <Muted>{t(admin ? 'setup.admin_text' : 'setup.password_text')}</Muted>
        {admin && <Field label={t('setup.new_username')} value={username} onChangeText={setUsername} error={fieldErr('new_username')} />}
        <Field
          label={t('setup.new_password')}
          value={password}
          onChangeText={setPassword}
          secure
          hint={t('setup.min_length', { min })}
          error={fieldErr('new_password')}
        />
        <Field
          label={t('setup.repeat_password')}
          value={repeat}
          onChangeText={setRepeat}
          secure
          error={mismatch ? t('common:form.passwords_mismatch') : undefined}
        />
        <ErrorBox>{error && !fieldErr('new_password') && !fieldErr('new_username') ? errorText(error) : null}</ErrorBox>
        <Button
          title={t('setup.submit')}
          onPress={() => void submit()}
          busy={busy}
          disabled={!password || password !== repeat || (admin && !username.trim())}
        />
        <Button title={t('setup.logout')} variant="ghost" onPress={() => void session.logout()} />
      </ScrollView>
    </Screen>
  );
}