'use client'

import { useSearchParams } from 'next/navigation'
import { useState, useEffect } from 'react'
import { CheckCircle2, X, Sparkles } from 'lucide-react'
import Link from 'next/link'

export function UpgradeSuccessBanner() {
  const searchParams = useSearchParams()
  const [show, setShow] = useState(false)

  useEffect(() => {
    if (searchParams.get('upgrade') === 'success') {
      setShow(true)
      // Clean URL
      window.history.replaceState({}, '', window.location.pathname)
    }
  }, [searchParams])

  if (!show) return null

  return (
    <div className="relative overflow-hidden rounded-2xl border border-emerald-500/20 bg-emerald-950/20 p-4 sm:p-6 mb-6 animate-fade-in-up">
      <div className="absolute -right-10 -top-10 h-40 w-40 rounded-full bg-emerald-600/10 blur-3xl" />
      <div className="relative flex items-center justify-between gap-4">
        <div className="flex items-center gap-3">
          <div className="rounded-xl bg-emerald-500/20 p-2">
            <CheckCircle2 className="h-5 w-5 text-emerald-400" />
          </div>
          <div>
            <h3 className="text-sm font-semibold text-emerald-300">Assinatura ativada com sucesso! 🎉</h3>
            <p className="text-xs text-emerald-400/70">
              Seus créditos foram atualizados. Aproveite todos os recursos do seu novo plano.
            </p>
          </div>
        </div>
        <button
          onClick={() => setShow(false)}
          className="rounded-lg p-1 text-emerald-400/50 hover:text-emerald-300 transition-colors"
        >
          <X className="h-4 w-4" />
        </button>
      </div>
    </div>
  )
}

export function UpgradePrompt({ plan, credits }: { plan: string; credits: number }) {
  if (plan !== 'FREE') return null

  return (
    <div className="relative overflow-hidden rounded-2xl border border-teal-500/20 bg-gradient-to-r from-teal-950/30 via-[#111b27] to-teal-950/30 p-4 sm:p-6 mb-6">
      <div className="absolute -right-10 -top-10 h-40 w-40 rounded-full bg-teal-600/10 blur-3xl" />
      <div className="relative flex flex-col sm:flex-row items-center justify-between gap-4">
        <div className="flex items-center gap-3">
          <div className="rounded-xl bg-teal-500/20 p-2">
            <Sparkles className="h-5 w-5 text-teal-400" />
          </div>
          <div>
            <h3 className="text-sm font-semibold text-white">
              Você está no plano Gratuito ({credits} créditos restantes)
            </h3>
            <p className="text-xs text-zinc-400">
              Faça upgrade para ter mais créditos, IA avançada e funcionalidades premium.
            </p>
          </div>
        </div>
        <Link
          href="/pricing"
          className="shrink-0 inline-flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm font-semibold bg-teal-600 text-white hover:bg-teal-500 transition-all"
        >
          <Sparkles className="h-4 w-4" />
          Ver Planos
        </Link>
      </div>
    </div>
  )
}
