import { X } from 'lucide-react';
import { useEffect, useMemo, useState } from 'react';

import type { PlatformTheme } from '../../../packages/shared/src/contracts/runtime';

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 (
    <div
      className={`platform-theme platform-theme--${platformTheme} platform-overlay fixed inset-0 z-[130] flex items-end justify-center px-3 py-4 text-[var(--platform-text-strong)] backdrop-blur-sm sm:items-center sm:p-4`}
      onClick={onClose}
    >
      <div
        role="dialog"
        aria-modal="true"
        aria-labelledby="registration-invite-dialog-title"
        className="platform-auth-card w-full max-w-sm overflow-hidden rounded-[2rem]"
        onClick={(event) => event.stopPropagation()}
      >
        <div className="flex items-center justify-between gap-3 border-b border-[var(--platform-subpanel-border)] px-5 py-4">
          <div
            id="registration-invite-dialog-title"
            className="text-lg font-semibold text-[var(--platform-text-strong)]"
          >
            请填写邀请码
          </div>
          <button
            type="button"
            onClick={onClose}
            className="platform-icon-button p-2"
            aria-label="取消填写邀请码"
          >
            <X className="h-4 w-4" />
          </button>
        </div>
        <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 text-sm text-[var(--platform-text-base)]">
            <span>邀请码</span>
            <input
              className="platform-input"
              autoComplete="off"
              value={inviteCode}
              onChange={(event) => setInviteCode(event.target.value)}
              placeholder="邀请码"
            />
          </label>

          {error ? (
            <div className="platform-banner platform-banner--danger text-sm">
              {error}
            </div>
          ) : null}

          <button
            type="submit"
            disabled={submitting}
            className="platform-button platform-button--primary h-12 px-4 text-base disabled:cursor-not-allowed disabled:opacity-60"
          >
            {submitting ? '提交中' : normalizedInviteCode ? '提交' : '跳过'}
          </button>
        </form>
      </div>
    </div>
  );
}