import { PlatformActionButton } from '../common/PlatformActionButton';
import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
import { PlatformTextField } from '../common/PlatformTextField';
import { PlatformProfileModalShell } from './PlatformProfileModalShell';

export type PlatformProfileRewardCodeRedeemModalProps = {
  value: string;
  isSubmitting: boolean;
  error: string | null;
  success: string | null;
  onChange: (value: string) => void;
  onSubmit: () => void;
  onClose: () => void;
};

/**
 * 个人中心兑换码弹窗。
 * 保持原有输入、回车提交、禁用态和反馈消息语义不变。
 */
export function PlatformProfileRewardCodeRedeemModal({
  value,
  isSubmitting,
  error,
  success,
  onChange,
  onSubmit,
  onClose,
}: PlatformProfileRewardCodeRedeemModalProps) {
  return (
    <PlatformProfileModalShell
      title="兑换码"
      onClose={onClose}
      closeLabel="关闭兑换码"
      panelClassName="platform-recharge-modal !max-w-sm rounded-[1.4rem]"
      bodyClassName="space-y-3 px-5 py-5"
    >
      <PlatformTextField
        value={value}
        onChange={(event) => onChange(event.target.value)}
        onKeyDown={(event) => {
          if (event.key === 'Enter') {
            onSubmit();
          }
        }}
        size="sm"
        density="roomy"
        className="uppercase tracking-normal"
        placeholder="输入兑换码"
        aria-label="兑换码"
        autoFocus
      />
      <PlatformActionButton
        surface="profile"
        fullWidth
        size="md"
        className="disabled:opacity-50"
        onClick={onSubmit}
        disabled={isSubmitting || !value.trim()}
      >
        {isSubmitting ? '兑换中' : '兑换'}
      </PlatformActionButton>
      {error ? (
        <PlatformStatusMessage
          tone="error"
          surface="profile"
          size="xs"
          className="rounded-2xl font-semibold"
        >
          {error}
        </PlatformStatusMessage>
      ) : null}
      {success ? (
        <PlatformStatusMessage
          tone="success"
          surface="profile"
          size="xs"
          className="rounded-2xl font-semibold"
        >
          {success}
        </PlatformStatusMessage>
      ) : null}
    </PlatformProfileModalShell>
  );
}