import React from 'react';
import { ThemeProvider } from '@mui/material/styles';
import { Box, Container, Paper, Typography, Grid, CssBaseline } from '@mui/material';
import { backstoryTheme } from 'BackstoryTheme';

const BackstoryUIOverviewPage: React.FC = () => {
  return (
    <ThemeProvider theme={backstoryTheme}>
      <CssBaseline />
      <Box sx={{ bgcolor: 'background.default', overflow: "hidden", py: 4 }}>
        <Container maxWidth="lg">
          <Paper sx={{ p: 4, borderRadius: 2, boxShadow: 2 }}>
            {/* Header */}
            <Box sx={{ p: 3, bgcolor: 'background.paper', borderRadius: 2, mb: 4, boxShadow: 1 }}>
              <Typography variant="h4" component="h1" sx={{ fontWeight: 'bold', color: 'primary.main', mb: 1 }}>
                Backstory UI Architecture
              </Typography>
              <Typography variant="body1" color="text.secondary">
                A visual overview of the dual-purpose application serving candidates and employers
              </Typography>
            </Box>
            
            {/* User Types */}
            <Grid container spacing={3} sx={{ mb: 4 }}>
              <Grid size={{xs: 12, md: 6}}>
                <Box sx={{ 
                  p: 3, 
                  bgcolor: 'rgba(74, 122, 125, 0.1)', 
                  borderRadius: 2, 
                  border: '1px solid', 
                  borderColor: 'rgba(74, 122, 125, 0.3)',
                  height: '100%'
                }}>
                  <Typography variant="h6" sx={{ color: 'secondary.main', mb: 2, fontWeight: 'bold' }}>
                    Candidate Experience
                  </Typography>
                  <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
                    {[
                      'Create comprehensive professional profiles',
                      'Configure AI assistant for employer Q&A',
                      'Generate tailored resumes for specific jobs',
                      'Track profile engagement metrics'
                    ].map((item, index) => (
                      <Box key={index} sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
                        <Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: 'secondary.main' }} />
                        <Typography variant="body2">{item}</Typography>
                      </Box>
                    ))}
                  </Box>
                </Box>
              </Grid>
              
              <Grid size={{ xs: 12, md: 6}}>
                <Box sx={{ 
                  p: 3, 
                  bgcolor: 'rgba(26, 37, 54, 0.1)', 
                  borderRadius: 2, 
                  border: '1px solid', 
                  borderColor: 'rgba(26, 37, 54, 0.3)',
                  height: '100%'
                }}>
                  <Typography variant="h6" sx={{ color: 'primary.main', mb: 2, fontWeight: 'bold' }}>
                    Employer Experience
                  </Typography>
                  <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
                    {[
                      'Search for candidates with specific skills',
                      'Interact with candidate AI assistants',
                      'Generate position-specific candidate resumes',
                      'Manage talent pools and job listings'
                    ].map((item, index) => (
                      <Box key={index} sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
                        <Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: 'primary.main' }} />
                        <Typography variant="body2">{item}</Typography>
                      </Box>
                    ))}
                  </Box>
                </Box>
              </Grid>
            </Grid>
            
            {/* UI Components */}
            <Box sx={{ p: 3, bgcolor: 'background.paper', borderRadius: 2, mb: 4, boxShadow: 1 }}>
              <Typography variant="h5" sx={{ color: 'text.primary', mb: 3, fontWeight: 'bold' }}>
                Key UI Components
              </Typography>
              <Grid container spacing={2}>
                {[
                  { title: 'Dashboards', description: 'Role-specific dashboards with card-based metrics and action items' },
                  { title: 'Profile Editors', description: 'Comprehensive forms for managing professional information' },
                  { title: 'Resume Builder', description: 'AI-powered tools for creating tailored resumes' },
                  { title: 'Q&A Interface', description: 'Chat-like interface for employer-candidate AI interaction' },
                  { title: 'Search & Filters', description: 'Advanced search with multiple filter categories' },
                  { title: 'Analytics Dashboards', description: 'Visual metrics for tracking engagement and performance' }
                ].map((component, index) => (
                  <Grid size={{xs: 12, sm: 6, md: 4}} key={index}>
                    <Box sx={{ 
                      p: 2, 
                      border: '1px solid', 
                      borderColor: 'divider',
                      borderRadius: 1,
                      height: '100%',
                      transition: 'all 0.2s ease-in-out',
                      '&:hover': {
                        bgcolor: 'rgba(212, 160, 23, 0.05)',
                        borderColor: 'action.active',
                        transform: 'translateY(-2px)',
                        boxShadow: 1
                      }
                    }}>
                      <Typography variant="h6" sx={{ color: 'secondary.main', mb: 1, fontWeight: 'medium' }}>
                        {component.title}
                      </Typography>
                      <Typography variant="body2" color="text.secondary">
                        {component.description}
                      </Typography>
                    </Box>
                  </Grid>
                ))}
              </Grid>
            </Box>
            
            {/* Navigation Structure */}
            <Grid container spacing={3} sx={{ mb: 4 }}>
              {[
                { 
                  title: 'Candidate Navigation',
                  items: ['Dashboard', 'Profile', 'Backstory', 'Resumes', 'Q&A Setup', 'Analytics', 'Settings'],
                  color: 'secondary.main',
                  borderColor: 'secondary.main'
                },
                { 
                  title: 'Employer Navigation',
                  items: ['Dashboard', 'Search', 'Saved', 'Jobs', 'Company', 'Analytics', 'Settings'],
                  color: 'primary.main',
                  borderColor: 'primary.main'
                },
                { 
                  title: 'Public Navigation',
                  items: ['Home', 'Docs', 'Pricing', 'Login', 'Register'],
                  color: 'custom.highlight',
                  borderColor: 'custom.highlight'
                }
              ].map((nav, index) => (
                <Grid size={{xs:12, md:4}} key={index}>
                  <Box sx={{ 
                    p: 3, 
                    bgcolor: 'background.paper', 
                    borderRadius: 2,
                    boxShadow: 1,
                    height: '100%'
                  }}>
                    <Typography variant="h6" sx={{ color: 'text.primary', mb: 2, fontWeight: 'bold' }}>
                      {nav.title}
                    </Typography>
                    <Box sx={{ 
                      borderLeft: 3, 
                      borderColor: nav.borderColor, 
                      pl: 2,
                      py: 1,
                      display: 'flex',
                      flexDirection: 'column',
                      gap: 1.5
                    }}>
                      {nav.items.map((item, idx) => (
                        <Typography key={idx} sx={{ color: nav.color, fontWeight: 'medium' }}>
                          {item}
                        </Typography>
                      ))}
                    </Box>
                  </Box>
                </Grid>
              ))}
            </Grid>
            
            {/* Connection Points */}
            <Box sx={{ p: 3, bgcolor: 'background.paper', borderRadius: 2, mb: 4, boxShadow: 1 }}>
              <Typography variant="h5" sx={{ color: 'text.primary', mb: 3, fontWeight: 'bold' }}>
                System Connection Points
              </Typography>
              <Box sx={{ position: 'relative', py: 2 }}>
                {/* Connection line */}
                <Box sx={{ 
                  position: 'absolute', 
                  left: '50%', 
                  top: 0, 
                  bottom: 0, 
                  width: 1, 
                  borderColor: 'divider',
                  zIndex: 0,
                  borderLeft: "1px solid",
                  overflow: "hidden",
                }} />
                
                {/* Connection points */}
                {[
                  { left: 'Candidate Profile', right: 'Employer Search' },
                  { left: 'Q&A Setup', right: 'Q&A Interface' },
                  { left: 'Resume Generator', right: 'Job Posts' }
                ].map((connection, index) => (
                  <Box 
                    key={index} 
                    sx={{ 
                      display: 'flex', 
                      alignItems: 'center',
                      mb: index < 2 ? 5 : 0,
                      position: 'relative',
                      zIndex: 1,

                    }}
                  >
                    <Box sx={{ 
                      flex: 1, 
                      display: 'flex', 
                      justifyContent: 'flex-end', 
                      pr: 3
                    }}>
                      <Box sx={{ 
                        display: 'inline-block', 
                        bgcolor: 'rgba(74, 122, 125, 0.1)', 
                        p: 2, 
                        borderRadius: 2,
                        color: 'secondary.main',
                        fontWeight: 'medium',
                        border: '1px solid',
                        borderColor: 'rgba(74, 122, 125, 0.3)'
                      }}>
                        {connection.left}
                      </Box>
                    </Box>
                    
                    <Box sx={{ 
                      width: 16, 
                      height: 16, 
                      borderRadius: '50%', 
                      bgcolor: 'custom.highlight',
                      zIndex: 2,
                      boxShadow: 2,
                    }} />
                    
                    <Box sx={{ 
                      flex: 1, 
                      pl: 3,
                    }}>
                      <Box sx={{ 
                        display: 'inline-block', 
                        bgcolor: 'rgba(26, 37, 54, 0.1)', 
                        p: 2, 
                        borderRadius: 2,
                        color: 'primary.main',
                        fontWeight: 'medium',
                        border: '1px solid',
                        borderColor: 'rgba(26, 37, 54, 0.3)',
                      }}>
                        {connection.right}
                      </Box>
                    </Box>
                  </Box>
                ))}
              </Box>
            </Box>
            
            {/* Mobile Adaptation */}
            <Box sx={{ p: 3, bgcolor: 'background.paper', borderRadius: 2, boxShadow: 1 }}>
              <Typography variant="h5" sx={{ color: 'text.primary', mb: 3, fontWeight: 'bold' }}>
                Mobile Adaptation
              </Typography>
              <Box sx={{ display: 'flex', justifyContent: 'center' }}>
                <Box sx={{ 
                  width: 200, 
                  height: 400, 
                  border: '4px solid',
                  borderColor: 'text.primary',
                  borderRadius: 5,
                  p: 1,
                  bgcolor: 'background.default'
                }}>
                  <Box sx={{ 
                    height: '100%', 
                    display: 'flex', 
                    flexDirection: 'column',
                    border: '1px solid',
                    borderColor: 'divider',
                    borderRadius: 4,
                    overflow: 'hidden'
                  }}>
                    {/* Mobile header */}
                    <Box sx={{ 
                      bgcolor: 'primary.main', 
                      color: 'primary.contrastText',
                      p: 1,
                      display: 'flex',
                      justifyContent: 'space-between',
                      alignItems: 'center'
                    }}>
                      <Typography sx={{ fontWeight: 'bold', fontSize: '0.875rem' }}>BACKSTORY</Typography>
                      <Box>☰</Box>
                    </Box>
                    
                    {/* Mobile content */}
                    <Box sx={{ 
                      flex: 1, 
                      p: 1.5, 
                      overflow: 'auto',
                      fontSize: '0.75rem'
                    }}>
                      <Typography sx={{ mb: 1, fontWeight: 'medium' }}>Welcome back, [Name]!</Typography>
                      <Typography sx={{ fontSize: '0.675rem', mb: 2 }}>Profile: 75% complete</Typography>
                      
                      <Box sx={{ 
                        border: '1px solid', 
                        borderColor: 'divider', 
                        borderRadius: 1, 
                        p: 1.5, 
                        mb: 2,
                        bgcolor: 'background.paper'
                      }}>
                        <Typography sx={{ fontWeight: 'bold', fontSize: '0.75rem', mb: 0.5 }}>Resume Builder</Typography>
                        <Typography sx={{ fontSize: '0.675rem' }}>3 custom resumes</Typography>
                      </Box>
                      
                      <Box sx={{ 
                        border: '1px solid', 
                        borderColor: 'divider', 
                        borderRadius: 1, 
                        p: 1.5,
                        bgcolor: 'background.paper'
                      }}>
                        <Typography sx={{ fontWeight: 'bold', fontSize: '0.75rem', mb: 0.5 }}>Recent Activity</Typography>
                        <Typography sx={{ fontSize: '0.675rem' }}>• 5 profile views</Typography>
                        <Typography sx={{ fontSize: '0.675rem' }}>• 2 downloads</Typography>
                      </Box>
                    </Box>
                    
                    {/* Mobile footer */}
                    <Box sx={{ 
                      bgcolor: 'background.default', 
                      p: 1,
                      display: 'flex',
                      justifyContent: 'space-around',
                      borderTop: '1px solid',
                      borderColor: 'divider'
                    }}>
                      <Typography sx={{ fontWeight: 'bold', fontSize: '0.75rem', color: 'secondary.main' }}>Home</Typography>
                      <Typography sx={{ fontSize: '0.75rem', color: 'text.secondary' }}>Profile</Typography>
                      <Typography sx={{ fontSize: '0.75rem', color: 'text.secondary' }}>More</Typography>
                    </Box>
                  </Box>
                </Box>
              </Box>
            </Box>
          </Paper>
        </Container>
      </Box>
    </ThemeProvider>
  );
};

export {
    BackstoryUIOverviewPage
};