App.tsx

import React, { useState, useEffect } from 'react';
import { HashRouter, Routes, Route, Link, useLocation, Navigate } from 'react-router-dom';
import { 
  Leaf, 
  Bell, 
  LogOut, 
  Activity, 
  ChevronRight, 
  Cpu, 
  Settings as SettingsIcon, 
  Terminal, 
  Loader2,
  Key as KeyIcon,
  ShieldCheck,
  ArrowRight,
  Zap
} from 'lucide-react';
import { routes } from './views/routes';
import Login from './views/Login';
import Landing from './views/Landing';
import PrivacyPolicy from './views/PrivacyPolicy';
import Documentation from './views/Documentation';
import Airdrop from './views/Airdrop';
import { apiClient } from './services/api';
import { UserSession } from './types/index';

const KeyGateway = ({ onAuthorized }: { onAuthorized: () => void }) => {
  const [key, setKey] = useState('');
  const [verifying, setVerifying] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!key.trim()) return;
    setVerifying(true);
    localStorage.setItem('LQI_API_KEY', key.trim());
    setTimeout(() => {
      setVerifying(false);
      onAuthorized();
    }, 1000);
  };

  return (
    <div className="min-h-screen bg-[#020202] flex items-center justify-center p-6 font-sans">
      <div className="absolute inset-0 z-0 opacity-10">
        <div className="matrix-line"></div>
      </div>
      <div className="w-full max-w-md bg-zinc-950 border border-zinc-900 rounded-[3rem] p-12 shadow-2xl relative z-10">
        <div className="flex flex-col items-center text-center mb-10">
          <div className="w-16 h-16 bg-blue-600/10 text-blue-500 rounded-3xl flex items-center justify-center mb-6 border border-blue-500/20">
            <KeyIcon size={32} />
          </div>
          <h2 className="text-3xl font-black text-white italic tracking-tighter uppercase mb-2">Neural <span className="text-blue-500 not-italic">Handshake</span></h2>
          <p className="text-zinc-600 text-[10px] font-black uppercase tracking-[0.3em]">Initialize Gemini Core Access</p>
        </div>

        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="space-y-2">
            <label className="text-[10px] font-black text-zinc-700 uppercase tracking-widest ml-1">LQI_PRIVATE_KEY</label>
            <input 
              type="password"
              value={key}
              onChange={(e) => setKey(e.target.value)}
              placeholder="Enter Gemini API Key..."
              className="w-full bg-black border border-zinc-800 focus:border-blue-500 rounded-2xl py-5 px-6 text-white font-mono text-sm outline-none transition-all shadow-inner"
              required
            />
          </div>

          <button 
            type="submit"
            disabled={verifying}
            className="w-full bg-blue-600 hover:bg-blue-500 text-white rounded-[2rem] py-5 font-black text-xs uppercase tracking-[0.3em] transition-all flex items-center justify-center gap-3 shadow-xl shadow-blue-900/40"
          >
            {verifying ? <Loader2 className="animate-spin" size={18} /> : (
              <>
                <span>Initialize Node</span>
                <ArrowRight size={18} />
              </>
            )}
          </button>
        </form>
      </div>
    </div>
  );
};

const SidebarItem: React.FC<{ icon: any, label: string, path: string, active: boolean }> = ({ icon: Icon, label, path, active }) => (
  <Link 
    to={path} 
    className={`flex items-center justify-between px-6 py-4 rounded-2xl transition-all duration-500 group ${
      active 
        ? 'bg-white text-black shadow-2xl' 
        : 'text-zinc-500 hover:text-white hover:bg-zinc-900/50'
    }`}
  >
    <div className="flex items-center space-x-4">
      <Icon size={18} className={`${active ? 'text-black' : 'text-zinc-600 group-hover:text-blue-500'} transition-colors duration-500`} />
      <span className="font-black text-[10px] uppercase tracking-[0.2em]">{label}</span>
    </div>
    {active && <ChevronRight size={14} />}
  </Link>
);

const Header = ({ user, onLogout }: { user: UserSession, onLogout: () => void }) => {
  const isEsgNeutral = localStorage.getItem('esg_neutral') === 'true';
  const location = useLocation();
  const currentRoute = routes.find(r => r.path === location.pathname);
  const [typedTitle, setTypedTitle] = useState('');

  useEffect(() => {
    if (!currentRoute) return;
    let i = 0;
    const fullText = currentRoute.label;
    setTypedTitle('');
    const timer = setInterval(() => {
      setTypedTitle(fullText.substring(0, i + 1));
      i++;
      if (i >= fullText.length) clearInterval(timer);
    }, 40);
    return () => clearInterval(timer);
  }, [location.pathname, currentRoute]);

  return (
    <header className="h-24 flex items-center justify-between px-10 bg-transparent print:hidden relative z-50">
      <div className="flex items-center space-x-6">
        <div className="hidden md:flex flex-col">
          <h1 className="text-xl font-black tracking-tighter text-white italic leading-none uppercase">
            {typedTitle} <span className="text-blue-500 not-italic block md:inline">NODE</span>
          </h1>
          <p className="text-[10px] text-zinc-600 font-black uppercase tracking-[0.3em] mt-1 flex items-center gap-2">
            <Terminal size={10} />
            ROOT_IDENTIFIER: {user.name.toUpperCase().replace(' ', '_')}
          </p>
        </div>
        
        {isEsgNeutral && (
          <div className="px-4 py-1.5 bg-emerald-500/10 border border-emerald-500/20 rounded-full flex items-center gap-2 shadow-2xl shadow-emerald-500/5">
            <Leaf size={12} className="text-emerald-500" />
            <span className="text-[10px] font-black text-emerald-500 uppercase tracking-widest">ESG Offset Verified</span>
          </div>
        )}
      </div>

      <div className="flex items-center space-x-8">
        <div className="flex items-center space-x-6">
          <button className="p-3 text-zinc-500 hover:text-white transition-all relative group bg-zinc-950 rounded-xl border border-zinc-900 shadow-xl">
            <Bell size={18} />
            <span className="absolute top-3 right-3 w-2 h-2 bg-blue-500 rounded-full shadow-[0_0_10px_rgba(59,130,246,0.8)]"></span>
          </button>
          <div className="h-8 w-px bg-zinc-900"></div>
          <div className="flex items-center space-x-4 group cursor-pointer" onClick={onLogout}>
            <div className="text-right">
              <p className="text-xs font-black text-white uppercase italic tracking-tighter">{user.name}</p>
              <p className="text-[9px] text-zinc-600 uppercase tracking-[0.2em] font-bold">{user.role}</p>
            </div>
            <div className="w-12 h-12 rounded-2xl bg-zinc-950 border border-zinc-900 flex items-center justify-center group-hover:border-rose-500/50 transition-all shadow-2xl">
              <LogOut size={18} className="text-zinc-600 group-hover:text-rose-500 transition-colors" />
            </div>
          </div>
        </div>
      </div>
    </header>
  );
};

const PrivateTerminal = ({ user, onLogout }: { user: UserSession, onLogout: () => void }) => {
  const [isKeyAuthorized, setIsKeyAuthorized] = useState(!!localStorage.getItem('LQI_API_KEY'));

  if (!isKeyAuthorized) {
    return <KeyGateway onAuthorized={() => setIsKeyAuthorized(true)} />;
  }

  return (
    <div className="flex min-h-screen bg-[#020202] text-zinc-400 antialiased selection:bg-blue-500/30 selection:text-blue-200 font-sans">
      <div className="fixed inset-0 pointer-events-none opacity-[0.03] z-0 overflow-hidden">
        <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:40px_40px]"></div>
      </div>

      <aside className="w-80 fixed h-full bg-[#050505] border-r border-zinc-900 p-8 flex flex-col print:hidden z-50">
        <div className="mb-14 px-4 flex items-center space-x-4">
          <div className="w-12 h-12 bg-white rounded-2xl flex items-center justify-center shadow-2xl shadow-white/5">
            <Cpu size={24} className="text-black" />
          </div>
          <div>
            <h1 className="text-lg font-black italic tracking-tighter text-white uppercase leading-none">
              Lumina <span className="text-blue-500 not-italic">Quantum</span>
            </h1>
            <p className="text-[9px] uppercase tracking-[0.4em] font-bold text-zinc-600 mt-1">Institutional Ledger</p>
          </div>
        </div>
        
        <nav className="flex-1 space-y-2 overflow-y-auto custom-scrollbar pr-2 pb-10">
          <NavigationLinks />
        </nav>

        <div className="mt-auto pt-10 border-t border-zinc-900">
          <SidebarItem icon={SettingsIcon} label="System Config" path="/settings" active={window.location.hash.includes('settings')} />
          <div className="mt-8 p-6 bg-zinc-950 border border-zinc-900 rounded-[2rem] flex items-center justify-between group cursor-help shadow-2xl">
            <div className="flex items-center gap-3">
              <Activity size={16} className="text-emerald-500" />
              <span className="text-[9px] font-black uppercase tracking-widest text-zinc-500">Node Reachable</span>
            </div>
            <div className="w-2 h-2 bg-emerald-500 rounded-full animate-pulse shadow-[0_0_8px_rgba(16,185,129,0.5)]"></div>
          </div>
        </div>
      </aside>

      <main className="flex-1 ml-80 min-h-screen flex flex-col relative z-10 print:ml-0 print:bg-white">
        <Header user={user} onLogout={onLogout} />
        <div className="px-10 pb-20 print:p-0">
          <Routes>
            {routes.map((route) => (
              <Route key={route.path} path={route.path} element={<route.component />} />
            ))}
            {/* Relative catch-all for terminal paths */}
            <Route path="*" element={<Navigate to="/" replace />} />
          </Routes>
        </div>
      </main>
    </div>
  );
};

const NavigationLinks = () => {
  const location = useLocation();
  const categories = ['core', 'registry', 'finance', 'intelligence', 'system', 'admin'];

  return (
    <div className="space-y-10">
      {categories.map(cat => {
        const catRoutes = routes.filter(r => r.showInSidebar && r.category === cat);
        if (catRoutes.length === 0) return null;
        return (
          <div key={cat} className="space-y-3">
             <p className="px-6 text-[8px] font-black uppercase text-zinc-700 tracking-[0.5em] mb-4">{cat.toUpperCase()}_V6_SEGMENT</p>
             {catRoutes.map((route) => (
              <SidebarItem 
                key={route.path} 
                icon={route.icon} 
                label={route.label} 
                path={route.path} 
                active={location.pathname === route.path} 
              />
            ))}
          </div>
        );
      })}
    </div>
  );
};

const App: React.FC = () => {
  const [currentUser, setCurrentUser] = useState<UserSession | null>(null);
  const [isAuthChecked, setIsAuthChecked] = useState<boolean>(false);

  const checkAuthStatus = async () => {
    const { user } = await apiClient.auth.me();
    setCurrentUser(user);
    setIsAuthChecked(true);
  };

  useEffect(() => {
    checkAuthStatus();
    window.addEventListener('auth-update', checkAuthStatus);
    return () => window.removeEventListener('auth-update', checkAuthStatus);
  }, []);

  const handleLogout = async () => {
    await apiClient.auth.logout();
    setCurrentUser(null);
    window.dispatchEvent(new Event('auth-update'));
  };

  if (!isAuthChecked) {
    return (
      <div className="min-h-screen bg-[#020202] flex flex-col items-center justify-center space-y-8">
        <Loader2 className="animate-spin text-blue-500" size={48} />
        <p className="text-[10px] font-black text-zinc-600 uppercase tracking-[0.4em] animate-pulse">Synchronizing Node Registry...</p>
      </div>
    );
  }

  return (
    <HashRouter>
      <Routes>
        <Route path="/" element={<Landing />} />
        <Route path="/login" element={<Login />} />
        <Route path="/airdrop" element={<Airdrop />} />
        <Route path="/manifesto" element={<PrivacyPolicy />} />
        <Route path="/documentation" element={<Documentation />} />
        
        {/* The terminal area handles its own key authorization logic inside */}
        <Route 
          path="/*" 
          element={
            currentUser ? (
              <PrivateTerminal user={currentUser} onLogout={handleLogout} />
            ) : (
              <Navigate to="/login" replace />
            )
          } 
        />
      </Routes>
    </HashRouter>
  );
};

export default App;