maternal-app/maternal-web/app/page.tsx

'use client';

import { useState, useEffect, useCallback } from 'react';
import { Box, Typography, Button, Paper, CircularProgress, Grid } from '@mui/material';
import { AppShell } from '@/components/layouts/AppShell/AppShell';
import { ProtectedRoute } from '@/components/common/ProtectedRoute';
import { EmailVerificationBanner } from '@/components/common/EmailVerificationBanner';
import { ErrorBoundary } from '@/components/common/ErrorBoundary';
import { DataErrorFallback } from '@/components/common/ErrorFallbacks';
import { NetworkStatusIndicator } from '@/components/common/NetworkStatusIndicator';
import { StatGridSkeleton } from '@/components/common/LoadingSkeletons';
import {
  Restaurant,
  Hotel,
  BabyChangingStation,
  Insights,
  SmartToy,
  Analytics,
  MedicalServices,
} from '@mui/icons-material';
import { motion } from 'framer-motion';
import { useAuth } from '@/lib/auth/AuthContext';
import { useRouter } from 'next/navigation';
import { trackingApi, DailySummary } from '@/lib/api/tracking';
import { childrenApi, Child } from '@/lib/api/children';
import { format } from 'date-fns';
import { useRealTimeActivities } from '@/hooks/useWebSocket';

export default function HomePage() {
  const { user, isLoading: authLoading } = useAuth();
  const router = useRouter();
  const [children, setChildren] = useState<Child[]>([]);
  const [selectedChild, setSelectedChild] = useState<Child | null>(null);
  const [dailySummary, setDailySummary] = useState<DailySummary | null>(null);
  const [loading, setLoading] = useState(true);

  const familyId = user?.families?.[0]?.familyId;

  // Real-time activity handler to refresh daily summary
  const refreshDailySummary = useCallback(async () => {
    if (!selectedChild) return;

    try {
      const today = format(new Date(), 'yyyy-MM-dd');
      const summary = await trackingApi.getDailySummary(selectedChild.id, today);
      console.log('[HomePage] Refreshed daily summary:', summary);
      setDailySummary(summary);
    } catch (error) {
      console.error('[HomePage] Failed to refresh summary:', error);
    }
  }, [selectedChild]);

  // Subscribe to real-time activity updates
  useRealTimeActivities(
    refreshDailySummary, // On activity created
    refreshDailySummary, // On activity updated
    refreshDailySummary  // On activity deleted
  );

  // Load children and daily summary
  useEffect(() => {
    const loadData = async () => {
      // Wait for auth to complete before trying to load data
      if (authLoading) {
        return;
      }

      if (!familyId) {
        console.log('[HomePage] No familyId found');
        console.log('[HomePage] User object:', JSON.stringify(user, null, 2));
        console.log('[HomePage] User.families:', user?.families);
        setLoading(false);
        return;
      }

      console.log('[HomePage] Loading data for familyId:', familyId);

      try {
        // Load children
        const childrenData = await childrenApi.getChildren(familyId);
        console.log('[HomePage] Children loaded:', childrenData.length);
        setChildren(childrenData);

        if (childrenData.length > 0) {
          const firstChild = childrenData[0];
          setSelectedChild(firstChild);

          // Load today's summary for first child
          const today = format(new Date(), 'yyyy-MM-dd');
          console.log('[HomePage] Fetching daily summary for child:', firstChild.id, 'date:', today);
          const summary = await trackingApi.getDailySummary(firstChild.id, today);
          console.log('[HomePage] Daily summary response:', summary);
          setDailySummary(summary);
        }
      } catch (error) {
        console.error('[HomePage] Failed to load data:', error);
      } finally {
        setLoading(false);
      }
    };

    loadData();
  }, [familyId, authLoading, user]);

  const quickActions = [
    { icon: <Restaurant />, label: 'Feeding', color: '#E91E63', path: '/track/feeding' }, // Pink with 4.5:1 contrast
    { icon: <Hotel />, label: 'Sleep', color: '#1976D2', path: '/track/sleep' }, // Blue with 4.5:1 contrast
    { icon: <BabyChangingStation />, label: 'Diaper', color: '#F57C00', path: '/track/diaper' }, // Orange with 4.5:1 contrast
    { icon: <MedicalServices />, label: 'Medicine', color: '#C62828', path: '/track/medication' }, // Red with 4.5:1 contrast
    { icon: <Insights />, label: 'Activities', color: '#558B2F', path: '/activities' }, // Green with 4.5:1 contrast
    { icon: <SmartToy />, label: 'AI Assistant', color: '#D84315', path: '/ai-assistant' }, // Deep orange with 4.5:1 contrast
  ];

  const formatSleepHours = (minutes: number) => {
    const hours = Math.floor(minutes / 60);
    const mins = minutes % 60;
    if (hours > 0 && mins > 0) {
      return `${hours}h ${mins}m`;
    } else if (hours > 0) {
      return `${hours}h`;
    } else {
      return `${mins}m`;
    }
  };

  return (
    <ProtectedRoute>
      <AppShell>
        <NetworkStatusIndicator />
        <Box>
          <EmailVerificationBanner />

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

          {/* Quick Actions */}
          <Typography variant="h6" component="h2" gutterBottom fontWeight="600" sx={{ mb: 2 }}>
            Quick Actions
          </Typography>
          <Grid container spacing={2} sx={{ mb: 4 }}>
            {quickActions.map((action, index) => (
              <Grid size={{ xs: 6, sm: 4, md: 2 }} key={action.label}>
                <motion.div
                  initial={{ opacity: 0, scale: 0.9 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.3, delay: index * 0.1 }}
                  style={{ height: '100%' }}
                >
                  <Paper
                    component="button"
                    onClick={() => router.push(action.path)}
                    onKeyDown={(e) => {
                      if (e.key === 'Enter' || e.key === ' ') {
                        e.preventDefault();
                        router.push(action.path);
                      }
                    }}
                    aria-label={`Navigate to ${action.label}`}
                    sx={{
                      p: 3,
                      height: '100%',
                      display: 'flex',
                      flexDirection: 'column',
                      alignItems: 'center',
                      justifyContent: 'center',
                      textAlign: 'center',
                      cursor: 'pointer',
                      bgcolor: action.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">{action.icon}</Box>
                    <Typography variant="body1" fontWeight="600">
                      {action.label}
                    </Typography>
                  </Paper>
                </motion.div>
              </Grid>
            ))}
          </Grid>

          {/* Today's Summary */}
          <Typography variant="h6" component="h2" gutterBottom fontWeight="600" sx={{ mb: 2 }}>
            Today's Summary{selectedChild ? ` - ${selectedChild.name}` : ''}
          </Typography>
          <ErrorBoundary
            isolate
            fallback={<DataErrorFallback error={new Error('Failed to load summary')} />}
          >
            {loading ? (
              <StatGridSkeleton count={3} />
            ) : (
              <Paper sx={{ p: 3 }}>
                {!dailySummary ? (
                <Box sx={{ textAlign: 'center', py: 4 }}>
                  <Typography variant="body2" sx={{ color: 'rgba(0, 0, 0, 0.7)' }}>
                    {children.length === 0
                      ? 'Add a child to start tracking'
                      : 'No activities tracked today'}
                  </Typography>
                </Box>
              ) : (
                <Grid container spacing={3}>
                  <Grid size={{ xs: 6, sm: 3 }}>
                    <Box
                      textAlign="center"
                      sx={{
                        display: 'flex',
                        flexDirection: 'column',
                        alignItems: 'center',
                        height: '100%',
                        minHeight: '120px'
                      }}
                    >
                      <Restaurant sx={{ fontSize: 32, color: 'primary.main', mb: 1 }} aria-hidden="true" />
                      <Typography variant="h3" component="div" fontWeight="600" aria-label={`${dailySummary.feedingCount || 0} feedings today`}>
                        {dailySummary.feedingCount || 0}
                      </Typography>
                      <Typography variant="body2" sx={{ color: 'rgba(0, 0, 0, 0.7)' }}>
                        Feedings
                      </Typography>
                    </Box>
                  </Grid>
                  <Grid size={{ xs: 6, sm: 3 }}>
                    <Box
                      textAlign="center"
                      sx={{
                        display: 'flex',
                        flexDirection: 'column',
                        alignItems: 'center',
                        height: '100%',
                        minHeight: '120px'
                      }}
                    >
                      <Hotel sx={{ fontSize: 32, color: 'info.main', mb: 1 }} aria-hidden="true" />
                      <Typography variant="h3" component="div" fontWeight="600" aria-label={`${dailySummary.sleepTotalMinutes ? formatSleepHours(dailySummary.sleepTotalMinutes) : '0 minutes'} sleep today`}>
                        {dailySummary.sleepTotalMinutes
                          ? formatSleepHours(dailySummary.sleepTotalMinutes)
                          : '0m'}
                      </Typography>
                      <Typography variant="body2" sx={{ color: 'rgba(0, 0, 0, 0.7)' }}>
                        Sleep
                      </Typography>
                    </Box>
                  </Grid>
                  <Grid size={{ xs: 6, sm: 3 }}>
                    <Box
                      textAlign="center"
                      sx={{
                        display: 'flex',
                        flexDirection: 'column',
                        alignItems: 'center',
                        height: '100%',
                        minHeight: '120px'
                      }}
                    >
                      <BabyChangingStation sx={{ fontSize: 32, color: 'warning.main', mb: 1 }} aria-hidden="true" />
                      <Typography variant="h3" component="div" fontWeight="600" aria-label={`${dailySummary.diaperCount || 0} diaper changes today`}>
                        {dailySummary.diaperCount || 0}
                      </Typography>
                      <Typography variant="body2" sx={{ color: 'rgba(0, 0, 0, 0.7)' }}>
                        Diapers
                      </Typography>
                    </Box>
                  </Grid>
                  <Grid size={{ xs: 6, sm: 3 }}>
                    <Box
                      textAlign="center"
                      sx={{
                        display: 'flex',
                        flexDirection: 'column',
                        alignItems: 'center',
                        height: '100%',
                        minHeight: '120px'
                      }}
                    >
                      <MedicalServices sx={{ fontSize: 32, color: 'error.main', mb: 1 }} aria-hidden="true" />
                      <Typography variant="h3" component="div" fontWeight="600" aria-label={`${dailySummary.medicationCount || 0} medications today`}>
                        {dailySummary.medicationCount || 0}
                      </Typography>
                      <Typography variant="body2" sx={{ color: 'rgba(0, 0, 0, 0.7)' }}>
                        Medications
                      </Typography>
                    </Box>
                  </Grid>
                </Grid>
                )}
              </Paper>
            )}
          </ErrorBoundary>

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