interface Prize {
  prizeKey: string              // 奖品唯一标识(不要使用'id')
  name: string                  // 奖品名称
  image: Img                    // 奖品图片 { url: string, alt?: string }
  rank?: '1st' | '2nd' | '3rd'  // 奖品排名(显示徽章)
  price?: string                // 奖品价格/价值
}
 
interface Img {
  url: string      // 图片URL
  alt?: string     // 无障碍描述
}

interface UserData {
  isLoggedIn: boolean                              // 是否已登录
  availableChances: number                         // 可用抽奖次数
  totalChances?: number                            // 总抽奖次数(可选,用于显示进度)
  wonPrizes?: Array<Prize & { timestamp?: number }> // 中奖记录列表
  email?: string                                   // 用户邮箱(用于领奖)
}

interface ChanceMethod {
  methodKey: string                           // 方法唯一标识
  type: 'share' | 'spend-points' | 'refer' | string  // 方法类型
  title: string                               // 方法标题
  description: string                         // 方法描述
  buttonText?: string                         // 按钮文案
  onClick: () => void                         // 点击回调
  onLoginRequired: () => void                 // 需要登录时的回调
  disabled?: boolean                          // 是否禁用
  status?: 'pending' | 'completed' | 'used'   // 状态
  loading?: boolean                           // 加载状态
  openShareModal?: boolean                    // 是否打开分享模态框(type为'share'时)
}

interface WinnerModalConfig {
  title?: string              // 模态框标题
  confirmText?: string        // 确认按钮文案
  onConfirm?: () => void      // 确认按钮回调
  showPrizeDetails?: boolean  // 是否显示奖品详情
}

interface ErrorModalConfig {
  title?: string              // 模态框标题
  message?: string            // 提示消息
  confirmText?: string        // 确认按钮文案
  onConfirm?: () => void      // 确认按钮回调
}

interface RulesModalConfig {
  rulesData: Array<{
    title: string                    // 规则标题
    content: string | string[]       // 规则内容(支持字符串或字符串数组)
  }>
  rulesText?: string                 // "Rules"按钮文案
  rulesTitle?: string                // 模态框标题
}

interface MyRewardsModalConfig {
  myRewardsText?: string     // "My Rewards"按钮文案
  myRewardsTitle?: string    // 模态框标题
  codeText?: string          // 优惠码标签文案
  copyText?: string          // 复制按钮文案
  copiedText?: string        // 已复制提示文案
  prizeText?: string         // 中奖时间标签文案
  emptyText?: string         // 空状态提示文案
}

interface ShareModalConfig {
  title?: string                               // 模态框标题
  description?: string                         // 分享描述
  shareUrl?: string                            // 分享链接
  platforms?: Array<'facebook' | 'twitter' | 'instagram' | 'linkedin' | 'tiktok' | 'youtube'>  // 支持的平台
  onShare?: (platform: string) => void         // 分享回调
  onClose?: () => void                         // 关闭回调
}

interface WinningInfoConfig {
  show?: boolean                               // 是否显示
  data?: Array<{
    username: string                           // 用户名(自动脱敏)
    prizeName: string                          // 奖品名称
    timestamp?: number                         // 中奖时间戳
  }>
  scrollSpeed?: number                         // 滚动速度(毫秒)
}

interface LoginPromptConfig {
  title?: string              // 提示标题
  description?: string        // 提示描述
  loginButtonText?: string    // 登录按钮文案
  onLogin?: () => void        // 登录按钮回调
}

interface WheelLotteryHandle {
  showError: (config?: ErrorModalConfig) => void       // 显示错误模态框
  hideError: () => void                                // 隐藏错误模态框
  showNoWin: (config?: ErrorModalConfig) => void       // 显示未中奖模态框
  hideNoWin: () => void                                // 隐藏未中奖模态框
  showWinner: (prize: Prize, config?: WinnerModalConfig) => void  // 显示中奖模态框
  hideWinner: () => void                               // 隐藏中奖模态框
  showRules: () => void                                // 显示规则模态框
  hideRules: () => void                                // 隐藏规则模态框
  showRewards: () => void                              // 显示我的奖品模态框
  hideRewards: () => void                              // 隐藏我的奖品模态框
  showShare: (config?: ShareModalConfig) => void       // 显示分享模态框
  hideShare: () => void                                // 隐藏分享模态框
  hideAllModals: () => void                            // 隐藏所有模态框
}

import { WheelLottery } from '@anker-in/headless-ui/biz'
 
// 图片类型
interface Img {
  url: string
  alt?: string
}
 
// 奖品接口
interface Prize {
  prizeKey: string              // 奖品唯一标识(不要使用'id')
  name: string                  // 奖品名称
  image: Img                    // 奖品图片
  rank?: '1st' | '2nd' | '3rd'  // 奖品排名
  price?: string                // 奖品价格
}
 
// 用户数据接口
interface UserData {
  isLoggedIn: boolean
  availableChances: number
  totalChances?: number
  wonPrizes?: Array<Prize & { timestamp?: number }>
  email?: string
}
 
// 机会获取方式接口
interface ChanceMethod {
  methodKey: string
  type: 'share' | 'spend-points' | 'refer' | string
  title: string
  description: string
  buttonText?: string
  onClick: () => void
  onLoginRequired: () => void
  disabled?: boolean
  status?: 'pending' | 'completed' | 'used'
  loading?: boolean
  openShareModal?: boolean
}
 
// 中奖模态框配置
interface WinnerModalConfig {
  title?: string
  confirmText?: string
  onConfirm?: () => void
  showPrizeDetails?: boolean
}
 
// 错误/未中奖模态框配置
interface ErrorModalConfig {
  title?: string
  message?: string
  confirmText?: string
  onConfirm?: () => void
}
 
// 规则模态框配置
interface RulesModalConfig {
  rulesData: Array<{
    title: string
    content: string | string[]
  }>
  rulesText?: string
  rulesTitle?: string
}
 
// 我的奖品模态框配置
interface MyRewardsModalConfig {
  myRewardsText?: string
  myRewardsTitle?: string
  codeText?: string
  copyText?: string
  copiedText?: string
  prizeText?: string
  emptyText?: string
}
 
// 分享模态框配置
interface ShareModalConfig {
  title?: string
  description?: string
  shareUrl?: string
  platforms?: Array<'facebook' | 'twitter' | 'instagram' | 'linkedin' | 'tiktok' | 'youtube'>
  onShare?: (platform: string) => void
  onClose?: () => void
}
 
// 中奖信息配置
interface WinningInfoConfig {
  show?: boolean
  data?: Array<{
    username: string
    prizeName: string
    timestamp?: number
  }>
  scrollSpeed?: number
}
 
// 登录提示配置
interface LoginPromptConfig {
  title?: string
  description?: string
  loginButtonText?: string
  onLogin?: () => void
}
 
// 命令式API接口
interface WheelLotteryHandle {
  showError: (config?: ErrorModalConfig) => void
  hideError: () => void
  showNoWin: (config?: ErrorModalConfig) => void
  hideNoWin: () => void
  showWinner: (prize: Prize, config?: WinnerModalConfig) => void
  hideWinner: () => void
  showRules: () => void
  hideRules: () => void
  showRewards: () => void
  hideRewards: () => void
  showShare: (config?: ShareModalConfig) => void
  hideShare: () => void
  hideAllModals: () => void
}
 
// 组件Props
interface WheelLotteryProps {
  prizes: Prize[]
  userData: UserData
  chanceMethods?: ChanceMethod[]
  theme?: 'light' | 'dark'
  spinDuration?: number
  onSpinStart: () => Promise<string>
  onSpinEnd?: (prize: Prize) => void
  onSpinError?: (error: Error) => void
  winnerModalConfig?: WinnerModalConfig
  errorModalConfig?: ErrorModalConfig
  rulesModalConfig?: RulesModalConfig
  myRewardsModalConfig?: MyRewardsModalConfig
  shareModalConfig?: ShareModalConfig
  winningInfoConfig?: WinningInfoConfig
  loginPromptConfig?: LoginPromptConfig
  className?: string
  ref?: React.Ref<WheelLotteryHandle>
}

'use client'
 
import { useState } from 'react'
import { WheelLottery } from '@anker-in/headless-ui/biz'
 
export default function BasicLotteryExample() {
  const [userData, setUserData] = useState({
    isLoggedIn: true,
    availableChances: 3,
    totalChances: 5,
  })
 
  const prizes = [
    {
      prizeKey: 'prize-001',
      name: 'Anker Prime Charger',
      image: {
        url: 'https://images.unsplash.com/photo-1591290619762-eba3a9180451?w=400&q=80',
        alt: 'Anker Prime Charger',
      },
      rank: '1st' as const,
      price: '$79.99',
    },
    {
      prizeKey: 'prize-002',
      name: 'Power Bank 20000mAh',
      image: {
        url: 'https://images.unsplash.com/photo-1609091839311-d5365f9ff1c5?w=400&q=80',
        alt: 'Power Bank',
      },
      rank: '2nd' as const,
      price: '$49.99',
    },
    {
      prizeKey: 'prize-003',
      name: 'USB-C Cable',
      image: {
        url: 'https://images.unsplash.com/photo-1625948515291-69613efd103f?w=400&q=80',
        alt: 'USB-C Cable',
      },
      rank: '3rd' as const,
      price: '$19.99',
    },
    {
      prizeKey: 'prize-004',
      name: '$30 Coupon',
      image: {
        url: 'https://images.unsplash.com/photo-1607083206869-4c7672e72a8a?w=400&q=80',
        alt: '$30 Coupon',
      },
      price: '$30.00',
    },
    {
      prizeKey: 'prize-005',
      name: '$20 Coupon',
      image: {
        url: 'https://images.unsplash.com/photo-1607083206325-caf1edba7a0f?w=400&q=80',
        alt: '$20 Coupon',
      },
      price: '$20.00',
    },
    {
      prizeKey: 'prize-006',
      name: '$10 Coupon',
      image: {
        url: 'https://images.unsplash.com/photo-1607083206968-13611e3d76db?w=400&q=80',
        alt: '$10 Coupon',
      },
      price: '$10.00',
    },
    {
      prizeKey: 'prize-007',
      name: '$5 Coupon',
      image: {
        url: 'https://images.unsplash.com/photo-1556742031-c6961e8560b0?w=400&q=80',
        alt: '$5 Coupon',
      },
      price: '$5.00',
    },
    {
      prizeKey: 'try-again',
      name: 'Try Again',
      image: {
        url: 'https://images.unsplash.com/photo-1620121478247-ec786b9be2fa?w=400&q=80',
        alt: 'Try Again',
      },
    },
  ]
 
  const handleSpinStart = async () => {
    // 模拟API调用
    await new Promise((resolve) => setTimeout(resolve, 2000))
 
    // 返回随机奖品
    const randomIndex = Math.floor(Math.random() * prizes.length)
    return prizes[randomIndex].prizeKey
  }
 
  const handleSpinEnd = (prize: any) => {
    console.log('Won:', prize.name)
    setUserData((prev) => ({
      ...prev,
      availableChances: prev.availableChances - 1,
    }))
  }
 
  return (
    <WheelLottery
      prizes={prizes}
      userData={userData}
      onSpinStart={handleSpinStart}
      onSpinEnd={handleSpinEnd}
    />
  )
}

'use client'
 
import { useState } from 'react'
import { WheelLottery } from '@anker-in/headless-ui/biz'
 
export default function FullConfigExample() {
  const [userData, setUserData] = useState({
    isLoggedIn: true,
    availableChances: 3,
    totalChances: 5,
    wonPrizes: [],
  })
 
  const prizes = [
    // ... 8个奖品配置(同上)
  ]
 
  const chanceMethods = [
    {
      methodKey: 'share',
      type: 'share' as const,
      title: 'Share on Social Media',
      description: 'Share this event to get +1 chance',
      buttonText: 'Share Now',
      onClick: () => {
        console.log('Share clicked')
      },
      onLoginRequired: () => {
        console.log('Login required')
      },
      openShareModal: true,
    },
    {
      methodKey: 'points',
      type: 'spend-points' as const,
      title: 'Spend 100 Points',
      description: 'Use your reward points',
      buttonText: 'Redeem Now',
      onClick: () => {
        setUserData((prev) => ({
          ...prev,
          availableChances: prev.availableChances + 1,
        }))
      },
      onLoginRequired: () => {
        console.log('Login required')
      },
    },
    {
      methodKey: 'refer',
      type: 'refer' as const,
      title: 'Refer a Friend',
      description: 'Invite friends to join',
      buttonText: 'Invite Now',
      onClick: () => {
        console.log('Refer clicked')
      },
      onLoginRequired: () => {
        console.log('Login required')
      },
    },
  ]
 
  const handleSpinStart = async () => {
    await new Promise((resolve) => setTimeout(resolve, 2000))
    const randomIndex = Math.floor(Math.random() * prizes.length)
    return prizes[randomIndex].prizeKey
  }
 
  const handleSpinEnd = (prize: any) => {
    setUserData((prev) => ({
      ...prev,
      availableChances: prev.availableChances - 1,
      wonPrizes: [
        ...prev.wonPrizes,
        { ...prize, timestamp: Date.now() },
      ],
    }))
  }
 
  return (
    <WheelLottery
      prizes={prizes}
      userData={userData}
      chanceMethods={chanceMethods}
      theme="light"
      spinDuration={4000}
      onSpinStart={handleSpinStart}
      onSpinEnd={handleSpinEnd}
      winnerModalConfig={{
        title: 'Congratulations!',
        confirmText: 'Claim Prize',
      }}
      errorModalConfig={{
        title: 'Better Luck Next Time',
        message: 'Keep trying to win!',
        confirmText: 'Try Again',
      }}
      rulesModalConfig={{
        rulesData: [
          {
            title: 'How to Participate',
            content: 'Click GO to spin the wheel',
          },
          {
            title: 'Winning Rules',
            content: [
              'Each user gets 5 chances per day',
              'Prizes are random',
              'Coupons expire in 30 days',
            ],
          },
        ],
        rulesText: 'Rules',
        rulesTitle: 'Lottery Rules',
      }}
      myRewardsModalConfig={{
        myRewardsText: 'My Rewards',
        myRewardsTitle: 'My Prizes',
        codeText: 'CODE:',
        copyText: 'COPY',
        copiedText: 'COPIED',
        prizeText: 'Won at:',
        emptyText: 'No prizes yet',
      }}
    />
  )
}

'use client'
 
import { useState } from 'react'
import { WheelLottery } from '@anker-in/headless-ui/biz'
 
export default function AsyncAPIExample() {
  const [userData, setUserData] = useState({
    isLoggedIn: true,
    availableChances: 3,
    totalChances: 5,
  })
 
  const prizes = [
    // ... 8个奖品配置
  ]
 
  const handleSpinStart = async () => {
    try {
      // 真实API调用
      const response = await fetch('/api/lottery/spin', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ userId: 'user123' }),
      })
 
      if (!response.ok) {
        throw new Error('Lottery API failed')
      }
 
      const data = await response.json()
 
      // 返回后端返回的中奖prizeKey
      return data.prizeKey
    } catch (error) {
      console.error('Spin error:', error)
      throw error
    }
  }
 
  const handleSpinEnd = (prize: any) => {
    console.log('Won prize:', prize.name)
 
    // 更新本地状态
    setUserData((prev) => ({
      ...prev,
      availableChances: prev.availableChances - 1,
    }))
 
    // 可选:同步到后端
    fetch('/api/lottery/claim', {
      method: 'POST',
      body: JSON.stringify({ prizeKey: prize.prizeKey }),
    })
  }
 
  const handleSpinError = (error: Error) => {
    console.error('Lottery error:', error)
    // 显示错误提示
    alert('抽奖失败,请稍后重试')
  }
 
  return (
    <WheelLottery
      prizes={prizes}
      userData={userData}
      spinDuration={6000}
      onSpinStart={handleSpinStart}
      onSpinEnd={handleSpinEnd}
      onSpinError={handleSpinError}
    />
  )
}

'use client'
 
import { useState } from 'react'
import { WheelLottery } from '@anker-in/headless-ui/biz'
 
export default function TryAgainExample() {
  const [userData, setUserData] = useState({
    isLoggedIn: true,
    availableChances: 3,
    totalChances: 5,
  })
 
  const prizes = [
    // ... 前7个实物/优惠券奖品
    {
      prizeKey: 'try-again',  // 关键:使用'try-again'作为prizeKey
      name: 'Try Again',
      image: {
        url: 'https://images.unsplash.com/photo-1620121478247-ec786b9be2fa?w=400&q=80',
        alt: 'Try Again',
      },
    },
  ]
 
  const handleSpinStart = async () => {
    await new Promise((resolve) => setTimeout(resolve, 2000))
 
    // 假设50%概率未中奖
    const isWin = Math.random() > 0.5
 
    if (isWin) {
      // 返回实物奖品
      const winIndex = Math.floor(Math.random() * 7)
      return prizes[winIndex].prizeKey
    } else {
      // 返回'try-again'
      return 'try-again'
    }
  }
 
  const handleSpinEnd = (prize: any) => {
    // 注意:当prizeKey为'try-again'时,onSpinEnd不会被调用
    // 只有真正中奖时才会触发
    console.log('Real prize won:', prize.name)
 
    setUserData((prev) => ({
      ...prev,
      availableChances: prev.availableChances - 1,
    }))
  }
 
  return (
    <WheelLottery
      prizes={prizes}
      userData={userData}
      onSpinStart={handleSpinStart}
      onSpinEnd={handleSpinEnd}
      errorModalConfig={{
        title: 'Better Luck Next Time!',
        message: 'Don\'t give up! You still have chances left.',
        confirmText: 'Try Again',
      }}
    />
  )
}

'use client'
 
import { useState, useRef } from 'react'
import { WheelLottery, WheelLotteryHandle } from '@anker-in/headless-ui/biz'
 
export default function ImperativeAPIExample() {
  const wheelRef = useRef<WheelLotteryHandle>(null)
 
  const [userData, setUserData] = useState({
    isLoggedIn: true,
    availableChances: 3,
    totalChances: 5,
  })
 
  const prizes = [
    // ... 8个奖品配置
  ]
 
  const handleSpinStart = async () => {
    await new Promise((resolve) => setTimeout(resolve, 2000))
    const randomIndex = Math.floor(Math.random() * prizes.length)
    return prizes[randomIndex].prizeKey
  }
 
  // 外部控制按钮
  const handleShowRules = () => {
    wheelRef.current?.showRules()
  }
 
  const handleShowRewards = () => {
    wheelRef.current?.showRewards()
  }
 
  const handleShowCustomError = () => {
    wheelRef.current?.showError({
      title: 'System Maintenance',
      message: 'Lottery is temporarily unavailable',
      confirmText: 'OK',
    })
  }
 
  const handleForceShowWinner = () => {
    // 强制显示中奖模态(用于测试或特殊场景)
    wheelRef.current?.showWinner(prizes[0], {
      title: 'Special Reward!',
      confirmText: 'Claim Now',
    })
  }
 
  const handleHideAll = () => {
    wheelRef.current?.hideAllModals()
  }
 
  return (
    <div>
      <div className="mb-4 flex gap-2">
        <button onClick={handleShowRules}>Show Rules</button>
        <button onClick={handleShowRewards}>Show Rewards</button>
        <button onClick={handleShowCustomError}>Show Error</button>
        <button onClick={handleForceShowWinner}>Force Winner</button>
        <button onClick={handleHideAll}>Hide All</button>
      </div>
 
      <WheelLottery
        ref={wheelRef}
        prizes={prizes}
        userData={userData}
        onSpinStart={handleSpinStart}
      />
    </div>
  )
}

'use client'
 
import { useState } from 'react'
import { WheelLottery } from '@anker-in/headless-ui/biz'
 
export default function LoginControlExample() {
  const [userData, setUserData] = useState({
    isLoggedIn: false,  // 初始未登录
    availableChances: 0,
    totalChances: 5,
  })
 
  const prizes = [
    // ... 8个奖品配置
  ]
 
  const handleLogin = () => {
    // 模拟登录
    console.log('Redirecting to login page...')
 
    // 登录成功后更新状态
    setTimeout(() => {
      setUserData({
        isLoggedIn: true,
        availableChances: 5,
        totalChances: 5,
      })
    }, 1000)
  }
 
  const handleSpinStart = async () => {
    await new Promise((resolve) => setTimeout(resolve, 2000))
    const randomIndex = Math.floor(Math.random() * prizes.length)
    return prizes[randomIndex].prizeKey
  }
 
  return (
    <WheelLottery
      prizes={prizes}
      userData={userData}
      onSpinStart={handleSpinStart}
      loginPromptConfig={{
        title: 'Login Required',
        description: 'Please login to participate in the lottery',
        loginButtonText: 'Login Now',
        onLogin: handleLogin,
      }}
    />
  )
}

'use client'
 
import { useState } from 'react'
import { WheelLottery } from '@anker-in/headless-ui/biz'
 
export default function WinningInfoExample() {
  const [userData, setUserData] = useState({
    isLoggedIn: true,
    availableChances: 3,
    totalChances: 5,
  })
 
  const prizes = [
    // ... 8个奖品配置
  ]
 
  // 模拟实时中奖数据
  const winningInfo = [
    {
      username: 'john.doe@email.com',  // 将自动脱敏为 j***e@email.com
      prizeName: 'Anker Prime Charger',
      timestamp: Date.now() - 300000,  // 5分钟前
    },
    {
      username: 'alice.smith@email.com',
      prizeName: '$30 Off Coupon',
      timestamp: Date.now() - 180000,  // 3分钟前
    },
    {
      username: 'bob.johnson@email.com',
      prizeName: 'Power Bank 20000mAh',
      timestamp: Date.now() - 60000,   // 1分钟前
    },
  ]
 
  const handleSpinStart = async () => {
    await new Promise((resolve) => setTimeout(resolve, 2000))
    const randomIndex = Math.floor(Math.random() * prizes.length)
    return prizes[randomIndex].prizeKey
  }
 
  return (
    <WheelLottery
      prizes={prizes}
      userData={userData}
      onSpinStart={handleSpinStart}
      winningInfoConfig={{
        show: true,
        data: winningInfo,
        scrollSpeed: 3000,  // 每3秒滚动一次
      }}
    />
  )
}

'use client'
 
import { useState } from 'react'
import { WheelLottery } from '@anker-in/headless-ui/biz'
 
export default function ShareModalExample() {
  const [userData, setUserData] = useState({
    isLoggedIn: true,
    availableChances: 3,
    totalChances: 5,
  })
 
  const prizes = [
    // ... 8个奖品配置
  ]
 
  const chanceMethods = [
    {
      methodKey: 'share',
      type: 'share' as const,
      title: 'Share to Get +1 Chance',
      description: 'Share on social media',
      buttonText: 'Share Now',
      onClick: () => {
        console.log('Opening share modal')
      },
      onLoginRequired: () => {
        console.log('Login required')
      },
      openShareModal: true,  // 关键:启用分享模态框
    },
  ]
 
  const handleSpinStart = async () => {
    await new Promise((resolve) => setTimeout(resolve, 2000))
    const randomIndex = Math.floor(Math.random() * prizes.length)
    return prizes[randomIndex].prizeKey
  }
 
  const handleShare = (platform: string) => {
    console.log(`Sharing to ${platform}`)
 
    // 分享成功后增加抽奖次数
    setUserData((prev) => ({
      ...prev,
      availableChances: prev.availableChances + 1,
    }))
 
    // 调用后端API记录分享
    fetch('/api/lottery/share', {
      method: 'POST',
      body: JSON.stringify({ platform }),
    })
  }
 
  return (
    <WheelLottery
      prizes={prizes}
      userData={userData}
      chanceMethods={chanceMethods}
      onSpinStart={handleSpinStart}
      shareModalConfig={{
        title: 'Share with Friends',
        description: 'Share this lottery event and get +1 chance',
        shareUrl: 'https://example.com/lottery',
        platforms: ['facebook', 'twitter', 'linkedin', 'instagram'],
        onShare: handleShare,
      }}
    />
  )
}

'use client'
 
import { useState } from 'react'
import { WheelLottery } from '@anker-in/headless-ui/biz'
 
export default function DarkThemeExample() {
  const [theme, setTheme] = useState<'light' | 'dark'>('dark')
 
  const [userData, setUserData] = useState({
    isLoggedIn: true,
    availableChances: 3,
    totalChances: 5,
  })
 
  const prizes = [
    // ... 8个奖品配置
  ]
 
  const handleSpinStart = async () => {
    await new Promise((resolve) => setTimeout(resolve, 2000))
    const randomIndex = Math.floor(Math.random() * prizes.length)
    return prizes[randomIndex].prizeKey
  }
 
  return (
    <div>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Switch to {theme === 'light' ? 'Dark' : 'Light'} Theme
      </button>
 
      <WheelLottery
        prizes={prizes}
        userData={userData}
        theme={theme}
        onSpinStart={handleSpinStart}
      />
    </div>
  )
}

'use client'
 
import { useState } from 'react'
import { WheelLottery } from '@anker-in/headless-ui/biz'
 
export default function CustomStyleExample() {
  const [userData, setUserData] = useState({
    isLoggedIn: true,
    availableChances: 3,
    totalChances: 5,
  })
 
  const prizes = [
    // ... 8个奖品配置
  ]
 
  const handleSpinStart = async () => {
    await new Promise((resolve) => setTimeout(resolve, 2000))
    const randomIndex = Math.floor(Math.random() * prizes.length)
    return prizes[randomIndex].prizeKey
  }
 
  return (
    <WheelLottery
      prizes={prizes}
      userData={userData}
      onSpinStart={handleSpinStart}
      className="custom-lottery-wrapper"
      winnerModalConfig={{
        title: 'You Won!',
        confirmText: 'Claim',
      }}
    />
  )
}

.custom-lottery-wrapper {
  --wheel-primary-color: #ff6b00;
  --wheel-secondary-color: #ffa500;
  --wheel-accent-color: #ff4500;
 
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

// Tailwind配置的断点映射
const breakpoints = {
  mobile: '< 768px',       // 移动端
  tablet: '768px',         // 平板
  laptop: '1025px',        // 小桌面
  desktop: '1440px',       // 大桌面
  'lg-desktop': '1920px',  // 超大屏
}
 
// 组件内部使用
const wheelSize = {
  mobile: 300,
  tablet: 400,
  desktop: 500,
}

interface SpinAnimation {
  phase: 'slow' | 'fast' | 'decelerate'
  currentRotation: number
  targetRotation: number
  startTime: number
  duration: number
}
 
/**
 * 计算旋转角度
 * @param prizeIndex 中奖奖品索引(0-7)
 * @returns 旋转角度(度数)
 */
function calculateTargetRotation(prizeIndex: number): number {
  // 8个奖品,每个占45度
  const degreesPerPrize = 360 / 8
 
  // 额外旋转3-5圈增加悬念
  const extraSpins = 3 + Math.floor(Math.random() * 3)
  const extraDegrees = extraSpins * 360
 
  // 计算目标角度(指针在顶部12点位置)
  // 需要让奖品中心对准指针
  const targetDegrees =
    extraDegrees +
    (360 - prizeIndex * degreesPerPrize) +
    (degreesPerPrize / 2)  // 对准奖品中心
 
  return targetDegrees
}
 
/**
 * 缓动函数:慢速启动 → 快速旋转 → 减速停止
 * @param t 当前时间进度(0-1)
 * @returns 旋转进度(0-1)
 */
function easeInOutCubic(t: number): number {
  // 0-0.2: 慢速启动(ease-in)
  if (t < 0.2) {
    return (t / 0.2) ** 2 * 0.1
  }
 
  // 0.2-0.7: 匀速快速旋转
  if (t < 0.7) {
    return 0.1 + ((t - 0.2) / 0.5) * 0.7
  }
 
  // 0.7-1.0: 减速停止(ease-out)
  const decelT = (t - 0.7) / 0.3
  return 0.8 + (1 - (1 - decelT) ** 3) * 0.2
}
 
/**
 * 动画帧更新函数
 */
function animateWheel(animation: SpinAnimation): void {
  const now = Date.now()
  const elapsed = now - animation.startTime
  const progress = Math.min(elapsed / animation.duration, 1)
 
  // 应用缓动函数
  const easedProgress = easeInOutCubic(progress)
 
  // 计算当前旋转角度
  const currentRotation = easedProgress * animation.targetRotation
 
  // 更新DOM
  wheelElement.style.transform = `rotate(${currentRotation}deg)`
 
  // 继续动画或结束
  if (progress < 1) {
    requestAnimationFrame(() => animateWheel(animation))
  } else {
    // 动画结束,触发回调
    onSpinComplete(prizeIndex)
  }
}
 
// 时间复杂度: O(n), n为动画帧数(约60fps × duration/1000)
// 空间复杂度: O(1)

/**
 * 处理异步抽奖请求
 * @returns 中奖的prizeKey
 */
async function handleAsyncSpin(): Promise<string> {
  // 1. 开始慢速旋转(等待API响应)
  startSlowSpin()
 
  try {
    // 2. 调用抽奖API(可能需要1-30秒)
    const prizeKey = await onSpinStart()
 
    // 3. API返回后,查找对应的奖品索引
    const prizeIndex = prizes.findIndex((p) => p.prizeKey === prizeKey)
 
    if (prizeIndex === -1) {
      throw new Error(`Invalid prizeKey: ${prizeKey}`)
    }
 
    // 4. 计算目标角度
    const targetRotation = calculateTargetRotation(prizeIndex)
 
    // 5. 开始减速到目标位置
    startDecelerateToTarget(targetRotation)
 
    return prizeKey
  } catch (error) {
    // 6. API失败,停止旋转并显示错误
    stopSpin()
    onSpinError?.(error as Error)
    throw error
  }
}
 
/**
 * 慢速持续旋转(等待API)
 */
function startSlowSpin(): void {
  let rotation = 0
  const slowSpinSpeed = 2  // 每帧2度
 
  const animate = () => {
    if (!isWaitingForAPI) return
 
    rotation = (rotation + slowSpinSpeed) % 360
    wheelElement.style.transform = `rotate(${rotation}deg)`
 
    requestAnimationFrame(animate)
  }
 
  isWaitingForAPI = true
  animate()
}
 
/**
 * 从当前位置减速到目标位置
 */
function startDecelerateToTarget(targetRotation: number): void {
  isWaitingForAPI = false
 
  const currentRotation = getCurrentRotation()
  const remainingRotation = targetRotation - currentRotation
 
  animateToTarget(currentRotation, targetRotation, 2000)
}
 
// 时间复杂度: O(1) 查找 + O(n) 动画帧
// 空间复杂度: O(1)

/**
 * 检测是否为"try-again"奖品
 * @param prizeKey 中奖的prizeKey
 * @returns 是否为try-again
 */
function isTryAgainPrize(prizeKey: string): boolean {
  return prizeKey === 'try-again'
}
 
/**
 * 处理抽奖结果
 */
async function handleSpinResult(): Promise<void> {
  try {
    // 1. 调用异步抽奖API
    const prizeKey = await handleAsyncSpin()
 
    // 2. 查找对应的奖品对象
    const prize = prizes.find((p) => p.prizeKey === prizeKey)
 
    if (!prize) {
      throw new Error(`Prize not found: ${prizeKey}`)
    }
 
    // 3. 等待动画完成
    await waitForSpinComplete()
 
    // 4. 检测是否为try-again
    if (isTryAgainPrize(prizeKey)) {
      // 显示未中奖模态框
      showErrorModal({
        title: errorModalConfig?.title || 'Better Luck Next Time',
        message: errorModalConfig?.message || 'Keep trying!',
        confirmText: errorModalConfig?.confirmText || 'Try Again',
      })
 
      // 不触发onSpinEnd回调(因为未真正中奖)
      // 但仍然扣除抽奖次数
      updateUserChances(-1)
    } else {
      // 显示中奖模态框
      showWinnerModal(prize, winnerModalConfig)
 
      // 触发中奖回调
      onSpinEnd?.(prize)
 
      // 添加到中奖记录
      addToWonPrizes(prize)
 
      // 扣除抽奖次数
      updateUserChances(-1)
    }
  } catch (error) {
    onSpinError?.(error as Error)
  }
}
 
/**
 * 更新用户抽奖次数
 */
function updateUserChances(delta: number): void {
  setUserData((prev) => ({
    ...prev,
    availableChances: Math.max(0, prev.availableChances + delta),
  }))
}
 
/**
 * 添加到中奖记录
 */
function addToWonPrizes(prize: Prize): void {
  setUserData((prev) => ({
    ...prev,
    wonPrizes: [
      ...(prev.wonPrizes || []),
      {
        ...prize,
        timestamp: Date.now(),
      },
    ],
  }))
}
 
// 时间复杂度: O(n), n为奖品数量(最多8)
// 空间复杂度: O(m), m为中奖记录数量

interface ModalState {
  winner: { visible: boolean; prize?: Prize; config?: WinnerModalConfig }
  error: { visible: boolean; config?: ErrorModalConfig }
  rules: { visible: boolean }
  rewards: { visible: boolean }
  share: { visible: boolean; config?: ShareModalConfig }
}
 
/**
 * 模态框状态管理
 */
const [modalState, setModalState] = useState<ModalState>({
  winner: { visible: false },
  error: { visible: false },
  rules: { visible: false },
  rewards: { visible: false },
  share: { visible: false },
})
 
/**
 * 显示指定模态框(自动隐藏其他模态框)
 */
function showModal(
  type: keyof ModalState,
  data?: any
): void {
  setModalState((prev) => {
    // 创建新状态:所有模态框都隐藏
    const newState: ModalState = {
      winner: { visible: false },
      error: { visible: false },
      rules: { visible: false },
      rewards: { visible: false },
      share: { visible: false },
    }
 
    // 只显示指定的模态框
    newState[type] = { visible: true, ...data }
 
    return newState
  })
}
 
/**
 * 隐藏指定模态框
 */
function hideModal(type: keyof ModalState): void {
  setModalState((prev) => ({
    ...prev,
    [type]: { visible: false },
  }))
}
 
/**
 * 隐藏所有模态框
 */
function hideAllModals(): void {
  setModalState({
    winner: { visible: false },
    error: { visible: false },
    rules: { visible: false },
    rewards: { visible: false },
    share: { visible: false },
  })
}
 
/**
 * 命令式API实现
 */
useImperativeHandle(ref, () => ({
  showError: (config?: ErrorModalConfig) => {
    showModal('error', { config })
  },
  hideError: () => {
    hideModal('error')
  },
  showNoWin: (config?: ErrorModalConfig) => {
    // NoWin使用同一个error模态框
    showModal('error', { config })
  },
  hideNoWin: () => {
    hideModal('error')
  },
  showWinner: (prize: Prize, config?: WinnerModalConfig) => {
    showModal('winner', { prize, config })
  },
  hideWinner: () => {
    hideModal('winner')
  },
  showRules: () => {
    showModal('rules')
  },
  hideRules: () => {
    hideModal('rules')
  },
  showRewards: () => {
    showModal('rewards')
  },
  hideRewards: () => {
    hideModal('rewards')
  },
  showShare: (config?: ShareModalConfig) => {
    showModal('share', { config })
  },
  hideShare: () => {
    hideModal('share')
  },
  hideAllModals,
}))
 
// 时间复杂度: O(1) 所有操作
// 空间复杂度: O(1)

interface SocialPlatform {
  name: string
  urlTemplate: string
  icon: string
}
 
const SOCIAL_PLATFORMS: Record<string, SocialPlatform> = {
  facebook: {
    name: 'Facebook',
    urlTemplate: 'https://www.facebook.com/sharer/sharer.php?u={url}',
    icon: '📘',
  },
  twitter: {
    name: 'Twitter',
    urlTemplate: 'https://twitter.com/intent/tweet?url={url}&text={text}',
    icon: '🐦',
  },
  linkedin: {
    name: 'LinkedIn',
    urlTemplate: 'https://www.linkedin.com/sharing/share-offsite/?url={url}',
    icon: '💼',
  },
  instagram: {
    name: 'Instagram',
    urlTemplate: 'https://www.instagram.com/?url={url}',  // Instagram不支持URL分享,仅作示例
    icon: '📷',
  },
  tiktok: {
    name: 'TikTok',
    urlTemplate: 'https://www.tiktok.com/share?url={url}',
    icon: '🎵',
  },
  youtube: {
    name: 'YouTube',
    urlTemplate: 'https://www.youtube.com/share?url={url}',
    icon: '📹',
  },
}
 
/**
 * 生成分享URL
 * @param platform 社交平台
 * @param shareUrl 要分享的URL
 * @param text 分享文案
 * @returns 完整的分享链接
 */
function generateShareUrl(
  platform: string,
  shareUrl: string,
  text?: string
): string {
  const platformConfig = SOCIAL_PLATFORMS[platform]
 
  if (!platformConfig) {
    throw new Error(`Unsupported platform: ${platform}`)
  }
 
  let url = platformConfig.urlTemplate
 
  // 替换URL占位符
  url = url.replace('{url}', encodeURIComponent(shareUrl))
 
  // 替换文案占位符
  if (text) {
    url = url.replace('{text}', encodeURIComponent(text))
  }
 
  return url
}
 
/**
 * 打开分享窗口
 */
function openShareWindow(platform: string, shareConfig: ShareModalConfig): void {
  const shareUrl = shareConfig.shareUrl || window.location.href
  const text = shareConfig.description || 'Check out this lottery!'
 
  // 生成分享URL
  const url = generateShareUrl(platform, shareUrl, text)
 
  // 打开弹窗(居中显示)
  const width = 600
  const height = 400
  const left = (window.innerWidth - width) / 2
  const top = (window.innerHeight - height) / 2
 
  const shareWindow = window.open(
    url,
    `share-${platform}`,
    `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`
  )
 
  // 触发分享回调
  shareConfig.onShare?.(platform)
 
  // 监听分享窗口关闭
  if (shareWindow) {
    const checkClosed = setInterval(() => {
      if (shareWindow.closed) {
        clearInterval(checkClosed)
        console.log(`Share window for ${platform} closed`)
      }
    }, 500)
  }
}
 
// 时间复杂度: O(1)
// 空间复杂度: O(1)

/**
 * 脱敏用户名/邮箱
 * @param username 原始用户名
 * @returns 脱敏后的用户名
 */
function maskUsername(username: string): string {
  // 1. 检测是否为邮箱格式
  const emailRegex = /^(.+)@(.+)$/
  const emailMatch = username.match(emailRegex)
 
  if (emailMatch) {
    // 邮箱格式: 保留首尾字符,中间用***替代
    const [, localPart, domain] = emailMatch
 
    if (localPart.length <= 2) {
      // 太短,只保留首字符
      return `${localPart[0]}***@${domain}`
    }
 
    // 保留首尾字符
    const masked = `${localPart[0]}***${localPart[localPart.length - 1]}@${domain}`
    return masked
  }
 
  // 2. 普通用户名格式
  if (username.length <= 3) {
    // 太短,保留首字符
    return `${username[0]}***`
  }
 
  // 保留首尾字符,中间用***替代
  return `${username[0]}***${username[username.length - 1]}`
}
 
// 示例
console.log(maskUsername('john.doe@email.com'))     // j***e@email.com
console.log(maskUsername('alice.smith@email.com'))  // a***h@email.com
console.log(maskUsername('bob'))                    // b***
console.log(maskUsername('alexander'))              // a***r
 
// 时间复杂度: O(n), n为用户名长度
// 空间复杂度: O(n)

interface RankBadgeConfig {
  rank: '1st' | '2nd' | '3rd'
  colors: {
    bg: string
    text: string
    border: string
  }
  icon: string
}
 
const RANK_CONFIG: Record<string, RankBadgeConfig> = {
  '1st': {
    rank: '1st',
    colors: {
      bg: 'bg-gradient-to-br from-yellow-400 to-yellow-600',
      text: 'text-white',
      border: 'border-yellow-300',
    },
    icon: '👑',
  },
  '2nd': {
    rank: '2nd',
    colors: {
      bg: 'bg-gradient-to-br from-gray-300 to-gray-500',
      text: 'text-white',
      border: 'border-gray-200',
    },
    icon: '🥈',
  },
  '3rd': {
    rank: '3rd',
    colors: {
      bg: 'bg-gradient-to-br from-orange-400 to-orange-600',
      text: 'text-white',
      border: 'border-orange-300',
    },
    icon: '🥉',
  },
}
 
/**
 * 渲染排名徽章组件
 */
function RankBadge({ rank }: { rank?: '1st' | '2nd' | '3rd' }) {
  if (!rank) return null
 
  const config = RANK_CONFIG[rank]
 
  return (
    <div
      className={`
        absolute -top-2 -right-2
        px-2 py-1
        rounded-full
        border-2
        ${config.colors.bg}
        ${config.colors.text}
        ${config.colors.border}
        text-xs font-bold
        shadow-lg
        flex items-center gap-1
        animate-bounce
      `}
    >
      <span>{config.icon}</span>
      <span>{rank}</span>
    </div>
  )
}
 
/**
 * 在奖品卡片中使用
 */
function PrizeCard({ prize }: { prize: Prize }) {
  return (
    <div className="relative">
      {/* 奖品图片 */}
      <img src={prize.image.url} alt={prize.image.alt} />
 
      {/* 排名徽章 */}
      <RankBadge rank={prize.rank} />
 
      {/* 奖品信息 */}
      <div>
        <h3>{prize.name}</h3>
        <p>{prize.price}</p>
      </div>
    </div>
  )
}
 
// 时间复杂度: O(1)
// 空间复杂度: O(1)

// Light主题
const lightTheme = {
  wheelBg: '#FFFFFF',
  wheelBorder: '#E5E7EB',
  sectorEven: '#FFF7ED',   // 偶数扇形(橙色调)
  sectorOdd: '#FEFCE8',    // 奇数扇形(黄色调)
  pointer: '#EF4444',      // 指针红色
  goButton: {
    bg: 'linear-gradient(135deg, #F59E0B 0%, #EF4444 100%)',
    text: '#FFFFFF',
    shadow: 'rgba(239, 68, 68, 0.3)',
  },
}
 
// Dark主题
const darkTheme = {
  wheelBg: '#1F2937',
  wheelBorder: '#374151',
  sectorEven: '#422006',   // 深橙色调
  sectorOdd: '#713F12',    // 深黄色调
  pointer: '#DC2626',
  goButton: {
    bg: 'linear-gradient(135deg, #D97706 0%, #DC2626 100%)',
    text: '#FFFFFF',
    shadow: 'rgba(220, 38, 38, 0.5)',
  },
}

const animationTimings = {
  slowPhase: '0-20%',      // 慢速启动,时长0.8秒
  fastPhase: '20-70%',     // 快速旋转,时长2秒
  decelPhase: '70-100%',   // 减速停止,时长1.2秒
  totalDuration: 4000,     // 总时长4秒
}

const statusStyles = {
  pending: {
    button: 'bg-blue-500 hover:bg-blue-600',
    text: 'text-gray-700',
  },
  completed: {
    button: 'bg-green-500 cursor-not-allowed',
    text: 'text-green-600',
    badge: '✓ Completed',
  },
  used: {
    button: 'bg-gray-400 cursor-not-allowed',
    text: 'text-gray-500',
    badge: '✓ Used',
  },
}

const formatWinningInfo = (info: WinningInfo): string => {
  const maskedName = maskUsername(info.username)
  const timeAgo = formatTimeAgo(info.timestamp)
 
  return `🎉 ${maskedName} won ${info.prizeName} ${timeAgo}`
}
 
// 示例输出: "🎉 j***e@email.com won Anker Prime Charger 5 minutes ago"

// 轮盘容器
<div
  role="region"
  aria-label="Lottery Wheel"
  aria-live="polite"
  aria-busy={isSpinning}
>
  {/* GO按钮 */}
  <button
    aria-label={isSpinning ? 'Spinning...' : 'Start lottery'}
    aria-disabled={!canSpin}
    disabled={!canSpin}
  >
    GO
  </button>
 
  {/* 奖品列表 */}
  <div role="list" aria-label="Prize list">
    {prizes.map((prize) => (
      <div
        key={prize.prizeKey}
        role="listitem"
        aria-label={`${prize.name}, ${prize.price}`}
      >
        <img
          src={prize.image.url}
          alt={prize.image.alt || prize.name}
        />
      </div>
    ))}
  </div>
</div>
 
// 模态框
<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="modal-title"
  aria-describedby="modal-description"
>
  <h2 id="modal-title">Congratulations!</h2>
  <p id="modal-description">You won {prize.name}</p>
</div>

// Light主题对比度检查
const contrastRatios = {
  'GO按钮文本/背景': '21:1',      // ✅ 白色文本 / 橙红渐变
  '奖品名称/扇形背景': '7:1',     // ✅ 深灰文本 / 浅黄背景
  '模态框标题/背景': '12:1',      // ✅ 深灰标题 / 白色背景
  '机会卡片描述/背景': '5.5:1',  // ✅ 灰色描述 / 白色背景
}

// 中奖公告(屏幕阅读器可读)
<div
  role="status"
  aria-live="assertive"
  aria-atomic="true"
  className="sr-only"  // 视觉隐藏,但可被屏幕阅读器读取
>
  {lastWinner && `${lastWinner.name} won ${lastWinner.prize}`}
</div>
 
// 加载状态公告
<div
  role="status"
  aria-live="polite"
  className="sr-only"
>
  {isSpinning && 'Spinning the wheel, please wait...'}
</div>

/**
 * 模态框打开时,焦点移动到模态框
 */
useEffect(() => {
  if (isModalOpen && modalRef.current) {
    // 保存之前的焦点元素
    const previousFocus = document.activeElement as HTMLElement
 
    // 移动焦点到模态框
    modalRef.current.focus()
 
    // 关闭时恢复焦点
    return () => {
      previousFocus?.focus()
    }
  }
}, [isModalOpen])
 
/**
 * 焦点陷阱(Trap focus within modal)
 */
function trapFocus(event: KeyboardEvent): void {
  if (event.key !== 'Tab') return
 
  const focusableElements = modalRef.current?.querySelectorAll(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  )
 
  if (!focusableElements || focusableElements.length === 0) return
 
  const firstElement = focusableElements[0] as HTMLElement
  const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement
 
  if (event.shiftKey && document.activeElement === firstElement) {
    // Shift+Tab on first element → focus last element
    event.preventDefault()
    lastElement.focus()
  } else if (!event.shiftKey && document.activeElement === lastElement) {
    // Tab on last element → focus first element
    event.preventDefault()
    firstElement.focus()
  }
}

// 轮盘旋转优化
<div
  className="wheel-container"
  style={{
    transform: `rotate(${rotation}deg)`,
    willChange: isSpinning ? 'transform' : 'auto',
  }}
>
  {/* 奖品列表 */}
</div>
 
// CSS样式
.wheel-container {
  /* 启用硬件加速 */
  transform: translateZ(0);
 
  /* 使用GPU渲染 */
  backface-visibility: hidden;
 
  /* 平滑插值 */
  transform-origin: center center;
}