import { useState, useEffect } from 'react';
import Link from 'next/link';
import { 
  Shield, 
  Target, 
  Zap, 
  BarChart3, 
  Scale, 
  FileText, 
  Users, 
  Settings,
  Menu,
  X,
  ExternalLink
} from 'lucide-react';

export default function Layout({ children, activeSection = 'dashboard' }) {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const navItems = [
    { id: 'dashboard', label: 'Command Center', icon: Target, href: '/' },
    { id: 'rebuttal', label: 'Kill-Shot Generator', icon: Zap, href: '/rebuttal' },
    { id: 'verification', label: 'Truth Forge', icon: Shield, href: '/verification' },
    { id: 'analytics', label: 'War Analytics', icon: BarChart3, href: '/analytics' },
    { id: 'legal', label: 'Legal Arsenal', icon: Scale, href: '/legal' },
    { id: 'intelligence', label: 'Intel Vault', icon: FileText, href: '/intelligence' },
    { id: 'network', label: 'War Room', icon: Users, href: '/network' },
    { id: 'config', label: 'TITAN Config', icon: Settings, href: '/config' },
  ];

  const anycoderLink = (
    <Link 
      href="https://huggingface.co/spaces/akhaliq/anycoder"
      target="_blank"
      rel="noopener noreferrer"
      className="flex items-center gap-2 text-crimson-400 hover:text-crimson-300 transition-colors text-sm font-mono"
    >
      <span className="w-2 h-2 bg-crimson-500 rounded-full animate-pulse" />
      Built with anycoder
      <ExternalLink className="w-3 h-3" />
    </Link>
  );

  return (
    <div className="min-h-screen bg-obsidian-950 flex">
      {/* Mobile Overlay */}
      {sidebarOpen && (
        <div 
          className="fixed inset-0 bg-black/80 z-40 lg:hidden"
          onClick={() => setSidebarOpen(false)}
        />
      )}

      {/* Sidebar */}
      <aside className={`
        fixed lg:static inset-y-0 left-0 z-50 w-72 glass-panel border-r border-crimson-900/30
        transform transition-transform duration-300 ease-out
        ${sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
      `}>
        {/* Logo Section */}
        <div className="p-6 border-b border-crimson-900/30">
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 rounded-lg bg-gradient-to-br from-crimson-600 to-crimson-900 flex items-center justify-center crimson-glow">
              <Shield className="w-7 h-7 text-white" />
            </div>
            <div>
              <h1 className="text-xl font-bold tracking-tight text-white">
                TITAN <span className="text-crimson-500">V10.0</span>
              </h1>
              <p className="text-xs text-crimson-400 font-mono uppercase tracking-wider">
                Truth Anchor Protocol
              </p>
            </div>
          </div>
          <div className="mt-4 flex items-center gap-2">
            <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
            <span className="text-xs text-green-400 font-mono">DOMINANCE-LOCKED</span>
          </div>
          <div className="mt-2">
            {anycoderLink}
          </div>
        </div>

        {/* Navigation */}
        <nav className="p-4 space-y-1">
          {navItems.map((item) => {
            const Icon = item.icon;
            const isActive = activeSection === item.id;
            return (
              <Link
                key={item.id}
                href={item.href}
                onClick={() => setSidebarOpen(false)}
                className={`
                  flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200
                  ${isActive 
                    ? 'bg-crimson-900/40 text-crimson-300 border border-crimson-700/50 crimson-glow' 
                    : 'text-obsidian-300 hover:bg-obsidian-800/50 hover:text-white'
                  }
                `}
              >
                <Icon className={`w-5 h-5 ${isActive ? 'text-crimson-400' : ''}`} />
                <span className="font-medium text-sm">{item.label}</span>
                {isActive && <div className="ml-auto w-1.5 h-1.5 bg-crimson-500 rounded-full status-active" />}
              </Link>
            );
          })}
        </nav>

        {/* Status Panel */}
        <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-crimson-900/30">
          <div className="glass rounded-lg p-4 space-y-3">
            <div className="flex justify-between items-center">
              <span className="text-xs text-obsidian-400 font-mono">AGGRESSION</span>
              <span className="text-sm font-bold text-crimson-400">10/10</span>
            </div>
            <div className="h-2 bg-obsidian-800 rounded-full overflow-hidden">
              <div className="h-full w-full bg-gradient-to-r from-crimson-600 to-crimson-400 rounded-full status-active" />
            </div>
            <div className="flex justify-between items-center text-xs font-mono">
              <span className="text-green-400">COURT-IMMUNE</span>
              <span className="text-amber-400">HYBRID-JURIS</span>
            </div>
          </div>
        </div>
      </aside>

      {/* Main Content */}
      <div className="flex-1 flex flex-col min-w-0">
        {/* Header */}
        <header className={`
          sticky top-0 z-30 glass border-b border-crimson-900/30
          ${scrolled ? 'shadow-lg shadow-crimson-900/10' : ''}
        `}>
          <div className="flex items-center justify-between px-4 lg:px-8 py-4">
            <div className="flex items-center gap-4">
              <button
                onClick={() => setSidebarOpen(true)}
                className="lg:hidden p-2 rounded-lg hover:bg-obsidian-800/50 text-obsidian-300"
              >
                <Menu className="w-6 h-6" />
              </button>
              <div className="hidden sm:flex items-center gap-4">
                <span className="text-xs font-mono text-crimson-400 border border-crimson-800 px-2 py-1 rounded">
                  V10.0 TRUTH ANCHOR
                </span>
                <span className="text-xs font-mono text-green-400">
                  ● SYSTEM OPTIMAL
                </span>
              </div>
            </div>
            <div className="flex items-center gap-4">
              <div className="hidden md:flex items-center gap-2 text-xs font-mono text-obsidian-400">
                <span>NY §201</span>
                <span className="text-crimson-500">|</span>
                <span>CA §5000</span>
                <span className="text-crimson-500">|</span>
                <span>UCL §17200</span>
              </div>
              <div className="w-8 h-8 rounded-full bg-gradient-to-br from-crimson-600 to-crimson-900 flex items-center justify-center crimson-glow">
                <span className="text-sm font-bold text-white">R</span>
              </div>
            </div>
          </div>
        </header>

        {/* Page Content */}
        <main className="flex-1 overflow-auto p-4 lg:p-8">
          {children}
        </main>
      </div>
    </div>
  );
}