import React from 'react'
import { AppBar, Toolbar, Typography, Container, Box, Alert, Snackbar } from '@mui/material'
import { useNavigate, useLocation } from 'react-router-dom'
import { NavigationTabs } from './NavigationTabs'
import { useState, useEffect } from 'react'

interface LayoutProps {
  children: React.ReactNode
}

export const Layout: React.FC<LayoutProps> = ({ children }) => {
  const navigate = useNavigate()
  const location = useLocation()
  const [showDemoAlert, setShowDemoAlert] = useState(false)

  useEffect(() => {
    // Vérifier si le backend est accessible
    const checkBackend = async () => {
      try {
        const response = await fetch('http://localhost:8000/health', { 
          method: 'GET',
          signal: AbortSignal.timeout(2000)
        })
        if (!response.ok) {
          setShowDemoAlert(true)
        }
      } catch (error) {
        setShowDemoAlert(true)
      }
    }
    
    checkBackend()
  }, [])

  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static">
        <Toolbar>
          <Typography
            variant="h6"
            component="div"
            sx={{ flexGrow: 1, cursor: 'pointer' }}
            onClick={() => navigate('/')}
          >
            4NK IA - Front Notarial
          </Typography>
        </Toolbar>
      </AppBar>
      
      <NavigationTabs currentPath={location.pathname} />
      
      <Container maxWidth="xl" sx={{ mt: 3, mb: 3 }}>
        {children}
      </Container>

      <Snackbar
        open={showDemoAlert}
        autoHideDuration={6000}
        onClose={() => setShowDemoAlert(false)}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
      >
        <Alert 
          onClose={() => setShowDemoAlert(false)} 
          severity="info" 
          sx={{ width: '100%' }}
        >
          Mode démonstration activé - Backend non accessible
        </Alert>
      </Snackbar>
    </Box>
  )
}