'use client';

import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Search, Bell, User, ChevronDown, Command } from 'lucide-react';
import { usePathname } from 'next/navigation';
import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
import { routes } from '@/lib/routing/RouteConfig';
import { Button } from '@/ui/Button';
import { useState, useEffect } from 'react';
import { AppShellBar } from './AppShellBar';

export function AppHeader() {
  const pathname = usePathname();
  const { data: session } = useCurrentSession();
  const isAuthenticated = !!session;
  
  // 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';

  // Clock
  const [time, setTime] = useState<string>('');
  useEffect(() => {
    const updateTime = () => {
      const now = new Date();
      setTime(now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false }));
    };
    updateTime();
    const interval = setInterval(updateTime, 60000);
    return () => clearInterval(interval);
  }, []);

  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 - Refined */}
        <Box 
          className="hidden md:flex items-center gap-3 px-3 h-9 bg-surface-charcoal/50 border border-outline-steel rounded-md w-96 text-text-low hover:border-text-low/50 focus-within:border-primary-accent focus-within:ring-1 focus-within:ring-primary-accent/20 transition-all cursor-text group"
        >
          <Search size={14} className="text-text-low group-hover:text-text-med transition-colors" />
          <Box 
            as="input"
            type="text" 
            placeholder="Search or type a command..." 
            className="bg-transparent border-none outline-none text-sm w-full text-text-high placeholder:text-text-low/50 h-full"
          />
          <Box 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>
          </Box>
        </Box>
      </Box>

      {/* Right: System Status & User */}
      <Box display="flex" alignItems="center" gap={4}>
        {/* System Time */}
        <Box className="hidden lg:flex items-center gap-2 text-text-med border-r border-outline-steel pr-4 h-6">
          <Text size="sm" font="mono" className="tracking-widest tabular-nums">
            {time} UTC
          </Text>
        </Box>

        {/* Notifications */}
        <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 Menu */}
        {isAuthenticated ? (
          <Box display="flex" alignItems="center" gap={3} className="pl-2 cursor-pointer group">
            <Box 
              className="w-8 h-8 rounded-full bg-surface-charcoal flex items-center justify-center text-text-med border border-outline-steel group-hover:border-primary-accent transition-colors"
            >
              <User size={14} />
            </Box>
            <Box className="hidden md:block text-left">
              <Text size="sm" weight="medium" className="text-text-high leading-none group-hover:text-primary-accent transition-colors">
                {session.user.displayName || 'Driver'}
              </Text>
            </Box>
            <ChevronDown size={12} className="text-text-low group-hover:text-text-high transition-colors" />
          </Box>
        ) : (
          <Box display="flex" gap={2}>
            <Button 
              as="a" 
              href={routes.auth.login} 
              variant="ghost" 
              size="sm"
            >
              Sign In
            </Button>
            <Button 
              as="a" 
              href={routes.auth.signup} 
              variant="primary" 
              size="sm"
            >
              Join
            </Button>
          </Box>
        )}
      </Box>
    </AppShellBar>
  );
}