import ThemedLayout from "@/components/layouts/ThemedLayout";
import { HubStrip } from "@/components/syndicate/HubStrip";
import { nodeSkinClass } from "@/lib/nodeSkinChrome";
import { syndicateSkinForSlug } from "@/lib/syndicateNetwork";

type SiteType = 'cc' | 'hacking' | 'training' | 'forum' | 'market' | 'vendor' | 'paywall' | 'leaks' | 'mixer' | 'passport' | 'malware' | 'botnet' | 'zero_day' | 'laundering' | 'counterfeit' | 'insider' | 'drugs' | 'hosting' | 'vpn' | 'dumps';

interface NodeData {
  slug: string;
  type: SiteType;
  theme: 'dark' | 'retro' | 'minimal' | 'hacker' | 'mystic' | 'brutalist' | 'terminal';
  title: string;
  deploySeed: number;
}

const SITE_TYPES: SiteType[] = ['cc', 'hacking', 'training', 'forum', 'market', 'vendor', 'paywall', 'leaks', 'mixer', 'passport', 'malware', 'botnet', 'zero_day', 'laundering', 'counterfeit', 'insider', 'drugs', 'hosting', 'vpn', 'dumps'];
const THEMES: NodeData['theme'][] = ['dark', 'retro', 'minimal', 'hacker', 'mystic', 'brutalist', 'terminal'];

const VENDOR_IMAGES = [
  "https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=2070&auto=format&fit=crop",
  "https://images.unsplash.com/photo-1563986768609-322da13575f3?q=80&w=2070&auto=format&fit=crop",
  "https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?q=80&w=2070&auto=format&fit=crop",
  "https://images.unsplash.com/photo-1558494949-ef010cbdcc51?q=80&w=2070&auto=format&fit=crop",
  "https://images.unsplash.com/photo-1510511459019-5dda7724fd87?q=80&w=2070&auto=format&fit=crop",
  "https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=2070&auto=format&fit=crop",
  "https://images.unsplash.com/photo-1504384308090-c894fdcc538d?q=80&w=2070&auto=format&fit=crop",
  "https://images.unsplash.com/photo-1525547719571-a2d4ac8945e2?q=80&w=2070&auto=format&fit=crop",
  "https://images.unsplash.com/photo-1496337589254-7e19d01cec44?q=80&w=2070&auto=format&fit=crop",
  "https://images.unsplash.com/photo-1516259762381-22954d7d3ad2?q=80&w=2070&auto=format&fit=crop",
  "https://images.unsplash.com/photo-1526304640581-d334cdbbf45e?q=80&w=2070&auto=format&fit=crop",
  "https://images.unsplash.com/photo-1555680202-c86f0e12f086?q=80&w=2070&auto=format&fit=crop",
];

function generateNodeData(slug: string, deploySeed: number): NodeData {
  const slugSeed = slug.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
  const totalSeed = slugSeed + deploySeed;
  
  const type = SITE_TYPES[totalSeed % SITE_TYPES.length];
  const theme = THEMES[totalSeed % THEMES.length];
  const title = `${type.toUpperCase()} NODE_${slug.toUpperCase()}`;
  
  return { slug, type, theme, title, deploySeed };
}

export default function DynamicNodePage({ params }: { params: { slug: string } }) {
  // Use a build-time seed to ensure variations across different machines/deploys
  // In a real app, this would be process.env.DEPLOY_SEED
  const deploySeed = parseInt(process.env.NEXT_PUBLIC_DEPLOY_SEED || "42");
  
  const node = generateNodeData(params.slug, deploySeed);
  const totalSeed = node.slug.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0) + deploySeed;
  const vendorImg = VENDOR_IMAGES[totalSeed % VENDOR_IMAGES.length];
  const skin = syndicateSkinForSlug(node.slug);

  return (
    <div className={nodeSkinClass(skin)}>
    <ThemedLayout theme={node.theme} title={node.title}>
      <HubStrip slug={node.slug} />
      <div className="space-y-12">
        {node.type === 'vendor' && (
          <div className="space-y-8">
            <div className="flex flex-col md:flex-row gap-12 items-start">
              <img src={vendorImg} className="w-full md:w-64 h-64 object-cover border-4 border-current grayscale hover:grayscale-0 transition-all shadow-[10px_10px_0_rgba(0,0,0,0.2)]" />
              <div className="flex-1">
                <h2 className="text-5xl font-black mb-4 uppercase tracking-tighter">Vendor: {node.slug}</h2>
                <div className="flex gap-4 mb-6">
                  <div className="bg-current text-black px-2 py-1 text-xs font-bold">RATING: 4.9/5.0</div>
                  <div className="bg-current text-black px-2 py-1 text-xs font-bold">SALES: {totalSeed * 3}</div>
                </div>
                <p className="text-lg italic opacity-80 leading-relaxed mb-8">
                  "Specializing in high-quality digital assets and encrypted communication tools. 
                  Serving the Shadow Network since 2022. Fast delivery, 24/7 support."
                </p>
                <div className="p-6 border-2 border-dashed border-current/40">
                  <h4 className="text-xs font-bold uppercase mb-2">PGP PUBLIC KEY</h4>
                  <pre className="text-[8px] opacity-40 break-all whitespace-pre-wrap">
                    -----BEGIN PGP PUBLIC KEY BLOCK-----
                    Version: OpenPGP.js v4.10.10
                    Comment: https://openpgpjs.org
                    {Buffer.from(node.slug + deploySeed).toString('base64').repeat(5)}
                    -----END PGP PUBLIC KEY BLOCK-----
                  </pre>
                </div>
              </div>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {[1, 2, 3].map(i => (
                <div key={i} className="border-2 border-current p-6 bg-current/5 hover:bg-current/10 transition-all">
                  <h3 className="font-bold uppercase mb-2">Asset_{totalSeed + i}</h3>
                  <p className="text-xs opacity-60 mb-4">Encrypted data pack containing {totalSeed + i} unique entries.</p>
                  <div className="flex justify-between items-center">
                    <span className="font-bold">0.00{i} BTC</span>
                    <button className="bg-current text-black px-4 py-1 text-[10px] font-bold">BUY</button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {node.type === 'paywall' && (
          <div className="max-w-md mx-auto text-center space-y-8 py-20">
            <div className="text-6xl mb-4 animate-bounce">🔒</div>
            <h2 className="text-4xl font-black uppercase tracking-tighter">Access Restricted</h2>
            <p className="text-sm opacity-60 leading-relaxed">
              This node contains high-value intelligence. To unlock access, 
              please send 0.005 BTC to the address below.
            </p>
            <div className="bg-current text-black p-4 font-bold break-all text-xs shadow-[5px_5px_0_rgba(0,0,0,0.2)]">
              0x594f1Cf2A72b3f785fcB6ABdFa73B6D76FcC22b8
            </div>
            <div className="p-8 border-4 border-current bg-current/5">
              <h3 className="font-bold uppercase mb-4">Login</h3>
              <input type="text" placeholder="USERNAME" className="w-full bg-transparent border-2 border-current p-2 mb-4 text-xs focus:outline-none" />
              <input type="password" placeholder="ACCESS KEY" className="w-full bg-transparent border-2 border-current p-2 mb-6 text-xs focus:outline-none" />
              <button className="w-full bg-current text-black py-3 font-bold uppercase hover:bg-white/15 transition-colors">
                Unlock Node
              </button>
            </div>
            <div className="flex items-center justify-center gap-4 opacity-40">
              <div className="w-10 h-10 border-2 border-current flex items-center justify-center font-bold">E</div>
              <div className="text-[8px] uppercase text-left">Escrow Assured<br />by ShadowGuard™</div>
            </div>
          </div>
        )}

        {node.type === 'leaks' && (
          <div className="space-y-8">
            <h2 className="text-4xl font-black uppercase border-b-4 border-current pb-4">Database Leaks</h2>
            <div className="space-y-6">
              {[1, 2, 3].map(i => (
                <div key={i} className="p-6 border-2 border-current bg-current/5 flex justify-between items-center">
                  <div>
                    <h3 className="text-xl font-bold uppercase">Leak_{totalSeed + i}: GlobalCorp_Internal</h3>
                    <p className="text-xs opacity-60 mt-1">Size: {totalSeed % 100}GB | Format: SQL/CSV | Date: 2024-03-24</p>
                  </div>
                  <button className="border-2 border-current px-6 py-2 font-bold uppercase text-xs hover:bg-current hover:text-black transition-all">
                    Download
                  </button>
                </div>
              ))}
            </div>
          </div>
        )}

        {node.type === 'passport' && (
          <div className="space-y-8">
            <h2 className="text-4xl font-black uppercase border-b-4 border-current pb-4">Digital Identity Services</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {[1, 2].map(i => (
                <div key={i} className="p-6 border-2 border-current bg-current/5">
                  <h3 className="text-xl font-bold uppercase mb-2">Premium Passport Scan - Region {totalSeed % 5 + i}</h3>
                  <p className="text-xs opacity-60 mb-4">High-resolution scans. Passes basic KYC checks. Includes utility bill.</p>
                  <div className="flex justify-between items-center">
                    <span className="font-bold">0.0{i * 2} BTC</span>
                    <button className="border-2 border-current px-4 py-1 font-bold uppercase text-xs hover:bg-current hover:text-black transition-all">
                      Purchase
                    </button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {node.type === 'malware' && (
          <div className="space-y-8">
            <h2 className="text-4xl font-mono uppercase border-b-4 border-current pb-4">Malware Repository</h2>
            <div className="space-y-6">
              {[1, 2, 3].map(i => (
                <div key={i} className="p-6 border-2 border-current bg-current/5 flex justify-between items-center">
                  <div>
                    <h3 className="text-xl font-bold uppercase">Ransomware Builder v{totalSeed % 10}.{i}</h3>
                    <p className="text-xs opacity-60 mt-1">FUD (Fully Undetectable). AES-256 encryption. Custom ransom notes.</p>
                  </div>
                  <div className="text-right">
                    <div className="font-bold mb-2">0.{i * 5} BTC</div>
                    <button className="bg-current text-black px-6 py-2 font-bold uppercase text-xs hover:bg-white/15 transition-all">
                      Buy Source
                    </button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {node.type === 'botnet' && (
          <div className="space-y-8">
            <h2 className="text-4xl font-black uppercase border-b-4 border-current pb-4">Botnet Rental</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {[10, 50, 100].map(k => (
                <div key={k} className="p-6 border-2 border-current bg-current/5 text-center">
                  <h3 className="text-2xl font-bold uppercase mb-2">{k}K Bots</h3>
                  <p className="text-xs opacity-60 mb-4">IoT devices. High bandwidth. Layer 4/7 attacks.</p>
                  <div className="text-xl font-bold mb-4">0.0{k} BTC / hr</div>
                  <button className="w-full border-2 border-current py-2 font-bold uppercase text-xs hover:bg-current hover:text-black transition-all">
                    Rent Now
                  </button>
                </div>
              ))}
            </div>
          </div>
        )}

        {node.type === 'zero_day' && (
          <div className="space-y-8">
            <h2 className="text-4xl font-serif italic border-b-4 border-current pb-4">Zero-Day Exploits</h2>
            <div className="space-y-6">
              {[1, 2].map(i => (
                <div key={i} className="p-6 border-2 border-current bg-current/5">
                  <h3 className="text-xl font-bold uppercase mb-2">Exploit_{totalSeed + i}: RCE in Popular CMS</h3>
                  <p className="text-xs opacity-60 mb-4">Remote Code Execution. Unpatched. Proof of concept included.</p>
                  <div className="flex justify-between items-center">
                    <span className="font-bold text-lg">1.{i * 5} BTC</span>
                    <button className="bg-current text-black px-6 py-2 font-bold uppercase text-xs hover:bg-white/15 transition-all">
                      Inquire
                    </button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {node.type === 'laundering' && (
          <div className="space-y-8 text-center">
            <h2 className="text-4xl font-black uppercase mb-4">Crypto Tumbler</h2>
            <p className="text-sm opacity-60 mb-8">Clean your coins. Break the chain. 1% fee.</p>
            <div className="max-w-md mx-auto p-8 border-4 border-current bg-current/5">
              <input type="text" placeholder="Destination Address" className="w-full bg-transparent border-2 border-current p-3 mb-4 text-xs focus:outline-none" />
              <div className="flex gap-4 mb-6">
                <input type="number" placeholder="Amount (BTC)" className="w-1/2 bg-transparent border-2 border-current p-3 text-xs focus:outline-none" />
                <input type="number" placeholder="Delay (Hours)" className="w-1/2 bg-transparent border-2 border-current p-3 text-xs focus:outline-none" />
              </div>
              <button className="w-full bg-current text-black py-4 font-bold uppercase hover:bg-white/15 transition-colors">
                Tumble Coins
              </button>
            </div>
          </div>
        )}

        {node.type === 'counterfeit' && (
          <div className="space-y-8">
            <h2 className="text-4xl font-black uppercase border-b-4 border-current pb-4">Counterfeit Currency</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {['USD', 'EUR'].map((currency, i) => (
                <div key={currency} className="p-6 border-2 border-current bg-current/5">
                  <h3 className="text-xl font-bold uppercase mb-2">High-Quality {currency} Bills</h3>
                  <p className="text-xs opacity-60 mb-4">Passes pen test. UV features. Microprinting.</p>
                  <ul className="text-xs space-y-2 mb-6">
                    <li>$1,000 face value - 0.01 BTC</li>
                    <li>$5,000 face value - 0.04 BTC</li>
                    <li>$10,000 face value - 0.07 BTC</li>
                  </ul>
                  <button className="w-full border-2 border-current py-2 font-bold uppercase text-xs hover:bg-current hover:text-black transition-all">
                    Order {currency}
                  </button>
                </div>
              ))}
            </div>
          </div>
        )}

        {node.type === 'insider' && (
          <div className="space-y-8">
            <h2 className="text-4xl font-serif italic border-b-4 border-current pb-4">Insider Trading Tips</h2>
            <div className="space-y-6">
              {[1, 2].map(i => (
                <div key={i} className="p-6 border-2 border-current bg-current/5 flex justify-between items-center">
                  <div>
                    <h3 className="text-xl font-bold uppercase">Tip_{totalSeed + i}: Upcoming Merger</h3>
                    <p className="text-xs opacity-60 mt-1">Tech sector. Expected announcement in {i * 3} days.</p>
                  </div>
                  <div className="text-right">
                    <div className="font-bold mb-2">0.{i * 2} BTC</div>
                    <button className="bg-current text-black px-6 py-2 font-bold uppercase text-xs hover:bg-white/15 transition-all">
                      Unlock Tip
                    </button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {node.type === 'drugs' && (
          <div className="space-y-8">
            <h2 className="text-4xl font-black uppercase border-b-4 border-current pb-4">Nootropics & Enhancers</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {['Modafinil', 'Adderall (Generic)', 'LSD (Microdose)'].map((drug, i) => (
                <div key={drug} className="p-6 border-2 border-current bg-current/5 text-center">
                  <h3 className="text-lg font-bold uppercase mb-2">{drug}</h3>
                  <p className="text-xs opacity-60 mb-4">High purity. Stealth shipping.</p>
                  <div className="text-xl font-bold mb-4">0.00{i + 1} BTC / g</div>
                  <button className="w-full border-2 border-current py-2 font-bold uppercase text-xs hover:bg-current hover:text-black transition-all">
                    Add to Cart
                  </button>
                </div>
              ))}
            </div>
          </div>
        )}

        {node.type === 'hosting' && (
          <div className="space-y-8 text-center">
            <h2 className="text-4xl font-mono uppercase mb-4">Bulletproof Hosting</h2>
            <p className="text-sm opacity-60 mb-8">Offshore servers. No logs. Ignore DMCA.</p>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {['Shared', 'VPS', 'Dedicated'].map((plan, i) => (
                <div key={plan} className="p-6 border-2 border-current bg-current/5">
                  <h3 className="text-2xl font-bold uppercase mb-2">{plan}</h3>
                  <ul className="text-xs space-y-2 mb-6 opacity-60">
                    <li>{i + 1}TB Bandwidth</li>
                    <li>{i * 2 + 2}GB RAM</li>
                    <li>DDoS Protection</li>
                  </ul>
                  <div className="text-xl font-bold mb-4">0.0{i + 1} BTC / mo</div>
                  <button className="w-full bg-current text-black py-2 font-bold uppercase text-xs hover:bg-white/15 transition-all">
                    Deploy
                  </button>
                </div>
              ))}
            </div>
          </div>
        )}

        {node.type === 'vpn' && (
          <div className="space-y-8 text-center">
            <h2 className="text-4xl font-black uppercase mb-4">Shadow VPN</h2>
            <p className="text-sm opacity-60 mb-8">Multi-hop routing. Zero logs. Crypto only.</p>
            <div className="max-w-md mx-auto p-8 border-4 border-current bg-current/5">
              <h3 className="text-2xl font-bold mb-4">1 Year Subscription</h3>
              <div className="text-3xl font-bold mb-6">0.005 BTC</div>
              <button className="w-full bg-current text-black py-4 font-bold uppercase hover:bg-white/15 transition-colors">
                Generate Config
              </button>
            </div>
          </div>
        )}

        {node.type === 'dumps' && (
          <div className="space-y-8">
            <h2 className="text-4xl font-black uppercase border-b-4 border-current pb-4">Data Dumps</h2>
            <div className="space-y-6">
              {[1, 2, 3].map(i => (
                <div key={i} className="p-6 border-2 border-current bg-current/5 flex justify-between items-center">
                  <div>
                    <h3 className="text-xl font-bold uppercase">Dump_{totalSeed + i}: Social Media Platform</h3>
                    <p className="text-xs opacity-60 mt-1">{totalSeed * 1000} records. Emails, passwords, phone numbers.</p>
                  </div>
                  <button className="border-2 border-current px-6 py-2 font-bold uppercase text-xs hover:bg-current hover:text-black transition-all">
                    0.0{i} BTC
                  </button>
                </div>
              ))}
            </div>
          </div>
        )}

        <div className="mt-20 p-8 border-2 border-dashed border-current/20 text-center">
          <div className="text-xs uppercase tracking-widest opacity-40">
            This node is part of the Shadow Network's infinite expansion protocol.
            <br />
            Current Node Hash: {Buffer.from(node.slug + deploySeed).toString('hex')}
          </div>
        </div>
      </div>
    </ThemedLayout>
    </div>
  );
}