import React, { useMemo } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { 
  ArrowLeft, Terminal, ShieldCheck, Cpu, Globe, Database, 
  Code, Activity, Lock, Layers, Zap, Network, Radio, Server,
  ChevronRight, ArrowUpRight, Copy, Share2
} from 'lucide-react';

const TechnicalDeepDive: React.FC = () => {
  const { slug } = useParams<{ slug: string }>();
  const navigate = useNavigate();

  const content = useMemo(() => {
    const title = slug?.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ') || 'Protocol Node';
    return {
      title,
      identifier: `LQI-${slug?.toUpperCase()}-NODE`,
      version: 'v6.5.0-STABLE',
      parity: '100%',
      latency: '0.0004ms',
      code: `// Lumina Quantum Registry Implementation
// Protocol: ${title}
// Security: RSA-OAEP-4096-PSS

import { LuminaMesh } from '@aibanking/core';

const node = await LuminaMesh.initialize({
  tier: 'ENTERPRISE_NODE',
  encryption: 'AES-256-GCM',
  shredding: 'IMMEDIATE_POST_PARITY',
  consensus: 'HARD_STATE'
});

await node.handshake({
  endpoint: 'https://nexus.aibanking.dev/v1',
  credentials: process.env.LQI_MASTER_SECRET
});`
    };
  }, [slug]);

  return (
    <div className="min-h-screen bg-black text-white pb-40 selection:bg-blue-600/30">
      <div className="fixed inset-0 z-0 opacity-10">
        <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_50%_0%,_#1e1b4b_0%,_transparent_70%)]"></div>
        <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808005_1px,transparent_1px),linear-gradient(to_bottom,#80808005_1px,transparent_1px)] bg-[size:80px_80px]"></div>
      </div>

      <div className="max-w-7xl mx-auto py-32 px-10 relative z-10">
        <button 
          onClick={() => navigate(-1)}
          className="group flex items-center gap-4 text-zinc-600 hover:text-white transition-all mb-20"
        >
          <ArrowLeft size={20} className="group-hover:-translate-x-2 transition-transform" />
          <span className="text-[11px] font-black uppercase tracking-[0.4em]">Return to Nexus Hub</span>
        </button>

        <div className="grid grid-cols-1 lg:grid-cols-12 gap-20">
          <div className="lg:col-span-8 space-y-24">
            <div className="space-y-12">
               <div className="flex items-center gap-4">
                  <div className="w-1.5 h-1.5 rounded-full bg-blue-500 animate-pulse shadow-[0_0_10px_#3b82f6]"></div>
                  <span className="text-[11px] font-black text-blue-500 uppercase tracking-[0.5em]">{content.identifier}</span>
               </div>
               <h1 className="text-[8rem] lg:text-[10rem] font-black italic text-white uppercase tracking-tighter leading-none">
                 {content.title} <br /> <span className="text-blue-600 not-italic">Specification</span>
               </h1>
               <p className="text-zinc-500 text-3xl font-bold leading-relaxed italic max-w-4xl">
                 "This document defines the <span className="text-white">Machine-to-Machine (M2M)</span> handshake parameters for the {content.title} protocol within the Lumina Quantum Mesh. Implementation requires valid enterprise parity."
               </p>
            </div>

            <div className="space-y-10">
               <h3 className="text-white font-black text-xl uppercase tracking-widest italic flex items-center gap-4">
                 <Terminal size={24} className="text-blue-500" />
                 Integration Blueprint
               </h3>
               <div className="bg-zinc-950 border border-zinc-900 rounded-[3rem] overflow-hidden shadow-2xl relative group">
                  <div className="absolute top-4 right-8 flex gap-4 opacity-30 group-hover:opacity-100 transition-opacity">
                     <button className="p-3 bg-zinc-900 rounded-xl hover:text-blue-500"><Copy size={16} /></button>
                     <button className="p-3 bg-zinc-900 rounded-xl hover:text-blue-500"><Share2 size={16} /></button>
                  </div>
                  <div className="bg-zinc-900/50 px-8 py-4 border-b border-zinc-800 flex items-center gap-3">
                     <div className="w-2.5 h-2.5 rounded-full bg-rose-500/20"></div>
                     <div className="w-2.5 h-2.5 rounded-full bg-amber-500/20"></div>
                     <div className="w-2.5 h-2.5 rounded-full bg-emerald-500/20"></div>
                     <span className="text-[10px] font-mono text-zinc-600 ml-4">protocol_impl.ts</span>
                  </div>
                  <div className="p-12 font-mono text-sm text-emerald-500/80 leading-relaxed overflow-x-auto custom-scrollbar">
                     <pre>{content.code}</pre>
                  </div>
               </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
               <div className="p-12 bg-zinc-950 border border-zinc-900 rounded-[4rem] group hover:border-blue-500/30 transition-all shadow-2xl">
                  <h4 className="text-white font-black text-sm uppercase tracking-widest mb-6">Compliance Check</h4>
                  <p className="text-zinc-500 text-lg leading-relaxed font-medium italic mb-10">"Verified against FDX v6.5 and SWIFT gpi standards for high-value transactional settlement."</p>
                  <div className="flex items-center gap-3">
                     <ShieldCheck size={20} className="text-emerald-500" />
                     <span className="text-[10px] font-black text-emerald-500 uppercase tracking-widest">Verification Status: OK</span>
                  </div>
               </div>
               <div className="p-12 bg-zinc-950 border border-zinc-900 rounded-[4rem] group hover:border-blue-500/30 transition-all shadow-2xl">
                  <h4 className="text-white font-black text-sm uppercase tracking-widest mb-6">Security Layer</h4>
                  <p className="text-zinc-500 text-lg leading-relaxed font-medium italic mb-10">"Session metadata is shredded using 7-pass random overwrite logic immediately post-consensus."</p>
                  <div className="flex items-center gap-3">
                     <Lock size={20} className="text-blue-500" />
                     <span className="text-[10px] font-black text-blue-500 uppercase tracking-widest">Encapsulation: RSA-OAEP</span>
                  </div>
               </div>
            </div>
          </div>

          <div className="lg:col-span-4 space-y-10">
             <div className="bg-zinc-950 border border-zinc-900 rounded-[3rem] p-10 shadow-2xl sticky top-10">
                <div className="flex items-center gap-4 mb-10 pb-10 border-b border-zinc-900">
                   <div className="p-4 bg-blue-600/10 text-blue-500 rounded-2xl">
                      <Activity size={24} className="animate-pulse" />
                   </div>
                   <div>
                      <h4 className="text-white font-black uppercase tracking-widest italic leading-none">Node Telemetry</h4>
                      <p className="text-[9px] text-zinc-600 font-black uppercase mt-1">Real-time Parity Polling</p>
                   </div>
                </div>

                <div className="space-y-8">
                   {[
                     { label: 'Network Parity', val: content.parity, icon: Globe },
                     { label: 'Sync Latency', val: content.latency, icon: Radio },
                     { label: 'Cluster Load', val: '14.2%', icon: Server },
                     { label: 'Fabric Grade', val: 'ELITE', icon: Layers },
                   ].map((stat, i) => (
                     <div key={i} className="flex justify-between items-center group/stat">
                        <div className="flex items-center gap-4">
                           <stat.icon size={16} className="text-zinc-700 group-hover/stat:text-blue-500 transition-colors" />
                           <span className="text-[10px] font-black text-zinc-600 uppercase tracking-widest">{stat.label}</span>
                        </div>
                        <span className="text-sm font-black text-white mono">{stat.val}</span>
                     </div>
                   ))}
                </div>

                <div className="mt-12 space-y-6">
                   <button className="w-full py-5 bg-blue-600 hover:bg-blue-500 text-white rounded-[1.8rem] font-black text-[10px] uppercase tracking-[0.4em] transition-all shadow-xl shadow-blue-900/30 flex items-center justify-center gap-4">
                      Initialize Node <ArrowUpRight size={16} />
                   </button>
                   <button className="w-full py-5 bg-zinc-900 hover:bg-zinc-800 text-zinc-500 hover:text-white rounded-[1.8rem] font-black text-[10px] uppercase tracking-[0.4em] transition-all border border-zinc-800 flex items-center justify-center gap-4">
                      Download SDK <Code size={16} />
                   </button>
                </div>

                <div className="mt-10 pt-10 border-t border-zinc-900">
                   <div className="p-6 bg-black rounded-2xl border border-zinc-900 text-center">
                      <p className="text-[10px] font-black text-zinc-600 uppercase tracking-widest leading-relaxed">
                        Authorized Identity: alex@aibanking.dev <br /> Access Level: Root_Admin
                      </p>
                   </div>
                </div>
             </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default TechnicalDeepDive;