import React from 'react'
import { Card, CardHeader, CardTitle, CardContent } from './ui/card'
import { AdminButton } from './ui/settings-ui'
import { Zap, AlertCircle, Shield, ArrowRight, ExternalLink } from 'lucide-react'

interface AlertProps {
  i18n?: Record<string, string>
  domain?: string
}

export const OverloadAlert: React.FC<AlertProps> = ({ i18n }) => (
  <Card className="bg-amber-50 border-amber-200 shadow-none rounded-lg mb-8 animate-in slide-in-from-top duration-500">
    <CardHeader className="pb-3 border-b border-amber-100">
      <CardTitle className="flex items-center gap-2 text-sm font-bold text-amber-800 uppercase tracking-tight">
        <Zap className="w-4 h-4 text-amber-600" />
        {i18n?.overloadTitle || 'Site Overloaded'}
      </CardTitle>
    </CardHeader>
    <CardContent className="pt-4 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
      <p className="text-sm text-amber-700 font-medium">
        {i18n?.overloadDesc || 'You have reached the limit of active sites for your current plan. Please upgrade to activate this site.'}
      </p>
      <AdminButton asChild size="lg" className="bg-[#e67e22] hover:bg-[#d35400] !text-white rounded-lg h-10 px-5 font-bold text-[12px] uppercase tracking-wider shrink-0 shadow-md border-none transition-all duration-300">
        <a href="https://wawp.net/" target="_blank" rel="noreferrer" className="flex items-center text-white hover:text-white">
          {i18n?.btnUpgrade || 'Upgrade'} <ArrowRight className="ml-2 w-4 h-4" />
        </a>
      </AdminButton>
    </CardContent>
  </Card>
)

export const NotActiveAlert: React.FC<AlertProps> = ({ i18n }) => (
  <Card className="bg-indigo-50 border-indigo-200 shadow-none rounded-lg mb-8 animate-in slide-in-from-top duration-500">
    <CardHeader className="pb-3 border-b border-indigo-100">
      <CardTitle className="flex items-center gap-2 text-sm font-bold text-indigo-800 uppercase tracking-tight">
        <Shield className="w-4 h-4 text-indigo-600" />
        {i18n?.notActivePromo || 'Site Not Active'}
      </CardTitle>
    </CardHeader>
    <CardContent className="pt-4 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
      <p className="text-sm text-indigo-700 font-medium">
        {i18n?.notActiveDesc || 'This site is inactive or you have no active subscription. Check our plans to activate more sites.'}
      </p>
      <AdminButton asChild size="lg" className="bg-[#5f27cd] hover:bg-[#341f97] !text-white rounded-lg h-10 px-5 font-bold text-[12px] uppercase tracking-wider shrink-0 shadow-md border-none transition-all duration-300">
        <a href="https://wawp.net/" target="_blank" rel="noreferrer" className="flex items-center text-white hover:text-white">
          {i18n?.pricing || 'Pricing'} <ExternalLink className="ml-2 w-4 h-4" />
        </a>
      </AdminButton>
    </CardContent>
  </Card>
)

export const BlockedAlert: React.FC<AlertProps> = ({ i18n, domain = window.location.hostname }) => (
  <Card className="bg-white border-red-100 shadow-none rounded-lg mb-8 animate-in fade-in duration-500">
    <CardHeader className="pb-3 border-b border-red-50">
      <CardTitle className="flex items-center gap-2 text-sm font-bold text-rose-600 uppercase tracking-tight">
        <AlertCircle className="w-4 h-4" />
        {i18n?.blockedTitle || 'Site Blocked'}
      </CardTitle>
    </CardHeader>
    <CardContent className="pt-4">
      <p className="text-sm text-gray-600 leading-relaxed">
        This domain (<span className="font-semibold text-gray-900">{domain}</span>) has been blocked for violating our Terms of Service. 
        Check Prohibited Uses at: <a href="https://wawp.net/terms-of-services/" target="_blank" rel="noreferrer" className="text-blue-600 hover:underline font-medium ml-1">https://wawp.net/terms-of-services/</a>
      </p>
    </CardContent>
  </Card>
)