import { useNavigate, useLocation } from 'react-router-dom'
import { Button, Card, Result } from 'antd'
import { CheckCircleOutlined } from '@ant-design/icons'
import { getUserId, getMemberNo } from '../utils/request'
import './MemberValid.css'

const MemberValid = () => {
  const navigate = useNavigate()
  const location = useLocation()
  const memberData = location.state || {}

  // userId/memberNo 优先取路由透传,其次取 localStorage (刷新页面后仍能展示)
  const {
    userId = getUserId(),
    memberNo = getMemberNo(),
    memberId = '',
    memberType = '个人会员',
    amount = 150.00,
    validPeriod = '5年',
  } = memberData

  const handleBack = () => {
    navigate('/')
  }

  const handleInvoice = () => {
    navigate('/invoice', { state: { userId, memberNo, memberId, amount } })
  }

  const handleRenew = () => {
    navigate('/payment', {
      state: {
        userId,
        memberNo,
        memberId,
        memberType,
        amount,
        validPeriod,
        isRenew: true,
      },
    })
  }

  return (
    <div className="member-valid-page">
      <div className="success-header">
        <Result
          status="success"
          icon={<CheckCircleOutlined />}
          title="支付成功"
          subTitle="您已成为有效会员"
        />
      </div>

      <div className="member-valid-container">
        {/* 会员信息卡片 */}
        <Card className="member-info-card" bordered={false}>
          <div className="member-badge">
            <div className="badge-icon">
              <svg viewBox="0 0 1024 1024" width="48" height="48">
                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m-32 688V416h-96v-96h96v-64c0-70.6 57.4-128 128-128h96v96h-96c-35.3 0-64 28.7-64 64v64h160v96H544v336h-64z" fill="#FFD700"/>
              </svg>
            </div>
            <div className="badge-text">
              <div className="member-id-label">会员编号</div>
              <div className="member-id-value">{memberNo || '--'}</div>
            </div>
          </div>

          <div className="member-details">
            <div className="detail-item">
              <span className="detail-label">会员类型</span>
              <span className="detail-value">{memberType}</span>
            </div>
            <div className="detail-item">
              <span className="detail-label">支付金额</span>
              <span className="detail-value amount">¥{amount.toFixed(2)}</span>
            </div>
            <div className="detail-item">
              <span className="detail-label">有效期限</span>
              <span className="detail-value">{validPeriod}</span>
            </div>
          </div>
        </Card>

        {/* 续费 */}
        <Button
          className="renew-btn"
          onClick={handleRenew}
          block
          size="large"
        >
          续费
        </Button>

        {/* 填写发票信息 */}
        <Button
          className="invoice-btn"
          onClick={handleInvoice}
          block
          size="large"
        >
          填写发票信息
        </Button>

        {/* 返回首页 */}
        <Button 
          type="primary" 
          className="back-home-btn"
          onClick={handleBack}
          block
          size="large"
        >
          返回首页
        </Button>
      </div>
    </div>
  )
}

export default MemberValid
