/**
 * LockedFeatureRow — trial-expiry-conversion-ui spec (Task 11).
 *
 * Reusable presentational wrapper for rows of previously-configured Business+
 * data that are now read-only after downgrade.
 *
 * Renders the original row content dimmed + a 🔒 lock icon with tooltip
 * "Upgrade to access". Clicking opens the upgrade modal with the supplied
 * featureName so the modal shows the correct context line.
 *
 * No destructive behavior — purely visual lock overlay; underlying data is preserved.
 *
 * A11y:
 *   - Lock icon has an accessible aria-label
 *   - Tooltip text from the trial-expiry namespace (locked_tooltip)
 *   - Logical CSS properties for RTL
 */
import * as React from 'react'
import { useTranslation } from 'react-i18next'
import { Lock } from 'lucide-react'
import { cn } from '../lib/cn'
import { Tooltip } from '../primitives/tooltip'
import { TenantTier } from '@zync/types'
import { useUpgradeModal } from '../upgrade-modal/UpgradeModalProvider'

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------

export interface LockedFeatureRowProps {
  /** The original row content, rendered dimmed */
  children: React.ReactNode
  /** Passed to useUpgradeModal().open({ featureName }) */
  featureName: string
  /** Optional override; defaults to useUpgradeModal().open */
  onUpgrade?: () => void
}

// ---------------------------------------------------------------------------
// Component
// ---------------------------------------------------------------------------

export function LockedFeatureRow({
  children,
  featureName,
  onUpgrade,
}: LockedFeatureRowProps): React.JSX.Element {
  const { t } = useTranslation()
  const { open: openUpgradeModal } = useUpgradeModal()

  const handleUpgrade = () => {
    if (onUpgrade) {
      onUpgrade()
    } else {
      openUpgradeModal({ featureName, targetTier: TenantTier.BUSINESS })
    }
  }

  const tooltipText = t('trial-expiry.locked_tooltip', {
    defaultValue: 'Upgrade to access',
  })

  return (
    <div className="relative flex items-center gap-4">
      {/* Dimmed content */}
      <div className="flex-1 min-w-0 opacity-50 select-none pointer-events-none" aria-hidden="true">
        {children}
      </div>

      {/* Screen-reader-accessible content mirror (hidden visually) */}
      <span className="sr-only">{children}</span>

      {/* Lock icon + tooltip */}
      <Tooltip content={tooltipText}>
        <button
          type="button"
          onClick={handleUpgrade}
          aria-label={tooltipText}
          className={cn(
            'shrink-0 rounded p-1 text-ink-faint hover:text-ink',
            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-border',
            'transition-colors',
          )}
        >
          <Lock className="h-4 w-4" aria-hidden="true" />
        </button>
      </Tooltip>
    </div>
  )
}