import React from 'react';
import { Outlet } from 'react-router-dom';
import { Box, Container, Paper, Typography, Button } from '@mui/material';
import { Link as RouterLink } from 'react-router-dom';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import useBrandingSettings from '@hooks/brandingHooks';
import imageUtils from '@utils/imageUtils';

const AuthLayout = () => {
  // Use the centralized hook to fetch branding settings
  const { data: brandingSettings } = useBrandingSettings();
  
  // Get site name and logo from branding settings
  const siteName = brandingSettings?.site_name || 'Rocks, Bones & Sticks';
  const logoUrl = imageUtils.getImageUrl(brandingSettings?.logo_url)
  const copyrightText = brandingSettings?.copyright_text || 
    `© ${new Date().getFullYear()} ${siteName}. All rights reserved.`;
  
  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        minHeight: '100vh',
        bgcolor: (theme) => theme.palette.mode === 'dark' ? 'background.default' : 'grey.100',
      }}
    >
      <Container maxWidth="sm" sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1, py: 4 }}>
        <Button 
          component={RouterLink} 
          to="/" 
          startIcon={<ArrowBackIcon />}
          sx={{ alignSelf: 'flex-start', mb: 2 }}
        >
          Back to Home
        </Button>
        
        <Paper
          elevation={3}
          sx={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            p: 4,
            mb: 4,
          }}
        >
          {logoUrl ? (
            <Box 
              component="img" 
              src={logoUrl} 
              alt={siteName}
              sx={{ 
                height: 60, 
                maxWidth: '100%',
                mb: 3,
                objectFit: 'contain'
              }} 
            />
          ) : (
            <Typography component="h1" variant="h4" gutterBottom>
              {siteName}
            </Typography>
          )}
          
          <Box sx={{ width: '100%', mt: 2 }}>
            <Outlet />
          </Box>
        </Paper>
      </Container>
      
      <Box
        component="footer"
        sx={{
          py: 2,
          px: 2,
          mt: 'auto',
          backgroundColor: (theme) =>
            theme.palette.mode === 'light'
              ? theme.palette.grey[200]
              : theme.palette.grey[800],
        }}
      >
        <Container maxWidth="sm" sx={{ textAlign: 'center' }}>
          <Typography variant="body2" color="text.secondary">
            {copyrightText}
          </Typography>
        </Container>
      </Box>
    </Box>
  );
};

export default AuthLayout;