import { Button, Card, Input, Space, Typography } from 'antd'
import gameRoleIdGuide from '@/assets/claim/game-role-id-guide.jpg'

export function ClaimUidStep({
  uidInput,
  submitting,
  onChange,
  onSubmit,
}: {
  uidInput: string
  submitting: boolean
  onChange: (value: string) => void
  onSubmit: () => void
}) {
  return (
    <Card className="claim-content-card claim-uid-step">
      <Typography.Title level={3} className="claim-uid-step-title">
        第 1 步：填写游戏编号（数字的那个）
      </Typography.Title>
      <p className="claim-muted claim-uid-step-desc">
        请填写游戏内角色编号（纯数字，不超过 15 位），提交后继续绑定或领取。
      </p>

      <Space direction="vertical" size={10} style={{ width: '100%' }}>
        <Input
          size="large"
          placeholder="请输入游戏编号（纯数字）"
          value={uidInput}
          maxLength={15}
          inputMode="numeric"
          onChange={(event) => onChange(event.target.value.replace(/\D/g, '').slice(0, 15))}
          onPressEnter={onSubmit}
        />
        <Button type="primary" size="large" loading={submitting} onClick={onSubmit} block>
          确认编号，下一步
        </Button>
      </Space>

      <p className="claim-uid-warning">
        游戏编号需与游戏内角色编号一致，填错将导致无法发货。
      </p>

      <div className="claim-uid-guide">
        <img
          src={gameRoleIdGuide}
          alt="游戏编号位置示意：复制游戏内角色编号提交纯数字"
          className="claim-uid-guide-image"
        />
        <p className="claim-uid-guide-caption">示意：复制游戏内「编号」处的纯数字提交</p>
      </div>
    </Card>
  )
}