import React from 'react';
import {
  Group,
  ActionIcon,
  TextInput,
  Text,
  Flex,
  Box,
  Burger,
  Avatar,
  Menu,
} from '@mantine/core';
import { useNavigate } from 'react-router-dom';
import {
  IconSearch,
  IconBell,
  IconHome,
  IconStar,
  IconSettings,
  IconLogout,
} from '@tabler/icons-react';

interface HeaderProps {
  onToggleNavbar: () => void;
}

const Header: React.FC<HeaderProps> = ({ onToggleNavbar }) => {
  const navigate = useNavigate();
  const [currentTime, setCurrentTime] = React.useState(new Date());

  React.useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(new Date());
    }, 1000);
    return () => clearInterval(timer);
  }, []);
  
  const timezones = [
    { 
      label: 'PST', 
      value: 'pst', 
      timezone: 'America/Los_Angeles'
    },
    { 
      label: 'EST', 
      value: 'est', 
      timezone: 'America/New_York'
    },
    { 
      label: 'CST', 
      value: 'cst', 
      timezone: 'America/Chicago'
    },
    { 
      label: 'IST', 
      value: 'ist', 
      timezone: 'Asia/Kolkata'
    },
  ];

  const formatTime = (timezone: string) => {
    return currentTime.toLocaleTimeString('en-US', { 
      timeZone: timezone,
      hour: '2-digit', 
      minute: '2-digit',
      hour12: true 
    });
  };

  return (
    <Box h={60} px="md">
      <Flex align="center" h="100%" gap="md">
        {/* Burger menu for navbar toggle */}
        <Burger
          onClick={onToggleNavbar}
          size="sm"
          aria-label="Toggle navigation"
        />

        {/* Logo */}
        <Text size="xl" fw={700} c="blue">
          Skybridge
        </Text>

        {/* Icon Buttons */}
        <Group gap="xs">
          <ActionIcon 
            variant="subtle" 
            size="lg" 
            aria-label="Home"
            onClick={() => navigate('/')}
          >
            <IconHome size={18} />
          </ActionIcon>
          <ActionIcon variant="subtle" size="lg" aria-label="Favorites">
            <IconStar size={18} />
          </ActionIcon>
          <ActionIcon variant="subtle" size="lg" aria-label="Notifications">
            <IconBell size={18} />
          </ActionIcon>
        </Group>


        {/* Search Box */}
        <TextInput
          placeholder="Search..."
          leftSection={<IconSearch size={16} />}
          w={250}
        />

        {/* Spacer to push right content to the right */}
        <Box style={{ flexGrow: 1 }} />

        {/* Timezone Section */}
        <Group gap="lg">
          {timezones.map((tz) => (
            <Box key={tz.value} ta="center">
              <Text size="xs" c="dimmed" fw={500}>
                {tz.label}
              </Text>
              <Text size="sm" fw={600}>
                {formatTime(tz.timezone)}
              </Text>
            </Box>
          ))}
        </Group>

        {/* User Profile with Dropdown */}
        <Menu shadow="md" width={200}>
          <Menu.Target>
            <Avatar 
              color="blue" 
              radius="xl" 
              style={{ 
                cursor: 'pointer',
                transition: 'all 0.2s ease',
                ':hover': {
                  boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
                  transform: 'translateY(-1px)',
                }
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.boxShadow = '0 4px 12px rgba(34, 139, 230, 0.4)';
                e.currentTarget.style.transform = 'translateY(-1px)';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.boxShadow = 'none';
                e.currentTarget.style.transform = 'translateY(0)';
              }}
            >
              JD
            </Avatar>
          </Menu.Target>

          <Menu.Dropdown>
            <Menu.Label>Account</Menu.Label>
            <Menu.Item leftSection={<IconSettings size={14} />}>
              Settings
            </Menu.Item>
            <Menu.Divider />
            <Menu.Item 
              leftSection={<IconLogout size={14} />}
              color="red"
            >
              Logout
            </Menu.Item>
          </Menu.Dropdown>
        </Menu>

      </Flex>
    </Box>
  );
};

export default Header;