Genarrative/src/components/auth/RegistrationInviteModal.tsx

import { useEffect, useMemo, useState } from 'react';

import type { PlatformTheme } from '../../../packages/shared/src/contracts/runtime';
import { PlatformActionButton } from '../common/PlatformActionButton';
import { PlatformFieldLabel } from '../common/PlatformFieldLabel';
import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
import { PlatformTextField } from '../common/PlatformTextField';
import { PlatformAuthModalShell } from './PlatformAuthModalShell';

type RegistrationInviteModalProps = {
  isOpen: boolean;
  platformTheme: PlatformTheme;
  initialInviteCode: string;
  submitting: boolean;
  error: string;
  onClose: () => void;
  onSubmit: (inviteCode: string) => Promise<void>;
};

export function RegistrationInviteModal({
  isOpen,
  platformTheme,
  initialInviteCode,
  submitting,
  error,
  onClose,
  onSubmit,
}: RegistrationInviteModalProps) {
  const [inviteCode, setInviteCode] = useState(initialInviteCode);
  const normalizedInviteCode = useMemo(
    () =>
      inviteCode
        .trim()
        .replace(/[^0-9a-z]/gi, '')
        .toUpperCase(),
    [inviteCode],
  );

  useEffect(() => {
    if (!isOpen) {
      return;
    }

    setInviteCode(initialInviteCode);
  }, [initialInviteCode, isOpen]);

  if (!isOpen) {
    return null;
  }

  return (
    <PlatformAuthModalShell
      title="请填写邀请码"
      platformTheme={platformTheme}
      onClose={onClose}
      closeLabel="取消填写邀请码"
      zIndexClassName="z-[130]"
      panelClassName="!max-w-sm"
    >
      <form
        className="flex flex-col gap-4 px-5 py-5"
        onSubmit={(event) => {
          event.preventDefault();
          if (!normalizedInviteCode) {
            onClose();
            return;
          }

          void onSubmit(normalizedInviteCode);
        }}
      >
        <label className="grid gap-2">
          <PlatformFieldLabel variant="form" className="mb-0">
            邀请码
          </PlatformFieldLabel>
          <PlatformTextField
            autoComplete="off"
            value={inviteCode}
            onChange={(event) => setInviteCode(event.target.value)}
            placeholder="邀请码"
          />
        </label>

        {error ? (
          <PlatformStatusMessage tone="error" surface="profile">
            {error}
          </PlatformStatusMessage>
        ) : null}

        <PlatformActionButton type="submit" disabled={submitting} size="lg">
          {submitting ? '提交中' : normalizedInviteCode ? '提交' : '跳过'}
        </PlatformActionButton>
      </form>
    </PlatformAuthModalShell>
  );
}