import { Box, InputBase, styled } from '@mui/material';
import SearchIcon from '@mui/icons-material/Search';
import AccountCircleIcon from '@mui/icons-material/AccountCircle';

const HeaderContainer = styled(Box)(({ theme }) => ({
  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',
}));

const BrandTitle = styled(Box)(({ theme }) => ({
  fontSize: '1.2rem',
  fontWeight: 'bold',
  color: '#333',
}));

const SearchBox = styled(Box)(({ theme }) => ({
  display: 'flex',
  alignItems: 'center',
  backgroundColor: '#F8F9FA',
  borderRadius: '6px',
  padding: '6px 12px',
  width: '320px',
  border: '1px solid #E5E5E5',
  marginLeft: 'auto',
  marginRight: '20px',
  '&:focus-within': {
    borderColor: theme.palette.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',
    },
  },
}));

const SearchInput = styled(InputBase)(({ theme }) => ({
  marginLeft: '8px',
  flex: 1,
  fontSize: '0.875rem',
}));

const UserAvatar = styled(AccountCircleIcon)(({ theme }) => ({
  color: '#666',
  cursor: 'pointer',
  fontSize: '2rem',
}));

const Header = () => {
  return (
    <HeaderContainer>
      <BrandTitle>RAG Dashboard</BrandTitle>
      <SearchBox>
        <SearchIcon sx={{ color: '#999', fontSize: '1.2rem' }} />
        <SearchInput placeholder="Search queries, KB names..." />
      </SearchBox>
      <UserAvatar titleAccess="User Profile" />
    </HeaderContainer>
  );
};

export default Header;