import { useState, useEffect, useRef } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import {
  AlertCircle,
  ArrowLeft,
  CheckCircle2,
  KeyRound,
  Loader2,
  Mail,
} from 'lucide-react';
import { authService } from '@/lib/auth-service';
import {
  StaffProfileFormFields,
  getSubmitReadinessIssues,
  normalizeEmployeeIdInput,
  type StaffFieldState,
} from '@/components/profile';
import { toast } from 'sonner';
import { validateInstitutionalEmail, INSTITUTIONAL_EMAIL_HINT } from '@/auth/institutionalEmail';
import { registrationPasswordIssue } from '@/auth/registration/passwordPolicy';
import {
  REGISTRATION_OTP_LENGTH,
  REGISTRATION_OTP_RESEND_COOLDOWN_SECONDS,
  REGISTRATION_OTP_VALID_SECONDS,
} from '@/auth/registration/constants';
import { OtpSixInputs, emptyOtpDigits } from '@/auth/registration/OtpSixInputs';

function formatOtpCountdown(totalSeconds: number): string {
  const m = Math.floor(Math.max(0, totalSeconds) / 60);
  const s = Math.max(0, totalSeconds) % 60;
  return `${m}:${s.toString().padStart(2, '0')}`;
}

function registrationRejectionHeading(httpStatus: number): string {
  switch (httpStatus) {
    case 400:
      return 'Thông tin chưa đạt yêu cầu';
    case 409:
      return 'Dữ liệu trùng hoặc đã tồn tại';
    case 422:
      return 'Biểu mẫu cần chỉnh sửa';
    case 503:
      return 'Hệ thống tạm không nhận đăng ký';
    default:
      return 'Không thể hoàn tất đăng ký';
  }
}

export type RegistrationPortalVariant = 'applicant' | 'admin';

export interface RegistrationWithOtpProps {
  variant: RegistrationPortalVariant;
  /** Route for primary login link (default "/login"). */
  loginPath?: string;
}

type Step = 'form' | 'otp' | 'success';

interface FormState {
  fullName: string;
  email: string;
  password: string;
  passwordConfirm: string;
}

export function RegistrationWithOtp({
  variant,
  loginPath = '/login',
}: RegistrationWithOtpProps) {
  const navigate = useNavigate();
  const [step, setStep] = useState<Step>('form');
  const [form, setForm] = useState<FormState>({
    fullName: '',
    email: '',
    password: '',
    passwordConfirm: '',
  });
  const [regStaff, setRegStaff] = useState<StaffFieldState>({
    employeeId: null,
    academicTitleCode: null,
    academicTitleOther: null,
    unitId: null,
    unitNameFreetext: null,
    jobTitle: null,
  });

  const [otp, setOtp] = useState<string[]>(() => emptyOtpDigits());
  const otpInputRefs = useRef<Array<HTMLInputElement | null>>([]);
  const otpValiditySecondsRef = useRef(REGISTRATION_OTP_VALID_SECONDS);
  const [resendCountdown, setResendCountdown] = useState(0);
  const [otpTtlRemaining, setOtpTtlRemaining] = useState(REGISTRATION_OTP_VALID_SECONDS);

  const [error, setError] = useState('');
  /** Server refusal with parsed reasons (HTTP 4xx/5xx from register). */
  const [registerRejection, setRegisterRejection] = useState<{
    title: string;
    reasons: string[];
  } | null>(null);
  const [info, setInfo] = useState('');
  const [loading, setLoading] = useState(false);
  const [registeredEmail, setRegisteredEmail] = useState<string | null>(null);
  const [otpDeliveryChannel, setOtpDeliveryChannel] = useState<
    'smtp' | 'log_only' | 'none' | 'smtp_failed' | null
  >(null);

  useEffect(() => {
    if (resendCountdown <= 0) return;
    const id = window.setTimeout(() => setResendCountdown((c) => c - 1), 1000);
    return () => window.clearTimeout(id);
  }, [resendCountdown]);

  useEffect(() => {
    if (step !== 'otp' || otpTtlRemaining <= 0) return;
    const id = window.setTimeout(() => setOtpTtlRemaining((t) => t - 1), 1000);
    return () => window.clearTimeout(id);
  }, [step, otpTtlRemaining]);

  useEffect(() => {
    if (step === 'otp') otpInputRefs.current[0]?.focus();
  }, [step]);

  const registerStaffIssues = getSubmitReadinessIssues(regStaff);

  const portalTitle =
    variant === 'admin' ? 'Đăng ký tài khoản (quản trị / chính sách email)' : 'Đăng ký tài khoản';
  const portalDescription =
    variant === 'admin'
      ? 'Vai trò admin chỉ gán khi email thuộc danh sách chính sách máy chủ. Trường hợp còn lại là Người nộp đơn.'
      : `Sử dụng email trường. ${INSTITUTIONAL_EMAIL_HINT}`;

  const updateField =
    (key: keyof FormState) => (e: React.ChangeEvent<HTMLInputElement>) => {
      setForm((prev) => ({ ...prev, [key]: e.target.value }));
    };

  const handleSubmitForm = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setRegisterRejection(null);
    setInfo('');

    const fullName = form.fullName.trim();
    const email = form.email.trim().toLowerCase();

    if (fullName.length < 2) {
      setError('Nhập họ và tên đầy đủ.');
      return;
    }
    if (!validateInstitutionalEmail(email)) {
      setError('Email phải là địa chỉ @ump.edu.vn hoặc @umc.edu.vn hợp lệ.');
      return;
    }
    const pwdIssue = registrationPasswordIssue(form.password);
    if (pwdIssue) {
      setError(pwdIssue);
      return;
    }
    if (form.password !== form.passwordConfirm) {
      setError('Mật khẩu xác nhận không khớp.');
      return;
    }
    if (registerStaffIssues.length > 0) {
      setError(registerStaffIssues[0]);
      return;
    }
    const employeeIdNorm = normalizeEmployeeIdInput(regStaff.employeeId ?? undefined);
    if (!employeeIdNorm || !regStaff.academicTitleCode) {
      setError('Vui lòng điền đủ hồ sơ nhân sự.');
      return;
    }

    setLoading(true);
    try {
      const res = await authService.register({
        fullName,
        email,
        password: form.password,
        passwordConfirm: form.passwordConfirm,
        employeeId: employeeIdNorm,
        academicTitleCode: regStaff.academicTitleCode,
        academicTitleOther: regStaff.academicTitleOther ?? undefined,
        unitId: regStaff.unitId ?? undefined,
        unitNameFreetext: regStaff.unitNameFreetext?.trim() || undefined,
        jobTitle: (regStaff.jobTitle ?? '').trim(),
      });

      if (!res.success) {
        const reasons =
          res.rejectionReasons.length > 0
            ? res.rejectionReasons
            : [res.error || 'Đăng ký thất bại. Vui lòng thử lại.'];
        setRegisterRejection({
          title: registrationRejectionHeading(res.httpStatus),
          reasons,
        });
        return;
      }
      if (!('emailVerificationRequired' in res) || !res.emailVerificationRequired) {
        setRegisterRejection(null);
        setError('Phản hồi máy chủ không mong đợi.');
        return;
      }

      const windowSec =
        typeof res.otpTtlSeconds === 'number' && res.otpTtlSeconds > 0
          ? Math.floor(res.otpTtlSeconds)
          : REGISTRATION_OTP_VALID_SECONDS;
      otpValiditySecondsRef.current = windowSec;
      setRegisteredEmail(email);
      setStep('otp');
      setOtpTtlRemaining(windowSec);
      setResendCountdown(REGISTRATION_OTP_RESEND_COOLDOWN_SECONDS);
      const minutesLabel = Math.max(1, Math.ceil(windowSec / 60));
      const delivery = res.otpDeliveryChannel;
      setOtpDeliveryChannel(delivery ?? null);

      if (delivery === 'none') {
        toast.warning('Chưa gửi email OTP', {
          description:
            'Máy chủ chưa cấu hình SMTP (SMTP_HOST). Cấu hình gửi thư trên be0, hoặc bật AUTH_MAIL_LOG_ONLY=1 và xem nhật ký container để lấy mã.',
        });
        setInfo(
          res.message ||
            'Tài khoản đã tạo nhưng email OTP chưa được gửi — cần cấu hình SMTP hoặc xem nhật ký be0.',
        );
      } else if (delivery === 'smtp_failed') {
        toast.warning('Không gửi được email OTP', {
          description:
            'SMTP đã khai báo nhưng gửi thất bại — xem log be0 («register: OTP mail failed») để biết lỗi (xác thực, SMTP AUTH, firewall).',
        });
        setInfo(
          res.message ||
            'Đã ghi nhận đăng ký nhưng máy chủ không gửi được email OTP. Kiểm tra cấu hình SMTP và log be0.',
        );
      } else if (delivery === 'log_only') {
        toast.info('Mã OTP chỉ có trong nhật ký máy chủ', {
          description:
            'AUTH_MAIL_LOG_ONLY đang bật. Trong log be0, tìm dòng «AUTH_MAIL_LOG_ONLY: registration OTP».',
        });
        setInfo(
          res.message ||
            `Mã OTP được ghi trong nhật ký dịch vụ be0 (không gửi email). Email đăng ký: ${email}.`,
        );
      } else {
        toast.success('Đã gửi mã OTP đến email đăng ký', {
          description: `Nhập đúng 6 chữ số trong ${minutesLabel} phút. Kiểm tra hộp thư và thư rác.`,
        });
        setInfo(res.message || `Mã OTP đã được gửi đến ${email}.`);
      }
      setForm((prev) => ({ ...prev, password: '', passwordConfirm: '' }));
    } catch {
      setError('Lỗi kết nối. Vui lòng kiểm tra mạng và thử lại.');
    } finally {
      setLoading(false);
    }
  };

  const handleOtpChange = (index: number, value: string) => {
    const digit = value.replace(/\D/g, '').slice(-1);
    setOtp((prev) => {
      const next = [...prev];
      next[index] = digit;
      return next;
    });
    if (digit && index < REGISTRATION_OTP_LENGTH - 1) {
      otpInputRefs.current[index + 1]?.focus();
    }
  };

  const handleOtpKeyDown = (
    index: number,
    e: React.KeyboardEvent<HTMLInputElement>,
  ) => {
    if (e.key === 'Backspace' && !otp[index] && index > 0) {
      otpInputRefs.current[index - 1]?.focus();
    } else if (e.key === 'ArrowLeft' && index > 0) {
      e.preventDefault();
      otpInputRefs.current[index - 1]?.focus();
    } else if (e.key === 'ArrowRight' && index < REGISTRATION_OTP_LENGTH - 1) {
      e.preventDefault();
      otpInputRefs.current[index + 1]?.focus();
    }
  };

  const handleOtpPaste = (e: React.ClipboardEvent<HTMLDivElement>) => {
    const pasted = e.clipboardData
      .getData('text')
      .replace(/\D/g, '')
      .slice(0, REGISTRATION_OTP_LENGTH);
    if (!pasted) return;
    e.preventDefault();

    const next = emptyOtpDigits();
    for (let i = 0; i < pasted.length; i++) next[i] = pasted[i];
    setOtp(next);

    const focusIndex = Math.min(pasted.length, REGISTRATION_OTP_LENGTH - 1);
    otpInputRefs.current[focusIndex]?.focus();
  };

  const handleVerifyOtp = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setInfo('');

    const code = otp.join('');
    if (otpTtlRemaining <= 0) {
      setError('Mã OTP đã hết hạn. Nhấn «Gửi lại mã OTP» để nhận mã mới.');
      return;
    }
    if (code.length !== REGISTRATION_OTP_LENGTH) {
      setError(`Vui lòng nhập đủ ${REGISTRATION_OTP_LENGTH} chữ số.`);
      return;
    }
    if (!registeredEmail) {
      setError('Phiên xác thực đã hết hạn. Vui lòng đăng ký lại.');
      setStep('form');
      return;
    }

    setLoading(true);
    try {
      const res = await authService.verifyRegistrationOtp({
        email: registeredEmail,
        otp: code,
      });

      if (!res.success) {
        setError(res.error || 'Mã OTP không đúng hoặc đã hết hạn.');
        setOtp(emptyOtpDigits());
        otpInputRefs.current[0]?.focus();
        return;
      }

      setStep('success');
    } catch {
      setError('Lỗi kết nối. Vui lòng thử lại.');
    } finally {
      setLoading(false);
    }
  };

  const handleResendOtp = async () => {
    if (resendCountdown > 0 || !registeredEmail || loading) return;

    setError('');
    setInfo('');
    setLoading(true);
    try {
      const res = await authService.resendRegistrationOtp(registeredEmail);
      if (!res.success) {
        setError(res.error || 'Không thể gửi lại mã. Vui lòng thử lại sau.');
        return;
      }
      setInfo(res.message || 'Mã OTP mới đã được gửi.');
      setResendCountdown(REGISTRATION_OTP_RESEND_COOLDOWN_SECONDS);
      setOtpTtlRemaining(otpValiditySecondsRef.current);
      toast.success('Đã gửi lại mã OTP', {
        description: `Hiệu lực khoảng ${Math.max(1, Math.ceil(otpValiditySecondsRef.current / 60))} phút.`,
      });
      setOtp(emptyOtpDigits());
      otpInputRefs.current[0]?.focus();
    } catch {
      setError('Lỗi kết nối. Vui lòng thử lại.');
    } finally {
      setLoading(false);
    }
  };

  const handleBackToForm = () => {
    setStep('form');
    setError('');
    setRegisterRejection(null);
    setInfo('');
    setOtpDeliveryChannel(null);
    setOtp(emptyOtpDigits());
  };

  if (step === 'success') {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-background to-muted/40 p-4">
        <Card className="w-full max-w-xl backdrop-blur-sm">
          <CardHeader className="text-center space-y-3">
            <div className="mx-auto h-12 w-12 rounded-full bg-green-100 flex items-center justify-center">
              <CheckCircle2 className="h-7 w-7 text-green-600" />
            </div>
            <CardTitle>Đăng ký thành công</CardTitle>
            <CardDescription>
              Tài khoản <strong>{registeredEmail}</strong> đã được xác minh và kích hoạt.
            </CardDescription>
          </CardHeader>
          <CardFooter>
            <Button className="w-full" onClick={() => navigate(loginPath)}>
              Đăng nhập ngay
            </Button>
          </CardFooter>
        </Card>
      </div>
    );
  }

  if (step === 'otp') {
    const codeComplete = otp.every((d) => d !== '');

    return (
      <div className="min-h-screen flex items-center justify-center bg-muted/20 p-4">
        <Card className="w-full max-w-xl">
          <CardHeader className="space-y-3">
            <div className="mx-auto h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center">
              <KeyRound className="h-6 w-6 text-primary" />
            </div>
            <CardTitle className="text-center">Nhập mã xác minh</CardTitle>
            <CardDescription className="text-center">
              {otpDeliveryChannel === 'none' ? (
                <>
                  Đăng ký đã ghi nhận. <strong>Email OTP chưa được gửi</strong> vì máy chủ chưa cấu hình
                  SMTP.
                </>
              ) : otpDeliveryChannel === 'smtp_failed' ? (
                <>
                  Đăng ký đã ghi nhận. <strong>Gửi email OTP thất bại</strong> — SMTP có thể sai cấu hình, bị
                  chặn mạng, hoặc nhà cung cấp từ chối đăng nhập (xem nhật ký be0).
                </>
              ) : otpDeliveryChannel === 'log_only' ? (
                <>
                  Mã OTP được ghi trong <strong>nhật ký dịch vụ be0</strong> (chế độ AUTH_MAIL_LOG_ONLY), không
                  gửi qua hộp thư.
                </>
              ) : (
                <>
                  Mã {REGISTRATION_OTP_LENGTH} chữ số đã gửi đến
                  <br />
                  <strong>{registeredEmail}</strong>
                </>
              )}
            </CardDescription>
            <p className="text-center text-sm text-muted-foreground">
              {otpTtlRemaining > 0 ? (
                <>
                  Hiệu lực còn <span className="font-mono font-medium text-foreground">{formatOtpCountdown(otpTtlRemaining)}</span>
                </>
              ) : (
                <span className="text-destructive">Mã đã hết hạn — dùng «Gửi lại mã OTP» bên dưới.</span>
              )}
            </p>
          </CardHeader>

          <form onSubmit={handleVerifyOtp}>
            <CardContent className="space-y-4">
              {otpDeliveryChannel === 'none' && (
                <Alert variant="destructive">
                  <AlertCircle className="h-4 w-4" />
                  <AlertTitle>Không nhận được email?</AlertTitle>
                  <AlertDescription className="text-sm space-y-2">
                    <p>
                      Trên dịch vụ <strong>be0</strong>, đặt biến môi trường SMTP (ví dụ{' '}
                      <code className="rounded bg-muted px-1 py-0.5 text-xs">SMTP_HOST</code>,{' '}
                      <code className="rounded bg-muted px-1 py-0.5 text-xs">SMTP_PORT</code>, tài khoản nếu
                      cần), rồi đăng ký lại hoặc dùng «Gửi lại mã OTP» sau khi đã cấu hình.
                    </p>
                    <p>
                      Trên môi trường dev, có thể đặt{' '}
                      <code className="rounded bg-muted px-1 py-0.5 text-xs">AUTH_MAIL_LOG_ONLY=1</code> — mã
                      OTP sẽ in trong log be0 (tìm «registration OTP»).
                    </p>
                  </AlertDescription>
                </Alert>
              )}
              {otpDeliveryChannel === 'smtp_failed' && (
                <Alert variant="destructive">
                  <AlertCircle className="h-4 w-4" />
                  <AlertTitle>SMTP không gửi được thư?</AlertTitle>
                  <AlertDescription className="text-sm space-y-2">
                    <p>
                      Lỗi <strong>535 / Authentication unsuccessful</strong> nghĩa là <strong>sai tài khoản SMTP</strong>{' '}
                      (không phải lỗi giao diện). Kiểm tra <code className="rounded bg-muted px-1 py-0.5 text-xs">
                        SMTP_USER
                      </code>{' '}
                      và{' '}
                      <code className="rounded bg-muted px-1 py-0.5 text-xs">SMTP_PASSWORD</code> trong{' '}
                      <code className="rounded bg-muted px-1 py-0.5 text-xs">.env</code>, rồi khởi động lại container{' '}
                      <strong>be0</strong>.
                    </p>
                    <p>
                      Với <strong>Microsoft 365 / Outlook</strong> (<code className="rounded bg-muted px-1 py-0.5 text-xs">
                        smtp.office365.com
                      </code>
                      ): dùng đúng email làm <code className="rounded bg-muted px-1 py-0.5 text-xs">SMTP_USER</code>;
                      nếu tài khoản có MFA thường cần <strong>mật khẩu ứng dụng</strong> (không phải mật khẩu đăng nhập web);
                      trong trung tâm quản trị cần bật <strong>Authenticated SMTP</strong> cho hộp thư đó.
                    </p>
                    <p>
                      Trong máy chủ chạy be0, xem log có cụm{' '}
                      <code className="rounded bg-muted px-1 py-0.5 text-xs">register: OTP mail failed</code> hoặc{' '}
                      <code className="rounded bg-muted px-1 py-0.5 text-xs">SMTP login failed</code>.
                    </p>
                    <p>
                      Sau khi sửa <code className="rounded bg-muted px-1 py-0.5 text-xs">.env</code>, chạy lại{' '}
                      <code className="rounded bg-muted px-1 py-0.5 text-xs">docker compose up -d be0</code>{' '}
                      (để container nạp biến mới), rồi «Gửi lại mã OTP».
                    </p>
                    <p>
                      Dev nhanh:{' '}
                      <code className="rounded bg-muted px-1 py-0.5 text-xs">AUTH_MAIL_LOG_ONLY=1</code> — mã
                      hiện trong log be0 (<code className="rounded bg-muted px-1 py-0.5 text-xs">
                        AUTH_MAIL_LOG_ONLY: registration OTP
                      </code>
                      ).
                    </p>
                  </AlertDescription>
                </Alert>
              )}
              {otpDeliveryChannel === 'log_only' && (
                <Alert>
                  <Mail className="h-4 w-4" />
                  <AlertTitle>Xem mã OTP trong log</AlertTitle>
                  <AlertDescription className="text-sm">
                    Ví dụ: <code className="rounded bg-muted px-1 py-0.5 text-xs">docker logs be0</code> — dòng{' '}
                    <code className="rounded bg-muted px-1 py-0.5 text-xs">
                      AUTH_MAIL_LOG_ONLY: registration OTP for …
                    </code>
                  </AlertDescription>
                </Alert>
              )}
              {info && (
                <Alert>
                  <Mail className="h-4 w-4" />
                  <AlertDescription>{info}</AlertDescription>
                </Alert>
              )}
              {error && (
                <Alert variant="destructive">
                  <AlertCircle className="h-4 w-4" />
                  <AlertDescription>{error}</AlertDescription>
                </Alert>
              )}

              <OtpSixInputs
                otp={otp}
                disabled={loading}
                inputRefs={otpInputRefs}
                onDigitChange={handleOtpChange}
                onKeyDown={handleOtpKeyDown}
                onPaste={handleOtpPaste}
              />

              <div className="text-center text-sm text-muted-foreground">
                Chưa nhận được mã?{' '}
                {resendCountdown > 0 ? (
                  <span>Gửi lại sau {resendCountdown}s</span>
                ) : (
                  <button
                    type="button"
                    onClick={handleResendOtp}
                    disabled={loading}
                    className="text-primary hover:underline font-medium disabled:opacity-50"
                  >
                    Gửi lại mã OTP
                  </button>
                )}
              </div>
            </CardContent>

            <CardFooter className="flex flex-col gap-2">
              <Button
                type="submit"
                className="w-full"
                disabled={loading || !codeComplete || otpTtlRemaining <= 0}
              >
                {loading && <Loader2 className="h-4 w-4 animate-spin mr-2" />}
                Xác minh
              </Button>
              <Button
                type="button"
                variant="ghost"
                className="w-full"
                onClick={handleBackToForm}
                disabled={loading}
              >
                <ArrowLeft className="h-4 w-4 mr-2" />
                Quay lại chỉnh thông tin
              </Button>
            </CardFooter>
          </form>
        </Card>
      </div>
    );
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-muted/20 p-4">
      <Card className="w-full max-w-xl">
        <CardHeader>
          <CardTitle>{portalTitle}</CardTitle>
          <CardDescription>{portalDescription}</CardDescription>
        </CardHeader>

        <form onSubmit={handleSubmitForm}>
          <CardContent className="space-y-4">
            {registerRejection && (
              <Alert variant="destructive">
                <AlertCircle className="h-4 w-4" />
                <AlertTitle>{registerRejection.title}</AlertTitle>
                <AlertDescription>
                  {registerRejection.reasons.length === 1 ? (
                    <p className="mt-1.5 text-sm">{registerRejection.reasons[0]}</p>
                  ) : (
                    <ul className="mt-1.5 list-disc pl-5 space-y-1 text-sm">
                      {registerRejection.reasons.map((line, i) => (
                        <li key={i}>{line}</li>
                      ))}
                    </ul>
                  )}
                </AlertDescription>
              </Alert>
            )}
            {error && !registerRejection && (
              <Alert variant="destructive">
                <AlertCircle className="h-4 w-4" />
                <AlertDescription>{error}</AlertDescription>
              </Alert>
            )}

            <div className="space-y-2">
              <Label htmlFor="reg-fullName">Họ và tên</Label>
              <Input
                id="reg-fullName"
                type="text"
                value={form.fullName}
                onChange={updateField('fullName')}
                disabled={loading}
                required
                minLength={2}
                autoComplete="name"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="reg-email">Email UMP / UMC</Label>
              <Input
                id="reg-email"
                type="email"
                value={form.email}
                onChange={updateField('email')}
                disabled={loading}
                placeholder="ten@ump.edu.vn"
                required
                autoComplete="email"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="reg-password">Mật khẩu</Label>
              <Input
                id="reg-password"
                type="password"
                value={form.password}
                onChange={updateField('password')}
                disabled={loading}
                required
                autoComplete="new-password"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="reg-passwordConfirm">Xác nhận mật khẩu</Label>
              <Input
                id="reg-passwordConfirm"
                type="password"
                value={form.passwordConfirm}
                onChange={updateField('passwordConfirm')}
                disabled={loading}
                required
                autoComplete="new-password"
              />
              <p className="text-xs text-muted-foreground">
                Tối thiểu 6 ký tự; gồm chữ hoa, chữ thường, số và ký tự đặc biệt.
              </p>
            </div>

            <div className="rounded-lg border border-border/80 bg-muted/20 p-4 space-y-2">
              <p className="text-sm font-medium">Hồ sơ nhân sự (bắt buộc)</p>
              <p className="text-xs text-muted-foreground">
                Đơn vị: chọn từ danh mục ĐHYD hoặc nhập tên tự do. Nếu học hàm/học vị là «Khác», ghi rõ
                nội dung.
              </p>
              <StaffProfileFormFields
                value={regStaff}
                onChange={setRegStaff}
                idPrefix={`registration-${variant}`}
              />
            </div>
          </CardContent>

          <CardFooter className="flex flex-col gap-3">
            <Button type="submit" className="w-full" disabled={loading}>
              {loading && <Loader2 className="h-4 w-4 animate-spin mr-2" />}
              Gửi mã OTP
            </Button>
            <p className="text-sm text-center text-muted-foreground">
              Đã có tài khoản?{' '}
              <Link to={loginPath} className="text-primary hover:underline font-medium">
                Đăng nhập
              </Link>
            </p>
            {variant === 'admin' ? (
              <p className="text-sm text-center text-muted-foreground">
                Đăng ký người nộp đơn?{' '}
                <Link to="/register" className="text-primary hover:underline font-medium">
                  Trang đăng ký chung
                </Link>
              </p>
            ) : (
              <p className="text-sm text-center text-muted-foreground">
                Trang thông tin quản trị?{' '}
                <Link to="/admin/register" className="text-primary hover:underline font-medium">
                  Đăng ký (ghi chú vai trò)
                </Link>
              </p>
            )}
          </CardFooter>
        </form>
      </Card>
    </div>
  );
}
