import { useState, useEffect } from 'react';
import {
  AppBar, Box, Toolbar, IconButton, Typography, Badge,
  BottomNavigation, BottomNavigationAction, Paper, Avatar,
  List, ListItem, ListItemAvatar, ListItemText, Fab,
  TextField, Button, Dialog, DialogTitle, DialogContent,
  DialogActions, Chip, Card, CardContent, Rating, Grid,
  Container, ThemeProvider, createTheme, CssBaseline,
  Drawer, Divider, InputAdornment, Menu, MenuItem,
  useMediaQuery
} from '@mui/material';
import {
  Home, Chat, School, Translate, Search,
  Notifications, AccountCircle, Edit, Call,
  Favorite, ThumbUp, Comment, Share, MoreVert,
  PhotoCamera, Mic, AttachFile, EmojiEmotions,
  Language, LocationOn, Settings, Help
} from '@mui/icons-material';

// Create custom theme
const theme = createTheme({
  palette: {
    primary: {
      main: '#2196f3',
      light: '#64b5f6',
      dark: '#1976d2',
    },
    secondary: {
      main: '#ff4081',
      light: '#ff80ab',
      dark: '#f50057',
    },
    background: {
      default: '#f5f5f5',
      paper: '#ffffff',
    },
  },
  typography: {
    fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
    h6: {
      fontWeight: 600,
    },
    subtitle1: {
      fontWeight: 500,
    },
  },
  shape: {
    borderRadius: 12,
  },
  components: {
    MuiCard: {
      styleOverrides: {
        root: {
          boxShadow: '0 2px 12px rgba(0,0,0,0.08)',
          transition: 'transform 0.2s ease-in-out',
          '&:hover': {
            transform: 'translateY(-2px)',
          },
        },
      },
    },
    MuiButton: {
      styleOverrides: {
        root: {
          textTransform: 'none',
          borderRadius: 8,
        },
      },
    },
  },
});

export default function HelloTalkApp() {
  const [value, setValue] = useState(0);
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
  const [anchorEl, setAnchorEl] = useState(null);

  const moments = []; // Sample moments data
  const posts = []; // Sample posts data
  const partners = []; // Sample partners data

  const handleCorrection = (post) => {
    // Function to handle correction logic
  };

  const startVoiceCall = (partner) => {
    // Function to handle starting a voice call
  };

  const [openNewPost, setOpenNewPost] = useState(false);

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
        {/* Enhanced App Bar */}
        <AppBar position="fixed" elevation={0} sx={{ backgroundColor: 'white', borderBottom: '1px solid rgba(0,0,0,0.12)' }}>
          <Toolbar>
            <Typography variant="h6" component="div" sx={{ flexGrow: 1, color: theme.palette.primary.main }}>
              HelloTalk
            </Typography>
            <Box sx={{ display: 'flex', gap: 1 }}>
              <IconButton color="primary">
                <Badge badgeContent={4} color="error">
                  <Notifications />
                </Badge>
              </IconButton>
              <IconButton color="primary" onClick={(e) => setAnchorEl(e.currentTarget)}>
                <AccountCircle />
              </IconButton>
            </Box>
          </Toolbar>
        </AppBar>

        {/* Profile Menu */}
        <Menu
          anchorEl={anchorEl}
          open={Boolean(anchorEl)}
          onClose={() => setAnchorEl(null)}
          PaperProps={{
            elevation: 0,
            sx: {
              filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.12))',
              mt: 1.5,
            },
          }}
        >
          <MenuItem>
            <AccountCircle sx={{ mr: 2 }} /> Profile
          </MenuItem>
          <MenuItem>
            <Language sx={{ mr: 2 }} /> Language Settings
          </MenuItem>
          <MenuItem>
            <Settings sx={{ mr: 2 }} /> Settings
          </MenuItem>
          <Divider />
          <MenuItem>
            <Help sx={{ mr: 2 }} /> Help & Support
          </MenuItem>
        </Menu>

        {/* Main Content Area */}
        <Container maxWidth="md" sx={{ mt: 8, mb: 8, flex: 1 }}>
          {value === 0 && (
            <Box sx={{ py: 2 }}>
              {/* Story/Moments Section */}
              <Box sx={{ mb: 4, overflow: 'auto' }}>
                <Typography variant="h6" sx={{ mb: 2 }}>Moments</Typography>
                <Box sx={{ display: 'flex', gap: 2, pb: 1 }}>
                  {moments.map((moment) => (
                    <Card key={moment.id} sx={{ minWidth: 200, borderRadius: '16px' }}>
                      <Box
                        sx={{
                          height: 250,
                          backgroundImage: `url(${moment.image})`,
                          backgroundSize: 'cover',
                          position: 'relative',
                        }}
                      >
                        <Box
                          sx={{
                            position: 'absolute',
                            bottom: 0,
                            left: 0,
                            right: 0,
                            p: 2,
                            background: 'linear-gradient(transparent, rgba(0,0,0,0.7))',
                            color: 'white',
                          }}
                        >
                          <Typography variant="subtitle1">{moment.user.name}</Typography>
                          <Typography variant="caption">
                            {moment.caption}
                          </Typography>
                        </Box>
                      </Box>
                    </Card>
                  ))}
                </Box>
              </Box>

              {/* Enhanced Posts */}
              {posts.map((post) => (
                <Card key={post.id} sx={{ mb: 3, overflow: 'visible' }}>
                  <CardContent>
                    <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
                      <Avatar
                        src={post.user.avatar}
                        sx={{ width: 48, height: 48, border: `2px solid ${theme.palette.primary.main}` }}
                      />
                      <Box sx={{ ml: 2 }}>
                        <Typography variant="subtitle1">{post.user.name}</Typography>
                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                          <Chip
                            label={`${post.user.nativeLanguage} → ${post.user.learningLanguage}`}
                            size="small"
                            color="primary"
                            variant="outlined"
                          />
                          <Chip
                            label={post.user.level}
                            size="small"
                            color="secondary"
                            variant="outlined"
                          />
                        </Box>
                      </Box>
                    </Box>

                    <Typography variant="body1" sx={{ mb: 3, lineHeight: 1.6 }}>
                      {post.content}
                    </Typography>

                    {/* Corrections Section */}
                    {post.corrections && (
                      <Paper
                        elevation={0}
                        sx={{
                          p: 2,
                          mb: 2,
                          bgcolor: 'rgba(33, 150, 243, 0.08)',
                          borderRadius: 2,
                          border: '1px solid rgba(33, 150, 243, 0.2)',
                        }}
                      >
                        <Typography variant="subtitle2" color="primary" sx={{ mb: 1 }}>
                          Language Corrections
                        </Typography>
                        {post.corrections.map((correction, index) => (
                          <Box key={index} sx={{ mt: 1 }}>
                            <Typography variant="body2" color="error">
                              {correction.original} → <span style={{ color: 'green' }}>{correction.corrected}</span>
                            </Typography>
                            <Typography variant="caption" color="text.secondary">
                              {correction.explanation}
                            </Typography>
                          </Box>
                        ))}
                      </Paper>
                    )}

                    {/* Action Buttons */}
                    <Box
                      sx={{
                        display: 'flex',
                        justifyContent: 'space-between',
                        borderTop: '1px solid rgba(0,0,0,0.08)',
                        pt: 2,
                        mt: 2,
                      }}
                    >
                      <Button startIcon={<ThumbUp />} color="primary">
                        {post.likes}
                      </Button>
                      <Button startIcon={<Comment />} onClick={() => handleCorrection(post)}>
                        Correct
                      </Button>
                      <Button startIcon={<Share />}>
                        Share
                      </Button>
                    </Box>
                  </CardContent>
                </Card>
              ))}
            </Box>
          )}

          {value === 1 && (
            // Enhanced Chat Section
            <Box sx={{ py: 2 }}>
              <TextField
                fullWidth
                placeholder="Search conversations..."
                variant="outlined"
                sx={{ mb: 3 }}
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <Search />
                    </InputAdornment>
                  ),
                }}
              />
              
              <List sx={{ bgcolor: 'background.paper', borderRadius: 2 }}>
                {partners.map((partner) => (
                  <ListItem
                    key={partner.id}
                    button
                    sx={{
                      '&:hover': {
                        bgcolor: 'rgba(33, 150, 243, 0.08)',
                      },
                      borderRadius: 2,
                      mb: 1,
                    }}
                    secondaryAction={
                      <IconButton edge="end" onClick={() => startVoiceCall(partner)}>
                        <Call />
                      </IconButton>
                    }
                  >
                    <ListItemAvatar>
                      <Badge
                        overlap="circular"
                        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
                        variant="dot"
                        color={partner.online ? "success" : "default"}
                      >
                        <Avatar
                          src={partner.avatar}
                          sx={{ width: 50, height: 50 }}
                        />
                      </Badge>
                    </ListItemAvatar>
                    <ListItemText
                      primary={
                        <Typography variant="subtitle1">
                          {partner.name}
                        </Typography>
                      }
                      secondary={
                        <Box>
                          <Typography variant="body2" color="text.secondary">
                            {partner.nativeLanguage} → {partner.learningLanguage}
                          </Typography>
                          <Typography variant="caption" color="text.secondary">
                            <LocationOn sx={{ fontSize: 14, mr: 0.5 }} />
                            {partner.location}
                          </Typography>
                        </Box>
                      }
                    />
                  </ListItem>
                ))}
              </List>
            </Box>
          )}

          {value === 2 && (
            // Enhanced Learning Section
            <Box sx={{ py: 2 }}>
              <Typography variant="h6" sx={{ mb: 3 }}>
                Learning Tools
              </Typography>
              <Grid container spacing={3}>
                <Grid item xs={12} sm={6}>
                  <Card sx={{ height: '100%' }}>
                    <CardContent>
                      <Typography variant="h6" color="primary" gutterBottom>
                        Vocabulary Review
                      </Typography>
                      <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
                        Master new words and phrases through interactive exercises
                      </Typography>
                      <Button variant="contained" color="primary">
                        Start Practice
                      </Button>
                    </CardContent>
                  </Card>
                </Grid>
                <Grid item xs={12} sm={6}>
                  <Card sx={{ height: '100%' }}>
                    <CardContent>
                      <Typography variant="h6" color="primary" gutterBottom>
                        Grammar Exercises
                      </Typography>
                      <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
                        Improve your language structure through interactive lessons
                      </Typography>
                      <Button variant="contained" color="primary">
                        Start Learning
                      </Button>
                    </CardContent>
                  </Card>
                </Grid>
                {/* Add more learning tools */}
              </Grid>
            </Box>
          )}
        </Container>

        {/* Enhanced Floating Action Button */}
        <Fab
          color="primary"
          sx={{
            position: 'fixed',
            bottom: 80,
            right: 16,
            boxShadow: '0 4px 12px rgba(33, 150, 243, 0.4)',
          }}
          onClick={() => setOpenNewPost(true)}
        >
          <Edit />
        </Fab>

        {/* Enhanced Bottom Navigation */}
        <Paper
          sx={{
            position: 'fixed',
            bottom: 0,
            left: 0,
            right: 0,
            borderTop: '1px solid rgba(0,0,0,0.12)',
          }}
          elevation={0}
        >
          <BottomNavigation
            value={value}
            onChange={(event, newValue) => {
              setValue(newValue);
            }}
            sx={{
              height: 65,
              '& .MuiBottomNavigationAction-root': {
                color: 'text.secondary',
                '&.Mui-selected': {
                  color: 'primary.main',
                },
              },
            }}
          >
            <BottomNavigationAction label="Home" icon={<Home />} />
            <BottomNavigationAction label="Chat" icon={<Chat />} />
            <BottomNavigationAction label="Learn" icon={<School />} />
          </BottomNavigation>
        </Paper>

        <Dialog open={openNewPost} onClose={() => setOpenNewPost(false)}>
          <DialogTitle>New Post</DialogTitle>
          <DialogContent>
            <TextField
              autoFocus
              margin="dense"
              label="Write your post here"
              type="text"
              fullWidth
              variant="outlined"
              multiline
              minRows={3}
            />
          </DialogContent>
          <DialogActions>
            <Button onClick={() => setOpenNewPost(false)} color="primary">
              Cancel
            </Button>
            <Button onClick={() => setOpenNewPost(false)} color="primary">
              Post
            </Button>
          </DialogActions>
        </Dialog>
      </Box>
    </ThemeProvider>
  );
}