'use client';

import { Box, Typography, Grid, Card, CardContent, CardActionArea } from '@mui/material';
import { Restaurant, Hotel, BabyChangingStation, ChildCare } from '@mui/icons-material';
import { useRouter } from 'next/navigation';
import { AppShell } from '@/components/layouts/AppShell/AppShell';
import { ProtectedRoute } from '@/components/common/ProtectedRoute';

export default function TrackPage() {
  const router = useRouter();

  const trackingOptions = [
    {
      title: 'Feeding',
      icon: <Restaurant sx={{ fontSize: 48, color: 'primary.main' }} />,
      path: '/track/feeding',
      color: '#FFE4E1',
    },
    {
      title: 'Sleep',
      icon: <Hotel sx={{ fontSize: 48, color: 'info.main' }} />,
      path: '/track/sleep',
      color: '#E1F5FF',
    },
    {
      title: 'Diaper',
      icon: <BabyChangingStation sx={{ fontSize: 48, color: 'warning.main' }} />,
      path: '/track/diaper',
      color: '#FFF4E1',
    },
    {
      title: 'Activity',
      icon: <ChildCare sx={{ fontSize: 48, color: 'success.main' }} />,
      path: '/track/activity',
      color: '#E8F5E9',
    },
  ];

  return (
    <ProtectedRoute>
      <AppShell>
        <Box>
          <Typography variant="h4" fontWeight="600" gutterBottom>
            Track Activity
          </Typography>
          <Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
            Select an activity to track
          </Typography>

          <Grid container spacing={3}>
            {trackingOptions.map((option) => (
              <Grid item xs={12} sm={6} md={3} key={option.title}>
                <Card
                  sx={{
                    height: '100%',
                    bgcolor: option.color,
                    '&:hover': {
                      transform: 'translateY(-4px)',
                      transition: 'transform 0.2s',
                    },
                  }}
                >
                  <CardActionArea
                    onClick={() => router.push(option.path)}
                    sx={{
                      height: '100%',
                      display: 'flex',
                      flexDirection: 'column',
                      alignItems: 'center',
                      justifyContent: 'center',
                      py: 4,
                    }}
                  >
                    <CardContent sx={{ textAlign: 'center' }}>
                      {option.icon}
                      <Typography variant="h6" fontWeight="600" sx={{ mt: 2 }}>
                        {option.title}
                      </Typography>
                    </CardContent>
                  </CardActionArea>
                </Card>
              </Grid>
            ))}
          </Grid>
        </Box>
      </AppShell>
    </ProtectedRoute>
  );
}