import { useNavigate } from 'react-router-dom'
import { FormField } from '@shared/ui'
import { PrimaryButton } from '@shared/ui'
import { Button } from '@shared/ui'
import { ROUTES } from '@shared/config/routes'
import logo from '@shared/assets/logo-full-white.png'
import styles from './LoginForm.module.css'
import { useLoginForm } from '../model/useLoginForm'

export function LoginForm() {
  const {
    email, setEmail,
    password, setPassword,
    verificationCode, setVerificationCode,
    codeSent,
    isLoadingCode,
    isLoadingSubmit,
    error,
    handleRequestCode,
    handleSubmit,
  } = useLoginForm()
  const navigate = useNavigate()

  return (
    <form className={styles.card} onSubmit={handleSubmit}>
      <div className={styles.logo}>
        <img src={logo} alt="ЭКСА" />
      </div>
      <h1 className={styles.title}>Войти в кошелёк ЭКСА</h1>

      <div className={styles.twoCol}>
        <div className={styles.leftCol}>
          <FormField
            label="Адрес электронной почты"
            type="email"
            value={email}
            onChange={setEmail}
            placeholder="example@mail.ru"
            required
          />
          <FormField
            label="Пароль"
            type="password"
            value={password}
            onChange={setPassword}
            placeholder="••••••••"
            required
          />
        </div>

        <div className={styles.rightCol}>
          <Button
            variant="ghost"
            type="button"
            onClick={handleRequestCode}
            disabled={codeSent || isLoadingCode}
          >
            {isLoadingCode ? 'Отправка...' : codeSent ? 'Код отправлен' : 'Получить код на email'}
          </Button>
          <span className={styles.codeHint}>Код не пришёл</span>
          <FormField
            label="Ввести код"
            type="text"
            value={verificationCode}
            onChange={setVerificationCode}
            placeholder="000 000"
            required
          />
        </div>
      </div>

      {error && <p className={styles.error}>{error}</p>}

      <div className={styles.submitWrapper}>
        <PrimaryButton label={isLoadingSubmit ? 'Вход...' : 'Войти'} disabled={isLoadingSubmit} />
      </div>

      <div className={styles.footer}>
        <a className={styles.forgot} onClick={() => navigate(ROUTES.RESTORE_PASSWORD)}>Забыли пароль?</a>
        <div className={styles.divider}><span>или</span></div>
        <Button variant="outline" type="button" onClick={() => navigate(ROUTES.REGISTER)}>
          Создать новый кошелёк
        </Button>
      </div>
    </form>
  )
}
