'use client';

import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Search, Bell, Command } from 'lucide-react';
import { usePathname } from 'next/navigation';
import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
import { useState, useEffect } from 'react';
import { AppShellBar } from './AppShellBar';
import { CommandModal } from './CommandModal';
import { UserPill } from '@/components/profile/UserPill';

export function AppHeader() {
  const pathname = usePathname();
  const { data: session } = useCurrentSession();
  const isAuthenticated = !!session;
  const [isCommandOpen, setIsCommandOpen] = useState(false);
  
  // Simple breadcrumb logic
  const pathSegments = pathname.split('/').filter(Boolean);
  const breadcrumbs = pathSegments.length > 0 
    ? pathSegments.map(s => s.charAt(0).toUpperCase() + s.slice(1)).join(' / ')
    : 'Home';

  // Cmd+K Listener
  useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        setIsCommandOpen((open) => !open);
      }
    };
    document.addEventListener('keydown', down);
    return () => document.removeEventListener('keydown', down);
  }, []);

  return (
    <>
      <AppShellBar position="top">
        {/* Left: Context & Search */}
        <Box display="flex" alignItems="center" gap={6} flex={1}>
          <Text size="sm" className="text-text-med font-medium tracking-wide whitespace-nowrap min-w-[100px]">
            {breadcrumbs}
          </Text>

          {/* Command Search Trigger */}
          <button 
            type="button"
            onClick={() => setIsCommandOpen(true)}
            className="hidden md:flex items-center gap-3 px-3 h-9 bg-surface-charcoal border border-outline-steel rounded-md w-96 text-text-low hover:border-text-low/50 hover:text-text-med transition-all group cursor-pointer"
          >
            <Search size={14} className="text-text-low group-hover:text-text-med transition-colors" />
            <span className="flex-1 text-left text-sm text-text-low/70">
              Search or type a command...
            </span>
            <div className="flex items-center gap-1 px-1.5 py-0.5 rounded bg-white/5 border border-white/5 text-[10px] font-mono text-text-low">
              <Command size={10} />
              <span>K</span>
            </div>
          </button>
        </Box>

        {/* Right: User & Notifications */}
        <Box display="flex" alignItems="center" gap={4}>
          {/* Notifications - Only when authed */}
          {isAuthenticated && (
            <Box 
              as="button" 
              className="w-8 h-8 flex items-center justify-center text-text-low hover:text-text-high hover:bg-white/5 transition-colors rounded-md relative"
              title="Notifications"
            >
              <Bell size={16} />
              <Box className="absolute top-2 right-2 w-1.5 h-1.5 bg-primary-accent rounded-full ring-2 ring-base-black" />
            </Box>
          )}

          {/* User Pill (Handles Auth & Menu) */}
          <UserPill />
        </Box>
      </AppShellBar>

      <CommandModal isOpen={isCommandOpen} onClose={() => setIsCommandOpen(false)} />
    </>
  );
}