// src/renderer/components/ProBadge.tsx
// Feature gate badge: renders children normally if unlocked,
// shows lock overlay with PRO badge if locked.

import { Box, Typography } from '@mui/material'
import { Lock } from 'lucide-react'
import { d3roPalette, d3roFontMono, d3roTypo, d3roRadius } from '@d3ro/ui/theme'
import { useProFeature } from '../hooks/useProFeature'
import { useI18n } from '@d3ro/i18n'
import type { Feature } from '@d3ro/core/types'

interface ProBadgeProps {
  feature: Feature
  children: React.ReactNode
}

export function ProBadge({ feature, children }: ProBadgeProps): React.ReactElement {
  const { t } = useI18n()
  const { unlocked, loading, showUpgrade } = useProFeature(feature)

  // While loading or if unlocked, render children normally
  if (loading || unlocked) {
    return <>{children}</>
  }

  return (
    <Box sx={{ position: 'relative' }}>
      {/* Children rendered with reduced opacity */}
      <Box sx={{ opacity: 0.35, pointerEvents: 'none', filter: 'grayscale(0.6)' }}>
        {children}
      </Box>

      {/* Lock overlay */}
      <Box
        onClick={showUpgrade}
        sx={{
          position: 'absolute',
          inset: 0,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          cursor: 'pointer',
          borderRadius: d3roRadius.inner,
          transition: 'background-color 0.15s ease',
          '&:hover': {
            bgcolor: d3roPalette.accent.dim,
          },
        }}
      >
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            gap: 0.5,
            px: 1.5,
            py: 0.5,
            borderRadius: d3roRadius.small,
            bgcolor: d3roPalette.bg.elevated,
            border: `1px solid ${d3roPalette.border.default}`,
          }}
        >
          <Lock size={14} style={{ color: d3roPalette.accent.main }} />
          <Typography
            sx={{
              fontFamily: d3roFontMono,
              fontSize: d3roTypo.small.size,
              fontWeight: d3roTypo.small.weight,
              letterSpacing: d3roTypo.small.spacing,
              color: d3roPalette.accent.main,
            }}
          >
            {t('license.pro.required')}
          </Typography>
        </Box>
      </Box>
    </Box>
  )
}