'use client';

import Link from 'next/link';
import { motion } from 'framer-motion';
import { Brain, Ghost, Home, Box, Settings, Network, Factory, LayoutDashboard, FileText, Sparkles, TestTube } from 'lucide-react';
import { usePathname } from 'next/navigation';
import { BRAND, VOCAB } from '@/lib/white-label/constants';

export function InternalHeader() {
  const pathname = usePathname();
  const isGhostControl = pathname?.startsWith('/ghost-control');
  const isDarkFactory = pathname?.startsWith('/dark-factory');
  const isWeftSandbox = pathname?.startsWith('/apps/weft-sandbox');

  const title = isGhostControl ? VOCAB.controlPanel : isDarkFactory ? VOCAB.factory : isWeftSandbox ? 'Weft Sandbox' : 'Internal';
  const Icon = isGhostControl ? Brain : isWeftSandbox ? Box : Ghost;

  return (
    <header className="fixed top-0 left-0 right-0 z-50 bg-brand-bg/90 backdrop-blur-xl border-b border-brand-deep/20">
      <div className="max-w-7xl mx-auto px-4">
        <div className="flex items-center justify-between h-16">
          {/* Logo / Title */}
          <div className="flex items-center gap-3">
            <motion.div
              initial={{ rotate: -10 }}
              animate={{ rotate: 0 }}
              transition={{ duration: 0.5 }}
            >
              <Icon className="w-8 h-8 text-brand" />
            </motion.div>
            <div>
              <h1 className="text-lg font-bold gradient-text">{title}</h1>
              <p className="text-xs text-gray-500">{BRAND.companyName}</p>
            </div>
          </div>

          {/* Navigation */}
          <nav className="flex items-center gap-1 md:gap-2">
            {[
              { href: '/ghost-control', icon: LayoutDashboard, label: 'Dashboard' },
              { href: '/ghost-control/agents', icon: Network, label: 'Agents' },
              { href: '/ghost-control/reports', icon: FileText, label: 'Reports' },

              { href: '/ghost-control/memory-system', icon: Brain, label: 'Memory' },
              { href: '/ghost-control/e2e-tests', icon: TestTube, label: 'E2E Tests' },
              { href: '/ghost-control/configuration', icon: Settings, label: 'Configuration' },
              { href: '/ghost-control/dark-factory', icon: Factory, label: VOCAB.factory },
              { href: '/', icon: Home, label: 'Home' },
            ].map(item => {
              const isActive = pathname === item.href || (item.href !== '/' && item.href !== '/ghost-control' && pathname?.startsWith(item.href));
              return (
                <Link
                  key={item.href}
                  href={item.href}
                  className={`flex items-center gap-1.5 px-2 md:px-3 py-1.5 rounded-lg text-xs transition-all ${
                    isActive
                      ? 'text-brand bg-brand-deep/10'
                      : 'text-gray-400 hover:text-white hover:bg-white/5'
                  }`}
                >
                  <item.icon className="w-3.5 h-3.5" />
                  <span className="hidden md:inline">{item.label}</span>
                </Link>
              );
            })}
          </nav>
        </div>
      </div>
    </header>
  );
}
