'use client';

import {TopNav} from '@astryxdesign/core/TopNav';
import {HStack} from '@astryxdesign/core/Layout';
import {IconButton} from '@astryxdesign/core/IconButton';
import {Icon} from '@astryxdesign/core/Icon';
import {DropdownMenu} from '@astryxdesign/core/DropdownMenu';
import {Avatar} from '@astryxdesign/core/Avatar';
import {Divider} from '@astryxdesign/core/Divider';
import {ICONS} from '@/lib/icons';
import {GlobalSearch} from './GlobalSearch';
import {StoreSwitcher} from './StoreSwitcher';
import {RangePicker} from './RangePicker';
import {CopilotToggle} from '@/features/copilot/CopilotToggle';

/**
 * Compact application bar. Scope controls (store, range) live at the start
 * because they govern the whole workspace; identity and alerts live at the end.
 */
export function AppTopNav() {
  return (
    <TopNav
      label="Workspace"
      startContent={
        <HStack gap={1} vAlign="center">
          <StoreSwitcher />
          <Divider orientation="vertical" />
          <RangePicker />
        </HStack>
      }
      centerContent={<GlobalSearch />}
      endContent={
        <HStack gap={1} vAlign="center">
          <CopilotToggle />
          <IconButton
            icon={<Icon icon={ICONS.notifications} />}
            label="Notifications"
            variant="ghost"
          />
          <DropdownMenu
            hasChevron={false}
            button={{
              variant: 'ghost',
              isIconOnly: true,
              label: 'Account',
              icon: <Avatar name="Suriya N" size="sm" tooltip={false} />,
            }}
            menuWidth={200}
            items={[
              {
                type: 'section',
                title: 'suriya@nearle.in',
                items: [
                  {label: 'Profile', icon: ICONS.profile},
                  {label: 'Settings', icon: ICONS.settings},
                ],
              },
              {type: 'divider'},
              {label: 'Sign out', icon: ICONS.signOut},
            ]}
          />
        </HStack>
      }
    />
  );
}