"use client"

import { useState } from "react"
import { X, Zap } from "lucide-react"
import { CheckoutButton } from "@/components/forms/checkout-button"

interface UpgradeModalProps {
  trigger: React.ReactNode
  reason?: string
}

export function UpgradeModal({ trigger, reason }: UpgradeModalProps) {
  const [open, setOpen] = useState(false)

  return (
    <>
      <div onClick={() => setOpen(true)}>{trigger}</div>

      {open && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setOpen(false)} />
          <div className="relative w-full max-w-md rounded-2xl border border-white/10 bg-[#16161f] p-6 shadow-2xl">
            <button onClick={() => setOpen(false)} className="absolute right-4 top-4 text-white/30 hover:text-white transition">
              <X className="h-4 w-4" />
            </button>

            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-600/20">
              <Zap className="h-6 w-6 text-indigo-400" />
            </div>

            <h2 className="mt-4 text-lg font-bold text-white">Upgrade your plan</h2>
            <p className="mt-2 text-sm text-white/50">
              {reason ?? "You've reached the limit of your current plan. Upgrade to continue."}
            </p>

            <div className="mt-6 space-y-3">
              <div className="rounded-lg border border-indigo-500/20 bg-indigo-600/5 p-4">
                <div className="flex items-baseline justify-between">
                  <span className="font-semibold text-white">Pro</span>
                  <span className="text-white/60">$29<span className="text-xs">/mo</span></span>
                </div>
                <p className="mt-1 text-xs text-white/40">10 properties · Unlimited tenants · AI features</p>
                <div className="mt-3">
                  <CheckoutButton plan="pro" label="Upgrade to Pro" highlight />
                </div>
              </div>

              <div className="rounded-lg border border-white/[0.06] p-4">
                <div className="flex items-baseline justify-between">
                  <span className="font-semibold text-white">Lifetime</span>
                  <span className="text-white/60">$199<span className="text-xs"> once</span></span>
                </div>
                <p className="mt-1 text-xs text-white/40">Unlimited everything · Forever</p>
                <div className="mt-3">
                  <CheckoutButton plan="lifetime" label="Get Lifetime Deal" />
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  )
}