import { Head, useForm } from '@inertiajs/react';
import { AuthBackground } from '@/Components/Auth/AuthBackground';

type Props = { maskedMobile: string };

export default function TwoFactor({ maskedMobile }: Props) {
  const form = useForm({ code: '' });

  function submit(e: React.FormEvent) {
    e.preventDefault();
    form.post('/login/2fa');
  }

  return (
    <div className="al">
      <Head title="تایید ورود" />
      <AuthBackground />
      <div className="al-card">
        <div className="al-brand">
          <img src="/assets/images/logo/logo.png" alt="دانشیار من" className="al-brand-logo" />
          <div className="al-brand-name"><strong>تایید دومرحله‌ای</strong><small>کد به {maskedMobile} ارسال شد</small></div>
        </div>
        <form className="al-form" onSubmit={submit}>
          <div className="al-field">
            <div className="al-field-inner">
              <input
                className="al-input"
                type="text"
                inputMode="numeric"
                maxLength={5}
                placeholder=" "
                value={form.data.code}
                onChange={(e) => form.setData('code', e.target.value.replace(/\D/g, '').slice(0, 5))}
                autoFocus
              />
              <label className="al-label">کد ۵ رقمی</label>
            </div>
            {form.errors.code && <p className="al-error">{form.errors.code}</p>}
          </div>
          <button className="al-submit" type="submit" disabled={form.processing}>
            {form.processing ? 'در حال بررسی...' : 'تایید و ورود'}
          </button>
        </form>
      </div>
    </div>
  );
}
