'use client';

import { Box, Typography, Button, Paper, Grid } from '@mui/material';
import { AppShell } from '@/components/layouts/AppShell/AppShell';
import { ProtectedRoute } from '@/components/common/ProtectedRoute';
import {
  Restaurant,
  Hotel,
  BabyChangingStation,
  Insights,
} from '@mui/icons-material';
import { motion } from 'framer-motion';
import { useAuth } from '@/lib/auth/AuthContext';
import { useRouter } from 'next/navigation';

export default function HomePage() {
  const { user } = useAuth();
  const router = useRouter();
  const quickActions = [
    { icon: <Restaurant />, label: 'Feeding', color: '#FFB6C1', path: '/track/feeding' },
    { icon: <Hotel />, label: 'Sleep', color: '#B6D7FF', path: '/track/sleep' },
    { icon: <BabyChangingStation />, label: 'Diaper', color: '#FFE4B5', path: '/track/diaper' },
    { icon: <Insights />, label: 'Insights', color: '#E6E6FA', path: '/insights' },
  ];

  return (
    <ProtectedRoute>
      <AppShell>
        <Box>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
          >
            <Typography variant="h4" gutterBottom fontWeight="600" sx={{ mb: 1 }}>
              Welcome Back{user?.name ? `, ${user.name}` : ''}! 👋
            </Typography>
          <Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
            Track your child's activities and get AI-powered insights
          </Typography>

          {/* Quick Actions */}
          <Typography variant="h6" gutterBottom fontWeight="600" sx={{ mb: 2 }}>
            Quick Actions
          </Typography>
          <Grid container spacing={2} sx={{ mb: 4 }}>
            {quickActions.map((action, index) => (
              <Grid item xs={6} sm={3} key={action.label}>
                <motion.div
                  initial={{ opacity: 0, scale: 0.9 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.3, delay: index * 0.1 }}
                >
                  <Paper
                    onClick={() => router.push(action.path)}
                    sx={{
                      p: 3,
                      textAlign: 'center',
                      cursor: 'pointer',
                      bgcolor: action.color,
                      color: 'white',
                      transition: 'transform 0.2s',
                      '&:hover': {
                        transform: 'scale(1.05)',
                      },
                    }}
                  >
                    <Box sx={{ fontSize: 48, mb: 1 }}>{action.icon}</Box>
                    <Typography variant="body1" fontWeight="600">
                      {action.label}
                    </Typography>
                  </Paper>
                </motion.div>
              </Grid>
            ))}
          </Grid>

          {/* Recent Activity */}
          <Typography variant="h6" gutterBottom fontWeight="600" sx={{ mb: 2 }}>
            Today's Summary
          </Typography>
          <Paper sx={{ p: 3 }}>
            <Grid container spacing={3}>
              <Grid item xs={4}>
                <Box textAlign="center">
                  <Restaurant sx={{ fontSize: 32, color: 'primary.main', mb: 1 }} />
                  <Typography variant="h5" fontWeight="600">8</Typography>
                  <Typography variant="body2" color="text.secondary">Feedings</Typography>
                </Box>
              </Grid>
              <Grid item xs={4}>
                <Box textAlign="center">
                  <Hotel sx={{ fontSize: 32, color: 'info.main', mb: 1 }} />
                  <Typography variant="h5" fontWeight="600">12h</Typography>
                  <Typography variant="body2" color="text.secondary">Sleep</Typography>
                </Box>
              </Grid>
              <Grid item xs={4}>
                <Box textAlign="center">
                  <BabyChangingStation sx={{ fontSize: 32, color: 'warning.main', mb: 1 }} />
                  <Typography variant="h5" fontWeight="600">6</Typography>
                  <Typography variant="body2" color="text.secondary">Diapers</Typography>
                </Box>
              </Grid>
            </Grid>
          </Paper>

          {/* Next Predicted Activity */}
          <Box sx={{ mt: 4 }}>
            <Paper sx={{ p: 3, bgcolor: 'primary.light' }}>
              <Typography variant="body2" color="text.secondary" gutterBottom>
                Next Predicted Activity
              </Typography>
              <Typography variant="h6" fontWeight="600" gutterBottom>
                Nap time in 45 minutes
              </Typography>
              <Typography variant="body2" color="text.secondary">
                Based on your child's sleep patterns
              </Typography>
            </Paper>
          </Box>
          </motion.div>
        </Box>
      </AppShell>
    </ProtectedRoute>
  );
}