import React, { useState } from 'react';
import { 
  BookOpen, Search, Code, LayoutDashboard, Building2, Cpu, ShieldCheck, Zap, 
  Bitcoin, Terminal, ArrowRight, ChevronRight, Activity, Globe, Database, 
  Layers, Lock, Server, FileText, Smartphone, ArrowLeft, Shield
} from 'lucide-react';
import { useNavigate } from 'react-router-dom';

const DocSection: React.FC<{ icon: any, title: string, description: string, details: string[], code?: string }> = ({ icon: Icon, title, description, details, code }) => (
  <div className="group bg-zinc-950 border border-zinc-900 p-12 rounded-[4rem] hover:border-blue-500/30 transition-all shadow-2xl relative overflow-hidden">
    <div className="absolute top-0 right-0 p-10 opacity-[0.02] group-hover:opacity-10 transition-opacity">
      <Icon size={180} />
    </div>
    <div className="flex items-center gap-8 mb-10 relative z-10">
      <div className="p-5 bg-zinc-900 rounded-3xl text-blue-500 group-hover:scale-110 transition-transform duration-500 border border-zinc-800 shadow-xl">
        <Icon size={32} />
      </div>
      <div>
        <h3 className="text-3xl font-black text-white italic tracking-tighter uppercase leading-none">{title}</h3>
        <p className="text-[10px] font-black text-zinc-600 uppercase tracking-widest mt-2">Protocol Segment v6.5 • Synchronized</p>
      </div>
    </div>
    <p className="text-zinc-400 text-lg leading-relaxed mb-12 font-medium italic relative z-10">"{description}"</p>
    
    <div className="grid grid-cols-1 md:grid-cols-2 gap-12 relative z-10">
      <div className="space-y-6">
        <h4 className="text-[10px] font-black text-blue-500 uppercase tracking-widest mb-6">Core Functions</h4>
        <div className="space-y-4">
          {details.map((d, i) => (
            <div key={i} className="flex items-start gap-4 text-sm font-bold text-zinc-300">
              <div className="w-1.5 h-1.5 rounded-full bg-blue-500 mt-1.5 shrink-0 shadow-[0_0_8px_#3b82f6]"></div>
              <span>{d}</span>
            </div>
          ))}
        </div>
      </div>
      {code && (
        <div className="bg-black border border-zinc-900 rounded-3xl p-8 font-mono text-[10px] text-emerald-500/80 shadow-inner group-hover:border-zinc-700 transition-colors h-48 overflow-y-auto custom-scrollbar">
          <p className="text-zinc-700 italic mb-4">// Protocol Implementation</p>
          <pre className="whitespace-pre-wrap">{code}</pre>
        </div>
      )}
    </div>
  </div>
);

const Documentation: React.FC = () => {
  const navigate = useNavigate();
  return (
    <div className="min-h-screen bg-black text-white py-20 px-10 animate-in slide-in-from-bottom-6 duration-1000">
      <div className="max-w-7xl mx-auto space-y-24">
        <div className="flex flex-col md:flex-row justify-between items-end gap-12 border-b border-zinc-900 pb-20">
          <div className="space-y-10">
             <button onClick={() => navigate(-1)} className="group flex items-center gap-4 text-zinc-600 hover:text-white transition-colors">
                <ArrowLeft size={20} className="group-hover:-translate-x-2 transition-transform" />
                <span className="text-[11px] font-black uppercase tracking-[0.4em]">Return to Nexus</span>
             </button>
            <div className="inline-flex items-center space-x-3 px-6 py-2.5 bg-blue-500/10 border border-blue-500/20 rounded-full text-[11px] font-black text-blue-500 uppercase tracking-widest">
              <BookOpen size={16} />
              <span>Lumina System Manual v6.5.0</span>
            </div>
            <h1 className="text-[8rem] font-black italic text-white uppercase tracking-tighter leading-none">
              Manual <br /> <span className="text-blue-500 not-italic">Registry</span>
            </h1>
          </div>
          <div className="relative w-full md:w-[480px]">
            <Search className="absolute left-8 top-1/2 -translate-y-1/2 text-zinc-600" size={24} />
            <input 
              placeholder="Search Protocol Map..."
              className="w-full bg-zinc-950 border-2 border-zinc-900 focus:border-blue-500/50 rounded-[3rem] py-8 pl-20 pr-10 text-xl text-white font-bold outline-none transition-all shadow-2xl"
            />
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
          <DocSection 
            icon={LayoutDashboard}
            title="Command Interface"
            description="The central nervous system of the Lumina Quantum Ledger. Aggregates live data from multiple institutional nodes into a singular dashboard."
            details={["Real-time Cash Curve Monitoring", "AI-Driven Liquidity Alerts", "Carbon Deficit Tracking", "Node Health Verification"]}
            code={`const dashboard = await Lumina.Core.initialize({
  nodeParity: 'STRICT',
  refreshInterval: 'REALTIME',
  metrics: ['liquidity', 'alpha', 'esg']
});`}
          />
          <DocSection 
            icon={Building2}
            title="Bank Registry"
            description="Managed corporate treasury nodes connecting directly to tier-1 banks via the FDX v6 protocol. Secure, read-write access to institutional vaults."
            details={["FDX Native Handshakes", "Multi-Institution Syncing", "Available Balance Polling", "Real-time Node Status"]}
            code={`await Registry.Handshake('CITI-USA-1', {
  protocol: 'FDX_V6_NATIVE',
  scope: ['READ_WRITE'],
  auth: { type: 'RSA-OAEP-4096' }
});`}
          />
          <DocSection 
            icon={Cpu}
            title="Quantum Oracle"
            description="Neural financial forecasting engine. Runs complex 'What-If' simulations using high-fidelity economic models and predictive drift analysis."
            details={["Inflation Spike Modeling", "Compute Cost Forecasting", "Market Volatility Stress Testing", "Resilience AA- Ratings"]}
            code={`const forecast = await Oracle.Simulate({
  scenario: 'HYPER_INFLATION_Q3',
  assetClass: 'REAL_ESTATE',
  confidence: 0.98
});`}
          />
          <DocSection 
            icon={ShieldCheck}
            title="Record Vault"
            description="Encrypted long-term storage for audit compliance. Every document is cryptographically signed and stored with sha256 checksum integrity."
            details={["Institutional Archive Export", "Cryptographic Metadata Storage", "Compliance Audit Trails", "Multi-format Ledger Support"]}
            code={`const record = await Vault.Seal(payload, {
  encryption: 'AES-256-GCM',
  sign: 'RSA-PSS-4096',
  auditTrail: true
});`}
          />
        </div>

        <div className="p-20 bg-zinc-950 border border-zinc-900 rounded-[5rem] shadow-[0_100px_200px_rgba(0,0,0,0.8)] relative overflow-hidden group">
           <div className="absolute inset-0 bg-[radial-gradient(circle_at_0%_0%,_#1e1b4b_0%,_transparent_50%)] opacity-30"></div>
           <div className="relative z-10 flex flex-col md:flex-row justify-between items-center gap-16">
              <div className="space-y-8 flex-1">
                 <div className="p-6 bg-blue-600/10 text-blue-500 rounded-[2.5rem] border border-blue-500/20 shadow-2xl inline-block group-hover:scale-110 transition-transform duration-700">
                    <Terminal size={48} />
                 </div>
                 <h2 className="text-5xl font-black italic text-white uppercase tracking-tighter leading-none">Need Direct <br /> <span className="text-blue-500">Handshake?</span></h2>
                 <p className="text-zinc-500 text-xl font-bold italic leading-relaxed max-w-2xl">
                    "Our AI Terminal architects are online 24/7 to help you deploy custom node integrations and quantum-resistant treasury flows."
                 </p>
              </div>
              <div className="w-full md:w-auto flex flex-col gap-6">
                 <button onClick={() => navigate('/advisor')} className="px-16 py-8 bg-white text-black rounded-[2.5rem] font-black text-sm uppercase tracking-[0.5em] hover:scale-105 transition-all shadow-[0_30px_60px_rgba(255,255,255,0.1)] flex items-center justify-center gap-6">
                    Open Advisor <ChevronRight size={24} />
                 </button>
                 <button className="px-16 py-8 bg-zinc-900 text-white border border-zinc-800 rounded-[2.5rem] font-black text-sm uppercase tracking-[0.5em] hover:bg-zinc-800 transition-all flex items-center justify-center gap-6">
                    API Reference <Globe size={24} />
                 </button>
              </div>
           </div>
        </div>

        <div className="pt-20 border-t border-zinc-900 grid grid-cols-2 md:grid-cols-4 gap-20 opacity-20 grayscale hover:opacity-100 hover:grayscale-0 transition-all duration-1000">
           {/* Fix: Use Shield which is now imported */}
           {['AES-256', 'RSA-4096', 'SHA-256', 'RSA-PSS'].map((label, i) => (
             <div key={i} className="text-center space-y-4">
                <Shield size={32} className="mx-auto text-zinc-500" />
                <span className="text-[12px] font-black uppercase tracking-[1em] text-zinc-600">{label}</span>
             </div>
           ))}
        </div>
      </div>
    </div>
  );
};

export default Documentation;