import { useLayoutEffect, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { useQueryClient } from '@tanstack/react-query';

import { TopNav } from '@astryxdesign/core/TopNav';
import { TopNavHeading } from '@astryxdesign/core/TopNav';
import { DropdownMenu } from '@astryxdesign/core/DropdownMenu';
import { Popover } from '@astryxdesign/core/Popover';
import { IconButton } from '@astryxdesign/core/IconButton';
import { Avatar } from '@astryxdesign/core/Avatar';
import { HStack } from '@astryxdesign/core/HStack';
import { VStack } from '@astryxdesign/core/VStack';
import { Text } from '@astryxdesign/core/Text';
import { Heading } from '@astryxdesign/core/Heading';
import { Divider } from '@astryxdesign/core/Divider';

import { TbBoxMultiple1 } from 'react-icons/tb';
import { GrMultiple } from 'react-icons/gr';
import {
  BellOutlined,
  WindowsOutlined,
  EditOutlined,
  LogoutOutlined,
  GiftOutlined,
  MessageOutlined,
  SettingOutlined
} from '@ant-design/icons';

import avatar1 from 'assets/images/users/avatar-1.png';
import logo from 'assets/images/doormile-logo.png';
import { clearFcmToken } from 'store/reducers/fcmSlice';
import { logoutUser } from 'store/reducers/loginUserSlice';
import { performSessionLogout } from 'utils/session';
import { DT } from 'themes/dt/tokens';

// doormile-logo.png is a white asset; recolour to brand red for this
// light TopNav surface (same trick login.js uses for its white-card logo).
const logoStyle = {
  height: 24,
  width: 'auto',
  filter: 'brightness(0) saturate(100%) invert(15%) sepia(93%) saturate(5437%) hue-rotate(346deg) brightness(81%) contrast(92%)'
};

const NotificationPanel = () => (
  <VStack gap={0} padding={0} width={320}>
    <HStack justify="between" vAlign="center" padding={2}>
      <Heading level={5}>Notifications</Heading>
    </HStack>
    <Divider />
    <VStack gap={0} padding={0}>
      {[
        { icon: <GiftOutlined />, text: "It's Cristina danny's birthday today.", time: '2 min ago' },
        { icon: <MessageOutlined />, text: 'Aida Burg commented your post.', time: '5 August' },
        { icon: <SettingOutlined />, text: 'Your profile is 60% complete.', time: '7 hours ago' }
      ].map((n) => (
        <HStack key={n.text} gap={1.5} vAlign="center" padding={2}>
          <Avatar name={n.text} size="sm" />
          <VStack gap={0} padding={0}>
            <Text type="body">{n.text}</Text>
            <Text type="supporting">{n.time}</Text>
          </VStack>
        </HStack>
      ))}
    </VStack>
    <Divider />
    <HStack justify="center" padding={1.5}>
      <Text type="label" color="accent">
        View all
      </Text>
    </HStack>
  </VStack>
);

// ==============================|| MAIN LAYOUT - TOP NAV ||============================== //

const AppTopNav = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const queryClient = useQueryClient();
  const topNavRef = useRef(null);
  const [headerHeight, setHeaderHeight] = useState(null);

  const firstname = localStorage.getItem('firstname') || '';

  const handleLogout = () => {
    performSessionLogout({ queryClient, dispatch, clearFcmToken, logoutUser });
  };

  // AppShell (height="auto") pins the sticky side nav below the header using
  // a --appshell-header-height CSS var it measures itself via ResizeObserver
  // (AppShell.tsx), inside a useEffect that only runs (and paints) *after*
  // the first frame. That one-frame gap is what made the side nav's sticky
  // offset settle wrong and visibly jump/drift on scroll. Re-measure the
  // header independently here in useLayoutEffect (synchronous, before the
  // browser paints) and force the same variable with !important on the
  // shell root — an author-stylesheet !important rule beats AppShell's own
  // non-important inline style.setProperty() call on that same element, so
  // this always wins regardless of what the internal measurement produced.
  useLayoutEffect(() => {
    const el = topNavRef.current;
    if (!el) return undefined;

    const updateHeight = () => setHeaderHeight(el.getBoundingClientRect().height);
    updateHeight();

    const observer = new ResizeObserver(updateHeight);
    observer.observe(el);
    return () => observer.disconnect();
  }, []);

  return (
    <>
      <TopNav
        ref={topNavRef}
        label="Doormile Express"
        style={{
          backgroundColor: DT.surface,
          borderBottom: `1px solid ${DT.borderSubtle}`,
          boxShadow: DT.shadowMd
        }}
        heading={<TopNavHeading logo={<img src={logo} alt="Doormile Express" style={logoStyle} />} headingHref="/doormile/dispatch" />}
        endContent={
          <HStack gap={1} vAlign="center" padding={0}>
            <DropdownMenu
              hasChevron={false}
              button={{ label: 'Quick create', icon: <WindowsOutlined />, isIconOnly: true, variant: 'ghost' }}
              items={[
                { label: 'Create Order', icon: <TbBoxMultiple1 />, onClick: () => navigate('/doormile/orders/create') },
                { label: 'Create Multiple Order', icon: <GrMultiple />, onClick: () => navigate('/doormile/orders/createorders') }
              ]}
            />

            <Popover placement="below" alignment="end" content={<NotificationPanel />} label="Notifications">
              <IconButton label="Notifications" tooltip="Notifications" variant="ghost" icon={<BellOutlined />} />
            </Popover>

            <DropdownMenu
              hasChevron={false}
              button={{
                label: firstname || 'Profile',
                icon: <Avatar src={avatar1} name={firstname} size="xsm" tooltip={false} />,
                variant: 'ghost'
              }}
              items={[
                { label: 'View Profile', icon: <EditOutlined />, onClick: () => navigate('/viewprofile') },
                { type: 'divider' },
                { label: 'Logout', icon: <LogoutOutlined />, onClick: handleLogout }
              ]}
            />
          </HStack>
        }
      />
      {headerHeight != null && (
        <style>{`
          .astryx-app-shell {
            --appshell-header-height: ${headerHeight}px !important;
          }
        `}</style>
      )}
    </>
  );
};

export default AppTopNav;
