import { AppBar, Toolbar, Typography, IconButton, Box, Chip } from '@mui/material';
import LockIcon from '@mui/icons-material/Lock';
import LockOpenIcon from '@mui/icons-material/LockOpen';
import SignalWifiStatusbar4BarIcon from '@mui/icons-material/SignalWifiStatusbar4Bar';
import SignalWifiOffIcon from '@mui/icons-material/SignalWifiOff';
import { useSessionStore } from '../store/sessionStore';

const Header = () => {
  const { 
    isSessionUnlocked, 
    currentKeyspace, 
    currentKeypair, 
    isWebSocketConnected,
    lockSession 
  } = useSessionStore();

  const handleLockClick = async () => {
    if (isSessionUnlocked) {
      await lockSession();
    }
  };

  return (
    <AppBar position="static" color="primary" elevation={0}>
      <Toolbar>
        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
          Hero Vault
        </Typography>
        
        <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
          {/* WebSocket connection status */}
          {isWebSocketConnected ? (
            <Chip 
              icon={<SignalWifiStatusbar4BarIcon fontSize="small" />} 
              label="Connected" 
              size="small" 
              color="success" 
              variant="outlined"
            />
          ) : (
            <Chip 
              icon={<SignalWifiOffIcon fontSize="small" />} 
              label="Offline" 
              size="small" 
              color="default" 
              variant="outlined" 
            />
          )}
          
          {/* Session status */}
          {isSessionUnlocked ? (
            <Chip 
              icon={<LockOpenIcon fontSize="small" />} 
              label={currentKeyspace || 'Unlocked'} 
              size="small" 
              color="primary" 
              variant="outlined"
            />
          ) : (
            <Chip 
              icon={<LockIcon fontSize="small" />} 
              label="Locked" 
              size="small" 
              color="error" 
              variant="outlined" 
            />
          )}
          
          {/* Current keypair */}
          {isSessionUnlocked && currentKeypair && (
            <Chip 
              label={currentKeypair.name || currentKeypair.id} 
              size="small" 
              color="secondary" 
              variant="outlined"
            />
          )}
          
          {/* Lock button */}
          {isSessionUnlocked && (
            <IconButton 
              edge="end" 
              color="inherit" 
              onClick={handleLockClick} 
              size="small"
              aria-label="lock session"
            >
              <LockIcon />
            </IconButton>
          )}
        </Box>
      </Toolbar>
    </AppBar>
  );
};

export default Header;
