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

export default async function Scripts() {
  const drops = await getWebDropsByCategory('scripts');
  const session = await getServerSession(authOptions);
  const discordId = session?.user ? (session.user as any).id : null;
  const isVip = discordId ? await checkVipStatus(discordId) : false;

  return (
    <main className="min-h-[100dvh] bg-transparent text-white selection:bg-white/20 selection:text-white font-sans p-4 md:p-6 lg:p-8 flex flex-col overflow-hidden">
      
      {/* Structural Brutalist Header */}
      <header className="flex flex-col md:flex-row justify-between items-start md:items-end mb-8 md:mb-12 border-b-2 border-white pb-6 gap-6 md:gap-0">
        <div>
          <h1 className="text-4xl md:text-6xl font-black tracking-tighter uppercase mb-2">
            Scripts
          </h1>
          <p className="font-mono text-xs md:text-sm tracking-widest text-zinc-400 uppercase">
            [ DIRECTORY . 003 ]
          </p>
        </div>
        
        <div className="text-left md:text-right">
          <p className="font-mono text-[10px] md:text-xs tracking-[0.3em] text-white">
            WYVERN SOFTWORKS <span className="text-zinc-600">© 2026</span>
          </p>
          <p className="font-mono text-[10px] tracking-widest text-zinc-500 mt-1">
            TOTAL INDEXED: {drops.length}
          </p>
        </div>
      </header>

      <div className="flex flex-col md:flex-row gap-8 flex-1 min-h-0">
        
        {/* Module Sidebar */}
        <nav className="w-full md:w-56 lg:w-72 flex-shrink-0 border-b md:border-b-0 md:border-r border-white/10 pr-0 md:pr-10 pb-8 md:pb-0 flex flex-col gap-0 overflow-hidden">
          
          <div className="mb-10 hidden md:block">
            <Link href="/" className="font-mono text-[9px] tracking-[0.4em] text-zinc-500 hover:text-white transition-all uppercase flex items-center gap-2 group">
              <span className="w-4 h-[1px] bg-zinc-800 group-hover:w-8 group-hover:bg-white transition-all" />
              RETURN TO BASE
            </Link>
          </div>

          <div className="mb-6 flex flex-col gap-1">
            <span className="font-mono text-[10px] tracking-[0.3em] text-zinc-600 uppercase">SYSTEM</span>
            <span className="font-black text-xs tracking-tighter uppercase text-white">MODULES</span>
          </div>

          <div className="flex flex-row md:flex-col gap-2 md:gap-0 overflow-x-auto md:overflow-visible no-scrollbar">
            {[
              { id: 'sources', label: 'Sources', active: false, index: '01' },
              { id: 'cracks', label: 'Cracks', active: false, index: '02' },
              { id: 'scripts', label: 'Scripts', active: true, index: '03' },
              { id: 'tools', label: 'Tools', active: false, index: '04' },
            ].map((mod) => (
              <Link 
                key={mod.id} 
                href={`/${mod.id}`}
                className={`group relative flex items-center justify-between py-3 md:py-4 border-b border-white/5 transition-all ${
                  mod.active ? 'px-4 bg-white text-black' : 'px-0 text-zinc-500 hover:text-white hover:pl-4'
                }`}
              >
                <div className="flex items-center gap-4">
                  <span className={`font-mono text-[9px] ${mod.active ? 'text-black/50' : 'text-zinc-800 group-hover:text-zinc-400'}`}>
                    {mod.index}
                  </span>
                  <span className="font-black text-[11px] tracking-widest uppercase italic">
                    {mod.label}
                  </span>
                </div>
                {mod.active && (
                  <div className="w-1.5 h-1.5 bg-black rounded-full shadow-[0_0_8px_rgba(0,0,0,0.5)]" />
                )}
                {!mod.active && (
                  <span className="opacity-0 group-hover:opacity-100 transition-opacity font-mono text-[10px]">→</span>
                )}
              </Link>
            ))}
          </div>
          
          <div className="mt-auto pt-12 hidden md:block">
            <Link href="/vip" className="relative group block overflow-hidden">
              <div className="absolute inset-0 bg-white translate-y-[101%] group-hover:translate-y-0 transition-transform duration-300" />
              <div className="border border-white/20 px-6 py-4 flex flex-col gap-1 relative transition-colors group-hover:text-black">
                <span className="font-mono text-[8px] tracking-[.3em] text-zinc-500 group-hover:text-black/50 uppercase transition-colors">Access Level</span>
                <span className="font-black text-xs tracking-[.2em] uppercase">Request VIP</span>
              </div>
            </Link>
          </div>
        </nav>

        {/* Main Content Area */}
        <div className="flex-1 border border-zinc-800 bg-zinc-950/50 flex flex-col min-h-[500px] md:min-h-0 relative overflow-hidden backdrop-blur-sm">
          <FadeIn>
          {/* Top Edge Decoration Removed */}

          {/* Ledger Table Header (Desktop) */}
          <div className="hidden md:grid grid-cols-12 gap-4 px-8 py-5 border-b border-zinc-900 font-mono text-[8px] tracking-[0.3em] text-zinc-600 uppercase bg-black/40">
            <div className="col-span-2">TIMESTAMP</div>
            <div className="col-span-1">REF</div>
            <div className="col-span-4">IDENTIFIER</div>
            <div className="col-span-2">LATENCY / AVAIL</div>
            <div className="col-span-2">ENCRYPTION / STATUS</div>
            <div className="col-span-1 text-right">ACTION</div>
          </div>

          {/* Ledger Content */}
          <div className="flex-1 overflow-y-auto w-full">
            {drops.length === 0 ? (
              <div className="flex-1 overflow-y-auto flex items-center justify-center p-8 h-full">
                <div className="font-mono text-[10px] tracking-[0.2em] text-zinc-600 uppercase text-center border border-zinc-800 border-dashed p-8 w-full max-w-sm">
                  [ DIRECTORY EMPTY ]
                </div>
              </div>
            ) : (
              drops.map((drop, i) => (
                <AnimatedRow key={drop.id} drop={drop} index={i} prefix="SCR" isVip={isVip} />
              ))
            )}
          </div>
          </FadeIn>
        </div>
      </div>

      <footer className="mt-8 pt-6 border-t border-zinc-900 flex justify-start items-center text-[9px] font-mono tracking-[0.2em] text-zinc-600 uppercase">
        <p>A Project by APRK</p>
      </footer>

    </main>
  );
}