import { ArrowRightOutlined } from '@ant-design/icons'
import { App, Button, Card, Form, Input, Space, Typography } from 'antd'
import { useNavigate } from 'react-router'

import { normalizeOrderNoInput } from '@/utils/collect-link'
import { useCollectLinkPageMeta } from './use-collect-link-page-meta'

const { Text, Title } = Typography

/**
 * 补资料入口页（`/supplement/`）。
 *
 * 客户只知道平台订单号时，从这里输入订单号再跳到 `/supplement/<订单号>`；
 * 如果客服已经发了完整链接，可以直接打开链接跳过这一步。
 */
export default function CollectMaterialLinkEntryPage() {
  const { message } = App.useApp()
  const navigate = useNavigate()
  useCollectLinkPageMeta('订单资料补充')

  function handleFinish(values: { orderNo?: string }) {
    const orderNo = normalizeOrderNoInput(values.orderNo)
    if (!orderNo) {
      message.warning('请输入订单号')
      return
    }
    void navigate(`/supplement/${encodeURIComponent(orderNo)}`)
  }

  return (
    <main className="collect-link-page">
      <Card className="collect-link-card" bordered={false}>
        <Space direction="vertical" size={16} className="full-width">
          <div>
            <Title level={3} className="collect-link-title">
              订单资料补充
            </Title>
            <Text type="secondary">请输入下单时使用的订单号，进入补资料页面。</Text>
          </div>

          <Form layout="vertical" onFinish={handleFinish}>
            <Form.Item
              name="orderNo"
              label="订单号"
              rules={[{ required: true, whitespace: true, message: '请输入订单号' }]}
            >
              <Input autoComplete="off" allowClear placeholder="请输入订单号" size="large" />
            </Form.Item>
            <Button
              type="primary"
              size="large"
              htmlType="submit"
              block
              icon={<ArrowRightOutlined />}
            >
              下一步
            </Button>
          </Form>

          <Text type="secondary" className="collect-link-footnote">
            如果客服已经发给你完整链接，直接打开链接即可。
          </Text>
        </Space>
      </Card>
    </main>
  )
}