import { useState, type FormEvent } from 'react';
import { useTranslation } from 'react-i18next';
import { useRouter } from '@tanstack/react-router';

import { useDesktop } from '../desktop';
import { Button, Field, FormError } from '../shared/ui/ui';
import { AuthLayout } from './AuthLayout';
import s from './auth.module.css';

export function ConnectPage() {
  const { t } = useTranslation();
  const desktop = useDesktop();
  const router = useRouter();
  const [address, setAddress] = useState(desktop?.server ?? '');
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const submit = async (e: FormEvent) => {
    e.preventDefault();
    if (!desktop) return;
    setBusy(true);
    setError(null);
    try {
      await desktop.setServer(address);
      await router.invalidate();
      await router.navigate({ to: '/login' });
    } catch (err) {
      const text = err instanceof Error ? err.message : '';
      setError(/Invalid|query|fragment|credentials/i.test(text) ? t('server.invalid_address') : t('server.offline'));
      setBusy(false);
    }
  };

  return (
    <AuthLayout>
      <h1>{t('server.title')}</h1>
      <p className={s.lead}>{t('app.tagline')}</p>
      <form onSubmit={(e) => void submit(e)} noValidate>
        <Field
          label={t('server.address')}
          value={address}
          onChange={setAddress}
          autoComplete="url"
          autoCapitalize="none"
          spellCheck={false}
          required
        />
        <FormError>{error}</FormError>
        <Button type="submit" variant="primary" className={s.submit} busy={busy} disabled={!address.trim()}>
          {t('mobile.connect')}
        </Button>
      </form>
    </AuthLayout>
  );
}