import React from "react";
import {
  Box,
  Typography,
  Button,
  ToggleButton,
  ToggleButtonGroup,
  Tooltip,
  AppBar,
  Toolbar,
  Container,
  Divider,
} from "@mui/material";
import KeyIcon from "@mui/icons-material/Key";
import HomeIcon from "@mui/icons-material/Home";
import BrightnessAutoIcon from "@mui/icons-material/BrightnessAuto";
import LightModeIcon from "@mui/icons-material/LightMode";
import DarkModeIcon from "@mui/icons-material/DarkMode";

function Header({ theme, onThemeChange, currentPage, onPageChange }) {
  return (
    <AppBar position="static" color="default" elevation={1} sx={{ borderBottom: 1, borderColor: "divider" }}>
      <Container maxWidth="xl">
        <Toolbar disableGutters sx={{ display: "flex", justifyContent: "space-between", height: 64 }}>
          {/* Brand/Title */}
          <Box sx={{ display: "flex", alignItems: "center" }}>
            <Typography
              variant="h5"
              noWrap
              component="div"
              sx={{
                fontWeight: 700,
                color: "primary.main",
                letterSpacing: ".05rem",
              }}
            >
              JMESPath Playground
            </Typography>
          </Box>

          {/* Right side controls */}
          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
            {/* API Key Management Button */}
            <Tooltip title={currentPage === "main" ? "API Key Management" : "Back to Testing"}>
              <Button
                variant={currentPage === "apikey" ? "contained" : "text"}
                color={currentPage === "apikey" ? "primary" : "primary"}
                size="medium"
                startIcon={currentPage === "main" ? <KeyIcon /> : <HomeIcon />}
                onClick={() => onPageChange(currentPage === "main" ? "apikey" : "main")}
              >
                {currentPage === "main" ? "API Keys" : "Home"}
              </Button>
            </Tooltip>

            <Divider orientation="vertical" flexItem sx={{ my: 2, mx: 1 }} />

            {/* Theme switcher */}
            <ToggleButtonGroup
              value={theme}
              exclusive
              onChange={(e, nextTheme) => nextTheme && onThemeChange(nextTheme)}
              aria-label="theme switcher"
              size="small"
            >
              <Tooltip title="Follow system theme">
                <ToggleButton value="auto" aria-label="Auto">
                  <BrightnessAutoIcon sx={{ fontSize: "1.2rem" }} />
                </ToggleButton>
              </Tooltip>
              <Tooltip title="Light mode">
                <ToggleButton value="light" aria-label="Light">
                  <LightModeIcon sx={{ fontSize: "1.2rem" }} />
                </ToggleButton>
              </Tooltip>
              <Tooltip title="Dark mode">
                <ToggleButton value="dark" aria-label="Dark">
                  <DarkModeIcon sx={{ fontSize: "1.2rem" }} />
                </ToggleButton>
              </Tooltip>
            </ToggleButtonGroup>
          </Box>
        </Toolbar>
      </Container>
    </AppBar>
  );
}

export default Header;