Jungfraujoch/frontend/src/components/StatusBar.tsx

import {memo} from 'react';

import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import {indigo, deepOrange} from '@mui/material/colors';
import MenuIcon from '@mui/icons-material/Menu';
import {broker_status} from "../client";
import ButtonWithSnackbar from "./ButtonWithSnackbar";

type MyProps = {
    s?: broker_status;
    onMenuClick?: () => void;
}

// A tight, strong palette: lime = good/running, coral = working/alarm (deeper = worse),
// light-blue (sidebar) = neutral/idle-connection. Measuring and Pedestal are handled separately.
const STATE_STYLE: Record<string, { fill: string; text: string }> = {
    Idle:      { fill: "secondary.main", text: "rgba(0,0,0,.87)" },   // lime + black text
    Busy:      { fill: deepOrange[300],  text: "rgba(0,0,0,.87)" },   // light coral
    Error:     { fill: deepOrange[700],  text: "#fff" },              // deep coral
    Inactive:  { fill: indigo[100],      text: "rgba(0,0,0,.87)" },   // sidebar light blue
};

// Fixed width so the pill fits the longest label ("Calibration · 100 %") and never
// resizes as the state changes.
const pillSx = {
    position: "relative", width: 200, height: 36, borderRadius: 999, overflow: "hidden",
    display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
} as const;
const pillLabelSx = { position: "relative", fontWeight: 600, fontSize: "0.95rem", whiteSpace: "nowrap" } as const;

// Three action-button tiers so exactly one button reads as "click me now":
//  hot    = lime — the action to take right now
//  active = blue-on-blue (no frame), white text — available, secondary emphasis
//  off    = faint ghost — not relevant in this state
const activeColdSx = { bgcolor: "primary.dark", color: "#fff",
                       "&:hover": { bgcolor: "primary.dark", filter: "brightness(1.12)" } };
const offSx = { bgcolor: "rgba(255,255,255,.10)", color: "rgba(255,255,255,.6)", boxShadow: "none",
                "&:hover": { bgcolor: "rgba(255,255,255,.18)" } };
const TIER = {
    hot:    { color: "secondary", variant: "contained" },
    active: { color: "primary",   variant: "contained", sx: activeColdSx },
    off:    { color: "inherit",   variant: "contained", sx: offSx },
} as const;
type Tier = keyof typeof TIER;

function StatusChip({s}: {s?: broker_status}) {
    if (s === undefined)
        return (
            <Box sx={{...pillSx, border: "1px solid rgba(255,255,255,.6)"}}>
                <Typography component="span" sx={{...pillLabelSx, color: "#fff"}}>Not connected</Typography>
            </Box>
        );

    // Measuring and Pedestal both fill a light-blue (sidebar) track to the progress
    // fraction, with black text legible over both track and fill. Measuring fills lime;
    // Pedestal fills coral (matching its flat-pill colour elsewhere). The "Pedestal"
    // state is shown as "Calibration" — the internal name is kept only for back-compat.
    if (s.state === "Measuring" || s.state === "Pedestal") {
        const pct = Math.max(0, Math.min(100, (s.progress ?? 0) * 100.0));
        const fill = s.state === "Measuring" ? "secondary.main" : deepOrange[300];
        const label = s.state === "Measuring" ? "Measuring" : "Calibration";
        return (
            <Box sx={{...pillSx, bgcolor: indigo[100]}}>
                <Box sx={{position: "absolute", left: 0, top: 0, bottom: 0, width: `${pct}%`,
                          bgcolor: fill, transition: "width .4s ease"}}/>
                <Typography component="span" sx={{...pillLabelSx, color: "rgba(0,0,0,.87)"}}>
                    {label} · {pct.toFixed(0)} %
                </Typography>
            </Box>
        );
    }

    const style = STATE_STYLE[s.state] ?? { fill: "grey.500", text: "#fff" };
    return (
        <Box sx={{...pillSx, bgcolor: style.fill}}>
            <Typography component="span" sx={{...pillLabelSx, color: style.text}}>{s.state.toString()}</Typography>
        </Box>
    );
}

function StatusBar({s, onMenuClick}: MyProps) {
    // Pick each button's tier from the current state, so the one action that makes
    // sense right now is lime and the rest recede.
    const st = s?.state;
    const cancelTier: Tier = (st === 'Measuring' || st === 'Pedestal') ? 'hot'
        : (st === 'Busy' || st === 'Error') ? 'active' : 'off';
    const initTier: Tier = (s === undefined || st === 'Inactive') ? 'hot'
        : (st === 'Idle') ? 'active' : 'off';
    const pedestalActive = st === 'Idle';

    return <AppBar sx={{zIndex: (theme) => theme.zIndex.drawer + 1}}>
        <Toolbar>
            {onMenuClick && (
                <IconButton color="inherit" edge="start" onClick={onMenuClick} sx={{mr: 2}}>
                    <MenuIcon/>
                </IconButton>
            )}
            <Typography variant="h6" component="div" noWrap
                        sx={{flexGrow: 0.5, fontWeight: 500, letterSpacing: '.02em'}}>
                Jungfraujoch
            </Typography>

            <Box sx={{flexGrow: 2.0, display: 'flex', justifyContent: 'center'}}>
                <StatusChip s={s}/>
            </Box>

            <Box sx={{flexGrow: 2.0}}/>
            <Stack direction="row" spacing={1}>
                <ButtonWithSnackbar
                    text={"Cancel"}
                    path={"/cancel"}
                    {...TIER[cancelTier]}
                />
                <ButtonWithSnackbar
                    text={"Calibrate"}
                    path={"/pedestal"}
                    disabled={!pedestalActive}
                    {...(pedestalActive ? TIER.active : TIER.off)}
                />
                <ButtonWithSnackbar
                    text={"Initialize"}
                    path={"/initialize"}
                    {...TIER[initTier]}
                />
            </Stack>
        </Toolbar>
    </AppBar>
}

export default memo(StatusBar);