'use client';

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

export default function TrackPage() {
  const { t } = useTranslation('tracking');
  const router = useRouter();

  const trackingOptions = [
    {
      title: t('activities.feeding'),
      icon: <Restaurant sx={{ fontSize: 48, color: 'primary.main' }} />,
      path: '/track/feeding',
      color: '#FFE4E1',
    },
    {
      title: t('activities.sleep'),
      icon: <Hotel sx={{ fontSize: 48, color: 'info.main' }} />,
      path: '/track/sleep',
      color: '#E1F5FF',
    },
    {
      title: t('activities.diaper'),
      icon: <BabyChangingStation sx={{ fontSize: 48, color: 'warning.main' }} />,
      path: '/track/diaper',
      color: '#FFF4E1',
    },
    {
      title: t('activities.medicine'),
      icon: <MedicalServices sx={{ fontSize: 48, color: 'error.main' }} />,
      path: '/track/medicine',
      color: '#FFE8E8',
    },
    {
      title: t('activities.activity'),
      icon: <ChildCare sx={{ fontSize: 48, color: 'success.main' }} />,
      path: '/track/activity',
      color: '#E8F5E9',
    },
  ];

  return (
    <ProtectedRoute>
      <AppShell>
        <Box>
          <Typography variant="h4" fontWeight="600" gutterBottom>
            {t('trackActivity')}
          </Typography>
          <Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
            {t('selectActivity')}
          </Typography>

          <Grid container spacing={3} sx={{ justifyContent: 'flex-start' }}>
            {trackingOptions.map((option) => (
              <Grid item xs={6} sm={4} md={2.4} key={option.title}>
                <Card
                  sx={{
                    height: '180px', // Fixed height for consistency
                    minHeight: '180px',
                    width: '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',
                    }}
                  >
                    <CardContent sx={{ 
                      textAlign: 'center', 
                      display: 'flex', 
                      flexDirection: 'column', 
                      alignItems: 'center', 
                      justifyContent: 'center',
                      width: '100%',
                      height: '100%',
                      p: 2, 
                      '&:last-child': { pb: 2 } 
                    }}>
                      {option.icon}
                      <Typography 
                        variant="h6" 
                        fontWeight="600" 
                        sx={{ 
                          mt: 2,
                          wordWrap: 'break-word',
                          wordBreak: 'break-word',
                          hyphens: 'auto',
                          textAlign: 'center',
                          width: '100%',
                        }}
                      >
                        {option.title}
                      </Typography>
                    </CardContent>
                  </CardActionArea>
                </Card>
              </Grid>
            ))}
          </Grid>
        </Box>
      </AppShell>
    </ProtectedRoute>
  );
}