'use client';

import { Box, Typography, Grid, Card, CardContent } from '@mui/material';
import { TrendingUp, Insights as InsightsIcon, Timeline } from '@mui/icons-material';
import { AppShell } from '@/components/layouts/AppShell/AppShell';
import { ProtectedRoute } from '@/components/common/ProtectedRoute';

export default function InsightsPage() {
  return (
    <ProtectedRoute>
      <AppShell>
        <Box>
      <Typography variant="h4" fontWeight="600" gutterBottom>
        Insights & Analytics
      </Typography>
      <Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
        Track patterns and get insights about your child's activities
      </Typography>

      <Grid container spacing={3}>
        <Grid item xs={12} md={6}>
          <Card>
            <CardContent>
              <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
                <TrendingUp sx={{ mr: 1, color: 'primary.main' }} />
                <Typography variant="h6" fontWeight="600">
                  Sleep Patterns
                </Typography>
              </Box>
              <Typography variant="body2" color="text.secondary">
                Average sleep duration: Coming soon
              </Typography>
              <Typography variant="body2" color="text.secondary">
                Sleep quality: Coming soon
              </Typography>
            </CardContent>
          </Card>
        </Grid>

        <Grid item xs={12} md={6}>
          <Card>
            <CardContent>
              <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
                <InsightsIcon sx={{ mr: 1, color: 'success.main' }} />
                <Typography variant="h6" fontWeight="600">
                  Feeding Patterns
                </Typography>
              </Box>
              <Typography variant="body2" color="text.secondary">
                Average feeding frequency: Coming soon
              </Typography>
              <Typography variant="body2" color="text.secondary">
                Total daily intake: Coming soon
              </Typography>
            </CardContent>
          </Card>
        </Grid>

        <Grid item xs={12}>
          <Card>
            <CardContent>
              <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
                <Timeline sx={{ mr: 1, color: 'info.main' }} />
                <Typography variant="h6" fontWeight="600">
                  Activity Timeline
                </Typography>
              </Box>
              <Typography variant="body2" color="text.secondary">
                Detailed analytics and trends will be displayed here
              </Typography>
            </CardContent>
          </Card>
        </Grid>
      </Grid>
        </Box>
      </AppShell>
    </ProtectedRoute>
  );
}