import React, { useState } from 'react';
import {
  Box,
  InputBase,
  Menu,
  MenuItem,
  Avatar,
  Typography,
  Divider,
  ListItemIcon,
  ListItemText
} from '@mui/material';
import {
  Settings as SettingsIcon,
  Search as SearchIcon,
  AccountCircle as AccountCircleIcon,
  Logout as LogoutIcon,
  Person as PersonIcon,
} from '@mui/icons-material';
import LanguageSwitcher from '../LanguageSwitcher';
import ProfileFormDialog from '@/components/ProfileFormDialog';
import { useAuth } from '@/hooks/login-hooks';
import { useTranslation } from 'react-i18next';

const Header = () => {
  const { userInfo, logout } = useAuth();
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const [profileDialogOpen, setProfileDialogOpen] = useState(false);
  const open = Boolean(anchorEl);

  const { t } = useTranslation();

  const handleAvatarClick = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const handleProfileClick = () => {
    setProfileDialogOpen(true);
    setAnchorEl(null);
  };

  const handleLogout = () => {
    logout();
    handleClose();
  };

  return (
    <Box
      sx={{
        display: 'flex',
        alignItems: 'center',
        padding: '0 20px',
        height: '60px',
        backgroundColor: '#FFFFFF',
        color: '#333',
        boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
        borderBottom: '1px solid #E5E5E5',
      }}
    >
      {/* <Box
        sx={{
          fontSize: '1.2rem',
          fontWeight: 'bold',
          color: '#333',
        }}
      >
        RAG Empowerment System
      </Box> */}

      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          backgroundColor: '#F8F9FA',
          borderRadius: '6px',
          padding: '6px 12px',
          width: '320px',
          border: '1px solid #E5E5E5',
          marginLeft: 'auto',
          marginRight: '20px',
          '&:focus-within': {
            borderColor: 'primary.main',
            boxShadow: '0 0 0 2px rgba(226,0,116,0.1)',
          },
          '& .MuiInputBase-input': {
            border: 'none',
            outline: 'none',
            backgroundColor: 'transparent',
            fontSize: '14px',
            color: '#333',
            '&::placeholder': {
              color: '#999',
            },
          },
        }}
      >
        <SearchIcon sx={{ color: '#999', fontSize: '1.2rem' }} />
        <InputBase
          sx={{
            marginLeft: '8px',
            flex: 1,
            fontSize: '0.875rem',
          }}
          placeholder="Search queries, KB names..."
        />
      </Box>

      <LanguageSwitcher textColor="#333" />

      {/* 用户头像和菜单 */}
      <Box sx={{ position: 'relative' }}>
        {userInfo?.avatar ? (
          <Avatar
            src={userInfo.avatar}
            alt={userInfo.nickname || userInfo.email}
            sx={{
              width: 32,
              height: 32,
              cursor: 'pointer',
              marginLeft: '12px',
              '&:hover': {
                opacity: 0.8,
              },
            }}
            onClick={handleAvatarClick}
          />
        ) : (
          <Box onClick={handleAvatarClick}>
            <AccountCircleIcon
              sx={{
                color: '#666',
                cursor: 'pointer',
                fontSize: '2rem',
                marginLeft: '12px',
                '&:hover': {
                  color: '#333',
                },
              }}
              titleAccess="User Profile"
            />
          </Box>
        )}

        {/* 用户菜单 */}
        <Menu
          anchorEl={anchorEl}
          open={open}
          onClose={handleClose}
          onClick={handleClose}
          PaperProps={{
            elevation: 3,
            sx: {
              overflow: 'visible',
              filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.15))',
              mt: 1.5,
              minWidth: 200,
              '& .MuiAvatar-root': {
                width: 24,
                height: 24,
                ml: -0.5,
                mr: 1,
              },
              '&:before': {
                content: '""',
                display: 'block',
                position: 'absolute',
                top: 0,
                right: 14,
                width: 10,
                height: 10,
                bgcolor: 'background.paper',
                transform: 'translateY(-50%) rotate(45deg)',
                zIndex: 0,
              },
            },
          }}
          transformOrigin={{ horizontal: 'right', vertical: 'top' }}
          anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
        >
          {/* 用户信息 */}
          <Box sx={{ px: 2, py: 1.5, borderBottom: '1px solid #f0f0f0' }}>
            <Typography variant="subtitle2" sx={{ fontWeight: 600, color: '#333' }}>
              {userInfo?.nickname || '用户'}
            </Typography>
            <Typography variant="body2" sx={{ color: '#666', fontSize: '0.75rem' }}>
              {userInfo?.email}
            </Typography>
          </Box>

          {/* 个人资料 */}
          <MenuItem onClick={handleProfileClick} sx={{ py: 1 }}>
            <ListItemIcon>
              <PersonIcon fontSize="small" />
            </ListItemIcon>
            <ListItemText>{t('setting.personalProfile')}</ListItemText>
          </MenuItem>
          <Divider />

          <MenuItem onClick={handleLogout} sx={{ py: 1, color: '#d32f2f' }}>
            <ListItemIcon>
              <LogoutIcon fontSize="small" sx={{ color: '#d32f2f' }} />
            </ListItemIcon>
            <ListItemText>{t('setting.logout')}</ListItemText>
          </MenuItem>
        </Menu>
      </Box>
      <ProfileFormDialog
        open={profileDialogOpen}
        onClose={() => setProfileDialogOpen(false)}
      />
    </Box>
  );
};

export default Header;