import { CheckCircleOutlined, ExclamationCircleOutlined, LinkOutlined } from '@ant-design/icons'
import { Alert, Button, Card, Typography } from 'antd'
import type { ClaimKuaishouFeifeiFlowInfo, ClaimOrderInfo, ClaimProductInfo } from '@/types/claim'
import type { ClaimSnapshot } from './claim-snapshot'
import { InfoTile, UidEditRow } from './claim-shared'

export function FeifeiClaimPanel({
  feifei,
  expectedUid,
  order,
  product,
  taskLastError,
  onOpen,
  uidInput,
  submittingUid,
  onUidChange,
  onResubmitUid,
}: {
  feifei: ClaimKuaishouFeifeiFlowInfo
  expectedUid: string
  order: ClaimOrderInfo | null
  product: ClaimProductInfo | null
  taskLastError?: string
  onOpen: () => void
  uidInput: string
  submittingUid: boolean
  onUidChange: (value: string) => void
  onResubmitUid: () => void
}) {
  const openReady = Boolean(feifei.h5UrlWithUid || feifei.h5.rechargeUrl || feifei.h5.entryUrl)

  return (
    <Card className="claim-content-card">
      <div className="claim-feifei-main">
        <span className="claim-feifei-label">kuaishou-feifei</span>
        <Typography.Title level={2}>第 2 步：打开领取链接</Typography.Title>
        <p>{feifei.rechargeStatusLabel || '待领取'}</p>
      </div>

      <UidEditRow
        uidInput={uidInput}
        submitting={submittingUid}
        onChange={onUidChange}
        onSubmit={onResubmitUid}
      />

      <div className="claim-info-grid">
        <InfoTile label="填写 UID" value={expectedUid || '-'} />
        <InfoTile label="订单号" value={order?.platformOrderId || '-'} />
        <InfoTile label="平台单号" value={feifei.orderNo || feifei.platformOrderNo || '-'} />
        <InfoTile label="领取商品" value={product?.title || '-'} />
      </div>

      <Alert type="info" showIcon message="将携带你填写的 UID 打开领取页，请确认游戏内角色一致。" />

      <Button
        type="primary"
        size="large"
        icon={<LinkOutlined />}
        disabled={!openReady || !expectedUid}
        onClick={onOpen}
        block
        style={{ marginTop: 16 }}
      >
        打开领取链接
      </Button>

      {taskLastError ? (
        <Alert type="warning" showIcon message={taskLastError} style={{ marginTop: 12 }} />
      ) : null}
    </Card>
  )
}

export function FeifeiResultStep({ snapshot }: { snapshot: ClaimSnapshot }) {
  return (
    <Card className="claim-content-card">
      <div className="claim-result-header">
        {snapshot.resultVariant === 'warning' ? (
          <ExclamationCircleOutlined className="claim-large-icon claim-icon-warning" />
        ) : (
          <CheckCircleOutlined
            className={`claim-large-icon claim-icon-${snapshot.resultVariant}`}
          />
        )}
        <div>
          <Typography.Title level={2}>{snapshot.resultTitle}</Typography.Title>
          <p className="claim-muted">{snapshot.resultDescription}</p>
        </div>
      </div>

      <div className="claim-info-grid">
        <InfoTile label="填写 UID" value={snapshot.expectedUid || '-'} />
        <InfoTile label="状态" value={snapshot.feifei?.rechargeStatusLabel || '-'} />
        <InfoTile label="订单号" value={snapshot.order?.platformOrderId || '-'} />
        <InfoTile label="领取商品" value={snapshot.product?.title || '-'} />
      </div>
    </Card>
  )
}
