import React from 'react';
import { Box, Button, Typography, Fade, CircularProgress } from '@mui/material';
import { Save as SaveIcon } from '@mui/icons-material';

const SaveBar = ({ onSave, isSaving, status }) => {
    return (
        <Box
            sx={{
                position: 'fixed',
                bottom: 24,
                left: 280, // Matches sidebar width
                right: 40,
                height: 72,
                bgcolor: 'rgba(255, 255, 255, 0.7)',
                backdropFilter: 'blur(12px)',
                display: 'flex',
                alignItems: 'center',
                px: 4,
                borderRadius: '16px',
                border: '1px solid rgba(255, 255, 255, 0.3)',
                boxShadow: '0 20px 40px -15px rgba(0,0,0,0.1)',
                zIndex: 1000,
            }}
        >
            <Box sx={{ flexGrow: 1, display: 'flex', alignItems: 'center', gap: 2 }}>
                {status && (
                    <Fade in={true}>
                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                            <Box sx={{
                                width: 8,
                                height: 8,
                                borderRadius: '50%',
                                bgcolor: status.type === 'success' ? 'success.main' : 'error.main',
                                boxShadow: `0 0 10px ${status.type === 'success' ? 'rgba(46, 125, 50, 0.4)' : 'rgba(211, 47, 47, 0.4)'}`
                            }} />
                            <Typography variant="body2" sx={{ fontWeight: 600, color: 'text.primary', fontSize: '0.8125rem' }}>
                                {status.message}
                            </Typography>
                        </Box>
                    </Fade>
                )}
                {!status && (
                    <Typography variant="body2" sx={{ color: 'text.secondary', fontWeight: 500, opacity: 0.8, fontSize: '0.8125rem' }}>
                        {isSaving ? 'Applying changes...' : 'Unsaved changes in this tab'}
                    </Typography>
                )}
            </Box>

            <Button
                variant="contained"
                onClick={onSave}
                disabled={isSaving}
                startIcon={isSaving ? <CircularProgress size={16} color="inherit" /> : <SaveIcon sx={{ fontSize: 18 }} />}
                sx={{
                    px: 4,
                    py: 1.25,
                    borderRadius: '10px',
                    boxShadow: '0 8px 16px -4px rgba(79, 70, 229, 0.3)',
                    textTransform: 'none',
                    fontWeight: 700,
                    '&:hover': {
                        transform: 'translateY(-1px)',
                        boxShadow: '0 12px 20px -5px rgba(79, 70, 229, 0.4)',
                    }
                }}
            >
                {isSaving ? 'Deploying...' : 'Save Changes'}
            </Button>
        </Box>
    );
};

export default SaveBar;
