/**
 * License Activation Banner
 *
 * Shown when the Pro plugin is installed but no valid license is activated.
 * Provides a non-intrusive persistent banner at the top of every dashboard page
 * with a clear CTA to activate the license.
 */

import { Key, ArrowRight, X } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { usePro } from '@/contexts/pro-context'
import { useState } from 'react'

export function LicenseActivationBanner() {
  const { isPro, license } = usePro()
  const [dismissed, setDismissed] = useState(false)

  // Only show when Pro plugin is installed but license is NOT active
  const hasProPlugin = license?.hasProPlugin || false
  if (isPro || !hasProPlugin || dismissed) {
    return null
  }

  const activationUrl = license?.activationUrl || ''

  const handleActivate = () => {
    if (activationUrl) {
      // Navigate to the WP admin license page (outside React dashboard)
      window.location.href = activationUrl
    }
  }

  return (
    <div className="flex items-center justify-between gap-4 px-4 py-3 border-b"
         style={{ backgroundColor: 'rgba(52, 92, 114, 0.06)' }}>
      <div className="flex items-center gap-3 min-w-0">
        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-white"
             style={{ backgroundColor: '#00226b' }}>
          <Key className="h-4 w-4" />
        </div>
        <div className="min-w-0">
          <p className="text-sm font-medium text-foreground">
            Swift Commerce Pro is installed but your license is not activated.
          </p>
          <p className="text-xs text-muted-foreground">
            Activate your license to unlock all Pro features.
          </p>
        </div>
      </div>
      <div className="flex items-center gap-2 shrink-0">
        <Button
          size="sm"
          onClick={handleActivate}
          className="text-white gap-1.5"
          style={{ backgroundColor: '#00226b' }}
        >
          Activate License
          <ArrowRight className="h-3.5 w-3.5" />
        </Button>
        <Button
          variant="ghost"
          size="icon"
          className="h-7 w-7 text-muted-foreground hover:text-foreground"
          onClick={() => setDismissed(true)}
          aria-label="Dismiss"
        >
          <X className="h-3.5 w-3.5" />
        </Button>
      </div>
    </div>
  )
}