import { useState, useRef, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import {
  AppBar,
  Toolbar,
  IconButton,
  Box,
  InputBase,
  Badge,
  Avatar,
  Typography,
  Menu,
  MenuItem,
  Divider,
  ListItemIcon,
  ListItemText,
  Tooltip,
  Button,
  Stack,
  Select,
  alpha
} from '@mui/material';
import MenuIcon from '@mui/icons-material/Menu';
import SearchIcon from '@mui/icons-material/Search';
import NotificationsNoneIcon from '@mui/icons-material/NotificationsNone';
import PersonOutlineIcon from '@mui/icons-material/PersonOutline';
import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
import LogoutIcon from '@mui/icons-material/Logout';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import PlaceOutlinedIcon from '@mui/icons-material/PlaceOutlined';
import Inventory2OutlinedIcon from '@mui/icons-material/Inventory2Outlined';
import TwoWheelerOutlinedIcon from '@mui/icons-material/TwoWheelerOutlined';
import PaymentsOutlinedIcon from '@mui/icons-material/PaymentsOutlined';
import AssignmentOutlinedIcon from '@mui/icons-material/AssignmentOutlined';
import DoneAllIcon from '@mui/icons-material/DoneAll';

import Logo from '@/components/Logo';
import { locations } from '@/data/mock';
import { useFilters } from '@/store/Filters';

const RED = '#C01227';      // brand accent (reserved for attention: avatar, unread dots)

const INITIAL_NOTIFICATIONS = [
  { id: 1, icon: Inventory2OutlinedIcon, title: 'New order #ORD-10482 placed', time: '2 min ago', to: '/orders', read: false },
  { id: 2, icon: TwoWheelerOutlinedIcon, title: 'Rider Imran went online', time: '18 min ago', to: '/fleet', read: false },
  { id: 3, icon: PaymentsOutlinedIcon, title: 'Invoice INV-2041 marked paid', time: '1 hr ago', to: '/invoice', read: false },
  { id: 4, icon: AssignmentOutlinedIcon, title: 'MileTruth AI re-optimized 41 routes', time: '3 hrs ago', to: '/dispatch', read: true }
];

export default function Header({ onToggle }) {
  const navigate = useNavigate();
  const [account, setAccount] = useState(null);
  const [notifAnchor, setNotifAnchor] = useState(null);
  const [notifications, setNotifications] = useState(INITIAL_NOTIFICATIONS);
  const [search, setSearch] = useState('');
  const { location, setLocation } = useFilters(); // global location — single source of truth
  const searchRef = useRef(null);

  const unread = notifications.filter((n) => !n.read).length;

  // ⌘K / Ctrl+K focuses global search
  useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
        e.preventDefault();
        searchRef.current?.focus();
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const openNotif = (e) => setNotifAnchor(e.currentTarget);
  const closeNotif = () => setNotifAnchor(null);
  const markAllRead = () => setNotifications((prev) => prev.map((n) => ({ ...n, read: true })));
  const onNotifClick = (n) => {
    setNotifications((prev) => prev.map((x) => (x.id === n.id ? { ...x, read: true } : x)));
    closeNotif();
    navigate(n.to);
  };

  const submitSearch = (e) => {
    e.preventDefault();
    const q = search.trim();
    if (q) navigate(`/orders?q=${encodeURIComponent(q)}`);
  };

  return (
    <AppBar
      position="fixed"
      elevation={0}
      sx={{
        bgcolor: '#FFFFFF',
        color: 'grey.800',
        zIndex: (t) => t.zIndex.drawer + 1,
        borderBottom: '1px solid',
        borderColor: 'grey.200'
      }}
    >
      <Toolbar sx={{ minHeight: 64, px: { xs: 1.5, sm: 2.5 }, gap: 1 }}>
        {/* LEFT — hamburger + brand (equal-flex zone) */}
        <Box sx={{ flex: 1, minWidth: 0, display: 'flex', alignItems: 'center', gap: 1 }}>
          <IconButton edge="start" onClick={onToggle} sx={{ color: 'grey.700' }}>
            <MenuIcon />
          </IconButton>
          <Box
            onClick={() => navigate('/dashboard')}
            sx={{ display: 'flex', alignItems: 'center', cursor: 'pointer', flexShrink: 0 }}
          >
            <Logo height={24} />
          </Box>
        </Box>

        {/* CENTER — global search, the primary nav element (fixed width = stays truly centered) */}
        <Box
          component="form"
          onSubmit={submitSearch}
          sx={{
            display: { xs: 'none', sm: 'flex' },
            flexShrink: 0,
            alignItems: 'center',
            height: 46,
            px: 1.75,
            bgcolor: 'grey.50',
            border: '1px solid',
            borderColor: 'grey.200',
            borderRadius: 2.5,
            width: { sm: 300, md: 460, lg: 560 },
            transition: 'all 0.15s ease',
            '&:hover': { borderColor: 'grey.300' },
            '&:focus-within': { borderColor: 'primary.main', bgcolor: '#fff', boxShadow: '0 0 0 3px rgba(192,18,39,0.08)' }
          }}
        >
          <SearchIcon sx={{ fontSize: 20, mr: 1, color: 'grey.500' }} />
          <InputBase
            inputRef={searchRef}
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="Search orders, shipments, riders, customers…"
            sx={{ color: 'grey.800', fontSize: '0.875rem', flex: 1 }}
            inputProps={{ 'aria-label': 'search' }}
          />
          <Box
            sx={{
              display: { xs: 'none', md: 'flex' },
              alignItems: 'center',
              gap: 0.25,
              px: 0.75,
              py: 0.4,
              ml: 1,
              borderRadius: 1,
              border: '1px solid',
              borderColor: 'grey.300',
              bgcolor: '#fff',
              color: 'grey.500',
              fontSize: '0.6875rem',
              fontWeight: 700,
              lineHeight: 1,
              flexShrink: 0
            }}
          >
            ⌘K
          </Box>
        </Box>

        {/* RIGHT — location + notifications + profile (equal-flex zone, right-aligned) */}
        <Box sx={{ flex: 1, minWidth: 0, display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 0.5 }}>
          <Select
            value={location}
            onChange={(e) => setLocation(e.target.value)}
            size="small"
            IconComponent={KeyboardArrowDownIcon}
            startAdornment={<PlaceOutlinedIcon sx={{ fontSize: 18, color: 'grey.500', mr: 0.75 }} />}
            sx={{
              display: { xs: 'none', md: 'flex' },
              minWidth: 168,
              bgcolor: 'grey.50',
              '& .MuiOutlinedInput-notchedOutline': { borderColor: 'grey.200' },
              '& .MuiSelect-select': { display: 'flex', alignItems: 'center', fontSize: '0.8125rem', fontWeight: 600, color: 'grey.700' }
            }}
          >
            <MenuItem value="all">All Locations</MenuItem>
            {locations.map((l) => (
              <MenuItem key={l} value={l}>{l}</MenuItem>
            ))}
          </Select>

          <Tooltip title="Notifications">
            <IconButton onClick={openNotif} sx={{ color: 'grey.700' }}>
              <Badge badgeContent={unread} color="error">
                <NotificationsNoneIcon />
              </Badge>
            </IconButton>
          </Tooltip>

          <Box
            onClick={(e) => setAccount(e.currentTarget)}
            sx={{ display: 'flex', alignItems: 'center', gap: 1, cursor: 'pointer', py: 0.5, px: 0.5, borderRadius: 2, '&:hover': { bgcolor: 'grey.100' } }}
          >
            <Avatar sx={{ width: 34, height: 34, bgcolor: RED, color: '#fff', fontWeight: 700, fontSize: '0.8rem' }}>AD</Avatar>
            <Box sx={{ display: { xs: 'none', md: 'block' }, lineHeight: 1.1 }}>
              <Typography variant="subtitle2" sx={{ color: 'grey.800', fontWeight: 600 }}>
                Aman Deshmukh
              </Typography>
              <Typography variant="caption" sx={{ color: 'grey.500' }}>
                Operations Admin
              </Typography>
            </Box>
            <KeyboardArrowDownIcon sx={{ fontSize: 18, color: 'grey.500', display: { xs: 'none', md: 'block' } }} />
          </Box>
        </Box>

        {/* Notifications dropdown */}
        <Menu
          anchorEl={notifAnchor}
          open={Boolean(notifAnchor)}
          onClose={closeNotif}
          transformOrigin={{ horizontal: 'right', vertical: 'top' }}
          anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
          PaperProps={{ sx: { mt: 1, width: 360, maxWidth: '90vw' } }}
        >
          <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ px: 2, py: 1.25 }}>
            <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
              Notifications
            </Typography>
            <Button size="small" startIcon={<DoneAllIcon fontSize="small" />} onClick={markAllRead} disabled={unread === 0}>
              Mark all read
            </Button>
          </Stack>
          <Divider />
          {notifications.length === 0 && (
            <MenuItem disabled>
              <ListItemText primary="No notifications" />
            </MenuItem>
          )}
          {notifications.map((n) => {
            const Icon = n.icon;
            return (
              <MenuItem key={n.id} onClick={() => onNotifClick(n)} sx={{ py: 1.25, whiteSpace: 'normal', alignItems: 'flex-start' }}>
                <ListItemIcon sx={{ mt: 0.25 }}>
                  <Avatar sx={{ width: 34, height: 34, bgcolor: n.read ? 'grey.100' : alpha(RED, 0.12), color: n.read ? 'grey.500' : RED }}>
                    <Icon fontSize="small" />
                  </Avatar>
                </ListItemIcon>
                <ListItemText
                  primary={n.title}
                  secondary={n.time}
                  primaryTypographyProps={{ fontSize: '0.875rem', fontWeight: n.read ? 500 : 700 }}
                  secondaryTypographyProps={{ fontSize: '0.75rem' }}
                />
                {!n.read && <Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: RED, mt: 1, ml: 0.5 }} />}
              </MenuItem>
            );
          })}
          <Divider />
          <MenuItem onClick={() => { closeNotif(); navigate('/dashboard'); }} sx={{ justifyContent: 'center', color: 'primary.main', fontWeight: 600 }}>
            View all activity
          </MenuItem>
        </Menu>

        {/* Account dropdown */}
        <Menu
          anchorEl={account}
          open={Boolean(account)}
          onClose={() => setAccount(null)}
          transformOrigin={{ horizontal: 'right', vertical: 'top' }}
          anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
          PaperProps={{ sx: { mt: 1, minWidth: 200 } }}
        >
          <MenuItem onClick={() => { setAccount(null); navigate('/profile'); }}>
            <ListItemIcon><PersonOutlineIcon fontSize="small" /></ListItemIcon>
            View Profile
          </MenuItem>
          <MenuItem onClick={() => { setAccount(null); navigate('/settings'); }}>
            <ListItemIcon><SettingsOutlinedIcon fontSize="small" /></ListItemIcon>
            Settings
          </MenuItem>
          <Divider />
          <MenuItem onClick={() => { setAccount(null); navigate('/login'); }} sx={{ color: 'error.main' }}>
            <ListItemIcon><LogoutIcon fontSize="small" color="error" /></ListItemIcon>
            Logout
          </MenuItem>
        </Menu>
      </Toolbar>
    </AppBar>
  );
}