import { useState } from 'react';
import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';

import Menu from '@design-system/Menu';
import MenuItem from '@design-system/Menu/components/MenuItem';
import { Box, Stack } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react-vite';
import { IconCoins } from '@tabler/icons-react';

import { colorPalette } from '../../../../theme/hugo/colors';

import HomeHeader from '.';

const companyLogo =
  'https://1000logos.net/wp-content/uploads/2016/10/Bank-of-America-Emblem.png';

const TemplateContent = () => {
  return (
    <Stack
      sx={{
        width: '300px',
        height: '200px',
        borderRadius: '16px',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: colorPalette.hugoBackground.neutralBgTerciary,
      }}
    >
      <Stack
        sx={{
          borderRadius: '8px',
          border: '1px dashed #CAD5FE',
          backgroundColor: '#EFF2FF',
          width: 1,
          height: 1,
        }}
      />
    </Stack>
  );
};

const meta: Meta<typeof HomeHeader> = {
  component: HomeHeader,
  title: 'Design System/Header/Home',
  tags: ['autodocs'],
  parameters: {
    docs: {
      description: {
        component:
          'Main application header (AppBar). Renders the company logo, an optional admin pill, ' +
          'extra action buttons, support/language/notification controls, and a user avatar with a popover. ' +
          'Intended for the top-level shell layout.',
      },
    },
  },
  argTypes: {
    onOpenMenu: {
      description: 'Callback fired when the hamburger menu button is clicked.',
      table: { type: { summary: '() => void' } },
      control: false,
    },
    logoSrc: {
      description: 'URL of the company logo image.',
      control: { type: 'text' },
      table: { type: { summary: 'string' } },
    },
    logoAlt: {
      description: 'Alt text for the company logo.',
      control: { type: 'text' },
      table: { type: { summary: 'string' } },
    },
    logoLink: {
      description: 'Navigation path for the logo link. Defaults to "/".',
      control: { type: 'text' },
      table: { type: { summary: 'string' } },
    },
    isAdmin: {
      description: 'If true, shows an "Admin" pill next to the logo.',
      control: { type: 'boolean' },
      table: {
        defaultValue: { summary: 'false' },
        type: { summary: 'boolean' },
      },
    },
    extraOptions: {
      description:
        'Up to 2 extra action buttons rendered between the logo area and the right-side controls.',
      control: false,
      table: { type: { summary: '[ExtraOption?, ExtraOption?]' } },
    },
    avatarProps: {
      description: 'Props forwarded to the user Avatar component.',
      control: false,
      table: { type: { summary: 'AvatarProps' } },
    },
    avatarPopoverContent: {
      description: 'Content rendered inside the avatar popover panel.',
      control: false,
      table: { type: { summary: 'React.ReactNode' } },
    },
    avatarButtonProps: {
      description: 'Additional props for the avatar button wrapper.',
      control: false,
      table: { type: { summary: 'ButtonProps' } },
    },
    avatarPopoverOpen: {
      description: 'Controlled open state for the avatar popover.',
      control: { type: 'boolean' },
      table: { type: { summary: 'boolean' } },
    },
    onAvatarPopoverOpenChange: {
      description: 'Callback when the avatar popover open state changes.',
      control: false,
      table: { type: { summary: '(open: boolean) => void' } },
    },
    onOpenAvatarMenu: {
      description: 'Callback fired when the avatar button is clicked.',
      control: false,
      table: {
        type: {
          summary: '(event: React.MouseEvent<HTMLButtonElement>) => void',
        },
      },
    },
    notificationsCount: {
      description: 'Badge count displayed on the notifications button.',
      control: { type: 'number' },
      table: { type: { summary: 'number' } },
    },
    hasUnreadNotifications: {
      description:
        'If true, shows an unread indicator on the notifications badge.',
      control: { type: 'boolean' },
      table: {
        defaultValue: { summary: 'false' },
        type: { summary: 'boolean' },
      },
    },
    hideNotificationsButton: {
      description: 'If true, hides the notifications button entirely.',
      control: { type: 'boolean' },
      table: {
        defaultValue: { summary: 'false' },
        type: { summary: 'boolean' },
      },
    },
    notificationsButtonProps: {
      description: 'Additional props for the notifications IconButton.',
      control: false,
      table: { type: { summary: 'ButtonProps' } },
    },
    onOpenNotificationsMenu: {
      description: 'Callback fired when the notifications button is clicked.',
      control: false,
      table: {
        type: {
          summary: '(event: React.MouseEvent<HTMLButtonElement>) => void',
        },
      },
    },
    onOpenLanguageMenu: {
      description:
        'Callback fired when the language button is clicked. When omitted, the language button is hidden regardless of `hideLanguageButton`.',
      control: false,
      table: {
        type: {
          summary: '(event: React.MouseEvent<HTMLButtonElement>) => void',
        },
      },
    },
    hideLanguageButton: {
      description:
        'If true, hides the language selector button entirely. The button is also hidden when `onOpenLanguageMenu` is not provided.',
      control: { type: 'boolean' },
      table: {
        defaultValue: { summary: 'false' },
        type: { summary: 'boolean' },
      },
    },
    supportButtonProps: {
      description: 'Props for the support link button (must include `href`).',
      control: false,
      table: { type: { summary: 'LinkButtonProps' } },
    },
    hideSupportButton: {
      description: 'If true, hides the support button.',
      control: { type: 'boolean' },
      table: {
        defaultValue: { summary: 'false' },
        type: { summary: 'boolean' },
      },
    },
    onOpenSupportMenu: {
      description:
        'Callback fired when the support button is clicked. When provided, the button acts as a menu trigger instead of a link.',
      control: false,
      table: {
        type: {
          summary: '(event: React.MouseEvent<HTMLButtonElement>) => void',
        },
      },
    },
    supportUrl: {
      description:
        'Deprecated URL prop for support. Use `supportButtonProps.href`.',
      control: { type: 'text' },
      table: { type: { summary: 'string' } },
    },
    hideMenuButton: {
      description: 'If true, hides the hamburger menu button.',
      control: { type: 'boolean' },
      table: {
        defaultValue: { summary: 'false' },
        type: { summary: 'boolean' },
      },
    },
    disabledMenuButton: {
      description: 'If true, disables the hamburger menu button.',
      control: { type: 'boolean' },
      table: {
        defaultValue: { summary: 'false' },
        type: { summary: 'boolean' },
      },
    },
    banner: {
      description: 'Optional banner node rendered below the header bar.',
      control: false,
      table: { type: { summary: 'React.ReactNode' } },
    },
    sx: {
      description: 'MUI `sx` style overrides applied to the root Stack.',
      control: false,
      table: { type: { summary: 'SxProps' } },
    },
    id: {
      description: 'HTML id attribute for the root element.',
      control: { type: 'text' },
      table: { type: { summary: 'string' } },
    },
    centerContent: {
      description:
        'Optional content rendered between the logo and the right-side actions (e.g. a global search input).',
      control: false,
      table: { type: { summary: 'React.ReactNode' } },
    },
  },
  args: {
    isAdmin: true,
    logoSrc: companyLogo,
    logoAlt: "Bank of America's logo",
    notificationsCount: 2,
    avatarProps: {
      src: 'https://siliconvalleyism.com/characters/richard-small.jpg',
      alt: "Richard's avatar",
    },
    avatarPopoverContent: <TemplateContent />,
    supportButtonProps: {
      href: 'https://help.humand.co/hc/es-419?utm_source=platform&utm_medium=humandweb',
    },
    hideNotificationsButton: true,
  },
  render: args => (
    <Router>
      <Routes>
        <Route
          path="*"
          element={
            <Box
              sx={{
                position: 'relative',
                height: '10vh',
                overflow: 'hidden',
              }}
            >
              <HomeHeader {...args} />
            </Box>
          }
        />
      </Routes>
    </Router>
  ),
};

export default meta;

type Story = StoryObj<typeof HomeHeader>;

export const DefaultStory: Story = {
  args: {},
};

export const ShortLogo: Story = {
  args: {
    logoSrc:
      'https://s3.amazonaws.com/shoptagr-prod-tagimages/fog_uploads/tag_71677188/c_pad%2Ch_1400%2Cw_1400/71677188_1688983116.png',
    logoAlt: "Temu's logo",
    notificationsCount: 2,
  },
};

export const ExtraOption: Story = {
  args: {
    extraOptions: [
      {
        key: 'huCoins',
        children: 'Gana HuCoins',
        startIcon: <IconCoins />,
      },
    ],
  },
};

export const WithSupportMenu: Story = {
  args: {
    ...meta.args,
  },
  render: args => {
    const [supportAnchorEl, setSupportAnchorEl] =
      useState<HTMLButtonElement | null>(null);

    return (
      <Router>
        <Routes>
          <Route
            path="*"
            element={
              <Box
                sx={{
                  position: 'relative',
                  height: '10vh',
                  overflow: 'hidden',
                }}
              >
                <HomeHeader
                  onOpenSupportMenu={event =>
                    setSupportAnchorEl(event.currentTarget)
                  }
                  {...args}
                />
                <Menu
                  open={!!supportAnchorEl}
                  onClose={() => setSupportAnchorEl(null)}
                  anchorEl={supportAnchorEl}
                >
                  <MenuItem>Support item 1</MenuItem>
                  <MenuItem>Support item 2</MenuItem>
                  <MenuItem>Support item 3</MenuItem>
                </Menu>
              </Box>
            }
          />
        </Routes>
      </Router>
    );
  },
};

export const WithoutLanguageButton: Story = {
  args: {
    onOpenLanguageMenu: () => {},
    hideLanguageButton: true,
  },
};

export const WithUnreadNotifications = {
  args: {
    ...meta.args,
    hideNotificationsButton: false,
    notificationsCount: 3,
    hasUnreadNotifications: true,
  },
} satisfies Story;

export const WithCenterContent: Story = {
  args: {
    ...meta.args,
    centerContent: (
      <Box
        sx={{
          width: '100%',
          maxWidth: 600,
          height: 40,
          borderRadius: 2,
          border: `1px dashed ${colorPalette.newBase.grey[200]}`,
          backgroundColor: colorPalette.newBase.brand[100],
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        Center slot placeholder
      </Box>
    ),
  },
};

export const ControlledAvatarOneAtATime: Story = {
  args: {
    ...meta.args,
    hideNotificationsButton: false,
    notificationsCount: 2,
  },
  render: args => {
    const [languageAnchorEl, setLanguageAnchorEl] =
      useState<HTMLButtonElement | null>(null);
    const [notificationsOpen, setNotificationsOpen] = useState(false);
    const [avatarOpen, setAvatarOpen] = useState(false);

    return (
      <Router>
        <Routes>
          <Route
            path="*"
            element={
              <Box
                sx={{
                  position: 'relative',
                  height: '10vh',
                  overflow: 'hidden',
                }}
              >
                <HomeHeader
                  {...args}
                  onOpenLanguageMenu={e => {
                    setNotificationsOpen(false);
                    setAvatarOpen(false);
                    setLanguageAnchorEl(e.currentTarget);
                  }}
                  onOpenNotificationsMenu={() => {
                    setLanguageAnchorEl(null);
                    setAvatarOpen(false);
                    setNotificationsOpen(prev => !prev);
                  }}
                  onOpenAvatarMenu={() => {
                    setLanguageAnchorEl(null);
                    setNotificationsOpen(false);
                    setAvatarOpen(true);
                  }}
                  avatarPopoverOpen={avatarOpen}
                  onAvatarPopoverOpenChange={setAvatarOpen}
                />
                <Menu
                  open={!!languageAnchorEl}
                  onClose={() => setLanguageAnchorEl(null)}
                  anchorEl={languageAnchorEl}
                >
                  <MenuItem>Idioma 1</MenuItem>
                  <MenuItem>Idioma 2</MenuItem>
                </Menu>
                {notificationsOpen && (
                  <Box
                    sx={{
                      position: 'fixed',
                      top: 56,
                      right: 16,
                      width: 320,
                      height: 400,
                      bgcolor: 'background.paper',
                      boxShadow: 2,
                      borderRadius: 1,
                      p: 2,
                    }}
                  >
                    Panel de notificaciones (demo). Cierra con click fuera.
                    <button
                      type="button"
                      onClick={() => setNotificationsOpen(false)}
                    >
                      Cerrar
                    </button>
                  </Box>
                )}
              </Box>
            }
          />
        </Routes>
      </Router>
    );
  },
};
