'use client';

import { Box, Typography, Grid, Paper } 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';
import { motion } from 'framer-motion';

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

  const trackingOptions = [
    {
      title: t('activities.feeding'),
      icon: Restaurant,
      path: '/track/feeding',
      color: '#E91E63', // Pink with 4.5:1 contrast
    },
    {
      title: t('activities.sleep'),
      icon: Hotel,
      path: '/track/sleep',
      color: '#1976D2', // Blue with 4.5:1 contrast
    },
    {
      title: t('activities.diaper'),
      icon: BabyChangingStation,
      path: '/track/diaper',
      color: '#F57C00', // Orange with 4.5:1 contrast
    },
    {
      title: t('activities.medicine'),
      icon: MedicalServices,
      path: '/track/medicine',
      color: '#C62828', // Red with 4.5:1 contrast
    },
    {
      title: t('activities.activity'),
      icon: ChildCare,
      path: '/track/activity',
      color: '#558B2F', // Green with 4.5:1 contrast
    },
  ];

  return (
    <ProtectedRoute>
      <AppShell>
        <Box sx={{ px: { xs: 2, sm: 3 }, py: 3 }}>
          <Typography variant="h4" sx={{ mb: 1, fontWeight: 600 }}>
            {t('trackActivity')}
          </Typography>
          <Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}>
            {t('selectActivity')}
          </Typography>

          <Grid container spacing={2} justifyContent="center">
            {trackingOptions.map((activity, index) => {
              const IconComponent = activity.icon;
              return (
                <Grid item xs={6} sm={4} lg={2.4} key={activity.title} sx={{ minWidth: 200 }}>
                  <motion.div
                    initial={{ opacity: 0, scale: 0.9 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ duration: 0.3, delay: index * 0.1 }}
                  >
                    <Paper
                      component="button"
                      onClick={() => router.push(activity.path)}
                      onKeyDown={(e) => {
                        if (e.key === 'Enter' || e.key === ' ') {
                          e.preventDefault();
                          router.push(activity.path);
                        }
                      }}
                      aria-label={`Track ${activity.title}`}
                      sx={{
                        p: 3,
                        height: '140px',
                        minHeight: '140px',
                        width: '100%',
                        display: 'flex',
                        flexDirection: 'column',
                        alignItems: 'center',
                        justifyContent: 'center',
                        textAlign: 'center',
                        cursor: 'pointer',
                        bgcolor: activity.color,
                        color: 'white',
                        border: 'none',
                        transition: 'transform 0.2s',
                        '&:hover': {
                          transform: 'scale(1.05)',
                        },
                        '&:focus-visible': {
                          outline: '3px solid white',
                          outlineOffset: '-3px',
                          transform: 'scale(1.05)',
                        },
                      }}
                    >
                      <Box sx={{ fontSize: 48, mb: 1 }} aria-hidden="true">
                        <IconComponent sx={{ fontSize: 48 }} />
                      </Box>
                      <Typography variant="body1" fontWeight="600">
                        {activity.title}
                      </Typography>
                    </Paper>
                  </motion.div>
                </Grid>
              );
            })}
          </Grid>
        </Box>
      </AppShell>
    </ProtectedRoute>
  );
}