"use client"

import React from "react"
import { useActiveUser } from "@/hooks/useActiveUser"
import { Lock, Sparkles, ArrowRight } from "lucide-react"
import Link from "next/link"

interface PremiumGateProps {
  featureKey: string;
  children: React.ReactNode;
}

export function PremiumGate({ featureKey, children }: PremiumGateProps) {
  const { hasAccessTo, loading, user } = useActiveUser();

  // Allow children to render immediately without a blocking center spinner
  // so that pages mount instantly on route transition.
  if (loading || !user) {
    return <>{children}</>;
  }

  if (!hasAccessTo(featureKey)) {
    return (
      <div className="flex-1 min-h-[60vh] flex items-center justify-center p-6">
        <div className="max-w-md w-full p-8 rounded-3xl bg-secondary/30 border border-border/50 text-center space-y-6 shadow-2xl backdrop-blur-xl relative overflow-hidden group">
          {/* Background Glow */}
          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-1/2 bg-[var(--cyan-ai)] opacity-5 blur-[80px] pointer-events-none group-hover:opacity-10 transition-opacity duration-700"></div>
          
          <div className="relative">
            <div className="w-16 h-16 mx-auto rounded-2xl bg-[var(--cyan-ai-10)] flex items-center justify-center shadow-[0_0_20px_-5px_var(--cyan-ai)] border border-[var(--cyan-ai-20)] mb-4">
              <Lock className="text-[var(--cyan-ai)] w-8 h-8" />
            </div>
            
            <h2 className="text-2xl font-black tracking-tight text-foreground">Premium Feature</h2>
            <p className="text-muted-foreground mt-2 font-medium">
              You need an active plan to access this exclusive tool.
            </p>
          </div>

          <Link href="/upgrade" className="inline-flex items-center justify-center gap-2 w-full bg-[var(--cyan-ai)] text-black font-bold py-3.5 px-6 rounded-xl hover:bg-cyan-400 transition-all shadow-[0_0_20px_-5px_var(--cyan-ai)] hover:shadow-[0_0_30px_-5px_var(--cyan-ai)] group/btn">
            <Sparkles className="w-4 h-4" />
            Upgrade Plan to Unlock
            <ArrowRight className="w-4 h-4 group-hover/btn:translate-x-1 transition-transform" />
          </Link>
        </div>
      </div>
    );
  }

  return <>{children}</>;
}