/**
 * UpgradeWall — intercepts Pro features for Free users
 */

import { useTranslation } from 'react-i18next'
import { Crown, Sparkles, X } from 'lucide-react'
import { proFeatureLabel, useEntitlementStore, type ProFeature } from '../../stores/entitlementStore'
import AppOverlay from '../common/AppOverlay'

export default function UpgradeWall() {
  const { t } = useTranslation('common')
  const wall = useEntitlementStore((s) => s.wall)
  const closeWall = useEntitlementStore((s) => s.closeWall)
  const openUpgradeTab = useEntitlementStore((s) => s.openUpgradeTab)

  if (!wall.open) return null

  const feature = wall.feature as ProFeature | undefined
  const label = feature ? proFeatureLabel(feature) : null
  const comingSoon = wall.comingSoon

  return (
    <AppOverlay
      open
      className="z-[120] flex items-center justify-center bg-black/65 p-4 backdrop-blur-sm"
      onMouseDown={(event) => {
        if (event.target === event.currentTarget) closeWall()
      }}
    >
      <div
        className="border-dark-600/80 relative w-full max-w-md overflow-hidden rounded-2xl border bg-dark-800 shadow-2xl"
        role="dialog"
        aria-modal="true"
        aria-labelledby="upgrade-wall-title"
        onClick={(e) => e.stopPropagation()}
        onMouseDown={(e) => e.stopPropagation()}
      >
        <button
          type="button"
          onClick={closeWall}
          className="absolute right-3 top-3 rounded-lg p-1.5 text-txt-muted hover:bg-dark-700 hover:text-content-primary"
          aria-label={t('action.close')}
        >
          <X className="h-4 w-4" />
        </button>

        <div className="border-dark-700/50 border-b bg-gradient-to-br from-accent-blue/15 to-transparent px-6 pb-5 pt-6">
          <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-xl bg-accent-blue/20 text-accent-blue">
            <Crown className="h-5 w-5" />
          </div>
          <h2 id="upgrade-wall-title" className="text-base font-semibold text-content-primary">
            {comingSoon ? t('pro.wallUnlockComingSoon') : t('pro.wallUnlock')}
          </h2>
          <p className="mt-1.5 text-sm leading-relaxed text-txt-muted">
            {wall.message ||
              (comingSoon
                ? label
                  ? t('pro.wallMessageComingSoonFeature', { feature: label })
                  : t('pro.wallMessageComingSoon')
                : label
                  ? t('pro.wallMessageFeature', { feature: label })
                  : t('pro.wallMessageDefault'))}
          </p>
        </div>

        <div className="flex gap-2 px-6 py-4">
          <button
            type="button"
            onClick={closeWall}
            className="flex-1 rounded-lg border border-dark-600 px-3 py-2.5 text-sm text-content-secondary transition-colors hover:bg-dark-700"
          >
            {t('pro.later')}
          </button>
          <button
            type="button"
            onClick={() => openUpgradeTab(feature, comingSoon)}
            className="flex flex-1 items-center justify-center gap-1.5 rounded-lg bg-accent-blue px-3 py-2.5 text-sm font-medium text-white transition-colors hover:bg-blue-600"
          >
            <Sparkles className="h-3.5 w-3.5" />
            {t('pro.viewPro')}
          </button>
        </div>
      </div>
    </AppOverlay>
  )
}