LokiStack/frontend/src/components/ProGate.tsx

import { memo, useRef, useState } from 'react'
import { useNavigate } from 'react-router'
import { useTranslation } from 'react-i18next'
import { Lock, Sparkles } from 'lucide-react'
import { toast } from 'sonner'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { InstanceIdRow } from '@/components/InstanceIdRow'
import { LicenseStatusBanners } from '@/components/LicenseStatusBanners'
import { licenseApi } from '@/api/license'
import { useLicense } from '@/hooks/useLicense'

/** Pro 功能升级引导卡:免费版进入 Pro 页面时整页替代展示 */
export const ProGate = memo(function ProGate({ featureKey }: { featureKey: string }) {
  const { t } = useTranslation('license')
  const { pro, info, reload } = useLicense()
  const navigate = useNavigate()
  const [key, setKey] = useState('')
  const [activating, setActivating] = useState(false)
  const inputRef = useRef<HTMLInputElement>(null)

  const focusKey = () => {
    inputRef.current?.focus()
    inputRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' })
  }

  const activate = async () => {
    if (!key.trim()) return
    setActivating(true)
    try {
      await licenseApi.activate(key.trim())
      toast.success(t('activated'))
      reload()
    } catch (err) {
      toast.error(err instanceof Error ? err.message : t('activateFailed'))
    } finally {
      setActivating(false)
    }
  }

  return (
    <div className="mx-auto max-w-2xl space-y-4 pt-8">
      <LicenseStatusBanners info={info} pro={pro} onAction={focusKey} />
      <InstanceIdRow instanceId={info?.instanceId} />
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="flex items-center gap-2 text-base">
            <Lock className="size-4 text-warning" />
            {t('gate.title', { feature: t(`features.${featureKey}`) })}
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-sm text-muted-foreground">{t('gate.desc')}</p>
          <ul className="space-y-1.5 text-sm">
            {['log_analysis', 'log_alerts', 'ai_ops', 'audit_log'].map(f => (
              <li key={f} className="flex items-center gap-2">
                <Sparkles className="size-3.5 text-primary" />
                {t(`features.${f}`)}
              </li>
            ))}
          </ul>
          {/* 价卡暂留；product/plan 建好后再对齐 trial/年付/永久 */}
          <div className="grid gap-3 sm:grid-cols-2">
            <div className="rounded-lg border p-4">
              <p className="text-sm font-semibold">{t('pricing.personalTitle')}</p>
              <p className="mt-1 text-2xl font-bold text-primary">¥199<span className="text-sm font-normal text-muted-foreground"> {t('pricing.permanent')}</span></p>
              <p className="mt-1 text-xs text-muted-foreground">{t('pricing.personalDesc')}</p>
            </div>
            <div className="rounded-lg border border-primary/40 p-4">
              <p className="text-sm font-semibold">{t('pricing.teamTitle')}</p>
              <p className="mt-1 text-2xl font-bold text-primary">¥499<span className="text-sm font-normal text-muted-foreground"> {t('pricing.permanent')}</span></p>
              <p className="mt-1 text-xs text-muted-foreground">{t('pricing.teamDesc')}</p>
            </div>
          </div>
          <div className="space-y-2">
            <p className="text-xs text-muted-foreground">{t('activateHint')}</p>
            <div className="flex gap-2">
              <Input
                ref={inputRef}
                value={key}
                onChange={e => setKey(e.target.value)}
                placeholder={t('gate.keyPlaceholder')}
                className="font-mono text-sm"
              />
              <Button onClick={() => void activate()} disabled={activating || !key.trim()}>{t('gate.activate')}</Button>
              <Button variant="outline" onClick={() => navigate('/settings')}>{t('gate.toSettings')}</Button>
            </div>
          </div>
          <p className="text-xs text-muted-foreground">{t('gate.freeHint')}</p>
        </CardContent>
      </Card>
    </div>
  )
})