WSW/src/app/vip/page.tsx

import { getServerSession } from "next-auth/next";
import { authOptions } from "@/app/api/auth/[...nextauth]/route";
import Link from "next/link";
import FadeIn from "@/components/FadeIn";
import DiscordLoginButton from "@/components/DiscordLoginButton";
import PricingCard from "@/components/PricingCard";
import { getDb, checkVipStatus } from "@/lib/db";

export default async function VIPPage() {
  const session = await getServerSession(authOptions);
  
  // If not logged in, show login screen
  if (!session) {
    return (
      <FadeIn>
      <main className="min-h-[100dvh] bg-black text-white selection:bg-white/20 selection:text-white font-sans p-4 md:p-6 lg:p-8 flex flex-col justify-center items-center relative overflow-hidden">
        <div className="bg-noise mix-blend-overlay"></div>
        
        <div className="max-w-md w-full border border-zinc-800 bg-zinc-950 p-8 shadow-2xl relative z-10 before:absolute before:inset-0 before:shadow-[inset_0_0_50px_rgba(0,0,0,0.8)] before:pointer-events-none">
          <div className="absolute top-0 left-0 w-full h-1 pl-1 flex gap-1 z-10">
            <div className="w-8 h-full bg-white"></div>
            <div className="w-2 h-full bg-zinc-800"></div>
          </div>
          
          <h1 className="font-mono text-xs tracking-[0.4em] text-zinc-500 uppercase mb-8 text-center">
            Security Clearance Required
          </h1>
          
          <div className="font-bold tracking-tighter text-4xl uppercase text-white mb-2 text-center">
            Wyvern VIP
          </div>
          
          <p className="font-mono text-[10px] text-zinc-400 mb-12 text-center tracking-widest leading-relaxed">
            Authentication via Discord protocol is strictly required to verify clearance level.
          </p>
          
          <DiscordLoginButton />
          
          <div className="mt-8 text-center">
            <Link href="/" className="font-mono text-[9px] tracking-[0.3em] text-zinc-600 hover:text-white transition-colors uppercase border-b border-zinc-800 hover:border-white pb-1">
              ← Return to Base
            </Link>
          </div>
        </div>
      </main>
      </FadeIn>
    );
  }

  // Get Discord ID from the session object (we mapped this in authOptions)
  const discordId = (session.user as any).id;
  const isVip = await checkVipStatus(discordId);

  return (
    <FadeIn>
    <main className="min-h-[100dvh] bg-black text-white selection:bg-white/20 selection:text-white font-sans p-4 md:p-6 lg:p-8 flex flex-col justify-center items-center relative overflow-hidden">
      <div className="bg-noise mix-blend-overlay"></div>
      
      <div className="max-w-2xl w-full border border-zinc-800 bg-zinc-950 p-8 md:p-12 shadow-2xl relative z-10">
        <div className="absolute top-0 left-0 w-full h-1 pl-1 flex gap-1 z-10">
          <div className="w-8 h-full bg-white"></div>
          <div className="w-2 h-full bg-zinc-800"></div>
        </div>
        
        <header className="flex justify-between items-center border-b border-zinc-800 pb-6 mb-8">
          <div>
            <h1 className="font-mono text-[10px] tracking-[0.4em] text-zinc-500 uppercase">
              Identity Confirmed
            </h1>
            <div className="font-bold tracking-tighter text-2xl uppercase mt-1">
              {session.user?.name}
            </div>
          </div>
          <div className="text-right">
            <div className={`font-mono text-[10px] tracking-[0.3em] uppercase ${isVip ? 'text-white' : 'text-zinc-600'}`}>
              Clearance: {isVip ? 'VIP / UNRESTRICTED' : 'STANDARD / GUEST'}
            </div>
            <Link href="/api/auth/signout" className="font-mono text-[9px] tracking-widest text-zinc-500 hover:text-white border-b border-zinc-800 mt-2 inline-block transition-colors">
              [ TERMINATE SESSION ]
            </Link>
          </div>
        </header>

        {isVip ? (
          <div className="border border-white/20 bg-white/5 p-6 mt-8">
            <h2 className="font-mono text-sm tracking-widest uppercase mb-4 text-white flex items-center gap-3">
              <span className="w-2 h-2 bg-white rounded-full animate-pulse"></span>
              VIP Dashboard Access
            </h2>
            <p className="font-mono text-[10px] text-zinc-400 tracking-widest leading-relaxed mb-6">
              Your security clearance is elevated. You now have unrestricted access to all highly classified directory index protocols.
            </p>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              {[
                { id: 'sources', label: 'Sources', index: '01' },
                { id: 'cracks', label: 'Cracks', index: '02' },
                { id: 'scripts', label: 'Scripts', index: '03' },
                { id: 'tools', label: 'Tools', index: '04' },
              ].map((mod) => (
                <Link 
                  key={mod.id}
                  href={`/${mod.id}`} 
                  className="p-6 border border-zinc-800 hover:border-white transition-all bg-zinc-900/50 group flex flex-col gap-2"
                >
                  <div className="flex justify-between items-center">
                    <span className="font-mono text-[9px] text-zinc-600 group-hover:text-zinc-400 transition-colors uppercase tracking-widest">{mod.index}</span>
                    <span className="text-zinc-700 group-hover:text-white transition-colors">→</span>
                  </div>
                  <span className="font-black text-sm tracking-widest text-white uppercase italic group-hover:pl-2 transition-all">
                    {mod.label}
                  </span>
                </Link>
              ))}
            </div>
          </div>
        ) : (
          <div className="mt-8 flex flex-col items-center pt-8 border-t border-zinc-800/50">
            <div className="text-center mb-8">
              <div className="font-mono text-xs tracking-[0.3em] text-zinc-500 uppercase mb-2">Access Denied</div>
              <h2 className="text-2xl font-bold tracking-tighter uppercase mb-4">Elevate Clearance</h2>
              <p className="font-mono text-[10px] text-zinc-400 tracking-widest max-w-sm mx-auto leading-relaxed">
                Your current identity lacks the necessary clearance protocols to access VIP-restricted directories. To proceed, a clearance elevation transaction is required via SECURE CRYPTO GATEWAY.
              </p>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 w-full max-w-4xl mt-4">
              <PricingCard
                label="7 Days"
                price="$3.00"
                productId={process.env.NEXT_PUBLIC_SELLAPP_WEEKLY_ID || ''}
                discordId={discordId}
              />
              <PricingCard
                label="30 Days"
                price="$7.00"
                productId={process.env.NEXT_PUBLIC_SELLAPP_MONTHLY_ID || ''}
                discordId={discordId}
              />
              <PricingCard
                label="365 Days"
                price="$15.00"
                productId={process.env.NEXT_PUBLIC_SELLAPP_YEARLY_ID || ''}
                discordId={discordId}
                badge="Best Value"
              />
              <PricingCard
                label="Unrestricted"
                price="$25.00"
                productId={process.env.NEXT_PUBLIC_SELLAPP_LIFETIME_ID || ''}
                discordId={discordId}
                highlight
              />
            </div>

            <p className="font-mono text-[8px] tracking-widest text-zinc-600 uppercase mt-8 text-center max-w-xs">
              Automated provisioning via untraceable crypto transaction.<br/>Zero KYC required.
            </p>
          </div>
        )}

      </div>
    </main>
    </FadeIn>
  );
}