// 高级配色方案：带灰调的克制色系（Linear/Raycast 风格）
const COLOR_SCHEMES = {
  'slate-blue':    { base: '#4f6df5', face: '#6b85f7', glow: 'rgba(79,109,245,0.4)' },
  'sage-green':    { base: '#3d9970', face: '#5ab88a', glow: 'rgba(61,153,112,0.4)' },
  'warm-amber':    { base: '#c4820a', face: '#e6a832', glow: 'rgba(196,130,10,0.35)' },
  'muted-purple':  { base: '#7557c9', face: '#9478e0', glow: 'rgba(117,87,201,0.4)' },
  'ocean-teal':    { base: '#2d8a9e', face: '#4fb3c8', glow: 'rgba(45,138,158,0.4)' },
  'dusty-rose':    { base: '#c44569', face: '#e8668a', glow: 'rgba(196,69,105,0.35)' },
  'deep-indigo':   { base: '#5046b5', face: '#706bd4', glow: 'rgba(80,70,181,0.4)' },
  'forest-teal':   { base: '#2a8f82', face: '#4dbaa8', glow: 'rgba(42,143,130,0.4)' },
  'burnt-orange':  { base: '#c9590c', face: '#e87d3a', glow: 'rgba(201,89,12,0.35)' },
  // 三级键盘视图专用：青绿（L2） / 天蓝（L3）
  'teal':          { base: '#0d9488', face: '#14b8a6', glow: 'rgba(13,148,136,0.45)' },
  'sky':           { base: '#0369a1', face: '#0ea5e9', glow: 'rgba(3,105,161,0.45)' },
  gray:            { base: '#4b5563', face: '#6b7280', glow: 'rgba(75,85,99,0.3)' },
}

export default function KeycapButton({ label, count = 0, size = 'md', isActive = false, onClick, colorScheme = 'gray', animDelay = 0 }) {
  const scheme = COLOR_SCHEMES[colorScheme] || COLOR_SCHEMES.gray
  const disabled = count === 0

  const sizeClass = size === 'lg' ? 'keycap-lg' : size === 'sm' ? 'keycap-sm' : 'keycap-md'

  // 多层 box-shadow 模拟真实键帽厚度 + 光影
  const baseShadow = [
    `0 1px 0 0 ${scheme.base}`,                    // 底部厚度线
    `0 2px 0 0 ${scheme.base}`,                    // 厚度延伸
    `0 3px 1px -1px rgba(0,0,0,0.3)`,             // 底部阴影
    `0 5px 8px -3px rgba(0,0,0,0.15)`,            // 漫射阴影
    `inset 0 1px 0 0 rgba(255,255,255,0.25)`,     // 顶部高光
    `inset 0 -1px 0 0 rgba(0,0,0,0.15)`,         // 底部暗线
  ]

  // 选中态：额外加环形高亮
  if (isActive) {
    baseShadow.push(`0 0 0 2px rgba(255,255,255,0.9)`)
    baseShadow.push(`0 0 0 4px ${scheme.base}`)
    baseShadow.push(`0 0 12px 2px ${scheme.glow}`)
  }

  // 顶面微妙渐变模拟光照（亮 → 暗）
  const backgroundImage = `linear-gradient(180deg, ${scheme.face} 0%, ${scheme.base} 100%)`

  const style = {
    backgroundImage,
    color: '#fff',
    boxShadow: baseShadow.join(', '),
    opacity: disabled ? 0.35 : 1,
    pointerEvents: disabled ? 'none' : 'auto',
    textShadow: '0 1px 2px rgba(0,0,0,0.3)',
    border: '1px solid rgba(255,255,255,0.15)', // 边缘高光倒角
    animationDelay: animDelay ? `${animDelay}ms` : undefined,
  }

  return (
    <button
      type="button"
      className={`keycap ${sizeClass} relative ${animDelay ? 'keycap-enter' : ''}`}
      style={style}
      onClick={disabled ? undefined : onClick}
      title={`${label} (${count})`}
    >
      <span className="truncate max-w-[110px]">{label}</span>

      {/* 精致数字徽标：小圆点 + 微阴影 */}
      <span
        className="absolute -top-1.5 -right-1.5 min-w-[18px] h-[18px] flex items-center justify-center rounded-full text-[10px] font-semibold leading-none px-1"
        style={{
          backgroundColor: isActive ? '#fff' : 'rgba(15,23,42,0.55)',
          color: isActive ? scheme.base : 'rgba(255,255,255,0.95)',
          boxShadow: isActive
            ? `0 2px 6px ${scheme.glow}, 0 0 0 1px ${scheme.base}`
            : '0 1px 3px rgba(0,0,0,0.3), inset 0 0 0 0.5px rgba(255,255,255,0.1)',
          backdropFilter: 'blur(4px)',
        }}
      >
        {count}
      </span>

      {/* 选中状态底部高亮条 */}
      {isActive && (
        <span
          className="absolute -bottom-1 left-1/2 -translate-x-1/2 w-3/5 h-[2px] rounded-full"
          style={{
            background: `linear-gradient(90deg, transparent, ${scheme.face}, transparent)`,
            boxShadow: `0 0 6px 1px ${scheme.glow}`,
          }}
        />
      )}
    </button>
  )
}

export { COLOR_SCHEMES }
