maternal-app/maternal-web/app/(auth)/onboarding/page.tsx

'use client';

import { useState } from 'react';
import {
  Box,
  Stepper,
  Step,
  StepLabel,
  Button,
  Typography,
  Paper,
  TextField,
  Avatar,
  IconButton,
  Alert,
  CircularProgress,
  MenuItem,
} from '@mui/material';
import { ArrowBack, ArrowForward, Check } from '@mui/icons-material';
import { motion, AnimatePresence } from 'framer-motion';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/lib/auth/AuthContext';
import { childrenApi } from '@/lib/api/children';

const steps = ['Welcome', 'Add Child', 'Invite Family', 'Notifications'];

export default function OnboardingPage() {
  const [activeStep, setActiveStep] = useState(0);
  const [childName, setChildName] = useState('');
  const [childBirthDate, setChildBirthDate] = useState('');
  const [childGender, setChildGender] = useState<'male' | 'female' | 'other'>('other');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const router = useRouter();
  const { user } = useAuth();

  const handleNext = async () => {
    // Validate and save child data on step 1 (Add Child)
    if (activeStep === 1) {
      if (!childName.trim() || !childBirthDate) {
        setError('Please enter child name and birth date');
        return;
      }

      const familyId = user?.families?.[0]?.familyId;
      if (!familyId) {
        setError('No family found. Please try logging out and back in.');
        return;
      }

      try {
        setLoading(true);
        setError('');
        await childrenApi.createChild(familyId, {
          name: childName.trim(),
          birthDate: childBirthDate,
          gender: childGender,
        });
        setActiveStep((prevActiveStep) => prevActiveStep + 1);
      } catch (err: any) {
        console.error('Failed to create child:', err);
        setError(err.response?.data?.message || 'Failed to save child. Please try again.');
      } finally {
        setLoading(false);
      }
      return;
    }

    if (activeStep === steps.length - 1) {
      // Complete onboarding
      router.push('/');
    } else {
      setActiveStep((prevActiveStep) => prevActiveStep + 1);
    }
  };

  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };

  const handleSkip = () => {
    router.push('/');
  };

  return (
    <Box
      sx={{
        minHeight: '100vh',
        display: 'flex',
        flexDirection: 'column',
        px: 3,
        py: 4,
        background: 'linear-gradient(135deg, #FFE4E1 0%, #FFDAB9 100%)',
      }}
    >
      <Paper
        elevation={0}
        sx={{
          maxWidth: 600,
          mx: 'auto',
          width: '100%',
          p: 4,
          borderRadius: 4,
          background: 'rgba(255, 255, 255, 0.95)',
          backdropFilter: 'blur(10px)',
        }}
      >
        <Stepper activeStep={activeStep} sx={{ mb: 4 }}>
          {steps.map((label) => (
            <Step key={label}>
              <StepLabel>{label}</StepLabel>
            </Step>
          ))}
        </Stepper>

        <AnimatePresence mode="wait">
          <motion.div
            key={activeStep}
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -20 }}
            transition={{ duration: 0.3 }}
          >
            {activeStep === 0 && (
              <Box sx={{ textAlign: 'center', py: 4 }}>
                <Typography variant="h4" gutterBottom fontWeight="600" color="primary.main">
                  Welcome to Maternal! 🎉
                </Typography>
                <Typography variant="body1" color="text.secondary" sx={{ mt: 2, mb: 4 }}>
                  We&apos;re excited to help you track and understand your child&apos;s development, sleep patterns, feeding schedules, and more.
                </Typography>
                <Box sx={{ display: 'flex', gap: 2, justifyContent: 'center', flexWrap: 'wrap' }}>
                  <Paper sx={{ p: 2, flex: 1, minWidth: 150 }}>
                    <Typography variant="h6" fontWeight="600">📊</Typography>
                    <Typography variant="body2">Track Activities</Typography>
                  </Paper>
                  <Paper sx={{ p: 2, flex: 1, minWidth: 150 }}>
                    <Typography variant="h6" fontWeight="600">🤖</Typography>
                    <Typography variant="body2">AI Insights</Typography>
                  </Paper>
                  <Paper sx={{ p: 2, flex: 1, minWidth: 150 }}>
                    <Typography variant="h6" fontWeight="600">👨‍👩‍👧</Typography>
                    <Typography variant="body2">Family Sharing</Typography>
                  </Paper>
                </Box>
              </Box>
            )}

            {activeStep === 1 && (
              <Box sx={{ py: 4 }}>
                <Typography variant="h5" gutterBottom fontWeight="600">
                  Add Your First Child
                </Typography>
                <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
                  Let&apos;s start by adding some basic information about your child.
                </Typography>

                {error && (
                  <Alert severity="error" sx={{ mb: 2, borderRadius: 2 }}>
                    {error}
                  </Alert>
                )}

                <TextField
                  fullWidth
                  label="Child&apos;s Name"
                  value={childName}
                  onChange={(e) => setChildName(e.target.value)}
                  margin="normal"
                  required
                  disabled={loading}
                  InputProps={{
                    sx: { borderRadius: 3 },
                  }}
                />

                <TextField
                  fullWidth
                  label="Birth Date"
                  type="date"
                  value={childBirthDate}
                  onChange={(e) => setChildBirthDate(e.target.value)}
                  margin="normal"
                  required
                  disabled={loading}
                  InputLabelProps={{
                    shrink: true,
                  }}
                  InputProps={{
                    sx: { borderRadius: 3 },
                  }}
                />

                <TextField
                  fullWidth
                  select
                  label="Gender"
                  value={childGender}
                  onChange={(e) => setChildGender(e.target.value as 'male' | 'female' | 'other')}
                  margin="normal"
                  disabled={loading}
                  InputProps={{
                    sx: { borderRadius: 3 },
                  }}
                >
                  <MenuItem value="male">Male</MenuItem>
                  <MenuItem value="female">Female</MenuItem>
                  <MenuItem value="other">Prefer not to say</MenuItem>
                </TextField>

                <Alert severity="info" sx={{ mt: 3, borderRadius: 2 }}>
                  You can add more children and details later from settings.
                </Alert>
              </Box>
            )}

            {activeStep === 2 && (
              <Box sx={{ py: 4 }}>
                <Typography variant="h5" gutterBottom fontWeight="600">
                  Invite Family Members
                </Typography>
                <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
                  Share your child&apos;s progress with family members. They can view activities and add their own entries.
                </Typography>

                <TextField
                  fullWidth
                  label="Email Address"
                  type="email"
                  margin="normal"
                  placeholder="partner@example.com"
                  InputProps={{
                    sx: { borderRadius: 3 },
                  }}
                />

                <Button
                  variant="outlined"
                  fullWidth
                  sx={{ mt: 2 }}
                >
                  Send Invitation
                </Button>

                <Alert severity="info" sx={{ mt: 3, borderRadius: 2 }}>
                  You can skip this step and invite family members later.
                </Alert>
              </Box>
            )}

            {activeStep === 3 && (
              <Box sx={{ textAlign: 'center', py: 4 }}>
                <Avatar
                  sx={{
                    width: 80,
                    height: 80,
                    bgcolor: 'primary.main',
                    mx: 'auto',
                    mb: 3,
                  }}
                >
                  <Check sx={{ fontSize: 48 }} />
                </Avatar>
                <Typography variant="h5" gutterBottom fontWeight="600">
                  You&apos;re All Set! 🎉
                </Typography>
                <Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
                  Start tracking your child&apos;s activities and get personalized insights.
                </Typography>

                <Paper sx={{ p: 3, bgcolor: 'primary.light', mb: 3 }}>
                  <Typography variant="body2" fontWeight="600" gutterBottom>
                    Next Steps:
                  </Typography>
                  <Typography variant="body2" align="left" component="div">
                    • Track your first feeding, sleep, or diaper change<br />
                    • Chat with our AI assistant for parenting tips<br />
                    • Explore insights and predictions based on your data
                  </Typography>
                </Paper>
              </Box>
            )}
          </motion.div>
        </AnimatePresence>

        <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 4 }}>
          <Button
            onClick={handleBack}
            disabled={activeStep === 0}
            startIcon={<ArrowBack />}
          >
            Back
          </Button>

          <Box sx={{ flex: 1 }} />

          {activeStep < steps.length - 1 && activeStep > 0 && (
            <Button onClick={handleSkip} sx={{ mr: 2 }}>
              Skip
            </Button>
          )}

          <Button
            variant="contained"
            onClick={handleNext}
            disabled={loading}
            endIcon={loading ? <CircularProgress size={20} /> : (activeStep === steps.length - 1 ? <Check /> : <ArrowForward />)}
          >
            {activeStep === steps.length - 1 ? 'Get Started' : 'Next'}
          </Button>
        </Box>
      </Paper>
    </Box>
  );
}