import { useState } from 'react'
import { FormField, PrimaryButton, Button } from '@shared/ui'
import logo from '@shared/assets/logo-full-white.png'
import styles from './RegisterTestPage.module.css'

type AccountType = 'individual' | 'legal'
type Step = 'info' | 'documents'

const LEGAL_DOCUMENTS = [
  'Свидетельство о государственной регистрации (ОГРН)',
  'Свидетельство о постановке на учёт в налоговом органе (ИНН)',
  'Устав организации (действующая редакция)',
  'Решение/протокол о назначении руководителя',
  'Документ, подтверждающий полномочия лица, открывающего счёт',
  'Карточка с образцами подписей и оттиска печати',
]

export function RegisterTestPage() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [confirmPassword, setConfirmPassword] = useState('')
  const [verificationCode, setVerificationCode] = useState('')

  const [accountType, setAccountType] = useState<AccountType>('individual')
  const [step, setStep] = useState<Step>('info')
  const isLegal = accountType === 'legal'

  // Тестовая страница — без проверок и запросов. «Создать» просто ведёт на шаг 2.
  const handleInfoSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    setStep('documents')
  }

  const handleDocumentsSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // Тестовая страница — отправки нет.
  }

  return (
    <div className={styles.page}>
      {step === 'info' ? (
        <form className={styles.card} onSubmit={handleInfoSubmit}>
          <div className={styles.logo}>
            <img src={logo} alt="ЭКСА" />
          </div>
          <h1 className={styles.title}>Создать кошелёк ЭКСА</h1>

          {/* Выбор типа регистрации — перед всеми полями */}
          <div className={styles.typeSwitch} role="tablist" aria-label="Тип регистрации">
            <button
              type="button"
              role="tab"
              aria-selected={!isLegal}
              className={`${styles.typeOption} ${!isLegal ? styles.typeOptionActive : ''}`}
              onClick={() => setAccountType('individual')}
            >
              Физическое лицо
            </button>
            <button
              type="button"
              role="tab"
              aria-selected={isLegal}
              className={`${styles.typeOption} ${isLegal ? styles.typeOptionActive : ''}`}
              onClick={() => setAccountType('legal')}
            >
              Юридическое лицо
            </button>
          </div>

          <div className={styles.twoCol}>
            <div className={styles.leftCol}>
              <FormField
                label={isLegal ? 'Введите корпоративный email' : 'Введите адрес электронной почты'}
                type="email"
                value={email}
                onChange={setEmail}
                placeholder={isLegal ? 'name@company.ru' : 'example@mail.ru'}
              />
              <FormField
                label="Придумайте пароль"
                type="password"
                value={password}
                onChange={setPassword}
                placeholder="••••••••"
              />
              <FormField
                label="Повторите пароль"
                type="password"
                value={confirmPassword}
                onChange={setConfirmPassword}
                placeholder="••••••••"
              />
            </div>

            <div className={styles.rightCol}>
              <Button variant="ghost" type="button">
                Получить проверочный код
              </Button>
              <span className={styles.codeHint}>Код не пришёл</span>
              <FormField
                label="Ввести код"
                type="text"
                value={verificationCode}
                onChange={setVerificationCode}
                placeholder="000 000"
              />
            </div>
          </div>

          <div className={styles.submitWrapper}>
            <PrimaryButton label="Создать" />
          </div>

          <p className={styles.legal}>
            Нажимая «Создать», вы принимаете<br />
            <a href="#">Пользовательское соглашение</a> и <a href="#">Политику конфиденциальности</a>
          </p>
        </form>
      ) : (
        /* Шаг 2: прикрепление документов (только юр. лицо) */
        <form className={styles.card} onSubmit={handleDocumentsSubmit}>
          <div className={styles.logo}>
            <img src={logo} alt="ЭКСА" />
          </div>

          <button type="button" className={styles.backButton} onClick={() => setStep('info')}>
            ← Назад к данным
          </button>

          <h1 className={styles.title}>Прикрепите документы</h1>
          <p className={styles.documentsSubtitle}>
            Для открытия счёта юридическому лицу прикрепите сканы или фотографии
            следующих документов:
          </p>

          <ul className={styles.documentsList}>
            {LEGAL_DOCUMENTS.map((doc) => (
              <li key={doc} className={styles.documentItem}>
                <span className={styles.documentName}>{doc}</span>
                <label className={styles.attachButton}>
                  Прикрепить
                  <input type="file" className={styles.fileInput} multiple />
                </label>
              </li>
            ))}
          </ul>

          <div className={styles.submitWrapper}>
            <PrimaryButton label="Создать аккаунт" />
          </div>
        </form>
      )}
    </div>
  )
}