import { FormField, Notification, Select } from '@shared/ui'
import { TERM_OPTIONS, MIN_ORDER, formatRub, dayLabel } from '@features/b2b'
import { useLegalConverterForm } from '../model/useLegalConverterForm'
import styles from './LegalConverterForm.module.css'

// Форма B2B-заявки для юрлиц (legal-аккаунты). Близнец ConverterSection из
// widgets/converter-page для физлиц; рендерится из ConverterPage по account_type.
// Вся логика — в useLegalConverterForm, здесь только разметка.
export function LegalConverterSection() {
  const {
    amount,
    name,
    contact,
    days,
    setName,
    setContact,
    setDays,
    onAmountChange,
    numAmount,
    belowMin,
    rate,
    commission,
    total,
    onSubmit,
    isPending,
    canSubmit,
    notice,
    dismissNotice,
  } = useLegalConverterForm()

  return (
    <form className={styles.wrap} onSubmit={onSubmit}>
      <div className={styles.header}>
        <h1 className={styles.title}>Оставить заявку</h1>
        <p className={styles.subtitle}>
          Конвертация крупных объёмов по индивидуальному курсу. Оставьте заявку —
          менеджер свяжется с вами, подтвердит актуальный курс и сопроводит сделку.
        </p>
      </div>

      <div className={styles.body}>
        <div className={styles.formCol}>
          <FormField
            label="Объём заявки, ₽"
            type="text"
            value={amount}
            onChange={onAmountChange}
            placeholder="от 500 000"
          />
          {belowMin && (
            <p className={styles.hint}>
              Минимальный объём заявки — {formatRub(MIN_ORDER)} ₽
            </p>
          )}

          <Select
            id="term"
            label="Срок ожидания операции"
            value={days}
            onChange={setDays}
            options={TERM_OPTIONS.map((o) => ({
              value: o.days,
              label: `${dayLabel(o.days)} — комиссия ${(o.rate * 100).toFixed(3)} %`,
            }))}
          />

          <FormField
            label="Как к вам обращаться"
            type="text"
            value={name}
            onChange={setName}
            placeholder="Имя"
          />

          <FormField
            label="Email или телефон для связи"
            type="text"
            value={contact}
            onChange={setContact}
            placeholder="example@mail.ru / +7 900 000-00-00"
          />
        </div>

        <div className={styles.infoCol}>
          <div className={styles.infoTitle}>УСЛОВИЯ</div>

          <div className={styles.infoRow}>
            <span className={styles.infoLabel}>Минимальный объём</span>
            <span className={styles.infoValue}>{formatRub(MIN_ORDER)} ₽</span>
          </div>

          <div className={styles.infoRow}>
            <span className={styles.infoLabel}>Срок ожидания</span>
            <span className={styles.infoValue}>{dayLabel(days)}</span>
          </div>

          <div className={styles.infoRow}>
            <span className={styles.infoLabel}>Ставка комиссии</span>
            <span className={styles.infoValue}>{(rate * 100).toFixed(3)} %</span>
          </div>

          <div className={styles.infoRow}>
            <span className={styles.infoLabel}>Сумма комиссии</span>
            <span className={styles.infoValue}>
              {numAmount > 0 ? `≈ ${formatRub(commission)} ₽` : '—'}
            </span>
          </div>

          <div className={styles.infoRow} data-accent>
            <span className={styles.infoLabel}>Итого к оплате</span>
            <span className={styles.infoValue}>
              {numAmount > 0 ? `≈ ${formatRub(total)} ₽` : '—'}
            </span>
          </div>

          <p className={styles.note}>
            Итоговая комиссия рассчитывается индивидуально и зависит от объёма,
            валюты и направления сделки.
          </p>
        </div>
      </div>

      <button type="submit" className={styles.submitBtn} disabled={!canSubmit}>
        {isPending ? 'Отправляем...' : 'Оставить заявку'}
      </button>

      {notice && (
        <Notification
          status={notice}
          message={notice === 'success' ? 'Заявка отправлена' : 'Не удалось отправить заявку'}
          onClose={dismissNotice}
        />
      )}
    </form>
  )
}
